1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Snke-L</title>
5
6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 <meta http-equiv="description" content="this is my page">
8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11 <style type="text/css">
12 body{
13 background:#9E9ED8;
14 }
15 h1{
16 text-align:center;
17 font-family:"楷体";
18 text-shadow:2px 2px 5px #000;
19 color:#fff;
20 }
21 .info{
22 background:#fff;
23 width:50%;
24 margin:0 auto;
25 font-size:16px;
26 font-family:"宋体";
27 text-align:center;
28 box-shadow:1px 2px 5px #000;
29 }
30 </style>
31 </head>
32 <!--
33 onload="say('大家好！我是贪吃蛇页面，加载完毕！');"
34 <body> 页面加载之后弹出对话框
35 -->
36 <body>
37 <h1>L-贪吃蛇游戏开发</h1>
38 <div align=center>
39 <div class = "info">分数：<span id="scoreSpan"></span> 速度：<span id="speedSpan"></span></div>
40 <canvas align=center id="myCanvas" width="450" height="450"
41 style="border:1px solid #000;background:rgba(46, 122, 125, 0.58);">
42 </canvas>
43 <audio src="bg.mp3" id="bg" ></audio>
44 </div>
45 <!--
46 第一部分：可见的部分
47 1.绘制表格 长30 宽30 每个正方形的格子边长 15
48 2.在第一行画一条蛇
49 3.在最*画一个食物
50
51 第二部分：让蛇动起来（通过键盘上下左右控制）
52 1.先让蛇的头部动
53 2.让身体跟着头一起动
54 （算法）
55 3.让蛇可以吃食物
56 （1）增加身体长度
57 （2）产生新食物
58 （3）将食物产生的位置随机
59 第三部分：（自动运动，判断蛇的死亡）
60 -->
61 <script type="text/javascript">
62 //获取绘图的环境
63 var canvas = document.getElementById("myCanvas");
64 var cxt = canvas.getContext("2d");
65 var width = 15;
66 var flag = false;
67 var score = 0;
68 var speed = 500;
69 //绘制一个表格 30*30
70 //绘图前，需要清空画板
71 cxt.clearRect(0,0,450,450);
72 cxt.strokeStyle = "white";
73 //代表蛇的身体节点
74 //X 横向坐标
75 //Y 纵向坐标
76 //F 移动方向 上 2 下 -2 左 1 右 -1
77 function Cell(x,y,f){
78 this.x = x;
79 this.y = y;
80 this.f = f;
81
82 }
83 //定义食物对象
84 function Food(x,y){
85 this.x = x;
86 this.y = y;
87 }
88 //在中间产生一个食物
89 var food = new Food(15,15);
90 //初始化蛇的身体
91 var snake = []; //蛇 数组
92 var length = 6;
93 // 上 2 下 -2 左 1 右 -1
94 for(var i = 0;i < length;i++){
95 snake[i] = new Cell(i,0,-1);
96 }
97
98 //画制蛇的身体
99 function drawSnake(){
100 cxt.clearRect(0,0,450,450);
101 cxt.strokeStyle = "white";
102 /* //纬界线--start
103 for(var i = 0;i < 30;i++ ){
104 cxt.beginPath();//表示开始 路径
105 cxt.moveTo(0,i*width);//画笔起点位置
106 cxt.lineTo(450,i*width);//画笔结束位置
107 cxt.closePath();
108 cxt.stroke();//画制
109 }
110 //end--纬界线
111
112 //经界线--start
113 for(var i = 0;i<30;i++){
114 cxt.beginPath();//表示开始 路径
115 cxt.moveTo(width*i,0);//画笔起点位置
116 cxt.lineTo(width*i,450);//画笔结束位置
117 cxt.closePath();
118 cxt.stroke();//画制
119 }
120 //end--经界线
121 */ for(var i = 0;i<snake.length;i++){
122 cxt.fillStyle = "black";
123 if(i == snake.length-1){
124 cxt.fillStyle = "red";
125 }
126 cxt.beginPath();
127 cxt.rect(snake[i].x*width,snake[i].y*width,width,width);
128 cxt.closePath();
129 cxt.fill();
130 }
131 //如果吃到了食物
132 var head = snake[snake.length-1];
133 if(head.x == food.x && head.y == food.y){
134 document.getElementById("bg").play;
135 //重新产生食物
136 randomFood();
137 var newCell = new Cell(head.x,head.y,head.f);
138 switch(newCell.f){
139 case 2:
140 newCell.y--;
141 break;
142 case 1:
143 newCell.x--;
144 break;
145 case -2:
146 newCell.y++;
147 break;
148 case -1:
149 newCell.x++;
150 break;
151 }
152 snake[snake.length] = newCell;
153 score+=10;
154 if(speed!=50){
155 speed-=30;
156 }
157 }
158 document.getElementById("scoreSpan").innerHTML = score;
159 document.getElementById("speedSpan").innerHTML = Math.round(1000/speed*100)/100 + "c/s";
160 cxt.fillStyle = "white";
161 cxt.beginPath();
162 cxt.rect(food.x*width,food.y*width,width,width);
163 cxt.closePath();
164 cxt.fill();
165 }
166 //监听键盘事件
167 document.onkeydown = function(e){
168 var code = e.keyCode;
169 // 左 37 上 38 右 39 下 40
170 var direction; //方向
171 // 上 2 下 -2 左 1 右 -1
172 switch(code){
173 case 37:
174 direction = 1;
175 break;
176 case 38:
177 direction = 2;
178 break;
179 case 39:
180 direction = -1;
181 break;
182 case 40:
183 direction = -2;
184 break;
185 }
186 if(code == 32){
187 flag = !flag;
188 }
189 var head = snake[snake.length-1];
190 if((head.f+direction)!=0&&code>=37&&code<=40){
191 moveSnake(direction);
192 }
193 }
194 //移动蛇的方法
195 function moveSnake(direction){
196 if(!flag){
197 return false;
198 }
199 var newSnake = [];
200 var head = snake[snake.length-1];
201 var newCell = new Cell(head.x,head.y,head.f);
202 for(var i = 1;i < snake.length;i++){
203 newSnake[i-1] = snake[i];
204 }
205 newSnake[snake.length-1] = newCell;
206 newCell.f = direction;
207 switch(direction){
208 // 上 2 下 -2 左 1 右 -1
209 case 2:
210 newCell.y--;
211 break;
212 case 1:
213 newCell.x--;
214 break;
215 case -2:
216 newCell.y++;
217 break;
218 case -1:
219 newCell.x++;
220 break;
221 }
222 snake = newSnake;
223 if(checkDeath()){
224 drawSnake();
225 }
226 }
227 //产生随机的食物
228 function randomFood(){
229 //Math.random() 0~1
230 var foodX = Math.ceil(Math.random()*28)+1;
231 var foodY = Math.ceil(Math.random()*28)+1;
232 //判断产生的食物是否跟蛇的身体有冲突
233 for(var i = 0;i < snake.length;i++){
234 //蛇的节点中的坐标跟食物的坐标重叠
235 if(snake[i].x==foodX&&snake[i].y==foodY){
236 randomFood();
237 }
238 }
239 food = new Food(foodX,foodY);
240 }
241 function moveClock(){
242 moveSnake(snake[snake.length-1].f);
243 setTimeout("moveClock()",speed)
244 }
245 function checkDeath(){
246 var head = snake[snake.length-1];
247 //判断是不是跨过了边界
248 if(head.x>=30||head.y>=30||head.x<0||head.y<0){
249 alert("Game Over");
250 window.location.reload();
251 flag = false;
252 return false;
253 }
254 //判断是不是咬了自己
255 for(var i = 0;i < snake.length-1;i++){
256 if(head.x==snake[i].x&&head.y==snake[i].y){
257 alert("Game Over");
258 window.location.reload();
259 flag = false;
260 return false;
261 }
262 }
263 return true;
264 }
265 drawSnake();
266 moveClock();
267 </script>
268 </body>
269 </html>
