大家今天想跟大家聊聊我最近捣鼓的一个小玩意——用JavaScript搞一个游戏引擎。别担心，不是啥高大上的东西，就是自己瞎琢磨，顺便记录一下过程。
初识JavaScript游戏引擎
我对这玩意儿完全没概念。就知道JavaScript能写网页特效，还能做游戏？后来一查资料，还真不少！Phaser、*…… 名字都挺酷炫。不过我这人比较喜欢从头开始造轮子，所以决定自己动手写一个简单的。
搭建骨架
得有个HTML文件，这是游戏运行的“地盘”。我建个简单的页面，里面放个canvas元素，这就是游戏的“画布”。这部分没啥难度，就跟平时写网页一样。
就是JavaScript部分。我先创建一个主循环，用requestAnimationFrame这个函数，让它不停地执行。这个循环就是游戏的心脏，负责更新游戏状态、渲染画面。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 创建HTML文件，添加canvas元素。
- 编写JavaScript代码，创建主循环。
- 使用requestAnimationFrame函数驱动循环。
绘制图形
有“画布”和“心脏”，接下来就是画东西。我先从简单的开始，画个矩形。这也不难，canvas提供fillRect方法，只要设置好坐标和宽高就行。为让矩形动起来，我在主循环里不断改变它的坐标，还真动起来！
后来我又尝试画圆形、线条，甚至还加载图片。这些都是canvas的基本操作，网上教程一大堆，我就不细说。
处理用户输入
光是图形自己动没意思，得让玩家能控制才行。我给canvas添加键盘事件监听器，这样就能知道玩家按什么键。比如，按下方向键，就让矩形朝对应方向移动。这部分也不算复杂，就是处理一下事件对象，根据按键类型做相应操作。
- 添加键盘事件监听器。
- 处理事件对象，获取按键信息。
- 根据按键类型更新游戏状态。
碰撞检测
游戏里经常有碰撞，比如子弹打中敌人、角色吃到金币。我实现一个简单的碰撞检测函数，判断两个矩形是否相交。原理也很简单，就是比较两个矩形的坐标和宽高，看看有没有重叠部分。
添加声音
没有声音的游戏是没有灵魂的!我在网上找些免费的音效，用audio来播放，比如角色跳跃的时候“嗖”的一声，感觉还不错。
不断迭代
目前我的小引擎的功能当然很简单，距离那些成熟的引擎差远，以我的水平也做不到。不过这个过程让我对游戏引擎的原理有更直观的认识。以后有时间，我还会继续完善它，比如添加更多图形、更复杂的碰撞检测、甚至支持2D动画等等。
这回尝试让我收获不少。如果你也对游戏开发感兴趣，不妨动手试试，从简单的开始，一步一步来，你会发现其中的乐趣！先分享到这里，有什么问题欢迎留言讨论，咱们下回再见！
