您好,登录后才能下订单哦!
本篇内容介绍了“怎么用JavaScript写一个贪吃蛇游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
首先我们要确定贪吃蛇应有的功能
1.通过键盘的上下左右控制蛇的移动方向
2.边界判定,即蛇头超出边界则游戏结束
3.碰撞判定,即蛇头和食物块发生触碰
4.吃到食物积分加1
<div class="container"> <!--小蛇移动的操场--> <div id="playground"> <!--小蛇--> <div id="snake"></div> <!--食物--> <div id="food"></div> </div> <!--记录得分--> <div id="menu"> <div>得分<span id="score"></span></div> </div> </div>
<style> * { padding: 0; margin: 0; } .container { width: 800px; height: 600px; margin: 0 auto; } #playground { width: 650px; height: 100%; background-color: cadetblue; float: left; position: relative; } #menu { width: 150px; height: 100%; background-color: darkcyan; float: left; } #snake { width: 20px; height: 20px; background-color: #d3e0d7; position: absolute; left: 0; top: 0; } #food { width: 20px; height: 20px; background-color: #027766; position: absolute; } .body { width: 20px; height: 20px; background-color: #178b9a; position: absolute; ; top: 0; left: 0; } #score { font-size: 30px; font-weight: bold; color: black; } #menu div { font-size: 20px; font-weight: bold; margin-left: 20px; } #hqx { width: 100px; height: 50px; margin: 0 auto; } #inp { border: 0; width: 100px; height: 50px; background-color: coral; } </style>
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.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("===========================================") }
“怎么用JavaScript写一个贪吃蛇游戏”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。