snakeGame

发表于 | 分类于

snakeGame
自己手写了一下贪吃蛇，（有所参考）看来，任何一个小东西要完整做出来，想要加深体会，非要亲自动手写才行，绝非脑海中的“大致过一下”

JS代码

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
window.onload = function() {
	var len = 4;
	var snake = [];			
	for (var i = len-1; i >= 0; i--) {
				snake.push({
					x:i,
					y:0
				});
			}
	var cvs = document.getElementById("canvas");
	var ctx = cvs.getContext("2d");
	var cvsW = cvs.width;
	var cvsH = cvs.height;
	var snakeW = 10;
	var snakeH = 10;
	var score = 4;
	var food = {
		x: Math.round(Math.random()*(cvsW/snakeW)),
		y: Math.round(Math.random()*(cvsH/snakeH))
	}
	//drawFood
	function drawFood(x,y){
			ctx.fillStyle = "yellow";
			ctx.fillRect(x*snakeW,y*snakeH,snakeW,snakeH);
		    ctx.fillStyle = "#000";
			ctx.strokeRect(x*snakeW,y*snakeH,snakeW,snakeH);
	}
	//default direction
	var direction = "right";
	// read use direction
	document.addEventListener("keydown",getDirection);
	function getDirection(e){
		if (e.keyCode == 37 && direction != "right") {
			direction = "left";
		}
		else if (e.keyCode == 38 && direction != "down") {
			direction = "up";
		}
		else if (e.keyCode == 39 && direction != "left") {
			direction = "right";
		}
		else if (e.keyCode == 40 && direction != "up") {
			direction = "down";
		}
	}
    //hit self detect
	function checkHitItselft(x,y,array){
		for (var i = 1; i < array.length; i++) {
			if(array[i].x == x && array[i].y == y){
				return true;
			}
		}
		return false;
	}
    //show the score
	function drawScore(x){
		ctx.fillStyle = "yellow";
		ctx.font = "18px Verdana";
		ctx.fillText("score is :" + x,10,cvsH-10);
	} 
	function drawSnake(x,y){
			ctx.fillStyle = "#FFF";
			ctx.fillRect(x*snakeW,y*snakeH,snakeW,snakeH);
		    ctx.fillStyle = "#000";
			ctx.strokeRect(x*snakeW,y*snakeH,snakeW,snakeH);
	}
	function draw(){
		ctx.clearRect(0,0,cvsW,cvsH);
		// for (var i = 0; i < snake.length; i++) {
		// 	var x = snake[i]*snakeW;
		// 	var y = snake[i]*snakeH	;
		// 	drawSnake(x,y);
		// }
		for (var i = 0; i < snake.length; i++) {
			var x = snake[i].x;
			var y = snake[i].y;
			drawSnake(x,y);
		}
		drawFood(food.x,food.y);
		//base on  direction   set snakeHead
		var snakeX = snake[0].x;
		var snakeY = snake[0].y;
		//crash the wall  game over
		if (snake[0].x<0 || snake[0].x>cvsW/snakeW || snake[0].y<0 || snake[0].y>cvsH/snakeH || checkHitItselft(snakeX,snakeY,snake)) {
			location.reload();
		}
		
		if (direction == "left") {
			snakeX--;
		}
			else if (direction == "right") {
				snakeX++;
			}
				else if (direction == "up") {
					snakeY--;
				}
					else if (direction == "down") {
						snakeY++;
					}
		var newHead ={
			x:snakeX,
			y:snakeY
		};
		if(snakeX == food.x && snakeY == food.y){
			food ={
		x: Math.round(Math.random()*(cvsW/snakeW)),
		y: Math.round(Math.random()*(cvsH/snakeH))
	}
	    score++;
		}else{
			snake.pop();
		}
		drawScore(score);
		var newHead ={
			x:snakeX,
			y:snakeY
		};
		snake.unshift(newHead);
	}
	setInterval(draw,100);
}

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>snakeGame</title>
	<style>
		#canvas{
			
			background-color: #000;
		}
	</style>
</head>
<body>
	<div style="width: 100% ; text-align:center">
			<canvas id="canvas" width="500px" height="500px">
	</canvas>
	</div>
	<script src="snake.js"></script>
</body>
</html>