开发“是男人就下一百层”小游戏，完整细讲文章（1）
2020-04-11 01:08·镇上宝塔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);}运行效果如图所示：
么么哒，读者们！
_φ(❐_❐✧ 人丑就要多读书(￣▽￣)~*