基于HTML5技术的Web游戏设计

编辑:小豹子/2018-09-03 18:52

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

  1、HTML5技术特点

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

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

  2、lufylegend开发框架

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

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

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

  3.3 添加地板

  在这个游戏中,有各种各样的地板,这些地板有一些共同的属性,比如它们都在不停地向上移动。为了实现这些共凤凰彩票网(fh643.com)同的属性,先建立一个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 凤凰彩票网(fh643.com) 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 凤凰彩票官网(fh03.cc) LTextField();

  layersText.x=10;

  layersText.y=20;

  layersText.size=20;

  layersText.weight="bolder";

  layersText.color="#ffff00";

  backLayer.addChild(layersText);

  }

  完成以上的工作,游戏制作完成,在浏览器中运行。

  4、结束语

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