网络日志

用原生JavaScript写一个贪吃蛇

前言

我的博客

看到掘金上有这样一种效果,感觉很好看,就是那种毛玻璃效果,于是想试试写一个登录页面并且实现遮罩,但是写成了开始游戏,可是光一个开始游戏也没意思,干脆写一个小游戏吧,直接试试贪吃蛇。

如何实现

    <div class="main">
        <!-- 毛玻璃遮罩盒子 -->
        <div id=beginBox>
            <div class="btn" id="begin">开始游戏</div>
        </div>
        <!-- 蛇 -->
        <div class="map" id="map"></div>
    </div>

这是我HTMLbody部分的代码,main是主体,也就是游戏场地。

beginBox是开始游戏的界面,我再这个盒子里面实现了毛玻璃遮罩,还不错。

然后下面那个盒子就是蛇了。

如果你也想试试毛玻璃遮罩效果,可以看看我的css

直接看js代码吧。

首先,我们先定义好全局变量,做好准备。

// 蛇的速度,即计时器的间隔时间
var SnakeTime = 200;
// 蛇的身体
var map = document.getElementById('map');

速度是计时器控制的。

接下来,我们创建一个方法,Snake(),这是蛇整个的构造方法。

我再这个方法里面写了蛇的一些东西。

我的蛇初始是3个10*10的正方形拼成的。

// 设置蛇的宽、高、默认走的方向
    this.width = 10;
    this.height = 10;
    this.direction = 'right';

所以方法里面,我首先确定了宽高,以及使用direction属性确定方向。

然后,我们这个蛇的三个点,需要按照规律排好,我这里使用了一个数组。

this.body = [
    { x: 2, y: 0 },   // 蛇头,第一个点
    { x: 1, y: 0 },   // 蛇脖子,第二个点
    { x: 0, y: 0 }    // 蛇尾,第三个点
];

这还只是蛇的初始化状态哈!蛇还没创建。

然后我们来创建蛇。

定义一个方法。这个方法在snake方法里面。

// 显示蛇
    this.display = function () {
        // 创建蛇
        for (var i = 0; i < this.body.length; i++) {
            if (this.body[i].x != null) {   
                // 当吃到食物时,x==null,不能新建,不然会在0,0处新建一个
                var s = document.createElement('div');
                // 将节点保存到状态中,以便于后面删除
                this.body[i].flag = s;
                // 设置宽高
                s.style.width = this.width + 'px';
                s.style.height = this.height + 'px';
                //设置颜色
                s.style.backgroundColor = 'yellow';
                // 设置位置
                s.style.position = 'absolute';
                s.style.left = this.body[i].x * this.width + 'px';
                s.style.top = this.body[i].y * this.height + 'px';
                // 添加进去
                map.appendChild(s);
            }
        }
        //设置蛇头的颜色
        this.body[0].flag.style.backgroundColor = 'orange';
    };

在这个方法里面,s就是一个div,而body数组的长度是3,我们循环3此,依次追加,就拼成了,头、身、尾。

但是,此时蛇,是出来了,但是不能动啊....

所以在定义一个方法,也是在snake方法里面。

