我们将自己构建经典的街机游戏贪吃蛇。 在贪吃蛇中，玩家控制一条蛇向上、向下、向左或向右移动。随着蛇在游戏区域内移动，苹果会出现。当蛇碰到一个苹果，它会吃掉苹果并且会变长。但是，如果蛇碰到了墙壁或者自己身体的某个部分，游戏就结束了。
游戏的过程中需要记录4项内容并将其绘制到屏幕上：边框（灰色）、分数（黑色）、贪吃蛇（蓝色）和苹果（浅绿色）。
将要完成的效果如下
Paste_Image.png
游戏思路的整体伪代码
Paste_Image.png
使用setInterval来实现游戏动画
对setInterval的调用最终如下
var intervalId = setInterval(function(){
ctx.clearRect(0,0,width,height);
drawScore();
snake.move();
snake.draw();
apple.draw();
drawBorder();
},100);
将时间间隔ID 保存到了变量intervalId 中。当游戏结束 的时候---要停止动画的时候，我们需要用到它。
创建游戏对象
我们要创建两个对象，即“贪吃蛇”和“苹果”，我们将为这两个对象创建构造方法（名为Snake和Apple），然后我们将方法（例如move和draw）添加到这些构造方法的原型中。
我们可以把游戏面板当成一个个方块大小的网格组成的，我们将创建Block对象的构造方法来表示每一个小网格。我们使用一个单个的Block对象来保存苹果当前的位置。贪吃蛇身体也是由多个Block组成。
设置键盘控制
我们使用jQuery来响应键盘按下，响应地设置贪吃蛇前进的方向。
文本相关CSS知识点
-
文本基线就是文本内容在 指定坐标/ 基线点 的什么位置出现。
默认情况下， 文本的左下角与基线点对齐，以便文本出现在基线点的右上方。
要修改文本相对于基线的位置，可以更改textBaseline 属性。该属性的默认值是 "bottom"，但是，也可以将其设置为 "top" 或 "middle"。
红色为基线点
例如，要把文本放到基线之下，输入：
Paste_Image.png
现在，当你调用fillText 的时候，文本将位于点（50，50）的下方，如图
Paste_Image.png
- 类似的，要修改文本相对于基线点的水平位置，可以将textAlign 属性设 置为 "left"、"center" 或 "right"。
修改textAlign的结果
- 设置大小和字体
可以通过设置绘制环境的font 属性来更改文本的大小和字体。下面列出 了我们可以使用的不同字体的一些示例
Paste_Image.png
对应效果图如下：20 像素的 Courier，24 像素的 Comic Sans 和 18 像素的 Arial
Paste_Image.png
font 属性接受一个字符串，其中包含了想要使用的字体的大小和名称。 例如，在 处，我将 font 属性设置为"20px Courier"，这意味着文本将会以 20 像素大小的Courier 字体显示。
编写记分函数drawScore
编写结束游戏gameOver函数
当贪吃蛇碰到墙壁或者碰到自己的身体的时候，我们将调用gameOver 函 数来结束游戏。gameOver 函数使用clearInterval 来停止游戏，并且在画布上显 示文本“Game Over”。
Paste_Image.png
网友评论