贪吃蛇游戏的思考步骤:
1.默认初始值(3个)默认向右走 2.封装函数move,去移动蛇 3.去监听键盘的事件,看用户的怎么移动蛇 4.去判断碰到墙就死亡,结束游戏 5.去完成投放食物的封装函数 6.去实现蛇的吃食物的函数
其实我们触发键盘事件,我们是这么处理的,这是一种比较简单的想法。
一个div是40px,当横着三个div数组,往右。数组0是蛇头,那么当移动时是最后一个div 的left和top值变,变成蛇头的left值变大40,top值不变,top值直接就是蛇头的top。
效果图:
源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇游戏</title> <style> *{ padding: 0; margin: 0; } .contain { /*box-sizing: border-box;*/ width: 800px; height: 560px; background-color: #c3c4c3; border: 1px double black; position: relative; margin: 0 auto; } .contain div{ box-sizing: border-box; width: 40px; height: 40px; border: 1px solid black; background-color: coral; top: 0; left: 0; position: absolute; } .contain div:nth-child(1){ left:80px; } .contain div:nth-child(2){ left:40px; } </style> </head> <body> <div class="contain" id = "contain"> <div></div> <div></div> <div></div> </div> <!-- 1.默认初始值(3个)默认向右走 2.封装函数move,去移动蛇 3.去监听键盘的事件,看用户的怎么移动蛇 4.去判断碰到墙就死亡,结束游戏 5.去完成投放食物的封装函数 6.去实现蛇的吃食物的函数 --> <script> var divs = document.querySelectorAll(".contain div"); var contain = document.getElementsByClassName("contain"); console.log(contain); var snakeBody = [divs[0],divs[1],divs[2]]; //设置默认方向全局变量,默认为右边 var direction = "right"; var food; var speed=1; //第一次投放食物 putFood(); //调用move函数 move(); /*去让蛇动起来*/ function move() { //每次移动要判断键盘事件到底往哪里走,去监听用户的键盘事件 init(); setTimeout(function step() { /*取出蛇身体的最后一个元素,然后把它插到蛇头位置,pop变量就是我要操作的蛇尾部位 * 不应该放在setTimeout外面,这样,只有第一回会选中蛇的身体的最后一个 * 而在后面就只剩一个在那里移动了。 * 要在每次蛇移动后重新取得最新的蛇尾,也就是pop的元素 * */ var pop = snakeBody.pop(); /*每次移动要判断是否蛇已经死掉了,撞墙,返回Boolean值 * 每次的移动毒药去判断是不是已经死掉,不要放在setTimeout外面 * */ var num=isDead() if(num){ /*var ui=snakeBody.shift(); ui.style.left=ui.offsetLeft-120+"px"; snakeBody.push(ui);*/ // checkEnd(num); alert("游戏结束"); return; } if(direction=="right"){ pop.style.left = snakeBody[0].offsetLeft+40+"px"; pop.style.top = snakeBody[0].offsetTop+"px"; }else if(direction=="left"){ pop.style.left = snakeBody[0].offsetLeft-40+"px"; pop.style.top = snakeBody[0].offsetTop+"px"; }else if(direction=="up"){ pop.style.left = snakeBody[0].offsetLeft+"px"; pop.style.top = snakeBody[0].offsetTop-40+"px"; }else{ pop.style.left = snakeBody[0].offsetLeft+"px"; pop.style.top = snakeBody[0].offsetTop+40+"px"; } snakeBody.unshift(pop); //每次移动好了判断吃到了食物没有 eatFood(); setTimeout(step,500/speed); },500) } /*对document监听用户的键盘事件*/ function init() { document.οnkeypress=function (e) { var code=e.keyCode; if(code==37){ if(direction=="right") return; //如果本来的方向是左边,那么现在再次按右箭头将失效 direction="left"; }else if(code==38){ if(direction=="down") return; direction="up"; }else if(code==39){ if(direction=="left") return; direction="right"; }else{ if(direction=="up") return; direction="down"; } } } /*判断蛇是否死掉了的函数 * true 表示已经死掉 FALSE表示没死 * */ function isDead() { //用蛇头来判断是否撞墙,这里有bug没有解决:蛇头会出去 var head = snakeBody[0]; if(head.offsetTop<0 ||head.offsetLeft<0 || head.offsetTop>520 || head.offsetLeft>760) return true; } /*随机投放食物 * 800/40=20 600/40==15 所以left应该设置为0-19 *40 与 0-14 *40 * 生成div,把他插到蛇的数组的最后即可 * */ function putFood(){ food = document.createElement('div'); food.style.left = randomNum(0,19)*40 + 'px'; food.style.top = randomNum(0,13)*40 + 'px'; food.style.backgroundColor = "pink"; // 这里传递的是一个类数组,要下标。 contain[0].appendChild(food); } /*吃食物*/ function eatFood() { var head = snakeBody[0]; //当蛇头的左和上边距等于生成的div的左和上边距那么就表示吃到了 if(head.offsetLeft==food.offsetLeft && head.offsetTop==food.offsetTop){ snakeBody.push(food); food.style.backgroundColor="coral"; putFood(); //吃完,重新投放食物 speed += 0.5; } } /*生产随机数的函数*/ function randomNum(n,m) { return parseInt(Math.random()*(m-n+1)+n); } /*检查撞墙后有一个div在外面的bug * 1表示撞到上面 2表示撞到左面 3表示撞到下面 4表示撞到右面 * 这里的bug还是没有解决 * */ </script> </body> </html>