用js做一个简易版的贪吃蛇

用js做一个简易版的贪吃蛇，话不多说先上个效果图（ps:有点丑 见笑）

首先 要了解 贪吃蛇如果是个对象，应该拥有哪些属性
1.div元素 舞台
2.行 row
3.列 col
4.方向 dir
1.创建食物/蛇 genBlock
2.控制蛇的位置 setPos
3.控制蛇的方式 (键盘）onkeyup
4.判断 （撞墙，吃到自己没有，吃到食物）蛇的row 和蛇的col与食物行row与列col 吃到了
5. 移动蛇
600毫秒执行移除 根据方向来改变蛇的 row或者的col
如果方向是1 col-- 2row-- 3col++ 4 row++
重新设置蛇的位置

多节的蛇 应该是个数组
后面一节的蛇的col row 等于前面那节蛇的col row

下面请看代码

<div id = "state"></div>
*{margin:0;padding:0;
}
#state{width:600px;height:600px;border:1px solid red;margin:50px auto;position:relative;
}//舞台的属性
.block{width:30px;height:30px;position:absolute;
}//每个小蛇的属性//js代码
//创建方块function genBlock(str="gray"){var block = document.createElement("div");//创建一个方块block.className = "block";//设置方块的类名为blockblock.style.backgroundColor=str;//设置方块的背景var state = document.getElementById("state");//获取到舞台state.appendChild(block);//舞台添加 方块var col = Math.floor(Math.random()*20);var row = Math.floor(Math.random()*20);return{	col:col,row:row,block:block,dir:1};//col 列 row行 block蛇的div		dir蛇的运动方向
}
//定位方块
function setPos(obj){obj.block.style.left=obj.col*30+"px";obj.block.style.top=obj.row*30+"px";
}//改变蛇的运动方向（运用键盘事件）
function changeDir(e){if(e.keyCode==37){snakes[0].dir=1;}else if(e.keyCode==38){snakes[0].dir=2;}else if(e.keyCode==39){snakes[0].dir=3;}else if(e.keyCode==40){snakes[0].dir=4;}
}//开始游戏
function play(){var id = setInterval(function(){for(var i=snakes.length-1;i>=0;i--){if(snakes[i-1]){console.log(snakes[i-1],snakes[i])snakes[i].row = snakes[i-1].row;snakes[i].col=snakes[i-1].col;}}//蛇头更新 col或者rowif(snakes[0].dir==1){snakes[0].col--;}else if(snakes[0].dir==2){snakes[0].row--;}else if(snakes[0].dir==3){snakes[0].col++;}else if(snakes[0].dir==4){snakes[0].row++;}//重新设置蛇的位置for(var j=0;j<snakes.length;j++){setPso(snakes[j]);}//移动所有的蛇//判断是否吃到食物if(snakes[0].row==foods[0].row&&snakes[0].col==foods[0].col){console.log("吃到食物");snakes.push(foods[0]);//把食物从后面添加到蛇数组里面foods.splice(0,1);//删除食物第0个;foods[0]=genBlock();//添加一个食物setPos(foods[0]);//设置新食物的位置}//判断是否撞墙 row<0 或者col<0 或者row>19 col>19if(snakes[0].row<0||snakes[0].col<0||snakes[0].col>19||snakes[0].row>19){alert("你撞墙了 gameover");clearInterval(id);}},400)//监听键盘事件控制蛇的方向docuemnt.addEventListener("keyup",changeDir);
}//创建蛇var snakes = [genBlock('red')];//创建食物var foods = [genBlock()];//设置蛇的位置setPow(snakes[0]);//设置食物的位置setPos(foods[0]);document.addEventListener("keyup",function(e){if(e.keyCode==32){play();}//按下空格键开始游戏
})
//开始游戏

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！