基于JavaScript实现贪吃蛇游戏
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下
1.结构
创建一个盒子box作为蛇的身体,当前盒子中只有一个子元素,代表此时蛇的长度为1.
在创建一个盒子food作为贪吃蛇的食物。
2.CSS
设置蛇和食物的样式,这里注意蛇和食物都是绝对定位。
3.脚本
获取蛇的身体和每一个子元素
varbox=document.getElementById("box"); varboxs=document.getElementById("box").children;
定义蛇头的位置
varsnackX=0; varsnackY=0;
获取屏幕宽度和高度,以此来设定墙的边界,以限制蛇的移动范围。
varcw=document.documentElement.clientWidth; varch=document.documentElement.clientHeight; varminsnackX=0; varmaxsnackX=Math.floor(cw/boxs[0].offsetWidth)*boxs[0].offsetWidth; varminsnackY=0; varmaxsnackY=Math.floor(ch/boxs[0].offsetHeight)*boxs[0].offsetHeight;
定义初始的移动方向。
varturn="right";
获取食物元素,并设置食物的位置坐标。
varfoodele=document.getElementById("food"); varfoodX,foodY;
蛇的初始化
for(vari=0;i<6;i++){ box.appendChild(boxs[0].cloneNode(true)); }
刷新食物
functionfood(){ //此处的坐标要先获取页面最大支持的蛇身体的块数,然后在块数中随机,然后乘以块数的大小, //因为蛇的移动每一步都是固定的,想要判定食物和蛇头重合就必须坐标是整块的倍数。 foodX=parseInt(Math.random()*Math.floor(cw/boxs[0].offsetWidth))*boxs[0].offsetWidth; foodY=parseInt(Math.random()*Math.floor(ch/boxs[0].offsetHeight))*boxs[0].offsetHeight; //判定当食物的产生位置和蛇的任何一个位置重合时就重新生成食物。 for(vari=0;i调用food()方法生成第一个食物
food();设置定时器每次执行一次蛇的运行方法
vartimer=setInterval(function(){ snackMOve(); },150)封装一个蛇的运动方法
//移动和判定边界 functionsnackMOve(){ //此处为判定方向根据判定的方向,向改方向前进一个方块 switch(turn){ case"right":snackX+=30;break; case"left":snackX-=30;break; case"bottom":snackY+=30;break; case"top":snackY-=30;break; } //如果蛇越过了墙就从另一端出现 if(snackX>maxsnackX){ snackX=0; } if(snackXmaxsnackY){ snackY=0; } if(snackY 0;i--){ boxs[i].style.left=boxs[i-1].style.left; boxs[i].style.top=boxs[i-1].style.top; } //第一个也就是蛇头的位置,永远是根据方向获取的位置 boxs[0].style.left=snackX+"px"; boxs[0].style.top=snackY+"px"; //判定吃到食物就长大和刷新 //当蛇头位置移动之后与食物重合那么刷新食物,并且在蛇的身体中插入一个克隆的元素,相当于长度+1 if(snackX===foodX&&snackY===foodY){ food(); box.appendChild(boxs[0].cloneNode(true)); }else{ //判定撞死 //当蛇头与身体中的任何一个元素重合,那么判定结束游戏,停止定时器 for(vari=1;i 蛇的运动方向
document.onkeydown=function(eve){ vare=eve||event; varkeyCode=e.keyCode||e.which; switch(keyCode){ case37:if(turn==="right"){break;}turn="left";break; case38:if(turn==="bottom"){break;}turn="top";break; case39:if(turn==="left"){break;}turn="right";break; case40:if(turn==="top"){break;}turn="bottom";break; } }全部代码
Document