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>
