用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";//设置方块的类名为block
block.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或者row
if(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>19
if(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();
}//按下空格键开始游戏
})
//开始游戏