canvas教程

基于HTML5技术的Web游戏设计

字号+ 作者:H5之家 来源:H5之家 2017-08-31 17:04 我要评论( )

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

当前所在位置:中国论文网 > 科技论文发表 > 基于HTML5技术的Web游戏设计

基于HTML5技术的Web游戏设计


申明:本网站内容仅用于学术交流,如有侵犯您的权益,请及时告知我们,本站将立即删除有关内容。

 

  摘 要: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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评