使用原生js编写贪吃蛇小游戏

贪吃蛇小游戏大家都不陌生，基本上都玩过，而使用js,也能够编写出各种各样的小游戏，今天就写一下贪吃蛇这个经典小游戏

效果图：

html代码

代码没啥可说的，两个下拉框分别对应着游戏棋盘大小和贪吃的速度

css代码

原本还用弹性布局将#box居中的，但截不了那么长的图，就省略了，如果感觉不好看，可以自己编写样式

下面是加上代码，提醒一句，js代码太多了（两百多行），最好单独写一个文件，这里为了方便，就不更改了，一篇文章写下来了

js代码
`// 第一步写的东西 把游戏中的 一些公共的数据值 封装在一个公共的对象里
var Common = new function () {
this.width = 20; //x方向的格子数 默认是20 可以根据后面的程序中需要改变
this.height = 20;
// speed 速度
this.speed = 250; //这个值越小 蛇跑的越快
this.workThread = null;

}

// 对蛇的行走方向进行封装
var Direction = new function () {
// 左键
this.LEFT = 37;
// 上键
this.UP = 38;
// 右键
this.RIGHT = 39;
// 下键
this.DOWN = 40;
}
// 把位置封装为一个构造函数
var Position = function (x, y) {
this.X = 0;
this.Y = 0;
if (arguments.length >= 1) this.X = x;
if (arguments.length >= 2) this.Y = y;
}
// 食物的构造函数
function Food() {
// 食物的位置
this.pos = new Position(); //初始化 食物的位置 在0.0; 在后面的程序中要实现位置是随机的
// 下面的是真正的实现创造食物，创建的过程中必须要考虑三个限制
// 食物的位置是随机的
// 食物的位置不能出界
// 食物的位置不能在蛇的身上
this.Create = function (snakePos) { //蛇的身体占据的位置参数的形式传进来
// 创建食物的第一个步骤 消除上一个食物 消除上一个食物的背景颜色
document.getElementById('box_' + this.pos.X + '' + this.pos.Y).className = '';
var x = 0;
var y = 0;
var flag = false;
// 生成的食物不能在蛇的身上出现
do {
// 搞两个随机数坐标值
x = Math.round(Math.random() * (Common.width - 1));
y = Math.round(Math.random() * (Common.height - 1));
// 把上面生成的随机数排除出蛇的身体
if (snakePos instanceof Array) {
for (var i = 0; i < snakePos.length; i++) {
if (x == snakePos[i].X && y == snakePos[i].Y) {
flag = true;
break // 这里结束的是for循环
}
}
}
} while (flag);
// 最后跳出了do while 循环得到的x y值就一定不是蛇身上的位置 坐标 也是随机的 也是不出界的
this.pos = new Position(x, y);
document.getElementById('box' + x + '' + y).className = 'food';
}
}
// 定义蛇的构造函数
function Snake() {
// 判断蛇动的过程中 还是刚刚动完
this.isDone = false;
// 默认蛇移动方向是右边
this.dir = Direction.RIGHT;
// 默认蛇初始的情况 身体长度为1个格子 位置(0,0)
this.pos = new Array(new Position());
// 实现蛇的移动
this.Move = function () {
// 第一步擦屁股
document.getElementById('box' + this.pos[0].X + '_' + this.pos[0].Y).className = '';

    // 第二步 除了蛇头野外 每一个蛇的身体部分 向前蠕动一步
    for (var i = 0; i < this.pos.length - 1; i++) {
        console.log(this.pos);
        this.pos[i].X = this.pos[i + 1].X;
        this.pos[i].Y = this.pos[i + 1].Y;
    }
    var head = this.pos[this.pos.length - 1]
    // 第三步重新给蛇整一个头
    switch (this.dir) {
        case Direction.LEFT:
            head.X--;
            break;
        case Direction.RIGHT:
            head.X++;
            break;
        case Direction.UP:
            head.Y--;
            break;
        case Direction.DOWN:
            head.Y++;
            break;
    }
    this.pos[this.pos.length - 1] = head;

    // 画蛇  如果蛇在上一步的移动中死掉了 就没有画的必要了
    // 在画蛇之前 判断蛇死没死
    // 1.蛇跑出界 2.咬到自己
    for (var i = 0; i < this.pos.length; i++) {
        var idExits = false; //蛇有没有 有没有咬到自己的标记  true 表示咬到了
        for (var j = i + 1; j < this.pos.length; j++) {
            if (this.pos[i].X == this.pos[j].X && this.pos[i].Y == this.pos[j].Y) {
                idExits = true;
                break;
            }
        }
        if (idExits) {
            // game  over  蛇咬到自己 游戏结束
            this.Over();
            break;
        }
        // 再循环中  游戏没有结束 证明蛇没有咬到自己
        // 继续判断 蛇有没有跑出界
        var std = document.getElementById('box_' + this.pos[i].X + '_' + this.pos[i].Y);
        if (std) {
            // 表示蛇没有出界
            // 画出蛇的身体
            std.className = "snake";
        } else {
            // 蛇出界了
            this.Over();
            break
        }
    }
    this.isDone = true;
}
// 此方法表示游戏结束
this.Over = function () {
    clearInterval(Common.workThread);
    alert('游戏结束')
}
this.isDone = true;
// 设置蛇新的方向
this.setDir = function (dir) {
    switch (dir) {
        case Direction.UP:
            if (this.isDone && this.dir != Direction.DOWN) {
                this.dir = Direction.UP;
                this.isDone = false;
            }
            break;
        case Direction.DOWN:
            if (this.isDone && this.dir != Direction.UP) {
                this.dir = Direction.DOWN;
                this.isDone = false;
            }
            break;
        case Direction.LEFT:
            if (this.isDone && this.dir != Direction.RIGHT) {
                this.dir = Direction.LEFT;
                this.isDone = false;
            }
            break;
        case Direction.RIGHT:
            if (this.isDone && this.dir != Direction.LEFT) {
                this.dir = Direction.RIGHT;
                this.isDone = false;
            }
            break;
    }



}
this.Eat = function (food) {

    var head = this.pos[this.pos.length - 1];
    var isEat = false; //false  表示蛇没得吃 true 表示 蛇有的吃
    switch (this.dir) {
        case Direction.UP:
            console.log(head.X);
            console.log(food.pos);

            if (head.X == food.pos.X && head.Y == food.pos.Y + 1) {
                // console.log(000);
                isEat = true;
            }
            break;
        case Direction.RIGHT:
            if (head.X == food.pos.X - 1 && head.Y == food.pos.Y) {
                // console.log(000);
                isEat = true;
                console.log(true);
            }
            break;
        case Direction.DOWN:
            if (head.X == food.pos.X && head.Y == food.pos.Y - 1) {
                // console.log(000);
                isEat = true;
                console.log(true);
            }
            break;
        case Direction.LEFT:
            if (head.X - 1 == food.pos.X && head.Y == food.pos.Y) {
                // console.log(000);
                isEat = true;
                console.log(true);
            }
            break;

    }
    if (isEat) {
        // 实现吃的动作
        // console.log(0);
        this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y)
        food.Create(this.pos)
    }
}

}

function init() {
var html = [];
html.push("");
for (var y = 0; y < Common.height; y++) {
html.push('')
for (var x = 0; x < Common.width; x++) {
html.push('<td id=box_' + x + '_' + y + '> ');
}
html.push('')
}
html.push('

')
var tableStr = html.join('')
var panel = document.getElementById('panel');
panel.innerHTML = tableStr
}

// window.onload 函数在页面以及页面资源刚刚加载完成后立即执行的函数体
window.onload = function () {
// addEventListener() 方法用于向指定元素添加事件句柄。
// document.addEventListener('keydown', function (ev) {
// var evt = window.event || ev;
// })
// 初始化格子
init();

document.getElementById('btnSart').onclick = function () {
    var snakePos = [new Position(0, 0)];
    var food = new Food();
    food.Create(snakePos);
    var snake = new Snake();
    Common.workThread = setInterval(function () {
        snake.Eat(food);
        snake.Move();
        document.addEventListener('keydown', function (evt) {
            var evnt = window.event || evt;
            snake.setDir(evnt.keyCode);
        }, false)
    }, Common.speed)
}
document.getElementById('selSize').onchange = function () {
    Common.width = this.value;
    Common.height = this.value;
    init()
}
document.getElementById('selSpeed').onchange = function () {
    Common.speed = this.value;

    init()
}

}`

全部代码就这些了，写完就能完成贪吃蛇游戏了，另外，如果想研究更多的小游戏源码，可以去源码之家（https://www.mycodes.net）看看，里面不但有很多小游戏源码，还有很多的工具软件和网站模板，个人来讲，这个网站还是不错的，感兴趣的小伙伴可以去转一转。