使用純 JavaScript 的 2D 打磚塊遊戲
在本分步教程中，我們將建立一個完全使用純 JavaScript 編寫並在 HTML <canvas> 元素上渲染的 MDN 打磚塊遊戲。
每個步驟都提供可編輯的即時示例供您玩，以便您可以看到中間階段應該是什麼樣子。您將學習使用 <canvas> 元素來實現基本遊戲機制（如渲染和移動影像、碰撞檢測、控制機制以及輸贏狀態）的基礎知識。
要充分利用這一系列文章，您應該已經掌握了基礎到中級的 JavaScript 知識。完成本教程後，您應該能夠構建自己的網頁遊戲。
課程詳情
所有課程 — 以及我們一起構建的 MDN 打磚塊遊戲 的不同版本 — 都可以在 GitHub 上找到。
從純 JavaScript 入手是掌握 Web 遊戲開發紮實知識的最佳方式。之後，您可以選擇任何您喜歡的框架並在您的專案中使用它。框架只是用 JavaScript 語言構建的工具；所以即使您打算使用它們，最好先學習語言本身，以便了解幕後到底發生了什麼。框架可以加快開發時間並幫助處理遊戲中枯燥的部分，但如果出現問題，您總是可以嘗試除錯它，或者直接用純 JavaScript 編寫自己的解決方案。
注意：這一系列文章可用作實踐遊戲開發研討會的材料。如果您想就遊戲開發進行演講，還可以利用基於本教程的 Gamedev Canvas 內容包。
如果您有興趣使用遊戲庫來學習 2D Web 遊戲開發，請參閱本系列的對應內容：使用 Phaser 的 2D 打磚塊遊戲。
後續步驟
好的，讓我們開始吧！前往第一章 建立 Canvas 並進行繪製。