HTML javascript开发“是男人就下一百层”小游戏，完整细讲文章（1）
关键词：如何设计一款2D卷轴游戏
卷轴游戏是因为游戏的背景看起来像是卷轴滚动而得名，“是男人下一百层”即为一款2D游戏。大家很熟悉任务重主角玩家持续下落，其中遇到各种麻烦，或降到带刺的地板血量降低，玩家可以挑战自己的极限。下面就来看一下如何实现这类游戏的制作。
1. 游戏分析
首先来分析一下所需要的素材和要素。准备开发的游戏画面。
制作需要如下要素：
l 图片描画
l 文职绘制
l 循环播放事件
l 键盘事件
l 触屏事件
l 游戏层次分化
在游戏制作中，可以将游戏层次分化为：进度显示层，背景层，任务层，障碍物层等，进度显示层表示加载图片的进度，背景层来显示不断卷动的背景图片，人物层用来显示游戏主角，障碍层来显示不断出现的各种障碍地板。
2. Lufylegend库件介绍
Lufylegend库件是一个HTML5的开源框架，他利用JavaScript的相似性，用仿Actionscript的语法进行对HTML5 Canvas的API进行封装。这使得可以面向对象开发，而且HTML5的开发像Flash一样便利。Lufylegend库件支持Chrome，FireFox，Opera，IOS，Android 等等多个场景，可以减少开发者在解决浏览器兼容方面的问题，从更专注于游戏开发，虽然不是专业商用游戏库件，但五脏六腑完整，适合新手们入坑。
3. 先利用Lsprite对象的grapihic属性和LtextField对象制作一个游戏标题画面。
//声明变量
//游戏主层，进度条显示层，背景层，障碍层
var backLayer,loadingLayer,background,stageLayer;
function main(){
//游戏主层初始化
backLayer = new LSprite();
//在主层上绘制黑色背景
backLayer.graphics.drawRect(1,"#000000",[0,0,320,480],true,"#000000");
addChild(backLayer);
gameInit();
}
//读取完所有图片，进行游戏标题画面的初始化工作
function gameInit(){
//显示游戏标题
var title = new LTextField();
title.y = 100;
title.size = 30;
title.color = "#ffffff";
title.text = "是男人就下100层";
title.x = (LGlobal.width - title.getWidth())/2;
backLayer.addChild(title);
//显示说明文
backLayer.graphics.drawRect(1,"#ffffff",[50,240,220,40]);
var txtClick = new LTextField();
txtClick.size = 18;
txtClick.color = "#ffffff";
txtClick.text = "点击页面开始游戏";
txtClick.x = (LGlobal.width - txtClick.getWidth())/2;
txtClick.y = 245;
backLayer.addChild(txtClick);
}
运行效果如图所示：
后面文章连续欢迎关注点赞，么么哒，读者们！
_φ(❐_❐✧ 人丑就要多读书(￣▽￣)~*
,
