试用html5 canvas编写游戏引擎

最近工作时间比较松散，把前段时间玩js时 写的一些小东西分享给大家，希望能给这方面有需求的朋友抛砖引玉了。

一. canvas简介

 canvas这个东西是html5里面的一个新增标记，这个标记提供了用描述语言直接进行页面绘画的能力，只要把它加入页面里面，就可以直 接使 用，代码例如：

  

   ....

    this explore can't support canvas

  

 这个标记里面制定了canvas有效区的大小，如果阅历器不支持canvas标记，中间的文本部分将显示出来。

该标记与其它网页标记近似，有很多属性可以使用，要注意的是与css 层叠样式的相互作用上，该标记的高宽在网页被载入时已经确定，如果在样式里面调整，其实并不会跟着改变，而是以放缩的形式来适应新的变化。如果 你初始高宽是 30,40，用css调整为300，400，那么画出的东西相当于把30,40的位图放大到300,400上，里面的每个绘画象素的高宽都会增加10倍。

  该标签的调用也很简单 ，代码例如：

 

  得到2d的context后，就可以调用其提供的各种绘画接口进行绘画操作。

 

二. 2d canvas游戏引擎的简单设计。

  游戏引擎简单来说，是由以下几个部分组成：

  1。精灵系统

   精灵系统总的来说是基于状态机的图画播放系统，在特定条件（精灵状态）下，播放出来特定的图片效果，设计为2个类别：

   a. animation

   b. sprite

  animation,就是图片序列的一个托管单位，而sprite是将所有animation联合调度的一个容器。

  2。地图系统

  地图系统是精灵活动的场所，与精灵的表象密切相关，像 运动方式，寻径，ai等表象，也要依赖于地图系统来实现。并且随着游戏风格的不同，该部分变化极大。因此，该部分与ai等逻辑算法一样，也是变动，而无法确定的，只能提供对它的最基本的绘画方面的支持，具体的地图数据，要由用户自己确定。

  3。数学

  这点不用说的，常用的2d转换算法，一般的图形学书中都有。

 4.游戏的管理结构

  游戏是抽象点说: 是一堆 " 状态动画"加上"碰撞测试"的逻辑系统,游戏管理首先要做的事情是对精灵对象进行管理,因为每个精灵可能使用同样图片序列的animation,所以,animation也需要进行统筹安排,sprite只需要引用animation对象,而不是生成独立的对象.

5.帧管理

 这个其实是很重要的东西,与"精灵状态表现速度"密切相关,要知道精灵状态的每一步,都是在"一个游戏帧时间"或"几个游戏帧时间"中实现,是精灵控制的一个重要不可缺乏条件.在js中可以用 setInterval来进行帧速控制.

 

源码下载位置：

http://download.csdn.net/source/3171033

 (注意，因系“写着玩”的程序，未考虑阅览器的兼容性，

 源码以ie9察看效果或者firefox 有些版本的阅览器可能出现问题 )