Javascript实现贪吃蛇小游戏（含详细注释）

这篇文章是一篇关于如何使用JavaScript实现贪吃蛇小游戏的完整攻略。贪吃蛇是一个非常受欢迎的游戏，它的基本玩法是控制一条蛇去吃食物，使得蛇能够不断变长。下面，我们将带领大家逐步完成贪吃蛇小游戏的开发。

第一步 - HTML

我们需要一个HTML页面来显示我们的贪吃蛇游戏。以下是一个基本的HTML模板，用于创建我们的页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇小游戏</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

在这个HTML文件中，我们做了以下事情：

添加一个canvas元素，用于绘制我们的游戏；
引用我们的javascript代码。

第二步 - CSS

为了让我们的页面显得更加美观，我们需要添加一些CSS样式。以下是一个基本的CSS样式表：

body {
    background-color: #3B3B3B;
}

canvas {
    display: block;
    margin: auto;
    background-color: #FFFFFF;
}

在这个CSS文件中，我们做了以下事情：

设置了页面的背景颜色；
设置了canvas元素的样式；
让canvas元素水平居中。

第三步 - 创建canvas和绘制蛇

接下来，我们需要开始编写Javascript代码了。我们首先创建一个表示游戏的类Game，然后在它的构造函数中创建一个画布(canvas)和绘制蛇的方法。

class Game {
    constructor() {
        this.canvas = document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");

        this.snake = new Snake(this.ctx);
    }

    drawSnake() {
        this.snake.draw();
    }
}

class Snake {
    constructor(ctx) {
        this.ctx = ctx;
        this.x = 0;
        this.y = 0;
        this.width = 20;
        this.height = 20;
        this.body = [
            {x: this.x, y: this.y},
            {x: this.x + this.width, y: this.y},
            {x: this.x + 2 * this.width, y: this.y}
        ];
    }

    draw() {
        for (let i = 0; i < this.body.length; i++) {
            const {x, y} = this.body[i];
            this.ctx.fillStyle = "green";
            this.ctx.fillRect(x, y, this.width, this.height);
        }
    }
}

在这个代码中，我们做了以下几件事情：

创建了一个表示游戏的类Game，它拥有一个画布(this.canvas)和一个绘制蛇的方法(drawSnake)；
创建了一个表示蛇的类Snake，它拥有一个绘制方法(draw)，使用绿色填充蛇的每个部分。

第四步 - 控制蛇的移动

我们现在拥有了一个能够绘制蛇的游戏类，但我们的蛇还没有移动了。为了使蛇动起来，我们必须编写一些代码来控制它的移动。

我们需要为蛇创建一个方向，以确定它的下一个位置(上下左右)。我们也需要一个计时器来每个一定的时间间隔更新蛇的位置。

class Game {
    constructor() {
        this.canvas = document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");

        this.snake = new Snake(this.ctx);
        this.direction = "";

        this.timer = setInterval(this.update.bind(this), 1000 / 10); // 10帧每秒
    }

    onKeyDown(event) {
        switch(event.keyCode) {
            case 37: // left arrow
                this.direction = "left";
                break;
            case 38: // up arrow
                this.direction = "up";
                break;
            case 39: // right arrow
                this.direction = "right";
                break;
            case 40: // down arrow
                this.direction = "down";
                break;
        }
    }

    update() {
        // 根据方向更新蛇的位置
        switch(this.direction) {
            case "left":
                this.snake.x -= this.snake.width;
                break;
            case "up":
                this.snake.y -= this.snake.height;
                break;
            case "right":
                this.snake.x += this.snake.width;
                break;
            case "down":
                this.snake.y += this.snake.height;
                break;
        }

        this.drawSnake();
    }
}

document.addEventListener("keydown", (event) => {
    game.onKeyDown(event);
});

在这个代码中，我们做了以下几件事情：

在Game类的构造函数中，我们创建了一个计时器，并在每帧更新后调用update方法；
我们为键盘上的上下左右键注册了一个事件监听器，每当这些键被按下时，它们就会更新蛇的方向(this.direction)；
在update方法中，根据蛇的方向更新它的位置，然后重新绘制蛇。

第五步 - 添加食物

我们已经可以控制蛇的移动了，但是还没有任何东西可以让它吃了。接下来，我们需要添加一些食物供蛇吃。

class Game {
    constructor() {
        this.canvas = document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");

        this.snake = new Snake(this.ctx);
        this.direction = "";

        this.food = this.createFood();

        this.timer = setInterval(this.update.bind(this), 1000 / 10);
    }

    createFood() {
        const x = Math.floor(Math.random() * this.canvas.width / this.snake.width) * this.snake.width;
        const y = Math.floor(Math.random() * this.canvas.height / this.snake.height) * this.snake.width;

        return {x, y};
    }

    drawFood() {
        this.ctx.fillStyle = "red";
        this.ctx.fillRect(this.food.x, this.food.y, this.snake.width, this.snake.height);
    }

    update() {
        switch(this.direction) {
            case "left":
                this.snake.x -= this.snake.width;
                break;
            case "up":
                this.snake.y -= this.snake.height;
                break;
            case "right":
                this.snake.x += this.snake.width;
                break;
            case "down":
                this.snake.y += this.snake.height;
                break;
        }

        if (this.snake.x === this.food.x && this.snake.y === this.food.y) {
            this.food = this.createFood();
            this.snake.body.push({});
        }

        this.drawSnake();
        this.drawFood();
    }
}

在这个代码中我们做了以下几件事情：

创建了一个createFood方法来生成一个随机的食物位置；
编写了一个drawFood方法，在canvas上以红色填充食物的位置；
在update方法中，检查蛇是否碰到了食物，如果是，就创建一个新的食物，然后向蛇的身体添加一个新的部分。

示例说明

在添加完食物后，我们的贪吃蛇游戏已经取得了很大的进展。我们现在可以控制蛇的移动，并且能够吃到食物。下面我们将给出两个具体的示例说明。

示例一

假设在某个时间点，蛇的位置为(x:0, y:0)，食物的位置为(x:20, y:0)，它的方向为右。

update()方法被调用时，根据方向，snake.x变为20。
由于新的位置和食物位置相对应，if语句执行，然后createFood()方法再次被调用，以生成一个新的食物位置。
向蛇的body添加一个新的部分。
drawSnake()和drawFood()方法再次被调用，在canvas上绘制出更新后的蛇和食物。

示例二

现在假设在某个时间点，蛇的位置为(x:0, y:0)，食物的位置为(x:20, y:0)，它的方向为向上。

update()方法被调用时，根据方向，snake.y变为-20。
蛇离开了canvas区域，没有吃到食物。
drawSnake()和drawFood()方法再次被调用，在canvas上绘制出更新后的蛇和食物。

至此，我们已完成了贪吃蛇小游戏的制作。通过这个简单的实例，我们学习了如何使用JavaScript实现游戏，同时了解了Canvas和HTML5中的其他重要概念。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript实现贪吃蛇小游戏（含详细注释） - Python技术站