用js做一个简易版的贪吃蛇_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";//设置方块的类名为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();
		}//按下空格键开始游戏
})
//开始游戏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113