ZetCode

JavaScript 贪吃蛇教程

最后修改于 2023 年 10 月 18 日

在本文中，我们将展示如何在 JavaScript 中创建一个贪吃蛇游戏。 图像和源代码可在作者的 Github 仓库 JavaScript-Snake-Game 中找到。

贪吃蛇游戏

贪吃蛇 是一款经典的早期视频游戏，最早于 70 年代后期创建。 后来它被移植到个人电脑上。 在这款游戏中，玩家控制一条蛇。 目标是吃掉尽可能多的苹果。 每次蛇吃掉一个苹果时，它的身体就会增长。 蛇必须避开墙壁和它自己的身体。 这款游戏有时被称为 Nibbles。

HTML5 Canvas

HTML5 canvas 元素提供一个依赖于分辨率的位图区域，可用于即时渲染图形、游戏图形、艺术或其他视觉图像。 简单来说，canvas 是 HTML5 中的一个新元素，它允许您使用 JavaScript 绘制图形。 Canvas 为网页带来了动画效果，而无需像 Flash、Silverlight 或 Java 这样的插件。

JavaScript 贪吃蛇代码示例

蛇的每个关节的大小是 10 像素。 蛇由光标键控制。 最初，蛇有三个关节。 如果游戏结束，“游戏结束”消息将显示在画布的中间。

index.html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Snake game</title>
<style>
    canvas {background: black}
</style>

<script src="snake.js"></script>
</head>

<body onload="init();">
    <canvas id="myCanvas" width="300" height="300">
    </canvas>
</body>
</html>

这是 HTML 源代码。 我们将 JavaScript 源代码放在 snake.js 文件中。

<canvas id="myCanvas" width="300" height="300">
</canvas>

我们创建一个 canvas 对象。 它是我们游戏的渲染区域。

snake.js 
// JavaScript Snake example
// Author Jan Bodnar
// https://zetcode.cn/javascript/snake/

var canvas;
var ctx;

var head;
var apple;
var ball;

var dots;
var apple_x;
var apple_y;

var leftDirection = false;
var rightDirection = true;
var upDirection = false;
var downDirection = false;
var inGame = true;

const DOT_SIZE = 10;
const ALL_DOTS = 900;
const MAX_RAND = 29;
const DELAY = 140;
const C_HEIGHT = 300;
const C_WIDTH = 300;

const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;

var x = new Array(ALL_DOTS);
var y = new Array(ALL_DOTS);

function init() {

    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');

    loadImages();
    createSnake();
    locateApple();
    setTimeout("gameCycle()", DELAY);
}

function loadImages() {

    head = new Image();
    head.src = 'head.png';

    ball = new Image();
    ball.src = 'dot.png';

    apple = new Image();
    apple.src = 'apple.png';
}

function createSnake() {

    dots = 3;

    for (var z = 0; z < dots; z++) {
        x[z] = 50 - z * 10;
        y[z] = 50;
    }
}

function checkApple() {

    if ((x[0] == apple_x) && (y[0] == apple_y)) {

        dots++;
        locateApple();
    }
}

function doDrawing() {

    ctx.clearRect(0, 0, C_WIDTH, C_HEIGHT);

    if (inGame) {

        ctx.drawImage(apple, apple_x, apple_y);

        for (var z = 0; z < dots; z++) {

            if (z == 0) {
                ctx.drawImage(head, x[z], y[z]);
            } else {
                ctx.drawImage(ball, x[z], y[z]);
            }
        }
    } else {

        gameOver();
    }
}

function gameOver() {

    ctx.fillStyle = 'white';
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.font = 'normal bold 18px serif';

    ctx.fillText('Game over', C_WIDTH/2, C_HEIGHT/2);
}

function checkApple() {

    if ((x[0] == apple_x) && (y[0] == apple_y)) {

        dots++;
        locateApple();
    }
}

function move() {

    for (var z = dots; z > 0; z--) {

        x[z] = x[(z - 1)];
        y[z] = y[(z - 1)];
    }

    if (leftDirection) {

        x[0] -= DOT_SIZE;
    }

    if (rightDirection) {

        x[0] += DOT_SIZE;
    }

    if (upDirection) {

        y[0] -= DOT_SIZE;
    }

    if (downDirection) {

        y[0] += DOT_SIZE;
    }
}

function checkCollision() {

    for (var z = dots; z > 0; z--) {

        if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
            inGame = false;
        }
    }

    if (y[0] >= C_HEIGHT) {

        inGame = false;
    }

    if (y[0] < 0) {

       inGame = false;
    }

    if (x[0] >= C_WIDTH) {

      inGame = false;
    }

    if (x[0] < 0) {

      inGame = false;
    }
}

function locateApple() {

    var r = Math.floor(Math.random() * MAX_RAND);
    apple_x = r * DOT_SIZE;

    r = Math.floor(Math.random() * MAX_RAND);
    apple_y = r * DOT_SIZE;
}

function gameCycle() {

    if (inGame) {

        checkApple();
        checkCollision();
        move();
        doDrawing();
        setTimeout("gameCycle()", DELAY);
    }
}

