贪吃蛇

Posted on 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="score">
	<div>
		分数为: <span>0</span>
	</div>
	<div class="stop">
		暂停
	</div>
	<div>
		利用方向键控制蛇移动的方向，撞墙或吃到自己游戏结束
	</div>
</div>
<div class="wrap">
	<p class="food"></p>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
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
html,body {
	margin: 0;
}
	
.wrap {
	position: absolute;
	width: 100%;
	height: 80%;
	bottom: 0;
	border: 1px solid black;
	box-sizing: border-box;
}
	
.wrap div {
	width: 20px;
	height: 20px;
	background-color: darkcyan;
	position: absolute;
}
	
.wrap .food {
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background-color: firebrick;
	position: absolute;
}
	
.score {
	position: absolute;
	width: 100%;
	height: 17%;
	background: rgba(0, 0, 0, 0.4);
}
	
.score div {
	position: absolute;
}
	
.score div:nth-child(1) {
	width: 50%;
	color: white;
	font-size: 200%;
	top: 10%;
	left: 1%;
	text-shadow: 1px 1px 1px black;
}
	
.score div:nth-child(2) {
	width: 6%;
	text-align: center;
	right: 5%;
	top: 10%;
	color: white;
	font-size: 100%;
	border-radius: 50%;
	background-color: red;
	box-shadow: 1px 1px 1px black;
	cursor: pointer;
}
	
.score div:nth-child(3) {
	bottom: 10%;
	text-indent: 2em;
	color: honeydew;
	font-size: 100%;
}
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
var wrap = document.querySelector('.wrap');
var snake = document.querySelectorAll('.wrap div');
var food = document.querySelector('.food');
var stop = document.querySelector('.stop');
var score = document.querySelector('.score span');
stop.style.height = stop.offsetWidth + 'px';
stop.style.lineHeight = stop.style.height;
var snakeArr = [];
var W = wrap.clientWidth;
var H = wrap.clientHeight;
var timer,mT, mL,t, ss; 
stop.onclick = function() {
	if (this.bol) {
		moveFn(snakeArr);
		this.innerHTML = '暂停'
		this.style.backgroundColor = 'red'
		this.bol = false;
	} else {
		clearInterval(timer);
		this.innerHTML = '开始'
		this.style.backgroundColor = 'seagreen'
		this.bol = true;
	}
}
reset();
moveFn(snakeArr);
rndIndex(food);
/*
 * 重置函数
 */
function reset() {
	mT = 0;
	mL = 1;
	t = 500;
	ss = 0;
	score.innerHTML = ss;
	timer = null;
	snakeArr = [];
	for (var i = 0; i < snake.length; i++) {
		snake[i].style.left = (snake.length - 1 - i) * snake[0].offsetWidth + 'px';
		if (i != 0) {
			snake[i].style.backgroundColor = 'greenyellow';
		}
		snakeArr[i] = snake[i];
	}
}
/*
 * 随机位置函数
 * obj参数是位置需要随机的对象
 */
function rndIndex(obj) {
	var foodW = obj.clientWidth;
	var foodH = obj.clientHeight;
	wrap.style.width = x * foodW + 'px';
	wrap.style.height = y * foodH + 'px';
	var x = Math.floor(W / foodW);
	var y = Math.floor(H / foodH);
	rndx = Math.floor(Math.random() * x) * foodW;
	rndy = Math.floor(Math.random() * y) * foodH;
	var arr = objIndex(snakeArr);
	for (var i = 0; i < arr.length; i++) {
		if (rndx == arr[i][0] && rndy == arr[i][1]) {
			rndIndex(obj); //递归
		}
	}
	obj.style.left = rndx + 'px';
	obj.style.top = rndy + 'px';
}
/*
 * 遍历对象数组的位置
 * objArr参数是位置需要遍历的对象数组
 * 返回二维数组[[left,top],[left,top]]
 */
function objIndex(objArr) {
	var sIndex = [];
	for (var i = 0; i < objArr.length; i++) {
		sIndex[i] = [objArr[i].offsetLeft, objArr[i].offsetTop];
	}
	return sIndex;
}
/*
 * 判断函数
 * objArr 判断对象数组
 */
function flagFn(objArr) {
	var snakes = objIndex(objArr);
	var snakeHeadL = snakes[0][0];
	//蛇数组的第一个（头部）left
	var snakeHeadT = snakes[0][1];
	//蛇数组的第一个（头部）top
	var foodLeft = food.offsetLeft;
	var foodTop = food.offsetTop;
	//gameover
	//撞墙
	if (objArr[0].offsetWidth + snakeHeadL > W || objArr[0].offsetHeight + snakeHeadT > H || snakeHeadT < 0 || snakeHeadL < 0) {
		gameover('你的蛇一头撞死在墙上啦！！');
	}
	//吃自己
	for (var i = 1; i < snakes.length; i++) {
		if (snakeHeadL == snakes[i][0] && snakeHeadT == snakes[i][1]) {
			gameover('你的蛇实在是太饿了，自己吃掉自己啦！！');
		}
	}
	//吃到食物
	if (snakeHeadL == foodLeft && snakeHeadT == foodTop) {
		var div = document.createElement('div');
		wrap.appendChild(div);
		div.style.background = 'none';
		div.style.top = '-50px'
		snake = document.querySelectorAll('.wrap div');
		snakeArr[snakeArr.length] = snake[snake.length - 1];
		if (t > 100) {
			t -= 50;ss += 1;
		} else if (t > 10) {
			t -= 10;ss += 4
		}else if(t>1){
			t -= 1;ss += 5;
		}
		moveFn(snakeArr);
		rndIndex(food);
		score.innerHTML = ss;
	}
}
function gameover(str){
	clearInterval(timer);
	alert(str);
}
/*
 * 移动函数
 */
function moveFn(objArr) {
	timer && clearInterval(timer);
	timer = setInterval(function() {
		objArr[objArr.length - 1].style.top = objArr[0].offsetTop + mT * objArr[0].offsetHeight + 'px';
		objArr[objArr.length - 1].style.left = objArr[0].offsetLeft + mL * objArr[0].offsetWidth + 'px';
		objArr[objArr.length - 1].style.backgroundColor = 'darkcyan';
		objArr[0].style.backgroundColor = 'greenyellow';
		objArr.unshift(objArr.pop());
		flagFn(objArr);
	}, t)
}
document.onkeydown = function(e) {
	var e = e || window.event;
	switch (e.keyCode) {
		case 37:if (mL > 0) {retrun}mT = 0;mL = -1;break; //左
		case 39:if (mL < 0) {retrun}mT = 0;mL = 1;break; //右
		case 38:if (mT > 0) {retrun}mT = -1;mL = 0;break; //上
		case 40:if (mT < 0) {retrun}mT = 1;mL = 0;break; //下
	}
}