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语法,这样才能 ...
随机推荐
- 【转】Linux中xargs的用法
xargs大 多数 Linux 命令都会产生输出:文件列表.字符串列表等.但如果要使用其他某个命令并将前一个命令的输出作为参数该怎么办?例如,file 命令显示文件类型(可执行文件.ascii 文本等 ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- MongoDB初步（一）
1.软件下载:mongodb-win32-x86_64-2008plus-ssl-3.4.1-signed.msi 2.下载补丁:hotfix kb2731284
- 查询Oracle锁表和解决方法
Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容.(1)锁表查询的代码有以下的形式:select count( ...
- C++类的内存分配
今天面试被问到一个类的内存问题,有些记不清楚了.用了 C++这么年,实在是不应该. 于是上网查了一些资料,并做了实验,整理如下: 所用测试环境为64位mac air,编译器为XCode 1.最简单 c ...
- 《理解 ES6》阅读整理：函数（Functions）（四）Arrow Functions
箭头函数(Arrow Functions) 就像名字所说那样,箭头函数使用箭头(=>)来定义函数.与传统函数相比,箭头函数在多个地方表现不一样. 箭头函数语法(Arrow Function Sy ...
- 如何查看Android的Keystore文件的SHA1值
像使用百度地图api时候,一般需要获取keystore的SHA1值,这里就手把手教大家如何查看Android的keystore文件中的SHA1值. 第一步: 打开cmd,切换到keystore所在的文 ...
- vs的dll引用机制
vs2012编译的时候,遇到一个问题就是项目A中运行时缺失dll的问题,项目A引用类库B,类库B引用了x,y等dll,编译A项目的时候,出现x没拷贝到bin 目录. 通过跟踪编译输出发现,x没拷贝的原 ...
- React Native移动框架功能研究
React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...
- objective-c（代码块）
objective-c代码块(block)对写惯C语言的人非常熟悉,就类似一个函数指针,指向一个代码段的首地址: 给出简单例子如下: int main(int argc, const char * a ...