onkeydown = function(e) {

    var key = e.keyCode;

    if ((key == LEFT_KEY) && (!rightDirection)) {

        leftDirection = true;
        upDirection = false;
        downDirection = false;
    }

    if ((key == RIGHT_KEY) && (!leftDirection)) {

        rightDirection = true;
        upDirection = false;
        downDirection = false;
    }

    if ((key == UP_KEY) && (!downDirection)) {

        upDirection = true;
        rightDirection = false;
        leftDirection = false;
    }

    if ((key == DOWN_KEY) && (!upDirection)) {

        downDirection = true;
        rightDirection = false;
        leftDirection = false;
    }
};

这是 JavaScript 贪吃蛇的源代码。

const DOT_SIZE = 10;
const ALL_DOTS = 900;
const MAX_RAND = 29;
const DELAY = 140;
const C_HEIGHT = 300;
const C_WIDTH = 300;

DOT_SIZE 是苹果和蛇的点的尺寸。 ALL_DOTS 常量定义了画布上可能的最大点数 (900 = 300*300/10*10)。 MAX_RAND 常量用于计算苹果的随机位置。 DELAY 常量决定游戏的进度。 C_HEIGHT 和 C_WIDTH 常量存储画布的尺寸。

const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;

这些常量存储了箭头键的值。 它们用于提高可读性。

var x = new Array(ALL_DOTS);
var y = new Array(ALL_DOTS);

这两个数组存储了蛇的所有关节的 x 和 y 坐标。

function init() {

    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');

    loadImages();
    createSnake();
    locateApple();
    setTimeout("gameCycle()", DELAY);
}

init 函数获取对 canvas 对象及其上下文的引用。 调用 loadImages、createSnake 和 locateApple 函数来执行特定任务。 setTimeout 启动动画。

function loadImages() {

    head = new Image();
    head.src = 'head.png';

    ball = new Image();
    ball.src = 'dot.png';

    apple = new Image();
    apple.src = 'apple.png';
}

在 loadImages 函数中，我们为游戏加载三张图片。

function createSnake() {

    dots = 3;

    for (var z = 0; z < dots; z++) {
        x[z] = 50 - z * 10;
        y[z] = 50;
    }
}

在 createSnake 函数中，我们创建蛇对象。 在开始时，它有三个关节。

function checkApple() {

    if ((x[0] == apple_x) && (y[0] == apple_y)) {

        dots++;
        locateApple();
    }
}

如果头部与苹果碰撞，我们增加蛇的关节数。 我们调用 locateApple 方法，该方法随机定位一个新的苹果对象。

function move() {
...

在 move 方法中，我们有游戏的关键算法。 为了理解它，请查看蛇是如何移动的。 我们控制蛇的头部。 我们可以使用光标键更改其方向。 其余的关节沿链向上移动一个位置。 第二个关节移动到第一个关节所在的位置，第三个关节移动到第二个关节所在的位置，等等。

for (var z = dots; z > 0; z--) {

    x[z] = x[(z - 1)];
    y[z] = y[(z - 1)];
}

for 循环将蛇的关节沿链向上移动。

if (leftDirection) {

    x[0] -= DOT_SIZE;
}

此行将头部向左移动。

function checkCollision() {
...

在 checkCollision 方法中，我们确定蛇是否撞到了自己或边界之一。

for (var z = dots; z > 0; z--) {

    if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
        inGame = false;
    }
}

如果蛇用头部撞到它的一个关节，游戏就结束了。

if (y[0] >= C_HEIGHT) {

    inGame = false;
}

如果蛇撞到画布的底部，游戏就结束了。

function locateApple() {

    var r = Math.floor(Math.random() * MAX_RAND);
    apple_x = r * DOT_SIZE;

    r = Math.floor(Math.random() * MAX_RAND);
    apple_y = r * DOT_SIZE;
}

locateApple 随机选择苹果对象的 x 和 y 坐标。 apple_x 和 apple_y 是苹果图像的左上角的坐标。

function gameCycle() {

    if (inGame) {

        checkApple();
        checkCollision();
        move();
        doDrawing();
        setTimeout("gameCycle()", DELAY);
    }
}

gameCycle 函数形成一个游戏循环。 假设游戏尚未结束，我们执行碰撞检测、移动和绘制。 setTimeout 函数递归地调用 gameCycle 函数。

if ((key == LEFT_KEY) && (!rightDirection)) {

    leftDirection = true;
    upDirection = false;
    downDirection = false;
}

如果我们按下左光标键，我们将 leftDirection 变量设置为 true。 此变量用于 move 函数中以更改蛇对象的坐标。 还要注意，当蛇向右移动时，我们无法立即向左转。

Snake game
图：贪吃蛇游戏

来源

贪吃蛇游戏

这就是 JavaScript 贪吃蛇游戏。

作者

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。 自 2007 年以来，我一直在撰写编程文章。 迄今为止，我撰写了 1,400 多篇文章和 8 本电子书。 我拥有超过十年的编程教学经验。

查看 所有 JavaScript 教程。