基于HTML5技术的Web游戏设计

【前言】基于HTML5技术的Web游戏设计由文秘帮小编整理而成，但愿对你的学习工作带来帮助。从文字处理到电子游戏，它们所需的全部图形功能，Canvas元素都会提供。尽管它在各个平台中的性能有所差异，不过总的来说，Canvas的运行速度还是很快的。浏览器厂商们在遵循HTML5规范方面做得都相当好，所以，编码良好的Canvas应用程序无需修改即可在兼容HTML5的浏览器...

摘 要：HTML5技术的兴起有多方面的原因，其中比较重要的一点就是，越来越多的开发者选择以网页的形式来制作应用软件与游戏。本文通过设计一款卷轴类游戏，介绍了如何利用lufylegend游戏引擎来开发基于html5的web游戏。

关键词：HTML5；Web游戏；Canvas

中图分类号：TP393.01

1 HTML5技术特点

HTML5是HTML的最新规则版本，它有很多优点，其中比较重要的一点是具有强大的跨平台特性。HTML5增加了很多新的元素，其中包括与Web游戏设计紧密相关的Canvas元素[1]。

从文字处理到电子游戏，它们所需的全部图形功能，Canvas元素都会提供。尽管它在各个平台中的性能有所差异，不过总的来说，Canvas的运行速度还是很快的。浏览器厂商们在遵循HTML5规范方面做得都相当好，所以，编码良好的Canvas应用程序无需修改即可在兼容HTML5的浏览器中运行[2]。

2 lufylegend开发框架

现在的游戏开发变得越来越复杂，需要制作各种炫丽的效果，还要制作各种基于2D或者3D的场景。为了节省游戏开发者的时间，让开发者集中精力在游戏的创新上，出现了许许多多的游戏引擎[3]。

lufylegend是一个HTML5开源引擎，它实现了利用仿ActionScript3.0的语法进行HTML5的开发，包含了LSprite，LBitmapData，LBitmap等多个AS开发人员熟悉的类，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多种热门环境[3]。

3 利用HTML5技术来设计卷轴类游戏

在本游戏制作中，可以将游戏层次划分为：进度条显示层、背景层、人物层、障碍层。进度条显示层用来显示图片读取时的进度，背景层用来显示不断卷动的背景图片，人物层用来显示游戏中的主角，障碍层用来显示不断出现的各种地板。

本游戏利用HTML5的跨平台特点，分别给游戏添加键盘事件和触屏事件，以使游戏在电脑上和智能手机上都能运行。

3.1 游戏初始化

先利用LSprite对象的graphics属性和LTextField对象制作游戏标题和游戏说明文字，然后定义一个进度条，利用LLoadManager来显示进度条，最后给背景层backLayer增加鼠标点击事件。主要代码如下：

loadingLayer=new LoadingSample2（50）；

backLayer.addChild（loadingLayer）；

LLoadManager.load（imgData，function（progress）{

loadingLayer.setProgress（progress）；

}，gameInit）；

当点击游戏画面的时候，首先要将背景层清空，然后添加背景图片。LSprite的die函数表示移除所有的事件监听，removeAllChild函数表示移除所有子对象。主要代码如下：

backLayer.addEventListener（LMouseEvent，MOUSE_UP，gameStart）；

function gameStart（）{

backLayer.die（）；

backLayer.removeAllChild（）；}

3.2 显示卷轴背景

新建一个Background类，在其构造器内建立3个LBitmap对象，并依次显示。因为背景图片是可以无缝衔接的，所以显示到画面上就好像一张图片一样。

Background类的run函数是将Background对象中的3个子图片向上移动一个STAGE_STEP步长，这个步长会在定义部分提前定义好相应的值，待第一个LBitmap对象移出屏幕后，就会把第二个LBitmap对象的坐标赋值给第一个LBitmap对象，然后再重新计算其他两个LBitmap对象的坐标。相关代码如下：

Background.prototype.run=function（）{

var self=this；

self.bitmap1.y-=STAGE_STEP；

self.bitmap2.y-=STAGE_STEP；

self.bitmap3.y-=STAGE_STEP；

if（self.bitmap1.y

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函数，就可以达到背景卷动的效果。

3.3 添加地板

在这个游戏中，有各种各样的地板，这些地板有一些共同的属性，比如它们都在不停地向上移动。为了实现这些共同的属性，先建立一个Floor类，作为所有地板的父类，这个父类里包含了所有地板的公共部分。Floor类的定义如下：

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，并重写相应的setView、onframe和hitRun函数。

3.4 添加游戏主角

主角类Chara继承自LSprite，其主要属性有：moveType用来控制游戏主角是左移还是右移，hp表示当前血量，mapHp表示最大血量，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）；

}

完成以上的工作，游戏制作完成，在浏览器中运行，效果如图1所示：

图1 游戏效果图

4 结束语

本文介绍了如何在游戏中实现卷轴滚动效果，游戏虽然简单，但是里面有弹跳、坠落、重力等内容，这些同时也是一般横版过关游戏的组成部分，相信会对想制作横版过关游戏的朋友起到一定的借鉴作用。

参考文献：

[1]黄悦深.基于HTML5的移动Web App开发[J].图书馆杂志，2014（07）：72-77.

[2]孙娟.网页游戏UI界面的设计与研究[D].中国地质大学，2013.

[3]开源中国社区.18款超酷的HTML5和JavaScript游戏引擎库[EB/OL].，2014，04，17.

作者简介：郑逸凡（1983-），男，讲师，软件设计师，研究方向：web开发、软件设计。

作者单位：福州外语外贸学院，福州 350202

基金项目：福建省教育厅B类科技项目（项目编号：JB12240）。