JavaScript 贪吃蛇游戏的实现

JavaScript 贪吃蛇游戏的实现

前言

游戏介绍：贪吃蛇游戏是一款经典小游戏，既简单又耐玩。通过控制蛇头方向吃蛋，使得蛇变长，从而获得积分。
游戏玩法：上下左右控制蛇的方向，寻找吃的东西，每吃一口就能得到一定的积分，而且蛇的身子会越吃越长，身子越长玩的难度就越大，不能碰墙，不能咬到自己的身体，更不能咬自己的尾巴，等到了一定的分数。

正文

步骤1：创建页面布局，将每一个小格放到数组里面，通过行列构造一个二维数组，方便接下来的判断和一系列的操作。

        var rowNum = 30; //行
        var colNum = 20 //列
        function canvasBG(rowNum, colNum) {
            for(var i = 0; i < rowNum; i++) {
                var row = document.createElement("div");
                var rowArray = [];
                for(var j = 0; j < colNum; j++) {
                    var col = document.createElement("div");
                    col.className = 'col'//每一小格的样式名
                    row.appendChild(col)
                    rowArray.push(col)
                }
                mainDiv.appendChild(row);
                arr.push(rowArray)//arr即为创建的二维数组
            }
        }

步骤2：创建蛇的身体，并通过计时器让蛇身体移动

    //创建蛇身体
    var x=2;//列值
    var y=10//行值
    var sneckBody=[];//用来存放蛇的身体
    //这样蛇初使的位置为第10的前面3个小格，即蛇长度为3；
    function sneck() {
            for(var i = 0; i < 3; i++) {
                arr[y][i].className = 'col activeSneck';//在原有小格样式的基础上，添加新样式，来改变背景颜色，产生蛇的身体
                sneckBody.push(arr[y][i]);
            }
        }
    //控制蛇的移动
    sneckTimer = setInterval(function() {
                    //根据设置的方向来设置蛇头移动的方向。
                    switch(direction) {
                        case 'right':
                            x++;
                            break;
                        case 'left':
                            x--
                            break;
                        case 'up':
                            y--;
                            break;
                        case 'down':
                            y++;
                            break;
                        default:
                            break;
                    }
                        sneckBody[0].className = 'col';
                        sneckBody.shift();
                        arr[y][x].className = 'col activeSneck';
                        sneckBody.push(arr[y][x]);//sneckBody数组专门用来存放蛇的身体
                        }, time)

步骤3：控制蛇的移动，并加判断防止重复按键

var delaytime = null;//定时器
var changeDir = true;
//通过上下左右按键来改变direction的值，来改变蛇头的移动方向。
        document.onkeydown = function(event) {
                //判断是否需要改变方向,ture表示需要改变，false不要
                if(!changeDir) {
                    return; //表示直接结束函数，后续代码不执行；
                }
                var event = window.event || event;
                console.log(event.keyCode)
                //加入判断，防止蛇往移动相反方向跑，出现错误
                switch(event.keyCode) {
                    case 37:
                        if(direction != 'right') {
                            direction = 'left';
                        }
                        break;
                    case 39:
                        if(direction != 'left') {
                            direction = 'right';
                        }
                        break;
                    case 38:
                        if(direction != 'down') {
                            direction = 'up';
                        }
                        break;
                    case 40:
                        if(direction != 'up') {
                            direction = 'down';
                        }
                        break;
                    default:
                        break;
                }
                changeDir = false;
                //加延时以及changeDir解决同时按两个键出现的bug;
                delaytime = setTimeout(function() {
                    changeDir = true;
                }, time)
            }

步骤4：创建食物，通过随机数函数来创建生成食物的位置，并进行判断防止和蛇身重合

        //随机函数
        function random_(max) {
            var rand = Math.floor(Math.random() * max);
            return rand;
        }

        function createEgg() {
            //随机出新的egg的下标的x和y
            eggX = random_(colNum);
            eggY = random_(rowNum);
            //如果即将生蛋的位置和蛇身重合，即className一样
            if(arr[eggY][eggX].className == 'col activeSneck') {
                createEgg(); //重新生成
            } else {
                //否则，给新生的蛋的位置，并且修改样式
                arr[eggY][eggX].className = 'col egg';
            }
        }

步骤5：进行判断：

判断1：蛇跑出边界，游戏结束

if(y < 0 || y >= rowNum || x < 0 || x >= colNum) {
                        alert('game over' + " " + '总分' + score);
                        clearInterval(sneckTimer);
                        return;
                    }

判断2：蛇碰到自己身体，游戏结束

                    //判断蛇吃到自己
                    for(var i = 0; i < sneckBody.length; i++) {
                        if(sneckBody[i] == arr[y][x]) {
                            alert('game over' + " " + '总分' + score);
                            clearInterval(sneckTimer);
                            return;
                        }
                    }

判断3：蛇吃到食物，分数加1，并且继续创建食物

                    //判断蛇头移动的位置是否有蛋
                    if(eggX == x && eggY == y) {
                        arr[eggY][eggX].className = 'col activeSneck'
                        sneckBody.push(arr[eggY][eggX]); //加入到蛇身
                        score++;
                        time -= 100;
                        console.log(time)
                        scoreDiv.innerHTML = '总分:' + score + '分';
                        createEgg();
                    }

通过以上步骤，大家对贪吃蛇游戏的设计思路也有一定的了解了吧，下面附上效果图和源码下载地址：

源码查看下载链接