1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>贪吃蛇</title>
6 <style>
7 body{
8 margin: 0px;
9 padding: 0px;
10 }
11 #main{
12 margin: 100px;
13 }
14 .btn{
15 width: 100px;
16 height: 40px;
17 }
18 .gtitle{
19 font-size: 25px;
20 font-width: bold;
21 }
22 #guan{
23 color: red;
24 }
25 </style>
26 </head>
27 <body>
28
29 <div id="main">
30 <h1>贪吃蛇</h1>
31 <input type="button" value="开始游戏" class="btn" id="begin">
32 <input type="button" value="暂停游戏" class="btn" id="pause">
33 <span class="gtitle">第<span id="guan">1</span>关</span>
34 <script>
35 var main = document.getElementById('main');
36 var show_canvas = true;//是否开启画布格子
37 /*
38 地图对象的构造方法
39 atom 原子大小宽高是 10px
40 xnum 水平原子的数量
41 ynum 竖直方向原子数量
42 */
43 function Map(atom, xnum, ynum) {
44 this.atom = atom;
45 this.xnum = xnum;
46 this.ynum = ynum;
47 this.canvas = null;
48 //创建画布
49 this.create = function () {
50 this.canvas = document.createElement('div');
51 this.canvas.style.cssText="position:relative;left:300px;top:40px;" +
52 "border:1px solid darkred;background:#FAFAFA";
53 this.canvas.style.width = this.atom * this.xnum + 'px';
54 this.canvas.style.height = this.atom * this.ynum + 'px';
55 main.appendChild(this.canvas);
56 if(show_canvas){
57 for(var x = 0; x < xnum; x++) {
58 for(var y = 0; y < ynum; y++) {
59 var a = document.createElement('div');
60 a.style.cssText = "position:absolute;border:1px solid yellow;";
61 a.style.width = this.atom + "px";
62 a.style.height = this.atom + "px";
63 a.style.backgroundColor = "green";
64 a.style.left = x * this.atom +"px";
65 a.style.top = y * this.atom +"px";
66 this.canvas.appendChild(a);
67 }
68 }
69 }
70 }
71 }
72 /*
73 *创建食物的构造方法
74 *
75 */
76 function Food(map) {
77 this.width = map.atom;
78 this.height = map.atom;
79 this.bgColor = "rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+"," +
80 ""+Math.floor(Math.random()*200)+")";
81 this.x = Math.floor(Math.random()*map.xnum);
82 this.y = Math.floor(Math.random()*map.ynum);
83 this.flag = document.createElement('div');
84 this.flag.style.width = this.width + "px";
85 this.flag.style.height = this.height + "px";
86 this.flag.style.backgroundColor = this.bgColor;
87 this.flag.style.borderRadius = '50%';
88 this.flag.style.position = "absolute";
89 this.flag.style.left = this.x * this.width + "px";
90 this.flag.style.top = this.y * this.height + "px";
91 map.canvas.appendChild(this.flag);
92 }
93 ///////////////////////////////////////////////////////
94
95 function Snake(map) {
96 //设置宽 高
97 this.width = map.atom;
98 this.height = map.atom;
99 //默认走的方向
100 this.direction = "right";
101 this.body =[
102 {x:2, y:0}, //蛇头
103 {x:1, y:0}, //蛇身
104 {x:0, y:0}, //蛇尾
105 ];
106 //显示蛇
107 this.display = function () {
108 for(let i =0;i < this.body.length; i++){
109 if(this.body[i].x !=null) {
110 var s = document.createElement('div');
111 //将蛇的节点保存一个状态变量
112 this.body[i].flag = s;
113
114 //设置蛇的属性
115 s.style.width = this.width + "px";
116 s.style.height = this.height + "px";
117 s.style.backgroundColor = "red";
118 //设置位置rang
119 s.style.position = "absolute";
120 s.style.border = "1px solid yellow";
121 s.style.left = this.body[i].x * this.width + "px";
122 s.style.top = this.body[i].y * this.height + "px";
123 //添加到地图中
124 map.canvas.appendChild(s);
125 }
126 }
127 };
128 //让蛇运动起来
129 this.run = function () {
130 /*
131 {x:2,y:0}, //蛇头
132 {x:1,y:0}, //蛇身
133 {x:0,y:0} //蛇尾
134 */
135 //alert(this.body.length);
136 for(var i = this.body.length - 1; i > 0; i--){
137 this.body[i].x = this.body[i-1].x;
138 this.body[i].y = this.body[i-1].y;
139
140 }
141 //默认是right left up down
142 switch (this.direction) {
143 case "left": this.body[0].x -=1; break;
144 case "right": this.body[0].x +=1; break;
145 case "up": this.body[0].y -=1; break;
146 case "down": this.body[0].y +=1; break;
147 }
148 //吃到食物
149 if(this.body[0].x == food.x && this.body[0].y == food.y){
150 //蛇加一节,根据最后节点
151 this.body.push({x:null, y:null, flag:null});//添加一个空节点
152 map.canvas.removeChild(food.flag);//删除食物
153 food = new Food(map);//再随机产生一个食物
154
155 //设置级别
156 if(this.body.length > L.slength){
157 L.set();
158 }
159 }
160
161 //判断是否出界
162 if(this.body[0].x <0 || this.body[0].x > map.xnum-1 ||
163 this.body[0].y <0 || this.body[0].y>map.ynum-1){
164 clearInterval(timer);
165 alert("GAME OVER");
166 restart(map, this);
167 return false;
168 }
169
170 //判断是否吃到自己
171 for(var i = 4; i< this.body.length; i++){
172 if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
173 clearInterval(timer);
174 alert("GAME OVER");
175 restart(map, this);
176 return false;
177 }
178 }
179
180 //删除节点
181 for(let i = 0; i < this.body.length; i++){
182 if(this.body[i].flag!=null) {//当吃到食物，flag=null
183 map.canvas.removeChild(this.body[i].flag);
184 }
185 }
186
187 this.display();
188 }
189 }
190
191 //重新开始游戏
192 function restart(map, snake) {
193 for(var i=0;i<snake.body.length;i++){
194 map.canvas.removeChild(snake.body[i].flag)
195 }
196 snake.body =[
197 {x:2, y:0}, //蛇头
198 {x:1, y:0}, //蛇身
199 {x:0, y:0}, //蛇尾
200 ];
201 snake.direction = "right";//初始化方向
202 map.canvas.removeChild(food.flag);
203 snake.display();
204 food = new Food(map);
205 }
206 //设置级别对象
207 function Level() {
208 this.num = 1;//级别数;
209 this.speek = 100;
210 this.slength = 5;//
211
212 this.set = function () {
213 this.num++;
214 if(this.speek <= 50){
215 this.speek=50;
216 }else{
217 this.speek -= 50;
218 }
219 this.slength+=1;
220 start();
221 this.display();
222 };
223 this.display = function (){
224 document.getElementById('guan').innerHTML = this.num;
225 }
226 }
227 var L = new Level();
228 L.display();
229 //创建地图对象;
230 var map = new Map(20, 40, 20);
231 map.create();//显示画布
232 // 创建食物对象
233 var food = new Food(map);
234
235 //创建蛇对象
236 var snake = new Snake(map);
237 snake.display();
238
239 //添加键盘事件，上下左右
240 window.onkeydown = function (e) {
241 var event = e || window.event;
242 // alert(event.keyCode);
243 switch (event.keyCode) {
244 case 38:
245 if(snake.direction != "down") {
246 snake.direction = "up";
247 }
248 break;
249 case 40:
250 if(snake.direction != "up")
251 snake.direction = "down";
252 break;
253 case 37:
254 if(snake.direction != "right")
255 snake.direction = "left";
256 break;
257 case 39:
258 if(snake.direction != "left")
259 snake.direction = "right";
260 break;
261 }
262 };
263 var timer;//变量可以提升；
264
265 function start(){
266 clearInterval(timer);
267 timer = setInterval(function () {
268 snake.run();
269 },L.speek);
270 }
271 document.getElementById('begin').onclick=function () {
272 start();
273 };
274 document.getElementById('pause').onclick = function () {
275 clearInterval(timer);
276 }
277 </script>
278 </div>
279 </body>
280 </html>
浙公网安备 33010602011771号