记录15 贪吃蛇第一部分，构思

我们将自己构建经典的街机游戏贪吃蛇。 在贪吃蛇中，玩家控制一条蛇向上、向下、向左或向右移动。随着蛇在游戏区域内移动，苹果会出现。当蛇碰到一个苹果，它会吃掉苹果并且会变长。但是，如果蛇碰到了墙壁或者自己身体的某个部分，游戏就结束了。

游戏的过程中需要记录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