lufylegend游戏引擎
lufylegend游戏引擎介绍：click
这个链接我觉得已经很详细的介绍了这个引擎。
所以以下我只说说一些简单的游戏代码过程。
首先从canvas做游戏叙述起：
这是一个让人很熟悉的简单小游戏，网上到处都是这个小游戏代码，所以就简单说说；
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单游戏</title>
<script type="text/javascript" src="game.js"></script>
</head>
<body>
<canvas id="canvas">你的浏览器太low了！</canvas>
<script type="text/javascript"> window.onload=function(){
game("canvas");
}
</script>
</body>
</html>
js代码：
function game(id){
/*创建画布*/
var oCanvas=document.getElementById(id);
var canvas=oCanvas.getContext("2d");
oCanvas.width="512";
oCanvas.height="480";
/*******准备图片***********/
/******************
为什么要确认图片是否被加载进来了，因为在图片还没加载进来就对其操作，
很容易会出现各种问题，如图片出不来
*******************/
/*背景图*/
var bgImg=new Image();
bgImg.src="./images/background.png";
bgImg.success=false;
bgImg.onload=function(){
bgImg.success=true;
}
/*玩家人物图*/
var hero=new Image();
hero.src="./images/hero.png";
hero.success=false;
hero.onload=function(){
hero.success=true;
}
/*怪物图*/
var monster=new Image();
monster.src="./images/monster.png";
monster.success=false;
monster.onload=function(){
monster.success=true;
}
/***********游戏对象*********/
/*人物位置*/
/*******************
为什么使用数组？因为这样好管理，优化代码
*********************/
hero.pos={
x:0,
y:0,
speed:256
}
/*怪物位置*/
monster.pos={
x:0,
y:0
}
var monsterCaught=0;
/*******处理用户的输入*******/
/***************
为什么按键弹起取消获取到键值了，这是为了下面判断时运动的
**************************/
var keysDown={};
var keyNum=null;
/*addEventListener,在没有写对象下，默认为window下的对象*/
addEventListener("keydown",function(e){
e= e || window.event;
keyNum=e.keyCode;
keysDown[e.keyCode]=true;
},false);
addEventListener("keyup",function(e){
keyNum=null;
delete keysDown[e.keyCode];
},false);
/*******初始化游戏******/
/**************
确认怪物和玩家的初始位置
*******************/
function gameInit(){
hero.pos.x=oCanvas.width/2;
hero.pos.y=oCanvas.height/2;
monster.pos.x=32+(Math.random()*oCanvas.width-64);
if(monster.pos.x<=0){
monster.pos.x=0;
}
monster.pos.y=32+(Math.random()*oCanvas.height-64);
if(monster.pos.y<=0){
monster.pos.y=0;
}
}
/*更新对象*/
function update(m){
if(keyNum==38){
/*每秒走的距离*时间间距=距离*/
hero.pos.y-=hero.pos.speed*m;
}else if(keyNum==40){
hero.pos.y+=hero.pos.speed*m;
}else if(keyNum==37){
hero.pos.x-=hero.pos.speed*m;
}else if(keyNum==39){
hero.pos.x+=hero.pos.speed*m;
}
/*monster.pos.x<=hero.pos.x<=monster.pos.x+32*/
/*y也同理*/
/*这是为了碰撞检测的,是碰撞就初始化游戏*/
if(hero.pos.x<=(monster.pos.x+32)&&monster.pos.x<=(hero.pos.x+32)&&hero.pos.y<=(monster.pos.y+32)&&monster.pos.y<=(hero.pos.y+32)){
monsterCaught++;
gameInit();
}
}
/*渲染物体*/
/*画出游戏界面*/
function render(){
if(bgImg.success){
canvas.drawImage(bgImg,0,0);
}
if(hero.success){
canvas.drawImage(hero,hero.pos.x,hero.pos.y);
}
if(monster.success){
canvas.drawImage(monster,monster.pos.x,monster.pos.y);
}
canvas.fillStyle="red";
canvas.font="30px Arial";
canvas.textAlign="left";
canvas.textBaseline="top";
canvas.fillText("得分："+monsterCaught,10,10);
}
/*主循环函数*/
/*使用来循环的整个游戏的，这样就可以时时刻刻监听整个界面的变化，做出相对应的改变*/
function main(){
var now=new Date().getTime();
/*获取触发时间的间距*/
/*为每秒运动的距离不变,这个就不受定时器时间误差影响到运动距离*/
var delta=now-then;
/*时间间距以秒为准delta/1000*/
update(delta/1000);
render();
requestAnimationFrame(main);
then=now;
}
/*启动游戏！*/
/*它就是一个性能很好的setTimeout,只是它的帧数是根据浏览器来的，一般来说每秒60帧*/
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
var then=new Date().getTime();
gameInit();
main();
}
这是个很简单的游戏，而它没有使用clearRect这个清除界面，而是直接使用背景
去覆盖掉上去，达到清除的效果，就像ps图层一样，上一层覆盖下一层。
OK，接下来是游戏引擎的。
让小人走动起来；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lufylegend-1.5.1.js"></script>
</head>
<body>
<div id="my"></div>
<script>
/*把屏幕分成4行，4列*/
// console.log(LGlobal.divideCoordinate(256,256,4,4));
init(100,"my",500,350,main);
var layer,aina,loader;
/*LEvent.COMPLETE图片加载完成后进入下一个函数*/
function main(){
loader=new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitData);
loader.load("chara.png","bitmapData");
}
function loadBitData(){
/*LBitmapData图片数据，可以操作图片*/
var bitmapdata=new LBitmapData(loader.content,0,0,64,64);
/*把宽高为固定的图像分成多少行，多少列*/
var list=LGlobal.divideCoordinate(256,256,4,4);
/*创建图层*/
layer=new LSprite();
/*添加图层到底层*/
addChild(layer);
/*运动*/
aina=new LAnimation(layer,bitmapdata,list);
layer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
var gA=aina.getAction();
switch(gA[0]){
case 0 : layer.y+=5;
if(layer.y>=200){
aina.setAction(2);
};break;
case 1 : layer.x-=5;
if(layer.x<=0){
aina.setAction(0);
};break;
case 2 : layer.x+=5;
if(layer.x>=200){
aina.setAction(3);
};break;
case 3 : layer.y-=5;
if(layer.y<=0){
aina.setAction(1);
};break;
}
aina.onframe();
}
</script>
</body>
</html>
核心是LAnimation，只要会使用这个就很好理解上的了，查手册就知道怎么使用。
其实游戏就是在动画的基础上进一步对这个动画各种效果进行人工的操作，而这个
人工操作的实现过程就需要各种判断来实现，所以让画面动了就成功一半，只差一些
游戏方面的逻辑修改它，让它转为人工操作了。所以我把这个叫做从自动转为手动。
当然游戏没有那么简单，这只是做一些很简单的游戏是这样，但游戏就是人为操作动画的
过程，而在代码实现过程最好的是为好层次，如js文件就要分基础，背景，人物，怪物，按键等等
这只是比如，不同情况，不同对待，这样可以让逻辑清晰，易读，但要修改就要使用到面向对象的模式去
编写代码了，这个比较易维护。不过现在编写模式很多，个人的判断和习惯。
虽然刚刚学游戏编写没有多久，但觉得这个数学很重要，所以数学知识也不能缺。
lufylegend游戏引擎的更多相关文章
- 国内开源html5游戏引擎全收录
本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...
- HTML5 RPG游戏引擎 地图实现篇
一,话说全国年夜事 前没有暂看到lufy的专客上,有一名伴侣念要一个RPG游戏引擎,出于兴趣筹办入手做一做.因为我研讨lufylegend有冶时间了,对它有必然的依赖性,因而便筹办将那个引擎基于 ...
- HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布
经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylege ...
- 如何制作一款HTML5 RPG游戏引擎——第五篇，人物&人物特效
上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- 如何制作一款HTML5 RPG游戏引擎——第四篇，情景对话
今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...
- 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景
开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
- 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果
今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...
- 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现
一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...
- HTML5开源RPG游戏引擎lufylegendRPG 0.1发布
一,小小开篇 首先不得不先介绍一下这个引擎: lufylegendRPG是lufylegend的拓展引擎,使用它时,需要引入lufylegend.同时您也需要了解lufylegend语法,这样才能 ...
随机推荐
- 位图图像处理控件ImageCapture Suite更新至v9.1
概述:Dynamsoft公司旗下非常出名的位图图像处理控件ImageCapture Suite更新至了v9.1,这次新版本为Mac版本和IE 9新增了不少功能,同时还对其他组件的性能进行了质的提高! ...
- iOS后台定位时授权提示一闪而过的解决办法
今天做后台定位时,授权提示"允许 XXX 在您并未使用该应用时范文您的位置吗?"总是一闪而过,点不到,或者压根就不弹出.后来找到了解决问题的方法,那就是:将CLLocationMa ...
- 百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换（JS版代码）
/** * Created by Wandergis on 2015/7/8. * 提供了百度坐标(BD09).国测局坐标(火星坐标,GCJ02).和WGS84坐标系之间的转换 */ //定义一些常量 ...
- [转]Liunx上安装svn客户端
[转]Liunx上安装svn客户端 虽然说很简单的用yum install subversion就可以将svn安装到系统中,但是yum库中的版本实在是有点低——1.4.2.因此我选择以源码方式安装.安 ...
- Hbase随笔
大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量数据,我们有了HDFS,它可以把成千上万台服务器上的硬盘聚集成一块超级大的硬盘,为了让这些数据产生价值,我们有 ...
- 【转】linux shell实现随机数多种方法（date,random,uuid)
在日常生活中,随机数实际上经常遇到,想丢骰子,抓阄,还有抽签.呵呵,非常简单就可以实现.那么在做程序设计,真的要通过自己程序设计出随机数那还真的不简单了.现在很多都是操作系统内核会提供相应的api,这 ...
- 使用SQL语句逐条更新每条记录
有些时候,我们希望同时更新表中的多条记录,但更新的值不一样. declare @i int declare @j int declare @phone varchar(20) set @j=1 sel ...
- Webdriver实现原理
通过研究selenium-webdriver的源码,笔者发现其实webdriver的实现原理并不高深莫测无法揣度.在这里以webdriver ruby binding的firefox-webdrive ...
- Android--Alarm机制
1.Alarm 能够实现 Android 中的定时任务,它与 Java 中的 Timer类的区别在于,Android 系统在休眠状态下时 Timer 类中的定时任务可能无法正常运行,而 Alarm 机 ...
- 我的c漏洞
传入指针参数 #include<stdio.h> #include<stdlib.h> void READ(int *a) { scanf("%d",a); ...