this.run = function () {
        // 后一个元素到前一个元素的位置
        for (var i = this.body.length - 1; i > 0; i--) {
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
        }

        // 根据方向处理蛇头
        switch (this.direction) {
            case "left":
                this.body[0].x -= 1;
                break;
            case "right":
                this.body[0].x += 1;
                break;
            case "up":
                this.body[0].y -= 1;
                break;
            case "down":
                this.body[0].y += 1;
                break;
        }

        // 判断是否出界,根据蛇头判断
        if (this.body[0].x < 0 || this.body[0].x > 150 || this.body[0].y < 0 || this.body[0].y > 60) {
            clearInterval(timer);  
            // 清除定时器
            alert("出界啦,游戏结束!");
            document.getElementById('beginBox').style.display = 'block';
            // 删除旧的
            for (var i = 0; i < this.body.length; i++) {
                if (this.body[i].flag != null) {   
                    // 如果刚吃完就死掉,会加一个值为null的
                    map.removeChild(this.body[i].flag);
                }
            }
            this.body = [   // 回到初始状态,
                { x: 2, y: 0 },
                { x: 1, y: 0 },
                { x: 0, y: 0 }
            ];
            this.direction = 'right';
            this.display();   // 显示初始状态
            return false;   // 结束
        }

        // 判断蛇头吃到食物,xy坐标重合,
        if (this.body[0].x == food.x && this.body[0].y == food.y) {
            // 蛇加一节,因为根据最后节点定,下面display时,会自动赋值的
            this.body.push({ x: null, y: null, flag: null });
            // 获取蛇的长度
            var len = this.body.length;
            // 根据蛇的长度,设置定时器频率SnakeTime
            SnakeTime = SnakeTime - (len - 3) * 5;
            // SnakeTime最低不能小于40
            if (SnakeTime < 40) {
                SnakeTime = 40;
            }
            refresh();
            // 清除食物,重新生成食物
            map.removeChild(food.flag);
            food.display();
        }

        // 吃到自己死亡,从第五个开始与头判断,因为前四个永远撞不到
        for (var i = 4; i < this.body.length; i++) {
            if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
                clearInterval(timer);   // 清除定时器,
                alert("你咬到了自己,游戏结束!");
                // 显示id为beginBox的毛玻璃遮罩盒子
                document.getElementById('beginBox').style.display = 'block';
                // 删除旧的
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].flag != null) {   
                        // 如果刚吃完就死掉,会加一个值为null的
                        map.removeChild(this.body[i].flag);
                    }
                }
                this.body = [   // 回到初始状态,
                    { x: 2, y: 0 },
                    { x: 1, y: 0 },
                    { x: 0, y: 0 }
                ];
                this.direction = 'right';
                this.display();   // 显示初始状态
                return false;   // 结束
            }
        }

        // 先删掉初始的蛇,在显示新蛇
        for (var i = 0; i < this.body.length; i++) {
            if (this.body[i].flag != null) {   
                // 当吃到食物时,flag是等于null,且不能删除
                map.removeChild(this.body[i].flag);
            }
        }
        // 重新显示蛇
        this.display();
    }
}

这段代码有点多哈。我们拆开看。

// 后一个元素到前一个元素的位置
for (var i = this.body.length - 1; i > 0; i--) {
      this.body[i].x = this.body[i - 1].x;
      this.body[i].y = this.body[i - 1].y;
}

首先,蛇是一节节动的,所以我们使用循环,让他后一个替代前一个的位置。

然后,根据direction属性来判断方向。

    // 根据方向处理蛇头
        switch (this.direction) {
            case "left":
                this.body[0].x -= 1;
                break;
            case "right":
                this.body[0].x += 1;
                break;
            case "up":
                this.body[0].y -= 1;
                break;
            case "down":
                this.body[0].y += 1;
                break;
        }

然后,我们就要定义出界后游戏结束了,这个就不多说了。

// 判断是否出界,根据蛇头判断
        if (this.body[0].x < 0 || this.body[0].x > 150 || this.body[0].y < 0 || this.body[0].y > 60) {
            clearInterval(timer);  
            // 清除定时器
            alert("出界啦,游戏结束!");
            document.getElementById('beginBox').style.display = 'block';
            // 删除旧的
            for (var i = 0; i < this.body.length; i++) {
                if (this.body[i].flag != null) {   
                    // 如果刚吃完就死掉,会加一个值为null的
                    map.removeChild(this.body[i].flag);
                }
            }
            this.body = [   // 回到初始状态,
                { x: 2, y: 0 },
                { x: 1, y: 0 },
                { x: 0, y: 0 }
            ];
            this.direction = 'right';
            this.display();   // 显示初始状态
            return false;   // 结束
        }

这里的x和y都是整体的px/蛇的盒子高宽,也就是除10,1 = 10px

然后,就是吃食物了。

当蛇头与食物相遇,我们就认为它吃了食物,于是我们通过位置来判断吃东西。

        // 判断蛇头吃到食物,xy坐标重合,
        if (this.body[0].x == food.x && this.body[0].y == food.y) {
            // 蛇加一节,因为根据最后节点定,下面display时,会自动赋值的
            this.body.push({ x: null, y: null, flag: null });
            // 获取蛇的长度
            var len = this.body.length;
            // 根据蛇的长度,设置定时器频率SnakeTime
            SnakeTime = SnakeTime - (len - 3) * 5;
            // SnakeTime最低不能小于40
            if (SnakeTime < 40) {
                SnakeTime = 40;
            }
            refresh();
            // 清除食物,重新生成食物
            map.removeChild(food.flag);
            food.display();
        }

