今天先停下來，回看了一下自己發佈的 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的大小。這部分不是本次分享主要內容，就不多說了
最後添加監聽器，今天就到這裏，代碼很全可以自己試一試