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\给新的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.innerHTML = 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(\"===========================================\") }

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。