摘 要：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的跨平台特点，分别给游戏添加键盘事件和触屏事件，以使游戏在电脑上和智能手机上都能运行。……