说明一下:这个flag是当时创建食物时留下的一个对象。

创建食物方法我写在了后面,一步步看吧。

而下面这部分代码:

            // 获取蛇的长度
            var len = this.body.length;
            // 根据蛇的长度,设置定时器频率SnakeTime
            SnakeTime = SnakeTime - (len - 3) * 5;
            // SnakeTime最低不能小于40
            if (SnakeTime < 40) {
                SnakeTime = 40;
            }

是为了可以动态的实现蛇吃到食物后,速度加快。

这里,我有一个refresh();这个后面再看。

然后就是咬到自己,游戏结束,这个不多说。

现在就到了构造食物了。

// 构造食物
function Food() {
    this.width = 10;
    this.height = 10;

    this.display = function () {
        // 创建一个div(一节蛇身)
        var f = document.createElement('div');
        this.flag = f;
        f.style.width = this.width + 'px';
        f.style.height = this.height + 'px';
        f.style.background = 'red';
        f.style.position = 'absolute';
        this.x = Math.floor(Math.random() * 80);
        this.y = Math.floor(Math.random() * 40);
        f.style.left = this.x * this.width + 'px';
        f.style.top = this.y * this.height + 'px';
        map.appendChild(f);
    }
}

实际上,这个“食物”就是创建了蛇的一节身体。

后面也可以看见,有一个追加到蛇身。

 map.appendChild(f);

看到这,你可能还疑惑,不应该啊,这也无法分辨出明确的蛇和食物啊,也就是说,很抽象啊。

因为我最后面,还有一个创建对象过程。

var snake = new Snake();
var food = new Food();
// 初始化显示
snake.display();   
food.display();

将方法作为了一个对象。

而我们为了控制蛇的方向,我们需要使用键盘事件来改变蛇的属性。

// 给body加按键事件,上下左右
document.body.onkeydown = function (e) {
    // 有事件对象就用事件对象,没有就自己创建一个,兼容低版本浏览器
    var ev = e || window.event;

    switch (ev.keyCode) {
        case 38:
            if (snake.direction != 'down') {   // 不允许返回,向上的时候不能向下
                snake.direction = "up";
            }
            break;
        case 40:
            if (snake.direction != "up") {
                snake.direction = "down";
            }
            break;
        case 37:
            if (snake.direction != "right") {
                snake.direction = "left";
            }
            break;
        case 39:
            if (snake.direction != "left") {
                snake.direction = "right";
            }
            break;
        // 兼容WASD键    
        case 87:
            if (snake.direction != "down") {
                snake.direction = "up";
            }
            break;
        case 83:
            if (snake.direction != "up") {
                snake.direction = "down";
            }
            break;
        case 65:
            if (snake.direction != "right") {
                snake.direction = "left";
            }
            break;
        case 68:
            if (snake.direction != "left") {
                snake.direction = "right";
            }
            break;
    }
    
};

当然,我这里做了兼容,WASD和上下左右键都通用控制。

最后就是点击开始游戏的事件了。

// 获取开始按钮
var btn = document.getElementById('begin');
// 点击开始游戏事件
btn.onclick = function () {
    // 开始按钮毛玻璃幕布
    var parent = this.parentNode;
    // 隐藏开始按钮
    parent.style.display = 'none';
    // 获取定时器时间
    let time = SnakeTime;

    timer = setInterval(function () {
        snake.run();
    }, time);
}

我们这里面是使用了setInterval来实现不断的前进走动。

    timer = setInterval(function () {
        snake.run();
    }, time);

但是啊,因为这个计时器他是不刷新的,也就是说启动时,time = 200,然后你改变time的值。

此时time值确实变了,但是,这个setInterval它只认定第一次的设置,它不会动态改变。

那怎么办呢?首先,分析,他要什么时候做出time值的刷新,肯定是吃到食物的时候对吧。

于是,我们写一个刷新函数。

// 定义刷新定时器方法
function refresh() {
    // 停止定时器
    clearInterval(timer);
    // 刷新定时器
    timer = setInterval(function () {
        snake.run();
        console.log(SnakeTime);
    }, SnakeTime);
}

然后,你们就知道我上面说的refresh()方法是什么了吧?就是用于动态刷新setInterval的。

这样,这个贪吃蛇就写好了。

效果

开始页面

游戏界面

完整源码

GithubJanYork/Snake

Giteejanyork/Snake