Space is Key游戏算法原型–HTML5版

作者: ladeng6666 分类: Game design,HTML5 发布时间: 2012-05-19 12:19 阅读: 5,139

昨天我写了一个Space is Key游戏算法原型,使用Flash实现的,其实用HTML5的canvas实现起来也并不难算法上时完全相同的,不用的是如果处理矩形的旋转和键盘事件的处理以及JS面向对象编程


一、矩形旋转算法
canvas本身是又rotate方法的,但是我们值需要旋转矩形部分,需要按下面的步骤来

  1. 调用save()方法,保存当前canvas状态
  2. 用translate()方法,将舞台的左上角移动到矩形的中心点
  3. 调用canvas的rotate方法旋转舞台,这样矩形也就旋转了
  4. 用restore()方法,恢复初始的舞台

另外你还可以参考我的HTML5学习笔记,了解更多HTML5绘图知识

二、键盘事件处理
我没有单独侦听canvas的键盘事件,而是利用jquery的keydown方法侦听整个文档的键盘事件

三、JS面向对象编程
如果你对JS面向对象编程不熟悉,请参考我的帖子JavaScript面向对象编程基础[laden666]

效果预览

具体代码如下:

 源码下载

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

2条评论
  • nick

    2017 年 12 月 14 日 下午 6:18

    我想请教一个问题。一般的游戏引擎都是无限制的绘图然后擦除吗?

    1. ladeng6666

      2017 年 12 月 20 日 上午 9:26

      应该是这样的

发表评论

电子邮件地址不会被公开。 必填项已用*标注