JavaScript制作贪吃蛇小游戏

最新推荐文章于 2023-06-17 08:51:35 发布

实习期小潘

最新推荐文章于 2023-06-17 08:51:35 发布

阅读量7.5k

点赞数 23

分类专栏：知识点拓展应用文章标签： javascript 开发语言游戏

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/122277887

版权

本文档介绍了如何使用JavaScript从零开始制作贪吃蛇小游戏。通过Game.js、Snake.js和Food.js三个文档分别实现游戏的基本框架、蛇的运动逻辑以及食物的生成。在制作过程中，你将了解到游戏的原理，包括蛇的‘头增尾删’运动机制，以及如何通过监听事件控制蛇的移动，同时设置边界和自我碰撞的判断条件。附带完整源代码供参考，让你体验编程的乐趣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

原理分析

我们制作前为了代码更清晰就分成几个js文档来编写。

其中Game.js可以看作是一个媒介的作用；Snake.js是当蛇初始化时在最左边向右走的状态；

贪吃蛇在游戏中的运动可以想象成这条蛇是在一张25*25的表格中运动：

如图所示

Game.js文档

📝所以我们在Game.js中添加表格节点：

function Game() {
    this.row = 25;
    this.col = 25;

}

Game.prototype.init = function() {
    this.dom = document.createElement('table');
    // 创建表格--父元素为document（页面中创建表格）
    // var tr, td;
    for (var i = 0; i < this.row; i++) { //追加行
        var tr = document.createElement('tr');
        for (var j = 0; j < this.td; j++) { //追加列
            var td = document.createElement('col');
            td.appendChild(tr);
        }
    }
};

Snake.js文档

📝Snake.js中当蛇初始化时在最左边向右走的状态：

如图所示

function Snake() {
    // 蛇的初始化身体
    this.body = [
        { 'row': 3, 'col': 5 },
        { 'row': 3, 'col': 4 },
        { 'row': 3, 'col': 3 },
        { 'row': 3, 'col': 2 }
    ];
}
Snake.prototype.render = function() {
    // 蛇头的渲染
    game.setColorHead(this.body[0].row, this.body[0].col.'pink');
    // 蛇身的渲染
    for (var i = 1; i < this.body.length; i++) {
        game.setColor(this.body[i].row, this.body[i].col, 'cyan')
    }
}

当蛇在运动的时候它的原理是“头增尾删”。

因为蛇的长度先是不变的，而我们改变的也是改变这个四个格子的颜色，走一格头部那一格颜色变为粉色，尾巴那一格的颜色变为白色。

✨接下来让蛇通过我们按键来进行运动：放在一个监听事件内

// 设置键盘的事件监听
Game.prototype.bindEvent = function() {
    var self = this;
    document.addEventListener('keydown', function(e) {
        // 用ASCII码值判断键盘方向
        switch (e.keyCode) {
            case 37: //左
                if (self.snake.direction == 'R') return; // 先进行判断，如果当前的方向是向右移动，此时我们不能按左键
                self.snake.changeDirection('L');
                self.d = 'L';
                break;
            case 38: //上
                if (self.snake.direction == 'D') return; //