标签：
估计没几个人会想到研究性学习搞加各种特效的贪吃蛇的吧
把这几周搞研究性学习的结果记录一下
1.0：学会了用canvas画布画出好烂好烂的贪吃蛇界面……而且仅仅是界面……不过初学者嘛……不要在意这些细节
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>crazy_SNAKE</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;font-family: "Microsoft YaHei";} 8 #page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:980px;} 9 #yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;} 10 #mark{font-weight:800;} 11 #scores{color:red;} 12 button{width:50px;} 13 a{text-decoration:none;} 14 </style> 15 <script type="text/javascript"> 16 17 var cell_size=20; 18 var Height=30; 19 var Width=40; 20 //const define 21 22 var map=new Array()//地图状态 23 for (var i=0;i<Height;i++) 24 { 25 map[i]=new Array() 26 for (var j=0;j<Width;j++) map[i][j]=0; 27 } 28 var snake=[];//蛇的坐标 29 var c=null;//绘图对象 30 var interval=null;//计时器 31 var direction=3;//方向 32 var length=4;//长度 33 var foodx=0;//食物坐标 34 var foody=0; 35 var score=null;//分数 36 var paused=false;//暂停状态 37 var T=200;//周期，控制蛇的速度 38 //var define 39 function judge_key(opr) 40 { 41 if(opr==37&&direction!=1&&direction!=3)direction=1; 42 else if(opr==38&&direction!=2&&direction!=4)direction=2; 43 else if(opr==39&&direction!=1&&direction!=3)direction=3; 44 else if(opr==40&&direction!=2&&direction!=4)direction=4; 45 else 46 { 47 paused^=1; 48 if(!paused) 49 { 50 document.getElementById(‘pause‘).innerHTML="暂停"; 51 interval=setInterval(move,T); 52 }else 53 { 54 document.getElementById(‘pause‘).innerHTML="开始"; 55 clearInterval(interval); 56 } 57 } 58 } 59 function draw() 60 { 61 c.clearRect(0,0,cell_size*Width,cell_size*Height); 62 c.strokestyle="black"; 63 c.linewidth=1.0; 64 65 //======================================================================================横线竖线 66 for (var i=1;i<=Height;i++) 67 { 68 c.beginPath(); 69 c.moveTo(0,i*cell_size); 70 c.lineTo(Width*cell_size,i*cell_size); 71 c.stroke(); 72 } 73 for(var i=1;i<=Width;i++) 74 { 75 c.beginPath(); 76 c.moveTo(i*cell_size,0); 77 c.lineTo(i*cell_size,Height*cell_size); 78 c.stroke(); 79 } 80 } 81 function init() 82 { 83 for (var i = 0; i < length; i++) 84 { 85 snake.unshift({x:i,y:0}); 86 map[i][0]=1; 87 } 88 add_food(); 89 draw(); 90 score.innerHTML = 0; 91 } 92 function move() 93 { 94 95 } 96 97 function judge_eat() 98 { 99 100 } 101 102 function judge_dead() 103 { 104 105 } 106 107 function add_food() 108 { 109 foodx=-1; 110 foody=-1; 111 while(!(foodx>=0&&foody>=0&&foodx<=Width&&foody<=Height&&map[foodx][foody]==0)) 112 { 113 foodx=Math.floor(Math.random()*(Width-1)); 114 foody=Math.floor(Math.random()*(Height-1)); 115 } 116 } 117 window.onload=function() 118 { 119 c=document.getElementById(‘screen‘).getContext(‘2d‘); 120 score=document.getElementById(‘scores‘); 121 init(); 122 interval=setInterval(move,T); 123 } 124 </script> 125 </head> 126 127 <body> 128 <div id="page"> 129 <div id="yard"><canvas id="screen" height="800px" width="800px"></canvas></div> 130 <div id="status"> 131 <div id="mark">得分：<span id="scores"></span></div> 132 <div id="control_system"> 133 <table width="58"> 134 <tr> 135 <td width="14"></td> 136 <td width="13"><button onclick="judge_key(38);">上</button></td> 137 <td width="15"></td> 138 </tr> 139 <tr> 140 <td><button onclick="judge_key(37);">左</button></td> 141 <td><button onclick="judge_key(88);"id="pause">暂停</button></td> 142 <td><button onclick="judge_key(39);">右</button></td> 143 </tr> 144 <tr> 145 <td></td> 146 <td><button onclick="judge_key(40);">下</button></td> 147 <td></td> 148 </tr> 149 </table><a href="crazy_snake.html">再来一次</a> 150 </div> 151 </div> 152 </div> 153 <div style="text-align:center;"> 154 </body> 155 </html>
2.0：贪吃蛇的基本框架完成。随机生成食物，方向键移动，加入e键穿墙、p键暂停功能
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>crazy_SNAKE</title> 6 <style type="text/css"> 7 #page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:900px;} 8 #yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;} 9 10 #mark{font-weight:800;} 11 #scores{color:red;} 12 </style> 13 <script type="text/javascript"> 14 15 var cell_size=20; 16 var Height=30; 17 var Width=40; 18 //const define 19 20 var map=new Array()//地图状态 21 for (var i=0;i<Width;i++) 22 { 23 map[i]=new Array() 24 for (var j=0;j<Height;j++) map[i][j]=0; 25 } 26 var snake=[];//蛇的坐标 27 var c=null;//绘图对象 28 var time_interval=null;//移动计时器 29 var draw_interval=null;//画图计时器 30 var score=null;//分数 31 var direction=3;//方向 32 var next_direction=3; 33 var length=4;//长度 34 var foodx=0;//食物x坐标 35 var foody=0;//食物y坐标 36 var paused=false;//暂停状态 37 var getfood=false;//吃到食物 38 var through=false;//穿墙 39 var T=150;//周期，控制蛇的速度 40 //var define 41 function change_through() 42 { 43 if (through==true) 44 { 45 through=false; 46 document.getElementById(‘go_through‘).innerHTML="开启"; 47 document.getElementById(‘go_through_walls‘).innerHTML="穿墙：已关闭"; 48 }else 49 { 50 through=true; 51 document.getElementById(‘go_through‘).innerHTML="关闭"; 52 document.getElementById(‘go_through_walls‘).innerHTML="穿墙：已开启"; 53 } 54 } 55 function judge_key(opr) 56 { 57 if(opr==37&&direction!=1&&direction!=3)next_direction=1; 58 else if(opr==38&&direction!=2&&direction!=4)next_direction=2; 59 else if(opr==39&&direction!=1&&direction!=3)next_direction=3; 60 else if(opr==40&&direction!=2&&direction!=4)next_direction=4; 61 else if(opr==80) 62 { 63 if(paused) 64 { 65 move_interval=setInterval(move,T); 66 draw_interval=setInterval(draw,20); 67 paused=false; 68 document.getElementById(‘pause‘).innerHTML="暂停"; 69 document.getElementById(‘pause_status‘).innerHTML="状态：已开始"; 70 }else 71 { 72 clearInterval(move_interval); 73 clearInterval(draw_interval); 74 paused=true; 75 document.getElementById(‘pause‘).innerHTML="开始"; 76 document.getElementById(‘pause_status‘).innerHTML="状态：已暂停"; 77 } 78 }else if (opr==69)change_through(); 79 } 80 function draw() 81 { 82 c.clearRect(0,0,cell_size*Width,cell_size*Height); 83 //======================================================================================横线竖线 84 c.strokeStyle="black"; 85 for (var i=0;i<=Height;i++) 86 { 87 c.beginPath(); 88 c.moveTo(0,i*cell_size); 89 c.lineTo(Width*cell_size,i*cell_size); 90 c.stroke(); 91 } 92 for(var i=0;i<Width;i++) 93 { 94 c.beginPath(); 95 c.moveTo(i*cell_size,0); 96 c.lineTo(i*cell_size,Height*cell_size); 97 c.stroke(); 98 } 99 //======================================================================================蛇身 100 c.strokeStyle="white"; 101 c.fillStyle="blue"; 102 for (var i=0;i<length;i++) 103 { 104 c.fillRect(snake[i].x*cell_size,snake[i].y*cell_size,cell_size,cell_size); 105 c.beginPath(); 106 c.moveTo(snake[i].x*cell_size,snake[i].y*cell_size); 107 c.lineTo((snake[i].x+1)*cell_size,snake[i].y*cell_size); 108 c.lineTo((snake[i].x+1)*cell_size,(snake[i].y+1)*cell_size); 109 c.lineTo(snake[i].x*cell_size,(snake[i].y+1)*cell_size); 110 c.closePath(); 111 c.stroke(); 112 } 113 //======================================================================================食物 114 c.fillStyle="yellow"; 115 c.strokeStyle="red"; 116 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 117 c.beginPath(); 118 c.moveTo(foodx*cell_size,foody*cell_size); 119 c.lineTo((foodx+1)*cell_size,foody*cell_size); 120 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 121 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 122 c.closePath(); 123 c.stroke(); 124 } 125 function init() 126 { 127 for (var i = 0; i < length; i++) 128 { 129 snake.unshift({x:i,y:0}); 130 map[i][0]=1; 131 } 132 add_food(); 133 draw(); 134 score.innerHTML=0; 135 } 136 function move() 137 { 138 var nx=snake[0].x,ny=snake[0].y; 139 direction=next_direction; 140 next_direction=direction; 141 if (direction==1)nx--; 142 if (direction==2)ny--; 143 if (direction==3)nx++; 144 if (direction==4)ny++; 145 if (through) 146 { 147 if (nx>=Width)nx-=Width; 148 if (nx<0)nx+=Width; 149 if (ny>=Height)ny-=Height; 150 if (ny<0)ny+=Height; 151 } 152 if (judge_dead(nx,ny))return; 153 judge_eat(nx,ny); 154 map[nx][ny]=1; 155 snake.unshift({x:nx,y:ny}); 156 if (!getfood) 157 { 158 map[snake[length-1].x][snake[length-1].y]=0; 159 snake.pop(); 160 } 161 else 162 { 163 length++; 164 getfood=false; 165 } 166 console.log(through); 167 } 168 169 function judge_eat(nx,ny) 170 { 171 if (foodx==nx&&foody==ny) 172 { 173 add_food(); 174 getfood=true; 175 if (T>=40)T-=20; 176 score.innerHTML++; 177 } 178 } 179 180 function judge_dead(nx,ny) 181 { 182 183 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&!through)||map[nx][ny]) 184 { 185 alert("Game Over!"); 186 clearInterval(move_interval); 187 clearInterval(draw_interval); 188 return 1; 189 } 190 return 0; 191 } 192 function add_food() 193 { 194 foodx=-1; 195 foody=-1; 196 while(!(foodx>=0&&foody>=0&&foodx<Width&&foody<Height&&map[foodx][foody]==0)) 197 { 198 foodx=Math.floor(Math.random()*(Width-1)); 199 foody=Math.floor(Math.random()*(Height-1)); 200 } 201 } 202 window.onload=function() 203 { 204 c=document.getElementById(‘screen‘).getContext(‘2d‘); 205 score=document.getElementById(‘scores‘); 206 paused=false; 207 through=false; 208 init(); 209 move_interval=setInterval(move,T); 210 draw_interval=setInterval(draw,20); 211 document.onkeydown=function(event) 212 { 213 var event=event||window.event; 214 judge_key(event.keyCode); 215 } 216 } 217 </script> 218 </head> 219 220 <body> 221 <div id="page"> 222 <div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div> 223 <div id="status"> 224 <div id="mark"><b>得分：<span id="scores"></span></b></div> 225 <div id="pause_status">状态：已开始</div> 226 <button onclick="judge_key(80)"id="pause">暂停</button> 227 <div id="go_through_walls">穿墙：已关闭</div> 228 <button onclick="change_through()"id="go_through">开启</button> 229 </div> 230 </body> 231 </html>
2.1：一些优化：
1、修正了吃到食物之后贪吃蛇不能正确加速的bug
2、修正了死掉以后还能控制穿墙和暂停的bug
3、 加特技~duang~现在方向键和鼠标滑动都可以控制贪吃蛇了（主要模拟手势，为下一步移植到手机上做准备）
4、优化了代码的结构，合并了一些冗余代码
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>crazy_SNAKE</title> 6 <style type="text/css"> 7 #page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:900px;} 8 #yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;} 9 #mark{font-weight:800;} 10 #scores{color:red;} 11 </style> 12 <script type="text/javascript"> 13 14 var cell_size=20,Height=30,Width=40;//const define 15 var map=new Array()//地图状态 16 for (var i=0;i<Width;i++) 17 { 18 map[i]=new Array() 19 for (var j=0;j<Height;j++) map[i][j]=0; 20 } 21 var snake=[];//蛇的坐标 22 var c=null;//绘图对象 23 var time_interval=null;//移动计时器 24 var draw_interval=null;//画图计时器 25 var score=null;//分数 26 var direction=3;//方向 27 var next_direction=3; 28 var length=4;//长度 29 var foodx=0;//食物x坐标 30 var foody=0;//食物y坐标 31 var paused=false;//暂停状态 32 var getfood=false;//吃到食物 33 var through=false;//穿墙 34 var sx=0,sy=0,ex=0,ey=0;//手势读取 35 var T=150;//周期，控制蛇的速度 36 //var define 37 function judge_key(opr) 38 { 39 if(opr==37&&direction!=1&&direction!=3)next_direction=1;//左 40 else if(opr==38&&direction!=2&&direction!=4)next_direction=2;//上 41 else if(opr==39&&direction!=1&&direction!=3)next_direction=3;//右 42 else if(opr==40&&direction!=2&&direction!=4)next_direction=4;//下 43 else if(opr==80)//p 44 { 45 if(paused==true) 46 { 47 move_interval=setInterval(move,T); 48 draw_interval=setInterval(draw,10); 49 paused=false; 50 document.getElementById(‘pause‘).innerHTML="暂停"; 51 document.getElementById(‘pause_status‘).innerHTML="状态：已开始"; 52 }else 53 { 54 clearInterval(move_interval); 55 clearInterval(draw_interval); 56 paused=true; 57 document.getElementById(‘pause‘).innerHTML="开始"; 58 document.getElementById(‘pause_status‘).innerHTML="状态：已暂停"; 59 } 60 }else if (opr==69)//e 61 { 62 if (through==true) 63 { 64 through=false; 65 document.getElementById(‘go_through‘).innerHTML="开启"; 66 document.getElementById(‘go_through_walls‘).innerHTML="穿墙：已关闭"; 67 }else 68 { 69 through=true; 70 document.getElementById(‘go_through‘).innerHTML="关闭"; 71 document.getElementById(‘go_through_walls‘).innerHTML="穿墙：已开启"; 72 } 73 } 74 } 75 function draw() 76 { 77 c.clearRect(0,0,cell_size*Width,cell_size*Height); 78 //======================================================================================横线竖线 79 c.strokeStyle="black"; 80 for (var i=0;i<=Height;i++) 81 { 82 c.beginPath(); 83 c.moveTo(0,i*cell_size); 84 c.lineTo(Width*cell_size,i*cell_size); 85 c.stroke(); 86 } 87 for(var i=0;i<Width;i++) 88 { 89 c.beginPath(); 90 c.moveTo(i*cell_size,0); 91 c.lineTo(i*cell_size,Height*cell_size); 92 c.stroke(); 93 } 94 //======================================================================================蛇身 95 c.strokeStyle="white"; 96 c.fillStyle="blue"; 97 for (var i=0;i<length;i++) 98 { 99 c.fillRect(snake[i].x*cell_size,snake[i].y*cell_size,cell_size,cell_size); 100 c.beginPath(); 101 c.moveTo(snake[i].x*cell_size,snake[i].y*cell_size); 102 c.lineTo((snake[i].x+1)*cell_size,snake[i].y*cell_size); 103 c.lineTo((snake[i].x+1)*cell_size,(snake[i].y+1)*cell_size); 104 c.lineTo(snake[i].x*cell_size,(snake[i].y+1)*cell_size); 105 c.closePath(); 106 c.stroke(); 107 } 108 //======================================================================================食物 109 c.fillStyle="yellow"; 110 c.strokeStyle="red"; 111 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 112 c.beginPath(); 113 c.moveTo(foodx*cell_size,foody*cell_size); 114 c.lineTo((foodx+1)*cell_size,foody*cell_size); 115 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 116 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 117 c.closePath(); 118 c.stroke(); 119 } 120 function init() 121 { 122 for (var i=0;i<length;i++) 123 { 124 snake.unshift({x:i,y:0}); 125 map[i][0]=1; 126 } 127 add_food(); 128 draw(); 129 score.innerHTML=0; 130 } 131 function move() 132 { 133 var nx=snake[0].x,ny=snake[0].y; 134 direction=next_direction; 135 next_direction=direction; 136 if (direction==1)nx--; 137 if (direction==2)ny--; 138 if (direction==3)nx++; 139 if (direction==4)ny++; 140 if (through) 141 { 142 if (nx>=Width)nx-=Width; 143 if (nx<0)nx+=Width; 144 if (ny>=Height)ny-=Height; 145 if (ny<0)ny+=Height; 146 } 147 if (judge_dead(nx,ny))return; 148 judge_eat(nx,ny); 149 map[nx][ny]=1; 150 snake.unshift({x:nx,y:ny}); 151 if (!getfood) 152 { 153 map[snake[length].x][snake[length].y]=0; 154 snake.pop(); 155 } 156 else 157 { 158 length++; 159 getfood=false; 160 } 161 } 162 163 function judge_eat(nx,ny) 164 { 165 if (foodx==nx&&foody==ny) 166 { 167 add_food(); 168 getfood=true; 169 if (T>=60)T-=10; 170 clearInterval(move_interval); 171 move_interval=setInterval(move,T); 172 score.innerHTML++; 173 } 174 } 175 176 function judge_dead(nx,ny) 177 { 178 179 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||map[nx][ny]) 180 { 181 alert("Game Over!"); 182 clearInterval(move_interval); 183 clearInterval(draw_interval); 184 document.getElementById("pause").disabled="true"; 185 document.getElementById("go_through").disabled="true"; 186 document.getElementById("page").removeEventListener("mousedown",touchStart,false); 187 document.getElementById("page").removeEventListener("mouseup",touchEnd,false); 188 document.removeEventListener("keydown",jud,false); 189 return 1; 190 } 191 return 0; 192 } 193 function add_food() 194 { 195 foodx=-1; 196 foody=-1; 197 while(!(foodx>=0&&foody>=0&&foodx<Width&&foody<Height&&map[foodx][foody]==0)) 198 { 199 foodx=Math.floor(Math.random()*(Width-1)); 200 foody=Math.floor(Math.random()*(Height-1)); 201 } 202 } 203 function touchStart(event) 204 { 205 event=event||window.event; 206 event.preventDefault(); 207 sx=event.clientX; 208 sy=event.clientY; 209 } 210 function touchEnd(event) 211 { 212 event=event||wondow.event; 213 event.preventDefault(); 214 ex=event.clientX; 215 ey=event.clientY; 216 //tan(pi/9)=tan(20)=0.364 217 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.364)judge_key(37); 218 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.364)judge_key(38); 219 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.364)judge_key(39); 220 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.364)judge_key(40); 221 } 222 function jud(event) 223 { 224 var event=event||window.event; 225 event.preventDefault(); 226 judge_key(event.keyCode); 227 } 228 window.onload=function() 229 { 230 c=document.getElementById("screen").getContext("2d"); 231 score=document.getElementById("scores"); 232 paused=false;through=false; 233 init(); 234 move_interval=setInterval(move,T); 235 draw_interval=setInterval(draw,10); 236 document.getElementById("page").addEventListener("mousedown",touchStart,false); 237 document.getElementById("page").addEventListener("mouseup",touchEnd,false); 238 document.addEventListener("keydown",jud,false); 239 } 240 </script> 241 </head> 242 243 <body> 244 <div id="page"> 245 <div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div> 246 <div id="status"> 247 <div id="mark">得分：<span id="scores"></span></div> 248 <div id="pause_status">状态：已开始</div> 249 <button onclick="judge_key(80)"id="pause">暂停</button> 250 <div id="go_through_walls">穿墙：已关闭</div> 251 <button onclick="judge_key(60)"id="go_through">开启</button> 252 </div> 253 </body> 254 </html>
下一步计划跨平台与加入道具元素……更多内容敬请期待……
标签：
原文地址：http://www.cnblogs.com/zhber/p/4391336.html
