html5简单游戏编程从零开始_html5游戏编程的入门-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26786555/article/details/44539719

本文基于lufylegend游戏引擎，所以以下内容全部和此有关，

lufylegend引擎的下载地址： http://www.lufylegend.com/lufylegend

既然是使用引擎，首先就要配置引擎的开发环境，lufylegend的使用极其方便，只需将lufylegend-x.x.x.min.js文件引入即可，默认将legend文件夹放入当前文件路径中,如下方所示，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>LTileMap</title>
<script type="text/javascript" src="lufylegend.js-lufylegend-1.9.7/lufylegend-1.9.7.min.js"></script>

此时即可开始使用lufylegend开始我们的游戏之旅

一、初始化引擎

加载引擎后，就需要对环境初始化，lufylegend的初始化需要使用引擎中提供的函数init(30,"legend",500,400,main);

第一个参数为刷新频率，也就是多久对屏幕刷新一次

第二个参数为需要初始化的html中的div的id，这也是lufylegend的优点之一

第三个参数为窗口的长

第四个参数为窗口的宽

第五个参数为初始化时调用的函数

二、游戏的图层

既然是游戏，那么图层就必不可少，对于本次游戏来说会分成地图层，也就是载入地图的层次，人物层，也就是载入人物的图层，金币层，也就是载入掉落的金币的图层，游戏结束层，也就是游戏结束时所调用的图层，时间层，也就是载入倒数计时的图层，分数层，查看分数的图层，游戏结束图层，也就是游戏结束时调用的图层

总的来说本次游戏开发会分成地图层，人物图层，金币层，时间层，分数层，游戏结束层这6个图层，所以就需要先定义这6个图层，定义的代码如下

var backLayer,maplayer ,timelayer,playerlayer,moneylayer,pointlayer,gameoverLayer;

定义好之后就需要在main函数中于初始化过程中将图层全部载入，另外需要注意的是图层的顺序，地图层要在最下面，否则会遮住其他图层，而导致其他图层出现显示不出的情况，在lufylegend中是根据图层加入的顺序来决定谁在最下方，也就是先加入的就是最下面的图层，之后以此类推，所以init函数就需要这样定义

function gameinit(result){
//移除loading
removeChild(loadingLayer);
//初始化分数
point=0;
imglist=result
//加入backlayer背景层
backLayer = new LSprite();
addChild(backLayer);
//加入地图层
maplayer= new LSprite();
backLayer.addChild(maplayer);
//加入timelayer时间层
timelayer= new LTime(1);
timelayer.x=340;
timelayer.y=0;
backLayer.addChild(timelayer);
//加入人物层
playerlayer= new LSprite();
backLayer.addChild(playerlayer);
//加入金币层
moneylayer= new LSprite();
backLayer.addChild(moneylayer);
//加入分数层
pointLayer= new LSprite();
backLayer.addChild(pointLayer);
//加入游戏结束层
gameoverLayer = new LSprite();
backLayer.addChild(gameoverLayer);
//初始化游戏
gamestart();
}

其中LSprite为lufylegend所提供的精灵类，此类可以实现载入图片，以及绘制各种图形，具体的参数可以参考API：http://lufylegend.com/api/zh_CN/out/index.html，而LTime则是由自己实现的LTime类作用是为了实现倒计时的运算和显示，具体的函数如下：

function LTime(min){
var s=this;