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

2017-01-14 本文已影响0人 suhuanzhen

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

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

红色为基线点