基于html5技术的web游戏设计

《基于html5技术的web游戏设计》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于HTML5技术的Web游戏设计摘要：HTML5技术的兴起有多方面的原因，其中比较重要的一点就是，越来越多的开发者选择以网页的形式来制作应用软件与游戏。本文通过设计一款卷轴类游戏，介绍了如何利用lufylegend游戏引擎来开发基于HTML5的Web游戏。关键词：HTML5；Web游戏；Canvas中图分类号：TP393.011HTML5技术特点HTML5是HTML的最新规则版本，它有很多优点，其中比较重要的一点是具有强大的跨平台特性。HTML5增加了很多新的元素，其中包括与Web游戏设计紧密相关的Canvas元素[1]。从文字处理到电子游戏，它们

2、所需的全部图形功能，Canvas元素都会提供。尽管它在各个平台中的性能有所差异，不过总的来说，Canvas的运行速度还是很快的。浏览器厂商们在遵循HTML5规范方面做得都相当好，所以，编码良好的Canvas应用程序无需修改即可在兼容HTML5的浏览器中运行[2]。2lufylegend开发框架8现在的游戏开发变得越来越复杂，需要制作各种炫丽的效果，还要制作各种基于2D或者3D的场景。为了节省游戏开发者的时间，让开发者集中精力在游戏的创新上，出现了许许多多的游戏引擎[3]。lufylegend是一个HTML5开源引擎，它实现了利用仿ActionScri

3、pt3.0的语法进行HTML5的开发，包含了LSprite，LBitmapData，LBitmap等多个AS开发人员熟悉的类，支持GoogleChrome，Firefox，Opera，IE9，IOS，Android等多种热门环境[3]。3利用HTML5技术来设计卷轴类游戏在本游戏制作中，可以将游戏层次划分为：进度条显示层、背景层、人物层、障碍层。进度条显示层用来显示图片读取时的进度，背景层用来显示不断卷动的背景图片，人物层用来显示游戏中的主角，障碍层用来显示不断出现的各种地板。本游戏利用HTML5的跨平台特点，分别给游戏添加键盘事件和触屏事件，以使游

4、戏在电脑上和智能手机上都能运行。3.1游戏初始化先利用LSprite对象的graphics属性和LTextField对象制作游戏标题和游戏说明文字，然后定义一个进度条，利用LLoadManager来显示进度条，最后给背景层backLayer增加鼠标点击事件。主要代码如下：loadingLayer=newLoadingSample2（50）；backLayer.addChild（loadingLayer）；8LLoadManager.load（imgData，function（progress）{loadingLayer.setProgress（pro

5、gress）；}，gameInit）；当点击游戏画面的时候，首先要将背景层清空，然后添加背景图片。LSprite的die函数表示移除所有的事件监听，removeAllChild函数表示移除所有子对象。主要代码如下：backLayer.addEventListener（LMouseEvent，MOUSE_UP，gameStart）；functiongameStart（）{backLayer.die（）；backLayer.removeAllChild（）；}3.2显示卷轴背景新建一个Background类，在其构造器内建立3个LBitmap对象，并依次

6、显示。因为背景图片是可以无缝衔接的，所以显示到画面上就好像一张图片一样。Background类的run函数是将Background对象中的3个子图片向上移动一个STAGE_STEP步长，这个步长会在定义部分提前定义好相应的值，待第一个LBitmap对象移出屏幕后，就会把第二个LBitmap对象的坐标赋值给第一个LBitmap对象，然后再重新计算其他两个LBitmap对象的坐标。相关代码如下：8Background.prototype.run=function（）{varself=this；self.bitmap1.y-=STAGE_STEP；self

7、.bitmap2.y-=STAGE_STEP；self.bitmap3.y-=STAGE_STEP；if（self.bitmap1.y<-self.bitmap1.getHeight（））{self.bitmap1.y=self.bitmap2.y；self.bitmap2.y=self.bitmap1.y+self.bitmap1.getHeight（）；self.bitmap3.y=self.bitmap1.y+self.bitmap1.getHeight（）*2；}}在循环播放监听函数onframe中不断调用Background类的run函数，

8、就可以达到背景卷动的效果。3.3添加地板在这个游戏中，有各种各样的地板，这些地板有一些共同的属性，比如它们都