小游戏开发 Mario (7) 碰撞

今天先停下来，回看了一下自己发布的 mario 游戏开发分享，发现有些朋友对游戏开发的一些基础知识还不太了解。本周就先分享一下游戏开发中用到一些基本理论。从碰撞检测开始吧。

第一步还是创建一个项目（这里所谓的项目就是一个文件夹），在项目下，新建一个 index.html 和一个 app.js

在 index.html 中，创建一个 canvas （画布）元素。主要的工作都将在画布上，也就是完成我们的碰撞检测。

首先获取 canvas 元素的上下文 context 对象，所谓 context 就是，如果我们要和 canvas 画布打交道，可能会需要一个中间人，context 就是那个中间人。 context 提供许多方法让我们可以在画布上绘制和编辑各种图形。

controller 这个控制器对象，可用于处理用户和界面的交互，这里 getBoundingClientRect 用来获取元素的位置，move 方法主要用于将鼠标在浏览器中坐标转换为 canvas 中的坐标。

接下来我们定义一个 Rectangle 类，Rectangle 提供了绘制方法和用于检测自身与另一个矩形的碰撞检测方法。

在上图中，出现了本节最重要内容，就是 testCollision 中 if 语句中的判断逻辑，这两图可以帮助您更好地理解是我们是如何检测两个矩形碰撞的，当一个矩形在另一个矩形上方未发接触时，应该是一个底边坐标高于另一个矩形的上边坐标。反之就碰撞了。

好我们可以模拟创建一个玩家偏红色的小块和一个绿色固定小块。

loop 可以说是我们程序的主方法，他会调用 requestAnimationFrame 来不断更新画面。这里我们调用检测碰撞方法来检测玩家和tile是否相碰，相碰后为他们添加边框线来表示他们接触碰撞了。

resize 方法用于根据屏幕大小的调整canvas的大小。这部分不是本次分享主要内容，就不多说了

最后添加监听器，今天就到这里，代码很全可以自己试一试