HTML5技术的兴起有很多原因，其中之一就是越来越多的开发者选择以网页的形式制作应用软件和游戏。通过设计一个卷轴游戏，介绍了如何使用lufylegend游戏引擎开发基于HTML5的网页游戏。
1.HTML5的技术特征
HTML5是HTML的最新常规版本。它有很多优点，其中之一就是强大的跨平台特性。HTML5加入了很多新元素，包括与网页游戏设计息息相关的Canvas。
从文字处理到视频游戏，Canvas元素将提供它们需要的所有图形功能。虽然它的性能因平台而异，但总的来说，Canvas运行速度非常快。浏览器在遵循HTML5规范方面做得相当好，因此良好编码的Canvas应用程序可以在兼容HTML5的浏览器中运行，而无需修改。
2.lufylegend开发框架
现在游戏的开发越来越复杂，需要做出各种炫目的效果，各种2D或者基于3D的场景。为了节省游戏开发者的时间，让他们专心于游戏创新，出现了很多游戏引擎。
Lufylegend是HTML5的开源引擎，采用模仿ActionScript3.0的语法实现了HTML5的开发，包含了很多AS开发者熟悉的类，如LSprite、LBit***pData、LBit***p等，支持Google Chrome、Firefox、Opera、IE9、IOS、Android等流行环境。
3.用HTML5技术设计卷轴游戏。
在这款游戏的制作中，游戏关卡可以分为:进度条显示层、背景层、人物层、障碍层。进度条显示层用来显示看图进度，背景层用来显示不断滚动的背景图片，角色层用来显示游戏中的主角，障碍层用来显示不断出现的各种楼层。
这款游戏利用了HTML5的跨平台特性，在游戏中加入了键盘事件和触摸屏事件，使得游戏既可以在电脑上运行，也可以在智能***上运行。
3.1.游戏初始化
首先，LSprite对象和LTextField对象的graphics属性用于制作游戏标题和游戏描述文本。然后定义一个进度条，用LLoadManager来显示进度条。最后，鼠标点击事件被添加到背景层backLayer。主要代码如下:
loadingLayer=new LoadingSample2（50）； backLayer.addChild（loadingLayer）； LLoadManager.load（imgData，function（progress）{ loadingLayer.setProgress（progress）； }，gameInit）；
点击游戏画面时，先清除背景层空，再添加背景图片。LSprite的***函数表示删除所有事件监控，removeAllChild函数表示删除所有子对象。主要代码如下:
backLayer.addEventListener（LMouseEvent，MOUSE_UP，gameStart）； function gameStart{ backLayer.***； backLayer.removeAllChild；}
3.2.显示滚动的背景。
创建一个新的背景类，在其构造函数中构建三个LBit***p对象，依次显示。因为背景图片可以无缝连接，所以像图片一样显示在屏幕上。
Background类的run函数是将Background对象中的三个子图上移一个STAGE_STEP步长，这个步长会在定义节中预先定义相应的值。在第一个LBit***p对象移出屏幕后，第二个LBit***p对象的坐标将被赋给第一个LBit***p对象，然后将重新计算另外两个LBit***p对象的坐标。相关代码如下:
Background.prototype.run=function{ var self=this； self.bit***p1.y-=STAGE_STEP； self.bit***p2.y-=STAGE_STEP； self.bit***p3.y-=STAGE_STEP； if（self.bit***p1.y<-self.bit***p1.getHeight）{ self.bit***p1.y=self.bit***p2.y； self.bit***p2.y=self.bit***p1.y+self.bit***p1.getHeight； self.bit***p3.y=self.bit***p1.y+self.bit***p1.getHeight*2；}}
可以通过在frame上的循环监控函数中不断调用Background类的run函数来滚动背景。
3.3添加楼层
在这个游戏中，有各种各样的地板。这些楼层有一些共同的属性，比如不断向上移动。为了实现这些共有属性，建立一个楼层类作为所有楼层的父类，包含所有楼层的共有部分。地板等级定义如下:
function Floor{ base（this，LSprite，[]）； var self=this； self.hy=0； self.setView； } Floor.prototype.setView=function{} Floor.prototype.onframe=function{ var self=this； self.y-=STAGE_STEP； }； Floor.prototype.hitRun=function{}
其中，hy属性用于控制游戏主角相对于地板的位置，setView函数用于为地板设置皮肤。每次调用onframe函数时，地板向上移动一个STAGE_STEP长度。当游戏主角落在每一层时，会根据不同的楼层有不同的表现，比如强行向左移动，强行向右移动，或者跳起来等。建立hitRun函数来实现这些不同的性能。
有了公共类floor，各种Floor子类都必须从Floor继承，并重写相应的setView、onframe和hitRun函数。
3.4.添加游戏主角。
Chara类继承自LSprite，其主要属性有:moveType用于控制游戏主角向左还是向右移动，hp代表当前血量，***pHp代表最大血量，hpCtrl用于控制血量恢复的速度，isJump用于指示游戏主角当前状态是否处于跳跃状态，index用于控制动作变化的速度，speed代表下落的速度，_charOld用于记录游戏主角每次下落前的Y坐标。
Chara类的changeAction函数用于控制游戏主角的动作，定义如下:
Chara.prototype.changeAction=function{ var self=this； if（self.moveType=="left"）{hero.anime.setAction（3）；} else if（self.moveType=="right"）{hero.anime.setAction（2）；} else if（hero.isJump）{hero.anime.setAction（1，0）；} else{hero.anime.setAction（0，0）；} }
changeAction函数的原理是根据moveType设置游戏主角的动作是向左移动还是向右移动。当它既不左也不右的时候，就决定了它的状态是不是跳跃。如果是，它会将动作设置为跳跃；否则，它会将动作设置为站立。
3.5.游戏数据显示
游戏的数据包括游戏主角的血量和掉落的总层数。首先建立几个变量来表示这些数字:Layers表示丢弃的层数，初始值为0；LayersText用于显示屏幕上的层数；HpText用于在屏幕上显示血量。然后建立showInit函数来初始化文本显示。主要代码如下:
function showInit{ layersText=new LTextField； layersText.x=10； layersText.y=20； layersText.size=20； layersText.weight="bolder"； layersText.color="#ffff00"； backLayer.addChild（layersText）； }
以上工作完成后，游戏制作完成并在浏览器中运行。
4.结束语
本文介绍了如何在游戏中实现卷轴滚动效果。游戏虽然简单，但是里面有弹跳，下落，重力等内容。这些也是一般横关游戏的构成，相信对想做横关游戏的朋友会起到一定的参考作用。
本文来自别舍不得旧情人投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/621672.html
微信扫一扫 
