20行js代码实现的贪吃蛇小游戏

20行js代码实现的贪吃蛇小游戏攻略

1. 实现思路

该贪吃蛇小游戏的实现思路非常简单，主要分为以下两步：

1. 初始化游戏BOSS。
2. 在游戏中添加监听事件，监听玩家的操作，并处理游戏逻辑。

2. 代码实现

游戏的实现代码如下：

with(document){
    a = appendChild(createElement("canvas")).getContext("2d");
    width = height = 256;
    // 得分数
    score = tail = dir = 1;
    o = {x: ~~(Math.random()*width), y: ~~(Math.random()*height)};
    // 蛇头位置
    snake = [{x: ~~(width/2), y: ~~(height/2)}];
    // 键盘操作
    onkeydown = function(e){
        dir = (e.which - 37) % 4;
    };
    setInterval(function(){
        a.fillStyle="#1D1F21";
        a.fillRect(0,0,266,266);
        a.fillStyle="#FFFFFF";
        // 定义蛇头的坐标
        for (var i=0; i<snake.length; ++i)
            a.fillRect(snake[i].x*10, snake[i].y*10, 9, 9);

        // 判断方向
        x = snake[0].x; y = snake[0].y;
        if (dir == 0) --y;
        if (dir == 1) ++x;
        if (dir == 2) ++y;
        if (dir == 3) --x;

        //判断游戏是否结束
        if (x > 25 || x < 0 || y > 25 || y < 0) {
            alert("Game Over!\nYour Score is: " + score);
            location.reload();
        }

        //移动操作
        if (Math.abs(x-o.x) < 1 && Math.abs(y-o.y) < 1) {
            tail++;
            score += Math.ceil((1/tail) * 500);
            o = {x: ~~(Math.random()*width), y: ~~(Math.random()*height)};
        }
        else {
            snake.pop();
        }

        //增加蛇头
        snake.unshift({x: x, y: y});
    }, 60);
}

3. 代码解释

上述代码以 with(document) 开始，使用了JS语言的with语句操作，将document对象作为默认的根对象，简化了代码编写过程。

接下来是一些变量初始化的语句：

a = appendChild(createElement("canvas")).getContext("2d");
width = height = 256;
score = tail = dir = 1;
o = {x: ~~(Math.random()*width), y: ~~(Math.random()*height)};
snake = [{x: ~~(width/2), y: ~~(height/2)}];

其中， appendChild(createElement("canvas")).getContext("2d"); 表示在HTML文档中创建一个画布，并获取绘图环境; o 是食物对象，初始位置为画布中随机的位置； snake 是蛇对象，初始时只有一节身体，即头部。

接下来是键盘监听事件：

onkeydown = function(e){
    dir = (e.which - 37) % 4;
};

当玩家按下左、右、上、下方向键时，会改变蛇的移动方向。

接下来是用于重绘的 setInterval 函数：

setInterval(function(){
    a.fillStyle="#1D1F21";
    a.fillRect(0,0,266,266);
    a.fillStyle="#FFFFFF";
    for (var i=0; i<snake.length; ++i)
        a.fillRect(snake[i].x*10, snake[i].y*10, 9, 9);
    ...
}

它每隔60毫秒就会重新绘制画布，并在画布上绘制蛇的每一个节点。

接下来是判断前进方向：

x = snake[0].x; y = snake[0].y;
if (dir == 0) --y;
if (dir == 1) ++x;
if (dir == 2) ++y;
if (dir == 3) --x;

如果按下键盘操作键，会根据不同的方向修改蛇的坐标。如果出现了游戏规则外的错误，这里将结束游戏，并且将游戏分数进行显示：

//判断游戏是否结束
if (x > 25 || x < 0 || y > 25 || y < 0) {
    alert("Game Over!\nYour Score is: " + score);
    location.reload();
}

接下来实现了吃食物，如果蛇头位置移动到食物位置，则新增一节蛇身，加分并重新布置食物：

if (Math.abs(x-o.x) < 1 && Math.abs(y-o.y) < 1) {
    tail++;
    score += Math.ceil((1/tail) * 500);
    o = {x: ~~(Math.random()*width), y: ~~(Math.random()*height)};
}
else {
    snake.pop();
}

//增加蛇头
snake.unshift({x: x, y: y});

最后，页面将自动重绘。游戏继续下去直到玩家运行出错或关闭页面:

4. 示例说明

示例一

为了让游戏更好玩，您可以自己动手随意更改代码。比如，将上一个实例的 dir = (e.which - 37) % 4; 这行代码更改成 dir = (e.which - 39) % 4; ，这样就能使用上下左右控制蛇运动了。

示例二

当蛇到达画布边缘时，游戏是如何处理的呢？在游戏规则内，蛇不能穿过墙壁，当蛇头碰到墙壁时，游戏就结束并计算出得分。