基于JavaScript实现贪吃蛇游戏

2023-07-28 15:03:14 349

本文实例为大家分享了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(snackY0;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

基于JavaScript实现贪吃蛇游戏

热门推荐

随机推荐