1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #map {
8 width: 800px;
9 height: 600px;
10 background-color: grey;
11 position: relative;
12 }
13
14 </style>
15 </head>
16 <body>
17 <div id="map"></div>
18 <script src="common.js"></script>
19 <script>
20 (function Food(x, y, width, height, color) {
21 var elements = [];
22 Food.prototype.init = function (map) {
23 //调用这个函数是为了防止多次初始化带来多个食物的效果
24 remove();
25 var div = document.createElement("div");
26 map.appendChild(div);
27 div.style.backgroundColor = this.color;
28 div.style.width = this.width + "px";
29 div.style.height = this.height + "px";
30 div.style.position = "absolute";
31 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
32 this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
33 div.style.left = this.x + "px";
34 div.style.top = this.y + "px";
35 elements.push(div);
36 }
37
38 //删除div 函数 思路：利用之前elements数组存储的元素 找到它的父级元素 也就是map 再用map把elements中的小方块删掉
39 function remove() {
40 for (var i = 0; i < elements.length; i++) {
41 var ele = elements[i];
42 ele.parentNode.removeChild(ele);
43 elements.splice(i, 1);
44 }
45 }
46
47 this.x = x;
48 this.y = y;
49 this.width = width || 20;
50 this.height = height || 20;
51 this.color = color || "green";
52 window.Food = Food;
53 }()
54
55 );
56 (function Snake(width, height, direction) {
57 var elements = [];
58 this.width = width || 20;
59 this.height = height || 20;
60 this.body = [
61 {x: 3, y: 2, color: "red"},
62 {x: 2, y: 2, color: "orange"},
63 {x: 1, y: 2, color: "orange"},
64 ];
65 //小蛇移动的方向
66 this.direction = direction || "right";
67
68 Snake.prototype.init = function (map) {
69
70 remove();
71 for (var i = 0; i < this.body.length; i++) {
72 var div = document.createElement("div");
73 map.appendChild(div);
74 div.style.position = "absolute";
75 div.style.width = this.width + "px";
76 div.style.height = this.height + "px";
77 div.style.left = this.body[i].x * this.width + "px";
78 div.style.top = this.body[i].y * this.height + "px";
79 div.style.backgroundColor = this.body[i].color;
80 elements.push(div);
81 }
82
83 function remove() {
84 var i = elements.length - 1;
85 for (; i >= 0; i--) {
86 var ele = elements[i];
87 ele.parentNode.removeChild(ele);
88 elements.splice(i, 1);
89 }
90 }
91
92 }
93 Snake.prototype.move = function (map, food) {
94 var i = this.body.length - 1;
95 for (; i > 0; i--) {
96 this.body[i].x = this.body[i - 1].x;
97 this.body[i].y = this.body[i - 1].y;
98 }
99 var headX = this.body[0].x * this.width;
100 var headY = this.body[0].y * this.height;
101 if (headX == food.x && headY == food.y) {
102
103 var last = this.body[this.body.length - 1];
104
105 this.body.push(
106 {
107 x: last.x,
108 y: last.y,
109 color: last.color
110 }
111 );
112
113 food.init(map);
114
115 }
116
117 switch (this.direction) {
118 case "left":
119 this.body[0].x -= 1;
120 break;
121 case "right":
122 this.body[0].x += 1;
123 break;
124 case "top":
125 this.body[0].y -= 1;
126 break;
127 case "bottom":
128 this.body[0].y += 1;
129 break;
130 }
131 }
132 window.Snake = Snake;
133 }()
134
135 );
136 (function () {
137 var that = null;
138
139 function Game(map) {
140 this.food = new Food();
141 this.snake = new Snake();
142 this.map = map;
143 that = this;
144 Game.prototype.init = function (map) {
145 this.food.init(this.map);
146 this.snake.init(this.map);
147 this.bindkey();
148 var maxX = that.map.offsetWidth / that.snake.width;
149 var maxY = that.map.offsetHeight / that.snake.height;
150 var timeid = setInterval(function () {
151 if (that.snake.body[0].x >= maxX || that.snake.body[0].x >= maxX < 0) {
152 alert("结束了哦");
153 clearInterval(timeid);
154 }
155 if (that.snake.body[0].y >= maxY || that.snake.body[0].y < 0) {
156 alert("结束了哦");
157 clearInterval(timeid);
158 }
159 that.snake.move(that.map, that.food);
160 that.snake.init(that.map);
161 }, 150);
162 }
163 Game.prototype.bindkey = function () {
164 document.addEventListener("keydown", function (e) {
165 switch (e.keyCode) {
166 case 37:
167 if (that.snake.direction != "right") {
168 that.snake.direction = "left";
169 }
170 break;
171 case 38:
172 if (that.snake.direction != "bottom") {
173 that.snake.direction = "top";
174 }
175
176 break;
177 case 39:
178 if (that.snake.direction != "left") {
179 that.snake.direction = "right";
180 }
181 break;
182 case 40:
183 if (that.snake.direction != "top") {
184 that.snake.direction = "bottom";
185 }
186
187 break;
188 }
189
190 }, false)
191 }
192
193 }
194
195 window.Game = Game;
196 }()
197
198 );
199 var Gm = new Game(my$("map"));
200 Gm.init(my$("map"));
201
202
203 </script>
204 </body>
205 </html>
