怎么用JavaScript写一个贪吃蛇游戏

本篇内容介绍了"怎么用JavaScript写一个贪吃蛇游戏"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

首先我们要确定贪吃蛇应有的功能

1.通过键盘的上下左右控制蛇的移动方向

2.边界判定，即蛇头超出边界则游戏结束

3.碰撞判定，即蛇头和食物块发生触碰

4.吃到食物积分加1

具体实现

一.html代码

                
                        
                        
        
                
            
得分
        

二.css代码

三.开始实现具体功能

1.先获取节点，设置全局变量

//获取节点        var snake = document.getElementById("snake");        var food = document.getElementById("food");        var playground = document.getElementById("playground");        var score = document.getElementById('score');        // var inp = document.getElementById('inp')        /*设置全局变量*/        var timer;        var arr = []; //存放蛇的位置的数组        var num = 0; //数组的长度        var snakeBody; //每次吃调一个食物，增加的身体

2.设置按键事件，并判断边界碰撞，碰撞时游戏结束。这一块代码我遇到了一个问题，就是当我用if(){return}跳出事件，会结束所有代码，后面的代码就不会执行了，然后我换成了switch（）{ case: break;}就实现效果了

 //设置按键事件        _document.onkeydown = function (e) {            var evt = window.evnet || e;            switch (evt.keyCode) {                case 37: //左                    clearInterval(timer);                    timer = window.setInterval(runLeft, 10); //向左移动的时间器                    function runLeft() {                        if (snake.offsetLeft > 0) {                            snake.style.left = snake.offsetLeft - 1 + 'px'; //实现自己动                            snake.style.top = snake.offsetTop + 'px'; //高度不变                            arr.push([snake.offsetLeft, snake.offsetTop]); //每移动1px，就将位置存进数组中                            num++; //相应的数组长度加1                        } else {                            clearInterval(timer); //清除定时器                            alert('you die') //弹出失败信息                            _document.onkeydown = null //结束按键                        }                    }                    break; //结束当前按键                case 38: //上                    clearInterval(timer);                    timer = window.setInterval(runTop, 10);                     function runTop() {                        if (snake.offsetTop > 0) {                            snake.style.top = snake.offsetTop - 1 + 'px';                            snake.style.left = snake.offsetLeft + 'px';                            arr.push([snake.offsetLeft, snake.offsetTop]);                            num++;                        } else {                            clearInterval(timer);                            alert('you die')                            _document.onkeydown = null                        }                    }                    break;                case 39: //右                    clearInterval(timer);                    timer = window.setInterval(runRight, 10);                     function runRight() {                        if (snake.offsetLeft < 630) {                            snake.style.left = snake.offsetLeft + 1 + 'px';                            snake.style.top = snake.offsetTop + 'px';                            arr.push([snake.offsetLeft, snake.offsetTop]);                            num++;                        } else {                            clearInterval(timer);                            alert('you die')                            _document.onkeydown = null                        }                    }                    break;                case 40: //下                    clearInterval(timer);                    timer = window.setInterval(runBottom, 10);                     function runBottom() {                        if (snake.offsetTop < 580) {                            snake.style.top = snake.offsetTop + 1 + 'px';                            snake.style.left = snake.offsetLeft + 'px';                            arr.push([snake.offsetLeft, snake.offsetTop]);                            num++;                        } else {                            clearInterval(timer);                            alert('you die')                            _document.onkeydown = null                        }                    }                    break; }

3.封装一个函数，随机生成食物位置，第一次粗心忘记加单位，看网页没效果，才知道忘记加单位了

function pos() {                food.style.left = parseInt(Math.random() * 630) + 'px';                food.style.top = parseInt(Math.random() * 580) + 'px';            }

4.封装一个碰撞判定函数，使其碰撞时，食物消失，蛇的身体增加一块。这里遇到一个定时器问题，第一次写的时候，我的定时器清除标识和之前的定时器标识一致，导致蛇会上下左右抖动，经过后面不停的修改，最终找到错误。

var timer1 = setInterval(eat, 10); //设置一个碰撞的时间器            function eat() {                snakeCrashFood(snake, food); //传入参数                 function snakeCrashFood(obj1, obj2) {                    var obj1Left = obj1.offsetLeft;                    var obj1Width = obj1.offsetWidth + obj1.offsetLeft;                    var obj1Top = obj1.offsetTop;                    var obj1Height = obj1.offsetHeight + obj1.offsetTop;                    var obj2Left = obj2.offsetLeft;                    var obj2Width = obj2.offsetWidth + obj2.offsetLeft;                    var obj2Top = obj2.offsetTop;                    var obj2Height = obj2.offsetHeight + obj2.offsetTop;                    if (!((obj1Width < obj2Left) || (obj2Width < obj1Left) || (obj1Height < obj2Top) || (                            obj2Height < obj1Top))) {                        snakeBody = document.createElement("div"); //生成新的div                        snakeBody.setAttribute("class", "body"); //给新的div添加类名                        playground.appendChild(snakeBody); //添加一节新的身体                        pos(); //让食物重新随机出现                        setInterval(follow, 10); //动态地改变新的身体的位置                    }                }            }

5.设置蛇的身体跟随，获得蛇身体的数组，新的身体相对于上一个身体的第20个数组的位置。这里我遇到了一个数组越界问题。最开始初始num值为0，place=20，所以第一次身体的增加arr[num-place][0]前面的索引是从负数开始，在通过老师的指导，增加一个判定，解决了这个问题。

function follow() {                /*获得增加的身体的数组*/                var bodyNum = document.getElementsByClassName("body");                score[xss_clean] = bodyNum.length;                var place = 0;                /*数组每移动1px,新的身体的位置就是相对于前一个身体的第20个数组的位置，后面依次加等*/                // console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1")                // console.log("arr   :  ==" + arr)                // console.log("num : ==" + num)  //2                for (var i = 0; i < bodyNum.length; i++) {                    // console.log("bodyNum.length :  ==" + bodyNum.length)                    place += 20;                    // console.log("place :  ==" + place)//20                    // console.log("num - place :  ==" + (num - place))//-18                    // bodyNum[i].style.left = arr[num - place][0] + 'px';                    // bodyNum[i].style.top = arr[num - place][1] + 'px';                    if (num - place > 0) {                        bodyNum[i].style.left = arr[num - place][0] + 'px';                        bodyNum[i].style.top = arr[num - place][1] + 'px';                    }                 }                // console.log("num555 : ==" + num)                // console.log("===========================================")            }

"怎么用JavaScript写一个贪吃蛇游戏"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！