21、从零开始：构建一个简单的 HTML5 游戏

从零开始：构建一个简单的 HTML5 游戏

在开发游戏时，我们首先需要一个能够检测实体碰撞的函数。这个函数可以比较两个实体的位置，判断它们是否占据了相同的空间。对于小画布和屏幕上实体数量有限的情况，这是一种非常快速的碰撞检测方法。完成这个函数后，我们就拥有了一个小型的工作游戏引擎，接下来可以开始实现游戏了。

游戏文件结构

游戏本身的规模通常会比引擎大，尤其是 HTML5 游戏。我们需要添加很多文件，以下是游戏的文件结构（不包括引擎）：

├── components
│   ├── addEntity.js
│   ├── addProjectile.js
│   ├── checkCollision.js
│   ├── debugBoard.js
│   ├── diceroll.js
│   ├── drawEntities.js
│   ├── drawGameOver.js
│   ├── drawGameWon.js
│   ├── drawHud.js
│   ├── clearCanvas.js
│   ├── keyInput.js
│   ├── keypress
│   │   ├── a.js
│   │   ├── d.js
│   │   ├── down.js
│   │   ├── index.js
│   │   ├── left.js
│   │   ├── right.js
│   │   ├── s.js
│   │   ├── space.js
│   │   ├── up.js
│   │   └── w.js
│   ├── outOfBounds.js
│   ├── removeEntity.js
│   └── se