原创作品，转载请注明来源http://www.cnblogs.com/zhber/p/4391336.html
估计没几个人会想到研究性学习搞加各种特效的贪吃蛇的吧
把这几周搞研究性学习的结果记录一下
本人负责html代码相关……数据库维护请转到app.htouko.com/snake/（为什么换服务器了？我也不知道……）
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 </style> 11 <script type="text/javascript"> 12 13 var cell_size=20; 14 var Height=30; 15 var Width=40; 16 //const define 17 18 var map=new Array()//地图状态 19 for (var i=0;i<Height;i++) 20 { 21 map[i]=new Array() 22 for (var j=0;j<Width;j++) map[i][j]=0; 23 } 24 var snake=[];//蛇的坐标 25 var c=null;//绘图对象 26 var direction=3;//方向 27 var length=4;//长度 28 var foodx=0;//食物坐标 29 var foody=0; 30 //var define 31 function draw() 32 { 33 c.clearRect(0,0,cell_size*Width,cell_size*Height); 34 c.strokestyle="black"; 35 c.linewidth=1.0; 36 37 //======================================================================================横线竖线 38 for (var i=1;i<=Height;i++) 39 { 40 c.beginPath(); 41 c.moveTo(0,i*cell_size); 42 c.lineTo(Width*cell_size,i*cell_size); 43 c.stroke(); 44 } 45 for(var i=1;i<=Width;i++) 46 { 47 c.beginPath(); 48 c.moveTo(i*cell_size,0); 49 c.lineTo(i*cell_size,Height*cell_size); 50 c.stroke(); 51 } 52 } 53 function init() 54 { 55 for (var i=0;i<length;i++) 56 { 57 snake.unshift({x:i,y:0}); 58 map[i][0]=1; 59 } 60 add_food(); 61 draw(); 62 } 63 function move() 64 { 65 66 } 67 68 function judge_eat() 69 { 70 71 } 72 73 function judge_dead() 74 { 75 76 } 77 78 function add_food() 79 { 80 foodx=-1; 81 foody=-1; 82 while(!(foodx>=0&&foody>=0&&foodx<=Width&&foody<=Height&&map[foodx][foody]==0)) 83 { 84 foodx=Math.floor(Math.random()*(Width-1)); 85 foody=Math.floor(Math.random()*(Height-1)); 86 } 87 } 88 window.onload=function() 89 { 90 c=document.getElementById('screen').getContext('2d'); 91 init(); 92 } 93 </script> 94 </head> 95 96 <body> 97 <div id="page"> 98 <div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div> 99 </div> 100 </body> 101 </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~现在方向键和鼠标滑动都可以控制贪吃蛇了
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>
2.2：更多的优化：
1、移除手动开关穿墙
2、画面优化：蛇身加特技，显示内容微调
3、取消网格的绘制
4、添加了开始界面，不太完善，将来会一步步改善的
5、移除了鼠标控制的功能，加入触屏控制，并略加大了滑动判定的角度。现在你在手机上也能玩了
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-left:20px;margin-top:20px;height:600px;width:900px;position:absolute;top:0px;left:0px;float:left;z-index:0;} 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 #select_button{ 12 opacity: 1; 13 border-collapse: separate; 14 border-color: #FFFFFF; 15 width: 160px; 16 height: 90px; 17 z-index: 5; 18 color: #0000FF; 19 font-style: italic; 20 font-weight: bolder; 21 font-size: x-large; 22 text-align: center; 23 text-shadow: 8px 8px 3px #666666; 24 border-radius: 25px; 25 background-image: -webkit-gradient(linear,50.00% 0.00%,50.00% 100.00%,color-stop(0%,rgba(255,255,255,1.00)),color-stop(100%,rgba(255,60,60,1.00))); 26 background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%); 27 background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%); 28 top: 265px; 29 left: 370px; 30 position: absolute; 31 background-size: cover; 32 } 33 #select_page{ 34 position: fixed; 35 top: 0px; 36 left: 0px; 37 margin-top: 0px; 38 margin-left: 0px; 39 width: 900px; 40 height: 600px; 41 float: left; 42 z-index: 1; 43 background-size: cover; 44 background-image: -webkit-gradient(linear,100.00% 100.00%,0.00% 0.00%,color-stop(0%,rgba(255,255,255,1.00)),color-stop(100%,rgba(0,0,255,1.00))); 45 background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); 46 background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); 47 text-align: center; 48 } 49 </style> 50 <script type="text/javascript"> 51 52 var cell_size=20,Height=30,Width=40;//const define 53 var map=new Array()//地图状态 54 for (var i=0;i<Width;i++) 55 { 56 map[i]=new Array() 57 for (var j=0;j<Height;j++) map[i][j]=0; 58 } 59 var snake=[];//蛇的坐标 60 var c=null;//绘图对象 61 var time_interval=null;//移动计时器 62 var draw_interval=null;//画图计时器 63 var score=null;//分数 64 var direction=3;//方向 65 var next_direction=3; 66 var length=4;//长度 67 var foodx=0;//食物x坐标 68 var foody=0;//食物y坐标 69 var paused=false;//暂停状态 70 var getfood=false;//吃到食物 71 var through=false;//穿墙 72 var sx=0,sy=0,ex=0,ey=0;//手势读取 73 var T=150;//周期，控制蛇的速度 74 //var define 75 function judge_key(opr) 76 { 77 if(opr==37&&direction!=1&&direction!=3)next_direction=1;//左 78 else if(opr==38&&direction!=2&&direction!=4)next_direction=2;//上 79 else if(opr==39&&direction!=1&&direction!=3)next_direction=3;//右 80 else if(opr==40&&direction!=2&&direction!=4)next_direction=4;//下 81 else if(opr==80)//p 82 { 83 if(paused==true) 84 { 85 move_interval=setInterval(move,T); 86 draw_interval=setInterval(draw,10); 87 paused=false; 88 document.getElementById('pause').innerHTML="暂停"; 89 document.getElementById('pause_status').innerHTML="游戏进行中"; 90 }else 91 { 92 clearInterval(move_interval); 93 clearInterval(draw_interval); 94 paused=true; 95 document.getElementById('pause').innerHTML="开始"; 96 document.getElementById('pause_status').innerHTML="游戏已暂停"; 97 } 98 }/*else if (opr==69)//e 99 { 100 if (through==true) 101 { 102 through=false; 103 document.getElementById('go_through').innerHTML="开启"; 104 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 105 }else 106 { 107 through=true; 108 document.getElementById('go_through').innerHTML="关闭"; 109 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 110 } 111 }*/ 112 } 113 function draw() 114 { 115 c.clearRect(0,0,cell_size*Width,cell_size*Height); 116 //======================================================================================横线竖线 117 /* c.strokeStyle="black"; 118 for (var i=0;i<=Height;i++) 119 { 120 c.beginPath(); 121 c.moveTo(0,i*cell_size); 122 c.lineTo(Width*cell_size,i*cell_size); 123 c.stroke(); 124 } 125 for(var i=0;i<Width;i++) 126 { 127 c.beginPath(); 128 c.moveTo(i*cell_size,0); 129 c.lineTo(i*cell_size,Height*cell_size); 130 c.stroke(); 131 } 132 */ 133 //======================================================================================蛇身 134 c.strokeStyle="white"; 135 c.fillStyle="blue"; 136 c.fillRect(snake[0].x*cell_size,snake[0].y*cell_size,cell_size,cell_size); 137 c.beginPath(); 138 c.moveTo(snake[0].x*cell_size,snake[0].y*cell_size); 139 c.lineTo((snake[0].x+1)*cell_size,snake[0].y*cell_size); 140 c.lineTo((snake[0].x+1)*cell_size,(snake[0].y+1)*cell_size); 141 c.lineTo(snake[0].x*cell_size,(snake[0].y+1)*cell_size); 142 c.closePath(); 143 c.stroke(); 144 c.fillStyle="#00ffff"; 145 for (var i=1;i<length;i++) 146 { 147 c.fillRect(snake[i].x*cell_size,snake[i].y*cell_size,cell_size,cell_size); 148 c.beginPath(); 149 c.moveTo(snake[i].x*cell_size,snake[i].y*cell_size); 150 c.lineTo((snake[i].x+1)*cell_size,snake[i].y*cell_size); 151 c.lineTo((snake[i].x+1)*cell_size,(snake[i].y+1)*cell_size); 152 c.lineTo(snake[i].x*cell_size,(snake[i].y+1)*cell_size); 153 c.closePath(); 154 c.stroke(); 155 } 156 //======================================================================================食物 157 c.fillStyle="yellow"; 158 c.strokeStyle="red"; 159 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 160 c.beginPath(); 161 c.moveTo(foodx*cell_size,foody*cell_size); 162 c.lineTo((foodx+1)*cell_size,foody*cell_size); 163 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 164 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 165 c.closePath(); 166 c.stroke(); 167 } 168 function init() 169 { 170 for (var i=0;i<length;i++) 171 { 172 snake.unshift({x:i,y:0}); 173 map[i][0]=1; 174 } 175 add_food(); 176 draw(); 177 score.innerHTML=0; 178 } 179 function move() 180 { 181 var nx=snake[0].x,ny=snake[0].y; 182 direction=next_direction; 183 next_direction=direction; 184 if (direction==1)nx--; 185 if (direction==2)ny--; 186 if (direction==3)nx++; 187 if (direction==4)ny++; 188 if (through) 189 { 190 if (nx>=Width)nx-=Width; 191 if (nx<0)nx+=Width; 192 if (ny>=Height)ny-=Height; 193 if (ny<0)ny+=Height; 194 } 195 if (judge_dead(nx,ny))return; 196 judge_eat(nx,ny); 197 map[nx][ny]=1; 198 snake.unshift({x:nx,y:ny}); 199 if (!getfood) 200 { 201 map[snake[length].x][snake[length].y]=0; 202 snake.pop(); 203 } 204 else 205 { 206 length++; 207 getfood=false; 208 } 209 } 210 function judge_eat(nx,ny) 211 { 212 if (foodx==nx&&foody==ny) 213 { 214 add_food(); 215 getfood=true; 216 if (T>=60)T-=10; 217 clearInterval(move_interval); 218 move_interval=setInterval(move,T); 219 score.innerHTML++; 220 } 221 } 222 function judge_dead(nx,ny) 223 { 224 225 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||map[nx][ny]) 226 { 227 alert("Game Over!"); 228 clearInterval(move_interval); 229 clearInterval(draw_interval); 230 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 231 document.getElementById("pause").disabled="true"; 232 document.getElementById("go_through").disabled="true"; 233 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 234 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 235 document.removeEventListener("keydown",jud,false); 236 return 1; 237 } 238 return 0; 239 } 240 function add_food() 241 { 242 foodx=-1; 243 foody=-1; 244 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]==1) 245 { 246 foodx=Math.floor(Math.random()*(Width-1)); 247 foody=Math.floor(Math.random()*(Height-1)); 248 } 249 } 250 function touchStart(event) 251 { 252 event=event||window.event; 253 event.preventDefault(); 254 var touch=event.changedTouches[0]; 255 sx=touch.pageX; 256 sy=touch.pageY; 257 } 258 function touchEnd(event) 259 { 260 event=event||wondow.event; 261 event.preventDefault(); 262 var touch=event.changedTouches[0]; 263 ex=touch.pageX; 264 ey=touch.pageY; 265 //tan(pi/9)=tan(20)=0.364 266 //tan(pi/6)=tan(30)=0.577 267 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 268 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 269 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 270 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 271 }6 272 function jud(event) 273 { 274 var event=event||window.event; 275 event.preventDefault(); 276 judge_key(event.keyCode); 277 } 278 function startgame() 279 { 280 document.getElementById("select_page").style.display="none"; 281 document.getElementById("page").style.display="block"; 282 c=document.getElementById("screen").getContext("2d"); 283 score=document.getElementById("scores"); 284 paused=false;through=false; 285 init(); 286 move_interval=setInterval(move,T); 287 draw_interval=setInterval(draw,10); 288 document.getElementById("page").addEventListener("touchstart",touchStart,false); 289 document.getElementById("page").addEventListener("touchend",touchEnd,false); 290 document.addEventListener("keydown",jud,false); 291 } 292 </script> 293 </head> 294 295 <body> 296 <div id="select_page" style="display:block"> 297 <button id="select_button" onclick="startgame()">开始游戏！</button> 298 </div> 299 <div id="page" style="display:none"> 300 <div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div> 301 <div id="status"> 302 <div id="mark">得分：<span id="scores"></span></div> 303 <div id="pause_status">游戏进行中</div> 304 <button onclick="judge_key(80)"id="pause">暂停</button> 305 <div id="go_through_walls">穿墙：关闭</div> 306 <button onclick="judge_key(60)"id="go_through" disabled="true">开启</button> 307 </div> 308 </body> 309 </html>
3.0 ：全新版本！加入双人游戏模式！（仅限电脑端）
1、版本更新，加入双人模式
2、加入伪·响应式布局，自动调整大小
3、加入管理员权限（权限狗）
4、修正可以暂停后无限调整方向的bug
5、全新的开始界面更酷炫了
1 <!doctype html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=0.5"> 5 <meta charset="utf-8"> 6 <title>crazy_snake_1</title> 7 <style type="text/css"> 8 #page{ position: fixed; z-index: 0; max-width: 900px; max-height: 600px; width: 900px; height: 600px; top: 0px; left: 0px; margin-left: 20px; margin-top: 20px; } 9 .select_button{ border-color: #FFFFFF; width: 160px; height: 90px; z-index: 5; color: #0000FF; font-size: 25px; text-align: center; background-image: -webkit-gradient(linear,50.00% 0.00%,50.00% 100.00%,color-stop(0%,rgba(255,255,255,1.00)),color-stop(100%,rgba(255,60,60,1.00))); background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%); position: absolute; border-radius: 25px; max-width: 160px; max-height: 90px; display: inline-block; margin-left: -80px; margin-top: -45px; font-weight: bold;text-shadow:3px 3px 1px #999999;} 10 #select_page{ position: relative;width:900px;height:600px; z-index: 1; background-image: -webkit-gradient(linear,100.00% 100.00%,0.00% 0.00%,color-stop(0%,rgba(255,255,255,1.00)),color-stop(100%,rgba(0,0,255,1.00))); background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); text-align: center; max-width: 900px; max-height: 600px; top: 0px; left: 0px; text-shadow: 3px 3px 1px #999999;} 11 #canvas{ position: absolute; top: 0px; right: 0px; max-width: 800px; max-height: 600px; display: inline-block; border: 2px inset #666666; } 12 .simple_font_type{ font-size: 15px; } 13 </style> 14 </head> 15 16 17 <body style="margin:0;"> 18 <div id="select_page"> 19 <button id="single_button"class="select_button"onclick="choose_mode(1);"style="top:25%;left:25%;">单人模式</button> 20 <button id="double_button"class="select_button"onclick="choose_mode(2);"style="top:25%;left:75%;">双人模式</button> 21 <button id="items_button"class="select_button"onclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;"disabled="true">道具场</button> 22 <button id="rating_button"class="select_button"onclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;"disabled="true">天梯排位赛</button> 23 <button id="start_button"class="select_button"onclick="startgame(gamemode);"style="top:50%;left:50%;color:#D6D6D6;"disabled="true">开始游戏！</button> 24 <button id="Admin_button"class="select_button"onclick="open_Admin();"style="top:90%;left:50%;color:#D6D6D6;">管理员权限狗!!!</button> 25 </div> 26 <div id="page" style="visibility:hidden;"> 27 <div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div> 28 <div id="status"> 29 <div class="simple_font_type"><b>得分：<span id="scores"style="color:red"></b></span></div> 30 <div id="pause_status"class="simple_font_type">游戏进行中</div> 31 <button id="pause"class="simple_font_type"onclick="judge_key(80)">暂停</button> 32 <div id="go_through_walls"class="simple_font_type">穿墙：开启</div> 33 <button id="go_through"class="simple_font_type"onclick="judge_key(69)" disabled="true">关闭</button> 34 </div> 35 </div> 36 </body> 37 38 39 <head> 40 <script type="text/javascript"> 41 var cell_size=20.0,Height=30,Width=40; 42 var map=new Array()//地图状态 43 for (var i=0;i<Width;i++) 44 { 45 map[i]=new Array() 46 for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇； 47 } 48 var snake_1=[];//蛇坐标 49 var snake_2=[]; 50 var c=null;//绘图对象 51 var time_interval=null;//移动计时器 52 var draw_interval=null;//画图计时器 53 var score=null,score_1=0,score_2=0;//分数 54 var direction_1=3,direction=4;//方向 55 var next_direction_1=3,next_direction_2=4; 56 var foodx=0,foody=0; 57 var length_1=4,length_2=4;//长度 58 var paused=false;//暂停状态 59 var getfood_1=false,getfood_2=false;//吃到食物 60 var through=false;//穿墙 61 var T=150;//周期，控制蛇的速度 62 var sx=0,sy=0,ex=0,ey=0;//手势读取 63 var Administrator_access=false;//管理员权限 64 var adjust_ratio=1.0;//伪·响应式布局 65 var gamemode="";//游戏模式 66 var players=1; 67 function judge_key(opr) 68 { 69 if (paused==false) 70 { 71 if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左 72 if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上 73 if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右 74 if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下 75 if (players==2) 76 { 77 if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左 78 if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上 79 if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右 80 if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下 81 } 82 } 83 if(opr==80)//p 84 { 85 if(paused==true) 86 { 87 move_interval=setInterval(move,T); 88 draw_interval=setInterval(draw,10); 89 paused=false; 90 document.getElementById('pause').innerHTML="暂停"; 91 document.getElementById('pause_status').innerHTML="游戏进行中"; 92 }else 93 { 94 clearInterval(move_interval); 95 clearInterval(draw_interval); 96 paused=true; 97 document.getElementById('pause').innerHTML="开始"; 98 document.getElementById('pause_status').innerHTML="游戏已暂停"; 99 } 100 } 101 if (opr==69&&Administrator_access==true)//e 102 { 103 if (through==true) 104 { 105 through=false; 106 document.getElementById('go_through').innerHTML="开启"; 107 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 108 }else 109 { 110 through=true; 111 document.getElementById('go_through').innerHTML="关闭"; 112 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 113 } 114 } 115 } 116 function draw() 117 { 118 c.clearRect(0,0,cell_size*Width,cell_size*Height); 119 //======================================================================================蛇1 120 c.strokeStyle="#ffffff";//白 121 c.fillStyle="#0000ff";//深蓝 122 c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size); 123 c.beginPath(); 124 c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size); 125 c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size); 126 c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size); 127 c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size); 128 c.closePath(); 129 c.stroke(); 130 c.fillStyle="#66ffff";//浅蓝 131 for (var i=1;i<length_1;i++) 132 { 133 c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size); 134 c.beginPath(); 135 c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size); 136 c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size); 137 c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size); 138 c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size); 139 c.closePath(); 140 c.stroke(); 141 } 142 //======================================================================================食物 143 c.fillStyle="#ffff00";//黄 144 c.strokeStyle="#ff0000";//红 145 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 146 c.beginPath(); 147 c.moveTo(foodx*cell_size,foody*cell_size); 148 c.lineTo((foodx+1)*cell_size,foody*cell_size); 149 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 150 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 151 c.closePath(); 152 c.stroke(); 153 154 if (players==1)return; 155 //======================================================================================蛇2 156 c.strokeStyle="#ffffff";//白 157 c.fillStyle="#ff3333";//红 158 if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰 159 c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size); 160 c.beginPath(); 161 c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size); 162 c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size); 163 c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size); 164 c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size); 165 c.closePath(); 166 c.stroke(); 167 for (var i=1;i<length_2;i++) 168 { 169 c.fillStyle="#FFBDBD";//浅红 170 if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰 171 c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size); 172 c.beginPath(); 173 c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size); 174 c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size); 175 c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size); 176 c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size); 177 c.closePath(); 178 c.stroke(); 179 } 180 } 181 182 function move() 183 { 184 var nx1=snake_1[0].x,ny1=snake_1[0].y; 185 direction_1=next_direction_1;next_direction_1=direction_1; 186 if (direction_1==1)nx1--; 187 if (direction_1==2)ny1--; 188 if (direction_1==3)nx1++; 189 if (direction_1==4)ny1++; 190 191 if (players==2) 192 { 193 var nx2=snake_2[0].x,ny2=snake_2[0].y; 194 direction_2=next_direction_2;next_direction_2=direction_2; 195 if (direction_2==1)nx2--; 196 if (direction_2==2)ny2--; 197 if (direction_2==3)nx2++; 198 if (direction_2==4)ny2++; 199 } 200 201 if (through) 202 { 203 if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width; 204 if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height; 205 } 206 if (through&&players==2) 207 { 208 if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width; 209 if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height; 210 } 211 if (judge_dead(nx1,ny1,1))return; 212 if (players==2&&judge_dead(nx2,ny2,2))return; 213 judge_eat(nx1,ny1,1); 214 if (players==2)judge_eat(nx2,ny2,2); 215 if (getfood_1||getfood_2)add_food(); 216 map[nx1][ny1]+=1; 217 snake_1.unshift({x:nx1,y:ny1}); 218 if (getfood_1==false) 219 { 220 map[snake_1[length_1].x][snake_1[length_1].y]-=1; 221 snake_1.pop(); 222 } 223 else 224 { 225 length_1++; 226 getfood_1=false; 227 } 228 229 if (players==2) 230 { 231 map[nx2][ny2]+=2; 232 snake_2.unshift({x:nx2,y:ny2}); 233 if (getfood_2==false) 234 { 235 map[snake_2[length_2].x][snake_2[length_2].y]-=2; 236 snake_2.pop(); 237 } 238 else 239 { 240 length_2++; 241 getfood_2=false; 242 } 243 } 244 } 245 function judge_eat(nx,ny,snake_number) 246 { 247 if (nx==foodx&&ny==foody) 248 { 249 if (snake_number==1)getfood_1=true; 250 if (snake_number==2)getfood_2=true; 251 if (T>=60)T-=10; 252 clearInterval(move_interval); 253 move_interval=setInterval(move,T); 254 if (snake_number==1)score_1++; 255 if (snake_number==2)score_2++; 256 if (players==1)score.innerHTML=score_1; 257 if (players==2)score.innerHTML=score_1+":"+score_2; 258 } 259 } 260 function judge_dead(nx,ny,snake_number) 261 { 262 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0) 263 { 264 alert("Game Over!"); 265 clearInterval(move_interval); 266 clearInterval(draw_interval); 267 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 268 document.getElementById("pause").disabled="true"; 269 document.getElementById("go_through").disabled="true"; 270 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 271 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 272 document.removeEventListener("keydown",jud,false); 273 return 1; 274 } 275 return 0; 276 } 277 function add_food() 278 { 279 map[foodx][foody]-=4; 280 foodx=-1; 281 foody=-1; 282 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0) 283 { 284 foodx=Math.floor(Math.random()*(Width-1)); 285 foody=Math.floor(Math.random()*(Height-1)); 286 } 287 map[foodx][foody]+=4; 288 } 289 function touchStart(event) 290 { 291 event=event||window.event; 292 event.preventDefault(); 293 var touch=event.changedTouches[0]; 294 sx=touch.pageX; 295 sy=touch.pageY; 296 } 297 function touchEnd(event) 298 { 299 event=event||wondow.event; 300 event.preventDefault(); 301 var touch=event.changedTouches[0]; 302 ex=touch.pageX; 303 ey=touch.pageY; 304 //tan(pi/9)=tan(20)=0.364 305 //tan(pi/6)=tan(30)=0.577 306 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 307 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 308 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 309 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 310 } 311 function jud(event) 312 { 313 var event=event||window.event; 314 event.preventDefault(); 315 judge_key(event.keyCode); 316 } 317 function startgame_single_classic()//单人经典模式 318 { 319 players=1; 320 through=true; 321 score.innerHTML=0; 322 for (var i=0;i<length_1;i++) 323 { 324 snake_1.unshift({x:i,y:0}); 325 map[i][0]+=1; 326 } 327 map[foodx][foody]+=4;add_food(); 328 draw(); 329 move_interval=setInterval(move,T); 330 draw_interval=setInterval(draw,10); 331 document.getElementById("page").addEventListener("touchstart",touchStart,false); 332 document.getElementById("page").addEventListener("touchend",touchEnd,false); 333 document.addEventListener("keydown",jud,false); 334 } 335 function startgame_double_classic()//双人经典模式 336 { 337 players=2; 338 through=true; 339 score.innerHTML=0+":"+0; 340 for (var i=0;i<length_1;i++) 341 { 342 snake_1.unshift({x:i,y:0}); 343 map[i][0]=map[i][0]+1; 344 } 345 for (var i=0;i<length_2;i++) 346 { 347 snake_2.unshift({x:0,y:i}); 348 map[0][i]+=2; 349 } 350 map[foodx][foody]+=4;add_food(); 351 draw(); 352 move_interval=setInterval(move,T); 353 draw_interval=setInterval(draw,10); 354 document.addEventListener("keydown",jud,false); 355 } 356 function startgame(opr) 357 { 358 document.getElementById("select_page").style.visibility="hidden"; 359 document.getElementById("page").style.visibility="visible"; 360 c=document.getElementById("screen").getContext("2d"); 361 score=document.getElementById("scores"); 362 paused=false; 363 if(opr=="single_classic")startgame_single_classic(); 364 if(opr=="double_classic")startgame_double_classic(); 365 } 366 function choose_mode(opr) 367 { 368 if (opr==1)gamemode="single_classic"; 369 if (opr==2)gamemode="double_classic"; 370 document.getElementById("single_button").disabled="true"; 371 document.getElementById("single_button").style.color="#D6D6D6"; 372 document.getElementById("double_button").disabled="true"; 373 document.getElementById("double_button").style.color="#D6D6D6"; 374 document.getElementById("start_button").style.color="#0000FF"; 375 document.getElementById("start_button").disabled=""; 376 document.getElementById("Admin_button").disabled="true"; 377 } 378 function open_Admin() 379 { 380 Administrator_access=true; 381 document.getElementById("go_through").disabled=""; 382 } 383 function auto_adjust() 384 { 385 var now_Height=document.documentElement.clientHeight; 386 var now_Width=document.documentElement.clientWidth; 387 if (now_Height>=620&&now_Width>=950)return; 388 var Height_ratio=now_Height/620; 389 var Width_ratio=now_Width/950; 390 adjust_ratio=Math.min(Height_ratio,Width_ratio); 391 document.getElementById("select_page").style.width=900*adjust_ratio+"px"; 392 document.getElementById("select_page").style.height=600*adjust_ratio+"px"; 393 document.getElementById("page").style.width=900*adjust_ratio+"px"; 394 document.getElementById("page").style.height=600*adjust_ratio+"px"; 395 var fonts=document.getElementsByClassName("simple_font_type"); 396 for(var i=0;fonts[i];i++)fonts[i].style.fontSize=15*adjust_ratio+"px"; 397 var buttons=document.getElementsByClassName("select_button"); 398 for(var i=0;buttons[i];i++) 399 { 400 buttons[i].style.height=90*adjust_ratio+"px"; 401 buttons[i].style.width=160*adjust_ratio+"px"; 402 buttons[i].style.marginLeft=-80*adjust_ratio+"px"; 403 buttons[i].style.marginTop=-45*adjust_ratio+"px"; 404 buttons[i].style.fontSize=25*adjust_ratio+"px"; 405 buttons[i].style.textShadow=3*adjust_ratio+"px "+3*adjust_ratio+"px "+1*adjust_ratio+"px #999999"; 406 buttons[i].style.borderRadius=25*adjust_ratio+"px"; 407 } 408 document.getElementById("screen").style.height=675*adjust_ratio-75+"px"; 409 document.getElementById("screen").style.width=900*adjust_ratio-100+"px"; 410 if (now_Height<214) 411 { 412 413 document.getElementById("start_button").innerHTML="开始"; 414 document.getElementById("start_button").style.fontSize=30*adjust_ratio+"px"; 415 } 416 } 417 window.onload=auto_adjust(); 418 </script> 419 </head> 420 </html>
3.1：五一期间做了一些修正
1、管理员权限并不是你想开就能开的……现在要获得管理员权限需要密码咯……
2、布局调整。显示的文字放在下方
3、“伪·响应式布局”改为“更伪·响应式布局"。只支持手机端和平板电脑端的缩放，但是效果更加拔群
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>crazy_snake_1</title> 7 <style type="text/css"> 8 #select_page{position: relative; width:850px; height:700px; z-index: 1; background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); text-align: center; max-width: 850px; max-height: 700px; top: 0px; left: 0px; text-shadow: 3px 3px 1px #999999;} 9 .select_button{ border-color: #FFFFFF; width: 160px; height: 90px; z-index: 5; color: #0000FF; font-size: 25px; text-align: center; background-image: -webkit-gradient(linear,50.00% 0.00%,50.00% 100.00%,color-stop(0%,rgba(255,255,255,1.00)),color-stop(100%,rgba(255,60,60,1.00))); background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%); position: absolute; border-radius: 25px; max-width: 160px; max-height: 90px; display: inline-block; margin-left: -80px; margin-top: -45px; font-weight: bold;text-shadow:3px 3px 1px #999999;} 10 #page{ position: fixed; z-index: 0; max-width: 800px; max-height: 650px; width: 800px; height: 650px; top: 0px; left: 0px; margin-left: 50px; margin-top: 50px; } 11 #canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;} 12 .simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;} 13 </style> 14 </head> 15 16 17 <body style="margin:0;"> 18 <div id="select_page"> 19 <button id="single_button"class="select_button"onclick="choose_mode(1);"style="top:25%;left:25%;">单人模式</button> 20 <button id="double_button"class="select_button"onclick="choose_mode(2);"style="top:25%;left:75%;">双人模式</button> 21 <button id="items_button"class="select_button"onclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;"disabled="true">道具场</button> 22 <button id="rating_button"class="select_button"onclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;"disabled="true">天梯排位赛</button> 23 <button id="start_button"class="select_button"onclick="startgame(gamemode);"style="top:50%;left:50%;color:#D6D6D6;"disabled="true">开始游戏！</button> 24 <button id="Admin_button"class="select_button"onclick="open_Admin();"style="top:25%;left:50%;">管理员权限狗</button> 25 </div> 26 <div id="page" style="visibility:hidden;"> 27 <div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div> 28 <div id="status"> 29 <div class="simple_font_type"style="left:0px;"><b>得分：<span id="scores" style="color:red"></b></span></div> 30 <div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div> 31 <button id="pause"class="simple_font_type"style="left:300px;"onclick="judge_key(80)">暂停</button> 32 <div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div> 33 <button id="go_through"class="simple_font_type"style="left:600px;"onclick="judge_key(69)" disabled="true">关闭</button> 34 </div> 35 </div> 36 </body> 37 38 39 <head> 40 <script type="text/javascript"> 41 42 var hexcase=0;function hex_md5(a){return rstr2hex(rstr_md5(str2rstr_utf8(a)))}function hex_hmac_md5(a,b){return rstr2hex(rstr_hmac_md5(str2rstr_utf8(a),str2rstr_utf8(b)))}function md5_vm_test(){return hex_md5("abc").toLowerCase()=="900150983cd24fb0d6963f7d28e17f72"}function rstr_md5(a){return binl2rstr(binl_md5(rstr2binl(a),a.length*8))}function rstr_hmac_md5(c,f){var e=rstr2binl(c);if(e.length>16){e=binl_md5(e,c.length*8)}var a=Array(16),d=Array(16);for(var b=0;b<16;b++){a[b]=e[b]^909522486;d[b]=e[b]^1549556828}var g=binl_md5(a.concat(rstr2binl(f)),512+f.length*8);return binl2rstr(binl_md5(d.concat(g),512+128))}function rstr2hex(c){try{hexcase}catch(g){hexcase=0}var f=hexcase?"0123456789ABCDEF":"0123456789abcdef";var b="";var a;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);b+=f.charAt((a>>>4)&15)+f.charAt(a&15)}return b}function str2rstr_utf8(c){var b="";var d=-1;var a,e;while(++d<c.length){a=c.charCodeAt(d);e=d+1<c.length?c.charCodeAt(d+1):0;if(55296<=a&&a<=56319&&56320<=e&&e<=57343){a=65536+((a&1023)<<10)+(e&1023);d++}if(a<=127){b+=String.fromCharCode(a)}else{if(a<=2047){b+=String.fromCharCode(192|((a>>>6)&31),128|(a&63))}else{if(a<=65535){b+=String.fromCharCode(224|((a>>>12)&15),128|((a>>>6)&63),128|(a&63))}else{if(a<=2097151){b+=String.fromCharCode(240|((a>>>18)&7),128|((a>>>12)&63),128|((a>>>6)&63),128|(a&63))}}}}}return b}function rstr2binl(b){var a=Array(b.length>>2);for(var c=0;c<a.length;c++){a[c]=0}for(var c=0;c<b.length*8;c+=8){a[c>>5]|=(b.charCodeAt(c/8)&255)<<(c%32)}return a}function binl2rstr(b){var a="";for(var c=0;c<b.length*32;c+=8){a+=String.fromCharCode((b[c>>5]>>>(c%32))&255)}return a}function binl_md5(p,k){p[k>>5]|=128<<((k)%32);p[(((k+64)>>>9)<<4)+14]=k;var o=1732584193;var n=-271733879;var m=-1732584194;var l=271733878;for(var g=0;g<p.length;g+=16){var j=o;var h=n;var f=m;var e=l;o=md5_ff(o,n,m,l,p[g+0],7,-680876936);l=md5_ff(l,o,n,m,p[g+1],12,-389564586);m=md5_ff(m,l,o,n,p[g+2],17,606105819);n=md5_ff(n,m,l,o,p[g+3],22,-1044525330);o=md5_ff(o,n,m,l,p[g+4],7,-176418897);l=md5_ff(l,o,n,m,p[g+5],12,1200080426);m=md5_ff(m,l,o,n,p[g+6],17,-1473231341);n=md5_ff(n,m,l,o,p[g+7],22,-45705983);o=md5_ff(o,n,m,l,p[g+8],7,1770035416);l=md5_ff(l,o,n,m,p[g+9],12,-1958414417);m=md5_ff(m,l,o,n,p[g+10],17,-42063);n=md5_ff(n,m,l,o,p[g+11],22,-1990404162);o=md5_ff(o,n,m,l,p[g+12],7,1804603682);l=md5_ff(l,o,n,m,p[g+13],12,-40341101);m=md5_ff(m,l,o,n,p[g+14],17,-1502002290);n=md5_ff(n,m,l,o,p[g+15],22,1236535329);o=md5_gg(o,n,m,l,p[g+1],5,-165796510);l=md5_gg(l,o,n,m,p[g+6],9,-1069501632);m=md5_gg(m,l,o,n,p[g+11],14,643717713);n=md5_gg(n,m,l,o,p[g+0],20,-373897302);o=md5_gg(o,n,m,l,p[g+5],5,-701558691);l=md5_gg(l,o,n,m,p[g+10],9,38016083);m=md5_gg(m,l,o,n,p[g+15],14,-660478335);n=md5_gg(n,m,l,o,p[g+4],20,-405537848);o=md5_gg(o,n,m,l,p[g+9],5,568446438);l=md5_gg(l,o,n,m,p[g+14],9,-1019803690);m=md5_gg(m,l,o,n,p[g+3],14,-187363961);n=md5_gg(n,m,l,o,p[g+8],20,1163531501);o=md5_gg(o,n,m,l,p[g+13],5,-1444681467);l=md5_gg(l,o,n,m,p[g+2],9,-51403784);m=md5_gg(m,l,o,n,p[g+7],14,1735328473);n=md5_gg(n,m,l,o,p[g+12],20,-1926607734);o=md5_hh(o,n,m,l,p[g+5],4,-378558);l=md5_hh(l,o,n,m,p[g+8],11,-2022574463);m=md5_hh(m,l,o,n,p[g+11],16,1839030562);n=md5_hh(n,m,l,o,p[g+14],23,-35309556);o=md5_hh(o,n,m,l,p[g+1],4,-1530992060);l=md5_hh(l,o,n,m,p[g+4],11,1272893353);m=md5_hh(m,l,o,n,p[g+7],16,-155497632);n=md5_hh(n,m,l,o,p[g+10],23,-1094730640);o=md5_hh(o,n,m,l,p[g+13],4,681279174);l=md5_hh(l,o,n,m,p[g+0],11,-358537222);m=md5_hh(m,l,o,n,p[g+3],16,-722521979);n=md5_hh(n,m,l,o,p[g+6],23,76029189);o=md5_hh(o,n,m,l,p[g+9],4,-640364487);l=md5_hh(l,o,n,m,p[g+12],11,-421815835);m=md5_hh(m,l,o,n,p[g+15],16,530742520);n=md5_hh(n,m,l,o,p[g+2],23,-995338651);o=md5_ii(o,n,m,l,p[g+0],6,-198630844);l=md5_ii(l,o,n,m,p[g+7],10,1126891415);m=md5_ii(m,l,o,n,p[g+14],15,-1416354905);n=md5_ii(n,m,l,o,p[g+5],21,-57434055);o=md5_ii(o,n,m,l,p[g+12],6,1700485571);l=md5_ii(l,o,n,m,p[g+3],10,-1894986606);m=md5_ii(m,l,o,n,p[g+10],15,-1051523);n=md5_ii(n,m,l,o,p[g+1],21,-2054922799);o=md5_ii(o,n,m,l,p[g+8],6,1873313359);l=md5_ii(l,o,n,m,p[g+15],10,-30611744);m=md5_ii(m,l,o,n,p[g+6],15,-1560198380);n=md5_ii(n,m,l,o,p[g+13],21,1309151649);o=md5_ii(o,n,m,l,p[g+4],6,-145523070);l=md5_ii(l,o,n,m,p[g+11],10,-1120210379);m=md5_ii(m,l,o,n,p[g+2],15,718787259);n=md5_ii(n,m,l,o,p[g+9],21,-343485551);o=safe_add(o,j);n=safe_add(n,h);m=safe_add(m,f);l=safe_add(l,e)}return Array(o,n,m,l)}function md5_cmn(h,e,d,c,g,f){return safe_add(bit_rol(safe_add(safe_add(e,h),safe_add(c,f)),g),d)}function md5_ff(g,f,k,j,e,i,h){return md5_cmn((f&k)|((~f)&j),g,f,e,i,h)}function md5_gg(g,f,k,j,e,i,h){return md5_cmn((f&j)|(k&(~j)),g,f,e,i,h)}function md5_hh(g,f,k,j,e,i,h){return md5_cmn(f^k^j,g,f,e,i,h)}function md5_ii(g,f,k,j,e,i,h){return md5_cmn(k^(f|(~j)),g,f,e,i,h)}function safe_add(a,d){var c=(a&65535)+(d&65535);var b=(a>>16)+(d>>16)+(c>>16);return(b<<16)|(c&65535)}function bit_rol(a,b){return(a<<b)|(a>>>(32-b))}; 43 44 var cell_size=20.0,Height=30,Width=40; 45 var map=new Array()//地图状态 46 for (var i=0;i<Width;i++) 47 { 48 map[i]=new Array() 49 for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇； 50 } 51 var snake_1=[];//蛇坐标 52 var snake_2=[]; 53 var c=null;//绘图对象 54 var time_interval=null;//移动计时器 55 var draw_interval=null;//画图计时器 56 var score=null,score_1=0,score_2=0;//分数 57 var direction_1=3,direction=4;//方向 58 var next_direction_1=3,next_direction_2=4; 59 var foodx=0,foody=0; 60 var length_1=4,length_2=4;//长度 61 var paused=false;//暂停状态 62 var getfood_1=false,getfood_2=false;//吃到食物 63 var through=false;//穿墙 64 var T=150;//周期，控制蛇的速度 65 var sx=0,sy=0,ex=0,ey=0;//手势读取 66 var Administrator_access=false;//管理员权限 67 var adjust_ratio=1.0;//伪·响应式布局 68 var gamemode="";//游戏模式 69 var players=1; 70 function judge_key(opr) 71 { 72 if (paused==false) 73 { 74 if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左 75 if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上 76 if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右 77 if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下 78 if (players==2) 79 { 80 if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左 81 if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上 82 if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右 83 if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下 84 } 85 } 86 if(opr==80)//p 87 { 88 if(paused==true) 89 { 90 move_interval=setInterval(move,T); 91 draw_interval=setInterval(draw,10); 92 paused=false; 93 document.getElementById('pause').innerHTML="暂停"; 94 document.getElementById('pause_status').innerHTML="游戏进行中"; 95 }else 96 { 97 clearInterval(move_interval); 98 clearInterval(draw_interval); 99 paused=true; 100 document.getElementById('pause').innerHTML="开始"; 101 document.getElementById('pause_status').innerHTML="游戏已暂停"; 102 } 103 } 104 if (opr==69&&Administrator_access==true)//e 105 { 106 if (through==true) 107 { 108 through=false; 109 document.getElementById('go_through').innerHTML="开启"; 110 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 111 }else 112 { 113 through=true; 114 document.getElementById('go_through').innerHTML="关闭"; 115 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 116 } 117 } 118 } 119 function draw() 120 { 121 c.clearRect(0,0,cell_size*Width,cell_size*Height); 122 //======================================================================================蛇1 123 c.strokeStyle="#ffffff";//白 124 c.fillStyle="#0000ff";//深蓝 125 c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size); 126 c.beginPath(); 127 c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size); 128 c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size); 129 c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size); 130 c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size); 131 c.closePath(); 132 c.stroke(); 133 c.fillStyle="#66ffff";//浅蓝 134 for (var i=1;i<length_1;i++) 135 { 136 c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size); 137 c.beginPath(); 138 c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size); 139 c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size); 140 141 c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size); 142 c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size); 143 c.closePath(); 144 c.stroke(); 145 } 146 //======================================================================================食物 147 c.fillStyle="#ffff00";//黄 148 c.strokeStyle="#ff0000";//红 149 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 150 c.beginPath(); 151 c.moveTo(foodx*cell_size,foody*cell_size); 152 c.lineTo((foodx+1)*cell_size,foody*cell_size); 153 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 154 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 155 c.closePath(); 156 c.stroke(); 157 158 if (players==1)return; 159 //======================================================================================蛇2 160 c.strokeStyle="#ffffff";//白 161 c.fillStyle="#ff3333";//红 162 if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰 163 c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size); 164 c.beginPath(); 165 c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size); 166 c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size); 167 c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size); 168 c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size); 169 c.closePath(); 170 c.stroke(); 171 for (var i=1;i<length_2;i++) 172 { 173 c.fillStyle="#FFBDBD";//浅红 174 if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰 175 c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size); 176 c.beginPath(); 177 c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size); 178 c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size); 179 c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size); 180 c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size); 181 c.closePath(); 182 c.stroke(); 183 } 184 } 185 186 function move() 187 { 188 var nx1=snake_1[0].x,ny1=snake_1[0].y; 189 direction_1=next_direction_1;next_direction_1=direction_1; 190 if (direction_1==1)nx1--; 191 if (direction_1==2)ny1--; 192 if (direction_1==3)nx1++; 193 if (direction_1==4)ny1++; 194 195 if (players==2) 196 { 197 var nx2=snake_2[0].x,ny2=snake_2[0].y; 198 direction_2=next_direction_2;next_direction_2=direction_2; 199 if (direction_2==1)nx2--; 200 if (direction_2==2)ny2--; 201 if (direction_2==3)nx2++; 202 if (direction_2==4)ny2++; 203 } 204 205 if (through) 206 { 207 if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width; 208 if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height; 209 } 210 if (through&&players==2) 211 { 212 if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width; 213 if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height; 214 } 215 if (judge_dead(nx1,ny1,1))return; 216 if (players==2&&judge_dead(nx2,ny2,2))return; 217 judge_eat(nx1,ny1,1); 218 if (players==2)judge_eat(nx2,ny2,2); 219 if (getfood_1||getfood_2)add_food(); 220 map[nx1][ny1]+=1; 221 snake_1.unshift({x:nx1,y:ny1}); 222 if (getfood_1==false) 223 { 224 map[snake_1[length_1].x][snake_1[length_1].y]-=1; 225 snake_1.pop(); 226 } 227 else 228 { 229 length_1++; 230 getfood_1=false; 231 } 232 233 if (players==2) 234 { 235 map[nx2][ny2]+=2; 236 snake_2.unshift({x:nx2,y:ny2}); 237 if (getfood_2==false) 238 { 239 map[snake_2[length_2].x][snake_2[length_2].y]-=2; 240 snake_2.pop(); 241 } 242 else 243 { 244 length_2++; 245 getfood_2=false; 246 } 247 } 248 } 249 function judge_eat(nx,ny,snake_number) 250 { 251 if (nx==foodx&&ny==foody) 252 { 253 if (snake_number==1)getfood_1=true; 254 if (snake_number==2)getfood_2=true; 255 if (T>=60)T-=10; 256 clearInterval(move_interval); 257 move_interval=setInterval(move,T); 258 if (snake_number==1)score_1++; 259 if (snake_number==2)score_2++; 260 if (players==1)score.innerHTML=score_1; 261 if (players==2)score.innerHTML=score_1+":"+score_2; 262 } 263 } 264 function judge_dead(nx,ny,snake_number) 265 { 266 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0) 267 { 268 alert("Game Over!"); 269 clearInterval(move_interval); 270 clearInterval(draw_interval); 271 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 272 document.getElementById("pause").disabled="true"; 273 document.getElementById("go_through").disabled="true"; 274 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 275 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 276 document.removeEventListener("keydown",jud,false); 277 return 1; 278 } 279 return 0; 280 } 281 function add_food() 282 { 283 map[foodx][foody]-=4; 284 foodx=-1; 285 foody=-1; 286 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0) 287 { 288 foodx=Math.floor(Math.random()*(Width-1)); 289 foody=Math.floor(Math.random()*(Height-1)); 290 } 291 map[foodx][foody]+=4; 292 } 293 function touchStart(event) 294 { 295 event=event||window.event; 296 event.preventDefault(); 297 var touch=event.changedTouches[0]; 298 sx=touch.pageX; 299 sy=touch.pageY; 300 } 301 function touchEnd(event) 302 { 303 event=event||wondow.event; 304 //event.preventDefault(); 305 var touch=event.changedTouches[0]; 306 ex=touch.pageX; 307 ey=touch.pageY; 308 //tan(pi/9)=tan(20)=0.364 309 //tan(pi/6)=tan(30)=0.577 310 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 311 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 312 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 313 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 314 } 315 function jud(event) 316 { 317 var event=event||window.event; 318 //event.preventDefault(); 319 judge_key(event.keyCode); 320 } 321 function startgame_single_classic()//单人经典模式 322 { 323 players=1; 324 through=true; 325 score.innerHTML=0; 326 for (var i=0;i<length_1;i++) 327 { 328 snake_1.unshift({x:i,y:0}); 329 map[i][0]+=1; 330 } 331 map[foodx][foody]+=4;add_food(); 332 draw(); 333 move_interval=setInterval(move,T); 334 draw_interval=setInterval(draw,10); 335 document.getElementById("page").addEventListener("touchstart",touchStart,false); 336 document.getElementById("page").addEventListener("touchend",touchEnd,false); 337 document.addEventListener("keydown",jud,false); 338 } 339 function startgame_double_classic()//双人经典模式 340 { 341 players=2; 342 through=true; 343 score.innerHTML=0+":"+0; 344 for (var i=0;i<length_1;i++) 345 { 346 snake_1.unshift({x:i,y:0}); 347 map[i][0]=map[i][0]+1; 348 } 349 for (var i=0;i<length_2;i++) 350 { 351 snake_2.unshift({x:0,y:i}); 352 map[0][i]+=2; 353 } 354 map[foodx][foody]+=4;add_food(); 355 draw(); 356 move_interval=setInterval(move,T); 357 draw_interval=setInterval(draw,10); 358 document.addEventListener("keydown",jud,false); 359 } 360 function startgame(opr) 361 { 362 document.getElementById("select_page").style.visibility="hidden"; 363 document.getElementById("page").style.visibility="visible"; 364 c=document.getElementById("screen").getContext("2d"); 365 score=document.getElementById("scores"); 366 paused=false; 367 if(opr=="single_classic")startgame_single_classic(); 368 if(opr=="double_classic")startgame_double_classic(); 369 } 370 function choose_mode(opr) 371 { 372 if (opr==1)gamemode="single_classic"; 373 if (opr==2)gamemode="double_classic"; 374 document.getElementById("single_button").disabled="true"; 375 document.getElementById("single_button").style.color="#D6D6D6"; 376 document.getElementById("double_button").disabled="true"; 377 document.getElementById("double_button").style.color="#D6D6D6"; 378 document.getElementById("start_button").style.color="#0000FF"; 379 document.getElementById("start_button").disabled=""; 380 } 381 function open_Admin() 382 { 383 var password=prompt("输入管理员密码！",""); 384 if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d") 385 { 386 Administrator_access=true; 387 alert("欢迎回来,权限狗！") 388 document.getElementById("go_through").disabled=""; 389 }else 390 { 391 Administrator_access=true; 392 alert("你连权限狗都不是还装什么权限狗！") 393 } 394 document.getElementById("Admin_button").disabled="true"; 395 document.getElementById("Admin_button").style.color="#D6D6D6"; 396 } 397 function auto_adjust() 398 { 399 var now_Height=document.documentElement.clientHeight; 400 var now_Width=document.documentElement.clientWidth; 401 if (now_Height>=650&&now_Width>=950)return; 402 var Height_ratio=now_Height/650; 403 var Width_ratio=now_Width/950; 404 adjust_ratio=Math.min(Height_ratio,Width_ratio); 405 var autocg=document.getElementsByTagName("meta")[1]; 406 autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2); 407 } 408 window.onload=auto_adjust(); 409 </script> 410 </head> 411 </html>
3.2：duang~更多的特技！
1、用jQuery重写的开始界面更酷炫了（为偷懒直接指到服务器上面jQuery了）
2、加入了全新的10秒内连续吃到食物双倍分的效果
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>crazy_snake_1</title> 7 <style type="text/css"> 8 #select_page{position: relative; width:850px; height:700px; z-index: 1; background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); text-align: center; max-width: 850px; max-height: 700px; top: 0px; left: 0px; text-shadow: 3px 3px 1px #999999;} 9 .select_button{border-color: #FFFFFF; width: 160px;height: 90px;z-index: 5;color: #0000FF;font-size: 25px;text-align: center;background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);position: absolute;border-radius: 25px;max-width: 160px;max-height: 90px;display: inline-block;margin-left: -80px;margin-top: -45px;font-weight: bold;text-shadow:3px 3px 1px #999999;opacity:0;} 10 #page{ position: fixed; z-index: 0; max-width: 800px; max-height: 650px; width: 800px; height: 650px; top: 0px; left: 0px; margin-left: 50px; margin-top: 50px; } 11 #canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;} 12 .simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;} 13 </style> 14 </head> 15 16 17 <body style="margin:0;"> 18 <div id="select_page"> 19 <button id="single_button"class="select_button"onclick="choose_mode(1);"style="top:25%;left:25%;">单人模式</button> 20 <button id="double_button"class="select_button"onclick="choose_mode(2);"style="top:25%;left:75%;">双人模式</button> 21 <button id="items_button"class="select_button"onclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;"disabled="true">道具场</button> 22 <button id="rating_button"class="select_button"onclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;"disabled="true">天梯排位赛</button> 23 <button id="start_button"class="select_button"onclick="startgame(gamemode);"style="top:50%;left:50%;"disabled="true">开始游戏！</button> 24 <button id="Admin_button"class="select_button"onclick="open_Admin();"style="top:25%;left:50%;">管理员权限狗</button> 25 </div> 26 <div id="page" style="visibility:hidden;"> 27 <div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div> 28 <div id="status"> 29 <div class="simple_font_type"style="left:0px;"><b>得分：<span id="scores" style="color:red"></b></span></div> 30 <div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div> 31 <button id="pause"class="simple_font_type"style="left:300px;"onclick="judge_key(80)">暂停</button> 32 <div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div> 33 <button id="go_through"class="simple_font_type"style="left:600px;"onclick="judge_key(69)" disabled="true">关闭</button> 34 </div> 35 </div> 36 </body> 37 38 39 <head> 40 <script src="http://app.htouko.com/snake/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 41 <script type="text/javascript"> 42 43 var hexcase=0;function hex_md5(a){return rstr2hex(rstr_md5(str2rstr_utf8(a)))}function hex_hmac_md5(a,b){return rstr2hex(rstr_hmac_md5(str2rstr_utf8(a),str2rstr_utf8(b)))}function md5_vm_test(){return hex_md5("abc").toLowerCase()=="900150983cd24fb0d6963f7d28e17f72"}function rstr_md5(a){return binl2rstr(binl_md5(rstr2binl(a),a.length*8))}function rstr_hmac_md5(c,f){var e=rstr2binl(c);if(e.length>16){e=binl_md5(e,c.length*8)}var a=Array(16),d=Array(16);for(var b=0;b<16;b++){a[b]=e[b]^909522486;d[b]=e[b]^1549556828}var g=binl_md5(a.concat(rstr2binl(f)),512+f.length*8);return binl2rstr(binl_md5(d.concat(g),512+128))}function rstr2hex(c){try{hexcase}catch(g){hexcase=0}var f=hexcase?"0123456789ABCDEF":"0123456789abcdef";var b="";var a;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);b+=f.charAt((a>>>4)&15)+f.charAt(a&15)}return b}function str2rstr_utf8(c){var b="";var d=-1;var a,e;while(++d<c.length){a=c.charCodeAt(d);e=d+1<c.length?c.charCodeAt(d+1):0;if(55296<=a&&a<=56319&&56320<=e&&e<=57343){a=65536+((a&1023)<<10)+(e&1023);d++}if(a<=127){b+=String.fromCharCode(a)}else{if(a<=2047){b+=String.fromCharCode(192|((a>>>6)&31),128|(a&63))}else{if(a<=65535){b+=String.fromCharCode(224|((a>>>12)&15),128|((a>>>6)&63),128|(a&63))}else{if(a<=2097151){b+=String.fromCharCode(240|((a>>>18)&7),128|((a>>>12)&63),128|((a>>>6)&63),128|(a&63))}}}}}return b}function rstr2binl(b){var a=Array(b.length>>2);for(var c=0;c<a.length;c++){a[c]=0}for(var c=0;c<b.length*8;c+=8){a[c>>5]|=(b.charCodeAt(c/8)&255)<<(c%32)}return a}function binl2rstr(b){var a="";for(var c=0;c<b.length*32;c+=8){a+=String.fromCharCode((b[c>>5]>>>(c%32))&255)}return a}function binl_md5(p,k){p[k>>5]|=128<<((k)%32);p[(((k+64)>>>9)<<4)+14]=k;var o=1732584193;var n=-271733879;var m=-1732584194;var l=271733878;for(var g=0;g<p.length;g+=16){var j=o;var h=n;var f=m;var e=l;o=md5_ff(o,n,m,l,p[g+0],7,-680876936);l=md5_ff(l,o,n,m,p[g+1],12,-389564586);m=md5_ff(m,l,o,n,p[g+2],17,606105819);n=md5_ff(n,m,l,o,p[g+3],22,-1044525330);o=md5_ff(o,n,m,l,p[g+4],7,-176418897);l=md5_ff(l,o,n,m,p[g+5],12,1200080426);m=md5_ff(m,l,o,n,p[g+6],17,-1473231341);n=md5_ff(n,m,l,o,p[g+7],22,-45705983);o=md5_ff(o,n,m,l,p[g+8],7,1770035416);l=md5_ff(l,o,n,m,p[g+9],12,-1958414417);m=md5_ff(m,l,o,n,p[g+10],17,-42063);n=md5_ff(n,m,l,o,p[g+11],22,-1990404162);o=md5_ff(o,n,m,l,p[g+12],7,1804603682);l=md5_ff(l,o,n,m,p[g+13],12,-40341101);m=md5_ff(m,l,o,n,p[g+14],17,-1502002290);n=md5_ff(n,m,l,o,p[g+15],22,1236535329);o=md5_gg(o,n,m,l,p[g+1],5,-165796510);l=md5_gg(l,o,n,m,p[g+6],9,-1069501632);m=md5_gg(m,l,o,n,p[g+11],14,643717713);n=md5_gg(n,m,l,o,p[g+0],20,-373897302);o=md5_gg(o,n,m,l,p[g+5],5,-701558691);l=md5_gg(l,o,n,m,p[g+10],9,38016083);m=md5_gg(m,l,o,n,p[g+15],14,-660478335);n=md5_gg(n,m,l,o,p[g+4],20,-405537848);o=md5_gg(o,n,m,l,p[g+9],5,568446438);l=md5_gg(l,o,n,m,p[g+14],9,-1019803690);m=md5_gg(m,l,o,n,p[g+3],14,-187363961);n=md5_gg(n,m,l,o,p[g+8],20,1163531501);o=md5_gg(o,n,m,l,p[g+13],5,-1444681467);l=md5_gg(l,o,n,m,p[g+2],9,-51403784);m=md5_gg(m,l,o,n,p[g+7],14,1735328473);n=md5_gg(n,m,l,o,p[g+12],20,-1926607734);o=md5_hh(o,n,m,l,p[g+5],4,-378558);l=md5_hh(l,o,n,m,p[g+8],11,-2022574463);m=md5_hh(m,l,o,n,p[g+11],16,1839030562);n=md5_hh(n,m,l,o,p[g+14],23,-35309556);o=md5_hh(o,n,m,l,p[g+1],4,-1530992060);l=md5_hh(l,o,n,m,p[g+4],11,1272893353);m=md5_hh(m,l,o,n,p[g+7],16,-155497632);n=md5_hh(n,m,l,o,p[g+10],23,-1094730640);o=md5_hh(o,n,m,l,p[g+13],4,681279174);l=md5_hh(l,o,n,m,p[g+0],11,-358537222);m=md5_hh(m,l,o,n,p[g+3],16,-722521979);n=md5_hh(n,m,l,o,p[g+6],23,76029189);o=md5_hh(o,n,m,l,p[g+9],4,-640364487);l=md5_hh(l,o,n,m,p[g+12],11,-421815835);m=md5_hh(m,l,o,n,p[g+15],16,530742520);n=md5_hh(n,m,l,o,p[g+2],23,-995338651);o=md5_ii(o,n,m,l,p[g+0],6,-198630844);l=md5_ii(l,o,n,m,p[g+7],10,1126891415);m=md5_ii(m,l,o,n,p[g+14],15,-1416354905);n=md5_ii(n,m,l,o,p[g+5],21,-57434055);o=md5_ii(o,n,m,l,p[g+12],6,1700485571);l=md5_ii(l,o,n,m,p[g+3],10,-1894986606);m=md5_ii(m,l,o,n,p[g+10],15,-1051523);n=md5_ii(n,m,l,o,p[g+1],21,-2054922799);o=md5_ii(o,n,m,l,p[g+8],6,1873313359);l=md5_ii(l,o,n,m,p[g+15],10,-30611744);m=md5_ii(m,l,o,n,p[g+6],15,-1560198380);n=md5_ii(n,m,l,o,p[g+13],21,1309151649);o=md5_ii(o,n,m,l,p[g+4],6,-145523070);l=md5_ii(l,o,n,m,p[g+11],10,-1120210379);m=md5_ii(m,l,o,n,p[g+2],15,718787259);n=md5_ii(n,m,l,o,p[g+9],21,-343485551);o=safe_add(o,j);n=safe_add(n,h);m=safe_add(m,f);l=safe_add(l,e)}return Array(o,n,m,l)}function md5_cmn(h,e,d,c,g,f){return safe_add(bit_rol(safe_add(safe_add(e,h),safe_add(c,f)),g),d)}function md5_ff(g,f,k,j,e,i,h){return md5_cmn((f&k)|((~f)&j),g,f,e,i,h)}function md5_gg(g,f,k,j,e,i,h){return md5_cmn((f&j)|(k&(~j)),g,f,e,i,h)}function md5_hh(g,f,k,j,e,i,h){return md5_cmn(f^k^j,g,f,e,i,h)}function md5_ii(g,f,k,j,e,i,h){return md5_cmn(k^(f|(~j)),g,f,e,i,h)}function safe_add(a,d){var c=(a&65535)+(d&65535);var b=(a>>16)+(d>>16)+(c>>16);return(b<<16)|(c&65535)}function bit_rol(a,b){return(a<<b)|(a>>>(32-b))}; 44 var cell_size=20.0,Height=30,Width=40; 45 var map=new Array()//地图状态 46 for (var i=0;i<Width;i++) 47 { 48 map[i]=new Array() 49 for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇； 50 } 51 var snake_1=[];//蛇坐标 52 var snake_2=[]; 53 var c=null;//绘图对象 54 var time_interval=null;//移动计时器 55 var draw_interval=null;//画图计时器 56 var down_interval=null; 57 var score=null,score_1=0,score_2=0;//分数 58 var direction_1=3,direction=4;//方向 59 var next_direction_1=3,next_direction_2=4; 60 var foodx=0,foody=0; 61 var length_1=4,length_2=4;//长度 62 var paused=false;//暂停状态 63 var getfood_1=false,getfood_2=false;//吃到食物 64 var through=false;//穿墙 65 var T=150;//周期，控制蛇的速度 66 var sx=0,sy=0,ex=0,ey=0;//手势读取 67 var Administrator_access=false;//管理员权限 68 var adjust_ratio=1.0;//伪·响应式布局 69 var gamemode="";//游戏模式 70 var players=1; 71 var dsum=0,add_score=false;//连续吃到食物的奖励分 72 function judge_key(opr) 73 { 74 if (paused==false) 75 { 76 if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左 77 if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上 78 if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右 79 if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下 80 if (players==2) 81 { 82 if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左 83 if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上 84 if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右 85 if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下 86 } 87 } 88 if(opr==80)//p 89 { 90 if(paused==true) 91 { 92 move_interval=setInterval(move,T); 93 draw_interval=setInterval(draw,10); 94 if (dsum>0)down_interval=setInterval(dcount,100); 95 paused=false; 96 document.getElementById('pause').innerHTML="暂停"; 97 document.getElementById('pause_status').innerHTML="游戏进行中"; 98 }else 99 { 100 clearInterval(move_interval); 101 clearInterval(draw_interval); 102 clearInterval(down_interval); 103 paused=true; 104 document.getElementById('pause').innerHTML="开始"; 105 document.getElementById('pause_status').innerHTML="游戏已暂停"; 106 } 107 } 108 if (opr==69&&Administrator_access==true)//e 109 { 110 if (through==true) 111 { 112 through=false; 113 document.getElementById('go_through').innerHTML="开启"; 114 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 115 }else 116 { 117 through=true; 118 document.getElementById('go_through').innerHTML="关闭"; 119 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 120 } 121 } 122 } 123 function draw() 124 { 125 c.clearRect(0,0,cell_size*Width,cell_size*Height); 126 //======================================================================================蛇1 127 c.strokeStyle="#ffffff";//白 128 c.fillStyle="#0000ff";//深蓝 129 c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size); 130 c.beginPath(); 131 c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size); 132 c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size); 133 c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size); 134 c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size); 135 c.closePath(); 136 c.stroke(); 137 c.fillStyle="#66ffff";//浅蓝 138 for (var i=1;i<length_1;i++) 139 { 140 c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size); 141 c.beginPath(); 142 c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size); 143 c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size); 144 145 c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size); 146 c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size); 147 c.closePath(); 148 c.stroke(); 149 } 150 //======================================================================================食物 151 c.fillStyle="#ffff00";//黄 152 c.strokeStyle="#ff0000";//红 153 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 154 c.beginPath(); 155 c.moveTo(foodx*cell_size,foody*cell_size); 156 c.lineTo((foodx+1)*cell_size,foody*cell_size); 157 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 158 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 159 c.closePath(); 160 c.stroke(); 161 162 if (players==1)return; 163 //======================================================================================蛇2 164 c.strokeStyle="#ffffff";//白 165 c.fillStyle="#ff3333";//红 166 if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰 167 c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size); 168 c.beginPath(); 169 c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size); 170 c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size); 171 c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size); 172 c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size); 173 c.closePath(); 174 c.stroke(); 175 for (var i=1;i<length_2;i++) 176 { 177 c.fillStyle="#FFBDBD";//浅红 178 if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰 179 c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size); 180 c.beginPath(); 181 c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size); 182 c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size); 183 c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size); 184 c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size); 185 c.closePath(); 186 c.stroke(); 187 } 188 } 189 190 function move() 191 { 192 var nx1=snake_1[0].x,ny1=snake_1[0].y; 193 direction_1=next_direction_1;next_direction_1=direction_1; 194 if (direction_1==1)nx1--; 195 if (direction_1==2)ny1--; 196 if (direction_1==3)nx1++; 197 if (direction_1==4)ny1++; 198 199 if (players==2) 200 { 201 var nx2=snake_2[0].x,ny2=snake_2[0].y; 202 direction_2=next_direction_2;next_direction_2=direction_2; 203 if (direction_2==1)nx2--; 204 if (direction_2==2)ny2--; 205 if (direction_2==3)nx2++; 206 if (direction_2==4)ny2++; 207 } 208 209 if (through) 210 { 211 if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width; 212 if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height; 213 } 214 if (through&&players==2) 215 { 216 if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width; 217 if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height; 218 } 219 if (judge_dead(nx1,ny1,1))return; 220 if (players==2&&judge_dead(nx2,ny2,2))return; 221 judge_eat(nx1,ny1,1); 222 if (players==2)judge_eat(nx2,ny2,2); 223 if (getfood_1||getfood_2)add_food(); 224 map[nx1][ny1]+=1; 225 snake_1.unshift({x:nx1,y:ny1}); 226 if (getfood_1==false) 227 { 228 map[snake_1[length_1].x][snake_1[length_1].y]-=1; 229 snake_1.pop(); 230 } 231 else 232 { 233 length_1++; 234 getfood_1=false; 235 } 236 237 if (players==2) 238 { 239 map[nx2][ny2]+=2; 240 snake_2.unshift({x:nx2,y:ny2}); 241 if (getfood_2==false) 242 { 243 map[snake_2[length_2].x][snake_2[length_2].y]-=2; 244 snake_2.pop(); 245 } 246 else 247 { 248 length_2++; 249 getfood_2=false; 250 } 251 } 252 } 253 function judge_eat(nx,ny,snake_number) 254 { 255 if (nx==foodx&&ny==foody) 256 { 257 if (snake_number==1)getfood_1=true; 258 if (snake_number==2)getfood_2=true; 259 if (T>=60)T-=10; 260 clearInterval(move_interval); 261 move_interval=setInterval(move,T); 262 if (snake_number==1)score_1++; 263 if (snake_number==2)score_2++; 264 if (players==1)score.innerHTML=score_1; 265 if (players==2)score.innerHTML=score_1+":"+score_2; 266 if (add_score==true) 267 { 268 if (snake_number==1)score_1++; 269 if (snake_number==2)score_2++; 270 if (players==1)score.innerHTML=score_1; 271 if (players==2)score.innerHTML=score_1+":"+score_2; 272 } 273 add_score=true;dsum=100; 274 clearInterval(down_interval); 275 down_interval=setInterval(dcount,100); 276 } 277 } 278 function dcount() 279 { 280 dsum-=1; 281 if (dsum<0) clearInterval(down_interval); 282 if (dsum<=0) add_score=false; 283 } 284 function judge_dead(nx,ny,snake_number) 285 { 286 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0) 287 { 288 clearInterval(move_interval); 289 clearInterval(draw_interval); 290 clearInterval(down_interval); 291 alert("Game Over!"); 292 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 293 document.getElementById("pause").disabled="true"; 294 document.getElementById("go_through").disabled="true"; 295 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 296 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 297 document.removeEventListener("keydown",jud,false); 298 return 1; 299 } 300 return 0; 301 } 302 function add_food() 303 { 304 map[foodx][foody]-=4; 305 foodx=-1; 306 foody=-1; 307 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0) 308 { 309 foodx=Math.floor(Math.random()*(Width-1)); 310 foody=Math.floor(Math.random()*(Height-1)); 311 } 312 map[foodx][foody]+=4; 313 } 314 function touchStart(event) 315 { 316 event.preventDefault; 317 event=event||window.event; 318 var touch=event.changedTouches[0]; 319 sx=touch.pageX; 320 sy=touch.pageY; 321 } 322 function touchEnd(event) 323 { 324 event.preventDefault; 325 event=event||wondow.event; 326 var touch=event.changedTouches[0]; 327 ex=touch.pageX; 328 ey=touch.pageY; 329 //tan(pi/9)=tan(20)=0.364 330 //tan(pi/6)=tan(30)=0.577 331 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 332 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 333 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 334 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 335 } 336 function jud(event) 337 { 338 var event=event||window.event; 339 judge_key(event.keyCode); 340 } 341 function startgame_single_classic()//单人经典模式 342 { 343 players=1; 344 through=true; 345 score.innerHTML=0; 346 for (var i=0;i<length_1;i++) 347 { 348 snake_1.unshift({x:i,y:0}); 349 map[i][0]+=1; 350 } 351 map[foodx][foody]+=4;add_food(); 352 draw(); 353 move_interval=setInterval(move,T); 354 draw_interval=setInterval(draw,10); 355 document.getElementById("page").addEventListener("touchstart",touchStart,false); 356 document.getElementById("page").addEventListener("touchend",touchEnd,false); 357 document.addEventListener("keydown",jud,false); 358 } 359 function startgame_double_classic()//双人经典模式 360 { 361 players=2; 362 through=true; 363 score.innerHTML=0+":"+0; 364 for (var i=0;i<length_1;i++) 365 { 366 snake_1.unshift({x:i,y:0}); 367 map[i][0]=map[i][0]+1; 368 } 369 for (var i=0;i<length_2;i++) 370 { 371 snake_2.unshift({x:0,y:i}); 372 map[0][i]+=2; 373 } 374 map[foodx][foody]+=4;add_food(); 375 draw(); 376 move_interval=setInterval(move,T); 377 draw_interval=setInterval(draw,10); 378 document.addEventListener("keydown",jud,false); 379 } 380 function startgame(opr) 381 { 382 $("#start_button").fadeTo(1000,0); 383 $("#select_page").fadeTo(2000,0); 384 document.getElementById("select_page").style.visibility="hidden"; 385 document.getElementById("page").style.visibility="visible"; 386 c=document.getElementById("screen").getContext("2d"); 387 score=document.getElementById("scores"); 388 paused=false; 389 if(opr=="single_classic")startgame_single_classic(); 390 if(opr=="double_classic")startgame_double_classic(); 391 } 392 function choose_mode(opr) 393 { 394 if (opr==1)gamemode="single_classic"; 395 if (opr==2)gamemode="double_classic"; 396 document.getElementById("single_button").disabled="true"; 397 document.getElementById("single_button").style.color="#D6D6D6"; 398 $("#single_button").fadeTo(1000,0); 399 document.getElementById("double_button").disabled="true"; 400 document.getElementById("double_button").style.color="#D6D6D6"; 401 $("#double_button").fadeTo(1000,0); 402 $("#items_button").fadeTo(1000,0); 403 $("#rating_button").fadeTo(1000,0); 404 document.getElementById("Admin_button").disabled="true"; 405 $("#Admin_button").fadeTo(1000,0); 406 document.getElementById("start_button").disabled=""; 407 $("#start_button").fadeTo(2000,1); 408 } 409 function open_Admin() 410 { 411 var password=prompt("输入管理员密码！",""); 412 if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d") 413 { 414 Administrator_access=true; 415 alert("欢迎回来,权限狗！") 416 document.getElementById("go_through").disabled=""; 417 }else 418 { 419 Administrator_access=true; 420 alert("你连权限狗都不是还装什么权限狗！") 421 document.getElementById("Admin_button").style.color="#D6D6D6"; 422 } 423 document.getElementById("Admin_button").disabled="true"; 424 $("#Admin_button").fadeTo(1000,0); 425 } 426 function auto_adjust() 427 { 428 var now_Height=document.documentElement.clientHeight; 429 var now_Width=document.documentElement.clientWidth; 430 if (now_Height>=700&&now_Width>=850)return; 431 var Height_ratio=now_Height/700; 432 var Width_ratio=now_Width/850; 433 adjust_ratio=Math.min(Height_ratio,Width_ratio); 434 var autocg=document.getElementsByTagName("meta")[1]; 435 autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2); 436 } 437 $(function(){ 438 auto_adjust(); 439 $("#single_button").fadeTo(2000,1); 440 $("#double_button").fadeTo(2000,1); 441 $("#items_button").fadeTo(2000,1); 442 $("#rating_button").fadeTo(2000,1); 443 $("#Admin_button").fadeTo(3000,1); 444 }); 445 </script> 446 </head> 447 </html>
3.3：全新的记分规则，看到分数几千几万的是不是比原来就更霸气了？
1、加入不同难度，可以在一开始选完游戏模式之后选择。从易到难依次为：“极弱无比”、“有点意思”、“奥义很爽”、“丧心病狂”、“无♂双♂大♂王”！难度越高吃到食物获得的分数越高，速度也会越快咯
2、全新的和难度挂钩的记分规则，并加入10秒内连续吃两个有加分的奖励。在得分一栏显示的奖励buff消失之前赶快把食物吃掉吧！
3、修正原来双人模式两人同时吃第一个食物会出现1:2的bug
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>crazy_snake_1</title> 7 <style type="text/css"> 8 #select_page{position: relative; width:850px; height:700px; z-index: 10; background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); text-align: center; max-width: 850px; max-height: 700px; top: 0px; left: 0px; text-shadow: 3px 3px 1px #999999;} 9 .select_button{border-color: #FFFFFF; width: 160px;height: 90px;z-index: 5;color: #0000FF;font-size: 25px;text-align: center;background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);position: absolute;border-radius: 25px;max-width: 160px;max-height: 90px;display: inline-block;margin-left: -80px;margin-top: -45px;font-weight: bold;text-shadow:3px 3px 1px #999999;opacity:0;} 10 #page{ position: fixed; z-index: 0; max-width: 800px; max-height: 650px; width: 800px; height: 650px; top: 0px; left: 0px; margin-left: 50px; margin-top: 50px; } 11 #canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;} 12 .simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;} 13 </style> 14 </head> 15 16 17 <body style="margin:0;"> 18 <div id="select_page"> 19 <button id="single_button"class="select_button"onclick="choose_mode(1);"style="top:25%;left:25%;z-index:15;">单人模式</button> 20 <button id="double_button"class="select_button"onclick="choose_mode(2);"style="top:25%;left:75%;z-index:15;">双人模式</button> 21 <button id="items_button"class="select_button"onclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;z-index:15;"disabled="true">道具场</button> 22 <button id="rating_button"class="select_button"onclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;z-index:15;"disabled="true">天梯排位赛</button> 23 <button id="start_button"class="select_button"onclick="startgame(gamemode);"style="top:50%;left:50%;z-index:11;"disabled="true">开始游戏！</button> 24 <button id="Admin_button"class="select_button"onclick="open_Admin();"style="top:25%;left:50%;z-index:20;">管理员权限狗</button> 25 <button id="level_1"class="select_button"onclick="choose_level(1);"style="top:25%;left:25%;z-index:12;"disabled="true">极弱无比</button> 26 <button id="level_2"class="select_button"onclick="choose_level(2);"style="top:25%;left:75%;z-index:12;"disabled="true">有点意思</button> 27 <button id="level_3"class="select_button"onclick="choose_level(3);"style="top:50%;left:50%;z-index:12;"disabled="true">奥义很爽</button> 28 <button id="level_4"class="select_button"onclick="choose_level(4);"style="top:75%;left:25%;z-index:12;"disabled="true">丧心病狂</button> 29 <button id="level_5"class="select_button"onclick="choose_level(5);"style="top:75%;left:75%;z-index:12;"disabled="true">无双大王</button> 30 </div> 31 <div id="page" style="visibility:hidden;"> 32 <div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div> 33 <div id="status"> 34 <div id="score_table"class="simple_font_type"style="left:0px;width:120px;"><b>得分：<span id="scores" style="color:red"></b></span></div> 35 <div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div> 36 <button id="pause"class="simple_font_type"style="left:300px;"onclick="judge_key(80)">暂停</button> 37 <div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div> 38 <button id="go_through"class="simple_font_type"style="left:600px;"onclick="judge_key(69)" disabled="true">关闭</button> 39 </div> 40 </div> 41 </body> 42 43 44 <head> 45 <script src="js/jquery-2.1.1.js"></script> 46 <script type="text/javascript"> 47 48 var hexcase=0;function hex_md5(a){return rstr2hex(rstr_md5(str2rstr_utf8(a)))}function hex_hmac_md5(a,b){return rstr2hex(rstr_hmac_md5(str2rstr_utf8(a),str2rstr_utf8(b)))}function md5_vm_test(){return hex_md5("abc").toLowerCase()=="900150983cd24fb0d6963f7d28e17f72"}function rstr_md5(a){return binl2rstr(binl_md5(rstr2binl(a),a.length*8))}function rstr_hmac_md5(c,f){var e=rstr2binl(c);if(e.length>16){e=binl_md5(e,c.length*8)}var a=Array(16),d=Array(16);for(var b=0;b<16;b++){a[b]=e[b]^909522486;d[b]=e[b]^1549556828}var g=binl_md5(a.concat(rstr2binl(f)),512+f.length*8);return binl2rstr(binl_md5(d.concat(g),512+128))}function rstr2hex(c){try{hexcase}catch(g){hexcase=0}var f=hexcase?"0123456789ABCDEF":"0123456789abcdef";var b="";var a;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);b+=f.charAt((a>>>4)&15)+f.charAt(a&15)}return b}function str2rstr_utf8(c){var b="";var d=-1;var a,e;while(++d<c.length){a=c.charCodeAt(d);e=d+1<c.length?c.charCodeAt(d+1):0;if(55296<=a&&a<=56319&&56320<=e&&e<=57343){a=65536+((a&1023)<<10)+(e&1023);d++}if(a<=127){b+=String.fromCharCode(a)}else{if(a<=2047){b+=String.fromCharCode(192|((a>>>6)&31),128|(a&63))}else{if(a<=65535){b+=String.fromCharCode(224|((a>>>12)&15),128|((a>>>6)&63),128|(a&63))}else{if(a<=2097151){b+=String.fromCharCode(240|((a>>>18)&7),128|((a>>>12)&63),128|((a>>>6)&63),128|(a&63))}}}}}return b}function rstr2binl(b){var a=Array(b.length>>2);for(var c=0;c<a.length;c++){a[c]=0}for(var c=0;c<b.length*8;c+=8){a[c>>5]|=(b.charCodeAt(c/8)&255)<<(c%32)}return a}function binl2rstr(b){var a="";for(var c=0;c<b.length*32;c+=8){a+=String.fromCharCode((b[c>>5]>>>(c%32))&255)}return a}function binl_md5(p,k){p[k>>5]|=128<<((k)%32);p[(((k+64)>>>9)<<4)+14]=k;var o=1732584193;var n=-271733879;var m=-1732584194;var l=271733878;for(var g=0;g<p.length;g+=16){var j=o;var h=n;var f=m;var e=l;o=md5_ff(o,n,m,l,p[g+0],7,-680876936);l=md5_ff(l,o,n,m,p[g+1],12,-389564586);m=md5_ff(m,l,o,n,p[g+2],17,606105819);n=md5_ff(n,m,l,o,p[g+3],22,-1044525330);o=md5_ff(o,n,m,l,p[g+4],7,-176418897);l=md5_ff(l,o,n,m,p[g+5],12,1200080426);m=md5_ff(m,l,o,n,p[g+6],17,-1473231341);n=md5_ff(n,m,l,o,p[g+7],22,-45705983);o=md5_ff(o,n,m,l,p[g+8],7,1770035416);l=md5_ff(l,o,n,m,p[g+9],12,-1958414417);m=md5_ff(m,l,o,n,p[g+10],17,-42063);n=md5_ff(n,m,l,o,p[g+11],22,-1990404162);o=md5_ff(o,n,m,l,p[g+12],7,1804603682);l=md5_ff(l,o,n,m,p[g+13],12,-40341101);m=md5_ff(m,l,o,n,p[g+14],17,-1502002290);n=md5_ff(n,m,l,o,p[g+15],22,1236535329);o=md5_gg(o,n,m,l,p[g+1],5,-165796510);l=md5_gg(l,o,n,m,p[g+6],9,-1069501632);m=md5_gg(m,l,o,n,p[g+11],14,643717713);n=md5_gg(n,m,l,o,p[g+0],20,-373897302);o=md5_gg(o,n,m,l,p[g+5],5,-701558691);l=md5_gg(l,o,n,m,p[g+10],9,38016083);m=md5_gg(m,l,o,n,p[g+15],14,-660478335);n=md5_gg(n,m,l,o,p[g+4],20,-405537848);o=md5_gg(o,n,m,l,p[g+9],5,568446438);l=md5_gg(l,o,n,m,p[g+14],9,-1019803690);m=md5_gg(m,l,o,n,p[g+3],14,-187363961);n=md5_gg(n,m,l,o,p[g+8],20,1163531501);o=md5_gg(o,n,m,l,p[g+13],5,-1444681467);l=md5_gg(l,o,n,m,p[g+2],9,-51403784);m=md5_gg(m,l,o,n,p[g+7],14,1735328473);n=md5_gg(n,m,l,o,p[g+12],20,-1926607734);o=md5_hh(o,n,m,l,p[g+5],4,-378558);l=md5_hh(l,o,n,m,p[g+8],11,-2022574463);m=md5_hh(m,l,o,n,p[g+11],16,1839030562);n=md5_hh(n,m,l,o,p[g+14],23,-35309556);o=md5_hh(o,n,m,l,p[g+1],4,-1530992060);l=md5_hh(l,o,n,m,p[g+4],11,1272893353);m=md5_hh(m,l,o,n,p[g+7],16,-155497632);n=md5_hh(n,m,l,o,p[g+10],23,-1094730640);o=md5_hh(o,n,m,l,p[g+13],4,681279174);l=md5_hh(l,o,n,m,p[g+0],11,-358537222);m=md5_hh(m,l,o,n,p[g+3],16,-722521979);n=md5_hh(n,m,l,o,p[g+6],23,76029189);o=md5_hh(o,n,m,l,p[g+9],4,-640364487);l=md5_hh(l,o,n,m,p[g+12],11,-421815835);m=md5_hh(m,l,o,n,p[g+15],16,530742520);n=md5_hh(n,m,l,o,p[g+2],23,-995338651);o=md5_ii(o,n,m,l,p[g+0],6,-198630844);l=md5_ii(l,o,n,m,p[g+7],10,1126891415);m=md5_ii(m,l,o,n,p[g+14],15,-1416354905);n=md5_ii(n,m,l,o,p[g+5],21,-57434055);o=md5_ii(o,n,m,l,p[g+12],6,1700485571);l=md5_ii(l,o,n,m,p[g+3],10,-1894986606);m=md5_ii(m,l,o,n,p[g+10],15,-1051523);n=md5_ii(n,m,l,o,p[g+1],21,-2054922799);o=md5_ii(o,n,m,l,p[g+8],6,1873313359);l=md5_ii(l,o,n,m,p[g+15],10,-30611744);m=md5_ii(m,l,o,n,p[g+6],15,-1560198380);n=md5_ii(n,m,l,o,p[g+13],21,1309151649);o=md5_ii(o,n,m,l,p[g+4],6,-145523070);l=md5_ii(l,o,n,m,p[g+11],10,-1120210379);m=md5_ii(m,l,o,n,p[g+2],15,718787259);n=md5_ii(n,m,l,o,p[g+9],21,-343485551);o=safe_add(o,j);n=safe_add(n,h);m=safe_add(m,f);l=safe_add(l,e)}return Array(o,n,m,l)}function md5_cmn(h,e,d,c,g,f){return safe_add(bit_rol(safe_add(safe_add(e,h),safe_add(c,f)),g),d)}function md5_ff(g,f,k,j,e,i,h){return md5_cmn((f&k)|((~f)&j),g,f,e,i,h)}function md5_gg(g,f,k,j,e,i,h){return md5_cmn((f&j)|(k&(~j)),g,f,e,i,h)}function md5_hh(g,f,k,j,e,i,h){return md5_cmn(f^k^j,g,f,e,i,h)}function md5_ii(g,f,k,j,e,i,h){return md5_cmn(k^(f|(~j)),g,f,e,i,h)}function safe_add(a,d){var c=(a&65535)+(d&65535);var b=(a>>16)+(d>>16)+(c>>16);return(b<<16)|(c&65535)}function bit_rol(a,b){return(a<<b)|(a>>>(32-b))}; 49 var cell_size=20.0,Height=30,Width=40; 50 var map=new Array()//地图状态 51 for (var i=0;i<Width;i++) 52 { 53 map[i]=new Array() 54 for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇； 55 } 56 var snake_1=[];//坐标 57 var snake_2=[]; 58 var c=null;//canvas 59 var time_interval=null;//移动 60 var draw_interval=null;//画图 61 var score=null,food1=0,food2=0,score_1=0,score_2=0;//分数 62 var direction_1=3,direction=4;//方向 63 var next_direction_1=3,next_direction_2=4; 64 var foodx=0,foody=0; 65 var length_1=4,length_2=4;//长度 66 var paused=false;//暂停状态 67 var getfood_1=false,getfood_2=false;//吃到食物 68 var through=false;//穿墙 69 var T=100; 70 var sx=0,sy=0,ex=0,ey=0;//手势 71 var Administrator_access=false;//管理员权限 72 var adjust_ratio=1.0; 73 var gamemode="";//游戏模式 74 var players=1; 75 var level=0; 76 var down_interval=null,dsum=0,bonus=false;//连续吃到食物的奖励分 77 function judge_key(opr) 78 { 79 if (paused==false) 80 { 81 if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左 82 if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上 83 if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右 84 if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下 85 if (players==2) 86 { 87 if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左 88 if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上 89 if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右 90 if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下 91 } 92 } 93 if(opr==80)//p 94 { 95 if(paused==true) 96 { 97 move_interval=setInterval(move,T); 98 draw_interval=setInterval(draw,10); 99 if (dsum>0)down_interval=setInterval(dcount,100); 100 paused=false; 101 document.getElementById('pause').innerHTML="暂停"; 102 document.getElementById('pause_status').innerHTML="游戏进行中"; 103 }else 104 { 105 clearInterval(move_interval); 106 clearInterval(draw_interval); 107 clearInterval(down_interval); 108 paused=true; 109 document.getElementById('pause').innerHTML="开始"; 110 document.getElementById('pause_status').innerHTML="游戏已暂停"; 111 } 112 } 113 if (opr==69&&Administrator_access==true)//e 114 { 115 if (through==true) 116 { 117 through=false; 118 document.getElementById('go_through').innerHTML="开启"; 119 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 120 }else 121 { 122 through=true; 123 document.getElementById('go_through').innerHTML="关闭"; 124 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 125 } 126 } 127 } 128 function draw() 129 { 130 c.clearRect(0,0,cell_size*Width,cell_size*Height); 131 //======================================================================================蛇1 132 c.strokeStyle="#ffffff";//白 133 c.fillStyle="#0000ff";//深蓝 134 c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size); 135 c.beginPath(); 136 c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size); 137 c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size); 138 c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size); 139 c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size); 140 c.closePath(); 141 c.stroke(); 142 c.fillStyle="#66ffff";//浅蓝 143 for (var i=1;i<length_1;i++) 144 { 145 c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size); 146 c.beginPath(); 147 c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size); 148 c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size); 149 150 c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size); 151 c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size); 152 c.closePath(); 153 c.stroke(); 154 } 155 //======================================================================================食物 156 c.fillStyle="#ffff00";//黄 157 c.strokeStyle="#ff0000";//红 158 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 159 c.beginPath(); 160 c.moveTo(foodx*cell_size,foody*cell_size); 161 c.lineTo((foodx+1)*cell_size,foody*cell_size); 162 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 163 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 164 c.closePath(); 165 c.stroke(); 166 167 if (players==1)return; 168 //======================================================================================蛇2 169 c.strokeStyle="#ffffff";//白 170 c.fillStyle="#ff3333";//红 171 if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰 172 c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size); 173 c.beginPath(); 174 c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size); 175 c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size); 176 c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size); 177 c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size); 178 c.closePath(); 179 c.stroke(); 180 for (var i=1;i<length_2;i++) 181 { 182 c.fillStyle="#FFBDBD";//浅红 183 if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰 184 c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size); 185 c.beginPath(); 186 c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size); 187 c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size); 188 c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size); 189 c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size); 190 c.closePath(); 191 c.stroke(); 192 } 193 } 194 195 function move() 196 { 197 var nx1=snake_1[0].x,ny1=snake_1[0].y; 198 direction_1=next_direction_1;next_direction_1=direction_1; 199 if (direction_1==1)nx1--; 200 if (direction_1==2)ny1--; 201 if (direction_1==3)nx1++; 202 if (direction_1==4)ny1++; 203 204 if (players==2) 205 { 206 var nx2=snake_2[0].x,ny2=snake_2[0].y; 207 direction_2=next_direction_2;next_direction_2=direction_2; 208 if (direction_2==1)nx2--; 209 if (direction_2==2)ny2--; 210 if (direction_2==3)nx2++; 211 if (direction_2==4)ny2++; 212 } 213 214 if (through) 215 { 216 if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width; 217 if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height; 218 } 219 if (through&&players==2) 220 { 221 if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width; 222 if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height; 223 } 224 if (judge_dead(nx1,ny1,1))return; 225 if (players==2&&judge_dead(nx2,ny2,2))return; 226 judge_eat(nx1,ny1,nx2,ny2); 227 if (getfood_1||getfood_2)add_food(); 228 map[nx1][ny1]+=1; 229 snake_1.unshift({x:nx1,y:ny1}); 230 if (getfood_1==false) 231 { 232 map[snake_1[length_1].x][snake_1[length_1].y]-=1; 233 snake_1.pop(); 234 } 235 else 236 { 237 length_1++; 238 getfood_1=false; 239 } 240 241 if (players==2) 242 { 243 map[nx2][ny2]+=2; 244 snake_2.unshift({x:nx2,y:ny2}); 245 if (getfood_2==false) 246 { 247 map[snake_2[length_2].x][snake_2[length_2].y]-=2; 248 snake_2.pop(); 249 } 250 else 251 { 252 length_2++; 253 getfood_2=false; 254 } 255 } 256 } 257 function judge_eat(x1,y1,x2,y2) 258 { 259 var mrk1=(x1==foodx&&y1==foody),mrk2=(x2==foodx&&y2==foody); 260 if (mrk1){getfood_1=true;food1++;}if (mrk2){getfood_2=true;food2++;} 261 if (mrk1==false&&mrk2==false)return; 262 if (T>(5-level)*(6-level))T*=(1-level*0.01); 263 clearInterval(move_interval);move_interval=setInterval(move,T); 264 if (mrk1){score_1+=food1*level;if (bonus)score_1+=3*level*(food1-1);} 265 if (mrk2){score_2+=food2*level;if (bonus)score_2+=3*level*(food2-1);} 266 if (players==1)score.innerHTML=score_1; 267 if (players==2)score.innerHTML=score_1+":"+score_2; 268 bonus=true;dsum=100; 269 document.getElementById("score_table").style.backgroundColor="#00CCFF"; 270 clearInterval(down_interval); 271 down_interval=setInterval(dcount,100); 272 } 273 function dcount() 274 { 275 dsum-=1; 276 if (dsum<0)clearInterval(down_interval); 277 if (dsum<=0){document.getElementById("score_table").style.backgroundColor="";bonus=false;} 278 } 279 function judge_dead(nx,ny,snake_number) 280 { 281 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0) 282 { 283 clearInterval(move_interval); 284 clearInterval(draw_interval); 285 clearInterval(down_interval); 286 alert("Game Over!"); 287 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 288 document.getElementById("pause").disabled="true"; 289 document.getElementById("go_through").disabled="true"; 290 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 291 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 292 document.removeEventListener("keydown",jud,false); 293 return 1; 294 } 295 return 0; 296 } 297 function add_food() 298 { 299 map[foodx][foody]-=4; 300 foodx=-1; 301 foody=-1; 302 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0) 303 { 304 foodx=Math.floor(Math.random()*(Width-1)); 305 foody=Math.floor(Math.random()*(Height-1)); 306 } 307 map[foodx][foody]+=4; 308 } 309 function touchStart(event) 310 { 311 event.preventDefault; 312 event=event||window.event; 313 var touch=event.changedTouches[0]; 314 sx=touch.pageX; 315 sy=touch.pageY; 316 } 317 function touchEnd(event) 318 { 319 event.preventDefault; 320 event=event||wondow.event; 321 var touch=event.changedTouches[0]; 322 ex=touch.pageX; 323 ey=touch.pageY; 324 //tan(pi/9)=tan(20)=0.364 325 //tan(pi/6)=tan(30)=0.577 326 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 327 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 328 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 329 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 330 } 331 function jud(event) 332 { 333 var event=event||window.event; 334 judge_key(event.keyCode); 335 } 336 function startgame_single_classic()//单人经典模式 337 { 338 players=1; 339 through=true; 340 score.innerHTML=0; 341 for (var i=0;i<length_1;i++) 342 { 343 snake_1.unshift({x:i,y:0}); 344 map[i][0]+=1; 345 } 346 map[foodx][foody]+=4;add_food(); 347 draw(); 348 move_interval=setInterval(move,T); 349 draw_interval=setInterval(draw,10); 350 document.getElementById("page").addEventListener("touchstart",touchStart,false); 351 document.getElementById("page").addEventListener("touchend",touchEnd,false); 352 document.addEventListener("keydown",jud,false); 353 } 354 function startgame_double_classic()//双人经典模式 355 { 356 players=2; 357 through=true; 358 score.innerHTML=0+":"+0; 359 for (var i=0;i<length_1;i++) 360 { 361 snake_1.unshift({x:i,y:0}); 362 map[i][0]=map[i][0]+1; 363 } 364 for (var i=0;i<length_2;i++) 365 { 366 snake_2.unshift({x:0,y:i}); 367 map[0][i]+=2; 368 } 369 map[foodx][foody]+=4;add_food(); 370 draw(); 371 move_interval=setInterval(move,T); 372 draw_interval=setInterval(draw,10); 373 document.addEventListener("keydown",jud,false); 374 } 375 function startgame(opr) 376 { 377 $("#start_button").fadeTo(1000,0); 378 $("#select_page").fadeTo(2000,0);document.getElementById("select_page").style.visibility="hidden"; 379 document.getElementById("page").style.visibility="visible"; 380 c=document.getElementById("screen").getContext("2d"); 381 score=document.getElementById("scores"); 382 paused=false; 383 if(opr=="single_classic")startgame_single_classic(); 384 if(opr=="double_classic")startgame_double_classic(); 385 } 386 function choose_mode(opr) 387 { 388 if (opr==1)gamemode="single_classic"; 389 if (opr==2)gamemode="double_classic"; 390 $("#single_button").fadeTo(1000,0);document.getElementById("single_button").disabled="true";document.getElementById("single_button").style.color="#D6D6D6"; 391 $("#double_button").fadeTo(1000,0);document.getElementById("double_button").disabled="true";document.getElementById("double_button").style.color="#D6D6D6"; 392 $("#items_button").fadeTo(1000,0); 393 $("#rating_button").fadeTo(1000,0); 394 $("#Admin_button").fadeTo(1000,0);document.getElementById("Admin_button").disabled="true"; 395 $("#level_1").fadeTo(2000,1);document.getElementById("level_1").disabled="";document.getElementById("level_1").style.zIndex="16"; 396 $("#level_2").fadeTo(2000,1);document.getElementById("level_2").disabled="";document.getElementById("level_2").style.zIndex="16"; 397 $("#level_3").fadeTo(2000,1);document.getElementById("level_3").disabled="";document.getElementById("level_3").style.zIndex="16"; 398 $("#level_4").fadeTo(2000,1);document.getElementById("level_4").disabled="";document.getElementById("level_4").style.zIndex="16"; 399 $("#level_5").fadeTo(2000,1);document.getElementById("level_5").disabled="";document.getElementById("level_5").style.zIndex="16"; 400 } 401 function choose_level(opr) 402 { 403 level=opr; 404 $("#level_1").fadeTo(2000,0);document.getElementById("level_1").disabled="true"; 405 $("#level_2").fadeTo(2000,0);document.getElementById("level_2").disabled="true"; 406 $("#level_3").fadeTo(2000,0);document.getElementById("level_3").disabled="true"; 407 $("#level_4").fadeTo(2000,0);document.getElementById("level_4").disabled="true"; 408 $("#level_5").fadeTo(2000,0);document.getElementById("level_5").disabled="true"; 409 $("#start_button").fadeTo(2000,1);document.getElementById("start_button").disabled="";document.getElementById("start_button").style.zIndex="22"; 410 } 411 function open_Admin() 412 { 413 var password=prompt("输入管理员密码！",""); 414 if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d") 415 { 416 Administrator_access=true; 417 alert("欢迎回来,权限狗！") 418 document.getElementById("go_through").disabled=""; 419 }else 420 { 421 Administrator_access=true; 422 alert("你连权限狗都不是还装什么权限狗！") 423 document.getElementById("Admin_button").style.color="#D6D6D6"; 424 } 425 document.getElementById("Admin_button").disabled="true"; 426 $("#Admin_button").fadeTo(1000,0); 427 } 428 function auto_adjust() 429 { 430 var now_Height=document.documentElement.clientHeight; 431 var now_Width=document.documentElement.clientWidth; 432 if (now_Height>=700&&now_Width>=850)return; 433 var Height_ratio=now_Height/700; 434 var Width_ratio=now_Width/850; 435 adjust_ratio=Math.min(Height_ratio,Width_ratio); 436 var autocg=document.getElementsByTagName("meta")[1]; 437 autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2); 438 } 439 $(function(){ 440 auto_adjust(); 441 $("#single_button").fadeTo(2000,1); 442 $("#double_button").fadeTo(2000,1); 443 $("#items_button").fadeTo(2000,1); 444 $("#rating_button").fadeTo(2000,1); 445 $("#Admin_button").fadeTo(2000,1); 446 }); 447 </script> 448 </head> 449 </html>
4.0：在线游戏模式与客户端兼容啦！现在游戏结束之后能提交成绩到排行榜了
1、在czx学长的指导下知道了有个东西叫前端库……改了一下jQuery的路径
2、支持游戏结束后成绩上传，写的比较挫，大家善待它……不要把服务器玩坏_(:3] <)_
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>crazy_snake_1</title> 7 <style type="text/css"> 8 #select_page{position: relative; width:850px; height:700px; z-index: 10; background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); text-align: center; max-width: 850px; max-height: 700px; top: 0px; left: 0px; text-shadow: 3px 3px 1px #999999;} 9 .select_button{border-color: #FFFFFF; width: 160px;height: 90px;z-index: 5;color: #0000FF;font-size: 25px;text-align: center;background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);position: absolute;border-radius: 25px;max-width: 160px;max-height: 90px;display: inline-block;margin-left: -80px;margin-top: -45px;font-weight: bold;text-shadow:3px 3px 1px #999999;opacity:0;} 10 #page{ position: fixed; z-index: 3; max-width: 800px; max-height: 650px; width: 800px; height: 650px; top: 0px; left: 0px; margin-left: 50px; margin-top: 50px; } 11 #canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;z-index:3;} 12 .simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;} 13 #hide_page{position:fixed;top:0px;left:0px;height:700px;width:850px;background-color: #333333;opacity:0;z-index:1;} 14 #submit_page{position:absolute;left:31.56%;top:30.3%;width:245px;height:230px;opacity:0;background-color:#00FFFF;z-index:0;visibility:hidden;} 15 </style> 16 </head> 17 18 <body style="margin:0;"> 19 <div id="select_page"> 20 <button id="single_button"class="select_button"onclick="choose_mode(1);"style="top:25%;left:25%;z-index:15;">单人模式</button> 21 <button id="double_button"class="select_button"onclick="choose_mode(2);"style="top:25%;left:75%;z-index:15;">双人模式</button> 22 <button id="items_button"class="select_button"onclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;z-index:15;"disabled="true">道具场</button> 23 <button id="rating_button"class="select_button"onclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;z-index:15;"disabled="true">天梯排位赛</button> 24 <button id="start_button"class="select_button"onclick="startgame(gamemode);"style="top:50%;left:50%;z-index:11;"disabled="true">开始游戏！</button> 25 <button id="Admin_button"class="select_button"onclick="open_Admin();"style="top:25%;left:50%;z-index:20;">管理员权限狗</button> 26 <button id="level_1"class="select_button"onclick="choose_level(1);"style="top:25%;left:25%;z-index:12;"disabled="true">极弱无比</button> 27 <button id="level_2"class="select_button"onclick="choose_level(2);"style="top:25%;left:75%;z-index:12;"disabled="true">有点意思</button> 28 <button id="level_3"class="select_button"onclick="choose_level(3);"style="top:50%;left:50%;z-index:12;"disabled="true">奥义很爽</button> 29 <button id="level_4"class="select_button"onclick="choose_level(4);"style="top:75%;left:25%;z-index:12;"disabled="true">丧心病狂</button> 30 <button id="level_5"class="select_button"onclick="choose_level(5);"style="top:75%;left:75%;z-index:12;"disabled="true">无双大王</button> 31 </div> 32 <div id="page" style="visibility:hidden;"> 33 <div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div> 34 <div id="status"> 35 <div id="score_table"class="simple_font_type"style="left:0px;width:120px;"><b>得分<span id="scores" style="color:red"></b></span></div> 36 <div id="bonus_table"class="simple_font_type"style="left:135px;"><span id="dcount"></span></div> 37 <div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div> 38 <button id="pause"class="simple_font_type"style="left:300px;"onclick="judge_key(80)">暂停</button> 39 <div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div> 40 <button id="go_through"class="simple_font_type"style="left:600px;"onclick="judge_key(69)" disabled="true">关闭</button> 41 </div> 42 <div id="submit_page" align="center"> 43 <form name="upload" method="post" action="upload-for-online.php"> 44 <p> 45 <label for="textfield">GameMod:</label> 46 <input name="GameMod" id="GameMod"></input> 47 </p> 48 <p> 49 <label for="textfield">Level :</label> 50 <input name="Level" id="Level"></input> 51 </p> 52 <p> 53 <label for="textfield">Name :</label> 54 <input type="text" name="Name" id="Name"value="Enter_Your_Name"></input> 55 </p> 56 <p> 57 <label for="textfield">Score :</label> 58 <input type="text" name="Score" id="Score"></input> 59 </p> 60 <p> 61 <label for="textfield">Food :</label> 62 <input type="text" name="Food" id="Food"></input> 63 </p> 64 <p> 65 <input type="submit" name="submit" id="submit" value="submit"> 66 </p> 67 </form> 68 </div> 69 <div id="hide_page"></div> 70 </div> 71 72 73 74 </body> 75 76 77 <head> 78 <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js"></script> 79 <script type="text/javascript"> 80 81 var hexcase=0;function hex_md5(a){return rstr2hex(rstr_md5(str2rstr_utf8(a)))}function hex_hmac_md5(a,b){return rstr2hex(rstr_hmac_md5(str2rstr_utf8(a),str2rstr_utf8(b)))}function md5_vm_test(){return hex_md5("abc").toLowerCase()=="900150983cd24fb0d6963f7d28e17f72"}function rstr_md5(a){return binl2rstr(binl_md5(rstr2binl(a),a.length*8))}function rstr_hmac_md5(c,f){var e=rstr2binl(c);if(e.length>16){e=binl_md5(e,c.length*8)}var a=Array(16),d=Array(16);for(var b=0;b<16;b++){a[b]=e[b]^909522486;d[b]=e[b]^1549556828}var g=binl_md5(a.concat(rstr2binl(f)),512+f.length*8);return binl2rstr(binl_md5(d.concat(g),512+128))}function rstr2hex(c){try{hexcase}catch(g){hexcase=0}var f=hexcase?"0123456789ABCDEF":"0123456789abcdef";var b="";var a;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);b+=f.charAt((a>>>4)&15)+f.charAt(a&15)}return b}function str2rstr_utf8(c){var b="";var d=-1;var a,e;while(++d<c.length){a=c.charCodeAt(d);e=d+1<c.length?c.charCodeAt(d+1):0;if(55296<=a&&a<=56319&&56320<=e&&e<=57343){a=65536+((a&1023)<<10)+(e&1023);d++}if(a<=127){b+=String.fromCharCode(a)}else{if(a<=2047){b+=String.fromCharCode(192|((a>>>6)&31),128|(a&63))}else{if(a<=65535){b+=String.fromCharCode(224|((a>>>12)&15),128|((a>>>6)&63),128|(a&63))}else{if(a<=2097151){b+=String.fromCharCode(240|((a>>>18)&7),128|((a>>>12)&63),128|((a>>>6)&63),128|(a&63))}}}}}return b}function rstr2binl(b){var a=Array(b.length>>2);for(var c=0;c<a.length;c++){a[c]=0}for(var c=0;c<b.length*8;c+=8){a[c>>5]|=(b.charCodeAt(c/8)&255)<<(c%32)}return a}function binl2rstr(b){var a="";for(var c=0;c<b.length*32;c+=8){a+=String.fromCharCode((b[c>>5]>>>(c%32))&255)}return a}function binl_md5(p,k){p[k>>5]|=128<<((k)%32);p[(((k+64)>>>9)<<4)+14]=k;var o=1732584193;var n=-271733879;var m=-1732584194;var l=271733878;for(var g=0;g<p.length;g+=16){var j=o;var h=n;var f=m;var e=l;o=md5_ff(o,n,m,l,p[g+0],7,-680876936);l=md5_ff(l,o,n,m,p[g+1],12,-389564586);m=md5_ff(m,l,o,n,p[g+2],17,606105819);n=md5_ff(n,m,l,o,p[g+3],22,-1044525330);o=md5_ff(o,n,m,l,p[g+4],7,-176418897);l=md5_ff(l,o,n,m,p[g+5],12,1200080426);m=md5_ff(m,l,o,n,p[g+6],17,-1473231341);n=md5_ff(n,m,l,o,p[g+7],22,-45705983);o=md5_ff(o,n,m,l,p[g+8],7,1770035416);l=md5_ff(l,o,n,m,p[g+9],12,-1958414417);m=md5_ff(m,l,o,n,p[g+10],17,-42063);n=md5_ff(n,m,l,o,p[g+11],22,-1990404162);o=md5_ff(o,n,m,l,p[g+12],7,1804603682);l=md5_ff(l,o,n,m,p[g+13],12,-40341101);m=md5_ff(m,l,o,n,p[g+14],17,-1502002290);n=md5_ff(n,m,l,o,p[g+15],22,1236535329);o=md5_gg(o,n,m,l,p[g+1],5,-165796510);l=md5_gg(l,o,n,m,p[g+6],9,-1069501632);m=md5_gg(m,l,o,n,p[g+11],14,643717713);n=md5_gg(n,m,l,o,p[g+0],20,-373897302);o=md5_gg(o,n,m,l,p[g+5],5,-701558691);l=md5_gg(l,o,n,m,p[g+10],9,38016083);m=md5_gg(m,l,o,n,p[g+15],14,-660478335);n=md5_gg(n,m,l,o,p[g+4],20,-405537848);o=md5_gg(o,n,m,l,p[g+9],5,568446438);l=md5_gg(l,o,n,m,p[g+14],9,-1019803690);m=md5_gg(m,l,o,n,p[g+3],14,-187363961);n=md5_gg(n,m,l,o,p[g+8],20,1163531501);o=md5_gg(o,n,m,l,p[g+13],5,-1444681467);l=md5_gg(l,o,n,m,p[g+2],9,-51403784);m=md5_gg(m,l,o,n,p[g+7],14,1735328473);n=md5_gg(n,m,l,o,p[g+12],20,-1926607734);o=md5_hh(o,n,m,l,p[g+5],4,-378558);l=md5_hh(l,o,n,m,p[g+8],11,-2022574463);m=md5_hh(m,l,o,n,p[g+11],16,1839030562);n=md5_hh(n,m,l,o,p[g+14],23,-35309556);o=md5_hh(o,n,m,l,p[g+1],4,-1530992060);l=md5_hh(l,o,n,m,p[g+4],11,1272893353);m=md5_hh(m,l,o,n,p[g+7],16,-155497632);n=md5_hh(n,m,l,o,p[g+10],23,-1094730640);o=md5_hh(o,n,m,l,p[g+13],4,681279174);l=md5_hh(l,o,n,m,p[g+0],11,-358537222);m=md5_hh(m,l,o,n,p[g+3],16,-722521979);n=md5_hh(n,m,l,o,p[g+6],23,76029189);o=md5_hh(o,n,m,l,p[g+9],4,-640364487);l=md5_hh(l,o,n,m,p[g+12],11,-421815835);m=md5_hh(m,l,o,n,p[g+15],16,530742520);n=md5_hh(n,m,l,o,p[g+2],23,-995338651);o=md5_ii(o,n,m,l,p[g+0],6,-198630844);l=md5_ii(l,o,n,m,p[g+7],10,1126891415);m=md5_ii(m,l,o,n,p[g+14],15,-1416354905);n=md5_ii(n,m,l,o,p[g+5],21,-57434055);o=md5_ii(o,n,m,l,p[g+12],6,1700485571);l=md5_ii(l,o,n,m,p[g+3],10,-1894986606);m=md5_ii(m,l,o,n,p[g+10],15,-1051523);n=md5_ii(n,m,l,o,p[g+1],21,-2054922799);o=md5_ii(o,n,m,l,p[g+8],6,1873313359);l=md5_ii(l,o,n,m,p[g+15],10,-30611744);m=md5_ii(m,l,o,n,p[g+6],15,-1560198380);n=md5_ii(n,m,l,o,p[g+13],21,1309151649);o=md5_ii(o,n,m,l,p[g+4],6,-145523070);l=md5_ii(l,o,n,m,p[g+11],10,-1120210379);m=md5_ii(m,l,o,n,p[g+2],15,718787259);n=md5_ii(n,m,l,o,p[g+9],21,-343485551);o=safe_add(o,j);n=safe_add(n,h);m=safe_add(m,f);l=safe_add(l,e)}return Array(o,n,m,l)}function md5_cmn(h,e,d,c,g,f){return safe_add(bit_rol(safe_add(safe_add(e,h),safe_add(c,f)),g),d)}function md5_ff(g,f,k,j,e,i,h){return md5_cmn((f&k)|((~f)&j),g,f,e,i,h)}function md5_gg(g,f,k,j,e,i,h){return md5_cmn((f&j)|(k&(~j)),g,f,e,i,h)}function md5_hh(g,f,k,j,e,i,h){return md5_cmn(f^k^j,g,f,e,i,h)}function md5_ii(g,f,k,j,e,i,h){return md5_cmn(k^(f|(~j)),g,f,e,i,h)}function safe_add(a,d){var c=(a&65535)+(d&65535);var b=(a>>16)+(d>>16)+(c>>16);return(b<<16)|(c&65535)}function bit_rol(a,b){return(a<<b)|(a>>>(32-b))}; 82 var cell_size=20.0,Height=30,Width=40; 83 var map=new Array()//地图状态 84 for (var i=0;i<Width;i++) 85 { 86 map[i]=new Array() 87 for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇 88 } 89 var snake_1=[];//坐标 90 var snake_2=[]; 91 var c=null;//canvas 92 var time_interval=null;//移动 93 var draw_interval=null;//画图 94 var score=null,food1=0,food2=0,score_1=0,score_2=0;//分数 95 var direction_1=3,direction=4;//方向 96 var next_direction_1=3,next_direction_2=4; 97 var foodx=0,foody=0; 98 var length_1=4,length_2=4;//长度 99 var paused=false;//暂停状态 100 var getfood_1=false,getfood_2=false;//吃到食物 101 var through=false;//穿墙 102 var T=100; 103 var sx=0,sy=0,ex=0,ey=0;//手势 104 var Administrator_access=false;//管理员权限 105 var adjust_ratio=1.0; 106 var gamemode="";//游戏模式 107 var players=1; 108 var level=0; 109 var down_interval=null,dsum=0,bonus=false;//连续吃到食物的奖励分 110 function judge_key(opr) 111 { 112 if (paused==false) 113 { 114 if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左 115 if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上 116 if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右 117 if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下 118 if (players==2) 119 { 120 if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左 121 if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上 122 if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右 123 if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下 124 } 125 } 126 if(opr==80)//p 127 { 128 if(paused==true) 129 { 130 move_interval=setInterval(move,T); 131 draw_interval=setInterval(draw,10); 132 if (dsum>0)down_interval=setInterval(dcount,100); 133 paused=false; 134 document.getElementById('pause').innerHTML="暂停"; 135 document.getElementById('pause_status').innerHTML="游戏进行中"; 136 }else 137 { 138 clearInterval(move_interval); 139 clearInterval(draw_interval); 140 clearInterval(down_interval); 141 paused=true; 142 document.getElementById('pause').innerHTML="开始"; 143 document.getElementById('pause_status').innerHTML="游戏已暂停"; 144 } 145 } 146 if (opr==69&&Administrator_access==true)//e 147 { 148 if (through==true) 149 { 150 through=false; 151 document.getElementById('go_through').innerHTML="开启"; 152 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 153 }else 154 { 155 through=true; 156 document.getElementById('go_through').innerHTML="关闭"; 157 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 158 } 159 } 160 } 161 function draw() 162 { 163 c.clearRect(0,0,cell_size*Width,cell_size*Height); 164 //======================================================================================蛇1 165 c.strokeStyle="#ffffff";//白 166 c.fillStyle="#0000ff";//深蓝 167 c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size); 168 c.beginPath(); 169 c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size); 170 c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size); 171 c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size); 172 c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size); 173 c.closePath(); 174 c.stroke(); 175 c.fillStyle="#66ffff";//浅蓝 176 for (var i=1;i<length_1;i++) 177 { 178 c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size); 179 c.beginPath(); 180 c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size); 181 c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size); 182 183 c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size); 184 c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size); 185 c.closePath(); 186 c.stroke(); 187 } 188 //======================================================================================食物 189 c.fillStyle="#ffff00";//黄 190 c.strokeStyle="#ff0000";//红 191 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 192 c.beginPath(); 193 c.moveTo(foodx*cell_size,foody*cell_size); 194 c.lineTo((foodx+1)*cell_size,foody*cell_size); 195 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 196 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 197 c.closePath(); 198 c.stroke(); 199 200 if (players==1)return; 201 //======================================================================================蛇2 202 c.strokeStyle="#ffffff";//白 203 c.fillStyle="#ff3333";//红 204 if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰 205 c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size); 206 c.beginPath(); 207 c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size); 208 c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size); 209 c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size); 210 c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size); 211 c.closePath(); 212 c.stroke(); 213 for (var i=1;i<length_2;i++) 214 { 215 c.fillStyle="#FFBDBD";//浅红 216 if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰 217 c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size); 218 c.beginPath(); 219 c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size); 220 c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size); 221 c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size); 222 c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size); 223 c.closePath(); 224 c.stroke(); 225 } 226 } 227 228 function move() 229 { 230 var nx1=snake_1[0].x,ny1=snake_1[0].y; 231 direction_1=next_direction_1;next_direction_1=direction_1; 232 if (direction_1==1)nx1--; 233 if (direction_1==2)ny1--; 234 if (direction_1==3)nx1++; 235 if (direction_1==4)ny1++; 236 237 if (players==2) 238 { 239 var nx2=snake_2[0].x,ny2=snake_2[0].y; 240 direction_2=next_direction_2;next_direction_2=direction_2; 241 if (direction_2==1)nx2--; 242 if (direction_2==2)ny2--; 243 if (direction_2==3)nx2++; 244 if (direction_2==4)ny2++; 245 } 246 247 if (through) 248 { 249 if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width; 250 if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height; 251 } 252 if (through&&players==2) 253 { 254 if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width; 255 if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height; 256 } 257 if (judge_dead(nx1,ny1,1))return; 258 if (players==2&&judge_dead(nx2,ny2,2))return; 259 judge_eat(nx1,ny1,nx2,ny2); 260 if (getfood_1||getfood_2)add_food(); 261 map[nx1][ny1]+=1; 262 snake_1.unshift({x:nx1,y:ny1}); 263 if (getfood_1==false) 264 { 265 map[snake_1[length_1].x][snake_1[length_1].y]-=1; 266 snake_1.pop(); 267 } 268 else 269 { 270 length_1++; 271 getfood_1=false; 272 } 273 274 if (players==2) 275 { 276 map[nx2][ny2]+=2; 277 snake_2.unshift({x:nx2,y:ny2}); 278 if (getfood_2==false) 279 { 280 map[snake_2[length_2].x][snake_2[length_2].y]-=2; 281 snake_2.pop(); 282 } 283 else 284 { 285 length_2++; 286 getfood_2=false; 287 } 288 } 289 } 290 function judge_eat(x1,y1,x2,y2) 291 { 292 var mrk1=(x1==foodx&&y1==foody),mrk2=(x2==foodx&&y2==foody); 293 if (mrk1){getfood_1=true;food1++;}if (mrk2){getfood_2=true;food2++;} 294 if (mrk1==false&&mrk2==false)return; 295 if (T>(5-level)*(6-level))T*=(1-level*0.01); 296 clearInterval(move_interval);move_interval=setInterval(move,T); 297 if (mrk1){score_1+=food1*level;if (bonus)score_1+=3*level*(food1-1);} 298 if (mrk2){score_2+=food2*level;if (bonus)score_2+=3*level*(food2-1);} 299 if (players==1)score.innerHTML=score_1; 300 if (players==2)score.innerHTML=score_1+":"+score_2; 301 bonus=true;dsum=10;document.getElementById("dcount").innerHTML=dsum; 302 document.getElementById("dcount").fontColor="#00CCFF"; 303 document.getElementById("score_table").style.backgroundColor="#00CCFF"; 304 clearInterval(down_interval); 305 down_interval=setInterval(dcount,1000); 306 } 307 function dcount() 308 { 309 dsum-=1; 310 if (dsum<0){clearInterval(down_interval);return;} 311 document.getElementById("dcount").innerHTML=dsum; 312 if (dsum==0){document.getElementById("score_table").style.backgroundColor="";bonus=false;} 313 } 314 function judge_dead(nx,ny,snake_number) 315 { 316 if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0) 317 { 318 clearInterval(move_interval); 319 clearInterval(draw_interval); 320 clearInterval(down_interval); 321 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 322 document.getElementById("pause").disabled="true"; 323 document.getElementById("go_through").disabled="true"; 324 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 325 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 326 document.removeEventListener("keydown",jud,false); 327 submit_score(); 328 return 1; 329 } 330 return 0; 331 } 332 function submit_score() 333 { 334 document.getElementById("submit_page").style.visibility="visible"; 335 document.getElementById("hide_page").style.zIndex="20"; 336 document.getElementById("submit_page").style.zIndex="30"; 337 document.getElementById("GameMod").value=gamemode; 338 document.getElementById("Level").value=level; 339 if(players==1)document.getElementById("Score").value=score_1; 340 else document.getElementById("Score").value=score_1+":"+score_2; 341 if(players==1)document.getElementById("Food").value=food1; 342 else document.getElementById("Food").value=food1+":"+food2; 343 document.getElementById("GameMod").readOnly="true"; 344 document.getElementById("Level").readOnly="true"; 345 document.getElementById("Score").readOnly="true"; 346 document.getElementById("Food").readOnly="true"; 347 $("#submit_page").fadeTo(500,1); 348 $("#hide_page").fadeTo(1000,0.5); 349 } 350 function add_food() 351 { 352 map[foodx][foody]-=4; 353 foodx=-1; 354 foody=-1; 355 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0) 356 { 357 foodx=Math.floor(Math.random()*(Width-1)); 358 foody=Math.floor(Math.random()*(Height-1)); 359 } 360 map[foodx][foody]+=4; 361 } 362 function touchStart(event) 363 { 364 event.preventDefault; 365 event=event||window.event; 366 var touch=event.changedTouches[0]; 367 sx=touch.pageX; 368 sy=touch.pageY; 369 } 370 function touchEnd(event) 371 { 372 event.preventDefault; 373 event=event||wondow.event; 374 var touch=event.changedTouches[0]; 375 ex=touch.pageX; 376 ey=touch.pageY; 377 //tan(pi/9)=tan(20)=0.364 378 //tan(pi/6)=tan(30)=0.577 379 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 380 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 381 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 382 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 383 } 384 function jud(event) 385 { 386 var event=event||window.event; 387 judge_key(event.keyCode); 388 } 389 function startgame_SinglePlayer()//单人经典模式 390 { 391 players=1; 392 through=true; 393 score.innerHTML=0; 394 for (var i=0;i<length_1;i++) 395 { 396 snake_1.unshift({x:i,y:0}); 397 map[i][0]+=1; 398 } 399 map[foodx][foody]+=4;add_food(); 400 draw(); 401 move_interval=setInterval(move,T); 402 draw_interval=setInterval(draw,10); 403 document.getElementById("page").addEventListener("touchstart",touchStart,false); 404 document.getElementById("page").addEventListener("touchend",touchEnd,false); 405 document.addEventListener("keydown",jud,false); 406 } 407 function startgame_DoublePlayer()//双人经典模式 408 { 409 players=2; 410 through=true; 411 score.innerHTML=0+":"+0; 412 for (var i=0;i<length_1;i++) 413 { 414 snake_1.unshift({x:i,y:0}); 415 map[i][0]=map[i][0]+1; 416 } 417 for (var i=0;i<length_2;i++) 418 { 419 snake_2.unshift({x:0,y:i}); 420 map[0][i]+=2; 421 } 422 map[foodx][foody]+=4;add_food(); 423 draw(); 424 move_interval=setInterval(move,T); 425 draw_interval=setInterval(draw,10); 426 document.addEventListener("keydown",jud,false); 427 } 428 function startgame(opr) 429 { 430 $("#start_button").fadeTo(1000,0); 431 $("#select_page").fadeTo(2000,0);document.getElementById("select_page").style.visibility="hidden"; 432 document.getElementById("page").style.visibility="visible"; 433 c=document.getElementById("screen").getContext("2d"); 434 score=document.getElementById("scores"); 435 paused=false; 436 if(opr=="SinglePlayer")startgame_SinglePlayer(); 437 if(opr=="DoublePlayer")startgame_DoublePlayer(); 438 } 439 function choose_mode(opr) 440 { 441 if (opr==1)gamemode="SinglePlayer"; 442 if (opr==2)gamemode="DoublePlayer"; 443 $("#single_button").fadeTo(1000,0);document.getElementById("single_button").disabled="true";document.getElementById("single_button").style.color="#D6D6D6"; 444 $("#double_button").fadeTo(1000,0);document.getElementById("double_button").disabled="true";document.getElementById("double_button").style.color="#D6D6D6"; 445 $("#items_button").fadeTo(1000,0); 446 $("#rating_button").fadeTo(1000,0); 447 $("#Admin_button").fadeTo(1000,0);document.getElementById("Admin_button").disabled="true"; 448 $("#level_1").fadeTo(2000,1);document.getElementById("level_1").disabled="";document.getElementById("level_1").style.zIndex="16"; 449 $("#level_2").fadeTo(2000,1);document.getElementById("level_2").disabled="";document.getElementById("level_2").style.zIndex="16"; 450 $("#level_3").fadeTo(2000,1);document.getElementById("level_3").disabled="";document.getElementById("level_3").style.zIndex="16"; 451 $("#level_4").fadeTo(2000,1);document.getElementById("level_4").disabled="";document.getElementById("level_4").style.zIndex="16"; 452 $("#level_5").fadeTo(2000,1);document.getElementById("level_5").disabled="";document.getElementById("level_5").style.zIndex="16"; 453 } 454 function choose_level(opr) 455 { 456 level=opr; 457 $("#level_1").fadeTo(2000,0);document.getElementById("level_1").disabled="true"; 458 $("#level_2").fadeTo(2000,0);document.getElementById("level_2").disabled="true"; 459 $("#level_3").fadeTo(2000,0);document.getElementById("level_3").disabled="true"; 460 $("#level_4").fadeTo(2000,0);document.getElementById("level_4").disabled="true"; 461 $("#level_5").fadeTo(2000,0);document.getElementById("level_5").disabled="true"; 462 $("#start_button").fadeTo(2000,1);document.getElementById("start_button").disabled="";document.getElementById("start_button").style.zIndex="22"; 463 } 464 465 function open_Admin() 466 { 467 var password=prompt("输入管理员密码！",""); 468 if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d") 469 { 470 Administrator_access=true; 471 alert("欢迎回来,权限狗！") 472 document.getElementById("go_through").disabled=""; 473 }else 474 { 475 Administrator_access=true; 476 alert("你连权限狗都不是还装什么权限狗！") 477 document.getElementById("Admin_button").style.color="#D6D6D6"; 478 } 479 document.getElementById("Admin_button").disabled="true"; 480 $("#Admin_button").fadeTo(1000,0); 481 } 482 function auto_adjust() 483 { 484 var now_Height=document.documentElement.clientHeight; 485 var now_Width=document.documentElement.clientWidth; 486 if (now_Height>=700&&now_Width>=850)return; 487 var Height_ratio=now_Height/700; 488 var Width_ratio=now_Width/850; 489 adjust_ratio=Math.min(Height_ratio,Width_ratio); 490 var autocg=document.getElementsByTagName("meta")[1]; 491 autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2); 492 } 493 $(function(){ 494 auto_adjust(); 495 $("#single_button").fadeTo(2000,1); 496 $("#double_button").fadeTo(2000,1); 497 $("#items_button").fadeTo(2000,1); 498 $("#rating_button").fadeTo(2000,1); 499 $("#Admin_button").fadeTo(2000,1); 500 }); 501 </script> 502 </head> 503 </html>
4.1：对代码结构进行比较大的调整
1、用结构体的写法重写了代码架构，感觉自己么么哒……
2、把js代码拆到文件里调用（虽然没什么实际用途但是看起来很爽）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>crazy_snake</title> 7 <style type="text/css"> 8 #select_page{position: relative; width:850px; height:700px; z-index: 10; background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); background-image: linear-gradient(315deg,rgba(255,255,255,1.00) 0%,rgba(0,0,255,1.00) 100%); text-align: center; max-width: 850px; max-height: 700px; top: 0px; left: 0px; text-shadow: 3px 3px 1px #999999;} 9 .select_button{border-color: #FFFFFF; width: 160px;height: 90px;z-index: 5;color: #0000FF;font-size: 25px;text-align: center;background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,60,60,1.00) 100%);position: absolute;border-radius: 25px;max-width: 160px;max-height: 90px;display: inline-block;margin-left: -80px;margin-top: -45px;font-weight: bold;text-shadow:3px 3px 1px #999999;opacity:0;} 10 #page{ position: fixed; z-index: 3; max-width: 800px; max-height: 650px; width: 800px; height: 650px; top: 0px; left: 0px; margin-left: 50px; margin-top: 50px; } 11 #canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;z-index:3;} 12 .simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;} 13 #hide_page{position:fixed;top:0px;left:0px;height:700px;width:850px;background-color: #333333;opacity:0;z-index:1;} 14 #submit_page{position:absolute;left:31.56%;top:30.3%;width:245px;height:230px;opacity:0;background-color:#00FFFF;z-index:0;visibility:hidden;} 15 </style> 16 </head> 17 <body style="margin:0;"> 18 <div id="select_page"> 19 <button id="single_button"class="select_button"onclick="choose_mode(1);"style="top:25%;left:25%;z-index:15;">单人模式</button> 20 <button id="double_button"class="select_button"onclick="choose_mode(2);"style="top:25%;left:75%;z-index:15;">双人模式</button> 21 <button id="items_button"class="select_button"onclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;z-index:15;"disabled="true">道具场</button> 22 <button id="rating_button"class="select_button"onclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;z-index:15;"disabled="true">天梯排位赛</button> 23 <button id="start_button"class="select_button"onclick="startgame(gamemode);"style="top:50%;left:50%;z-index:11;"disabled="true">开始游戏！</button> 24 <button id="Admin_button"class="select_button"onclick="open_Admin();"style="top:25%;left:50%;z-index:20;">管理员权限狗</button> 25 <button id="level_1"class="select_button"onclick="choose_level(1);"style="top:25%;left:25%;z-index:12;"disabled="true">极弱无比</button> 26 <button id="level_2"class="select_button"onclick="choose_level(2);"style="top:25%;left:75%;z-index:12;"disabled="true">有点意思</button> 27 <button id="level_3"class="select_button"onclick="choose_level(3);"style="top:50%;left:50%;z-index:12;"disabled="true">奥义很爽</button> 28 <button id="level_4"class="select_button"onclick="choose_level(4);"style="top:75%;left:25%;z-index:12;"disabled="true">丧心病狂</button> 29 <button id="level_5"class="select_button"onclick="choose_level(5);"style="top:75%;left:75%;z-index:12;"disabled="true">无双大王</button> 30 </div> 31 <div id="page" style="visibility:hidden;"> 32 <div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div> 33 <div id="status"> 34 <div id="score_table"class="simple_font_type"style="left:0px;width:120px;"><b>得分<span id="scores" style="color:red"></b></span></div> 35 <div id="bonus_table"class="simple_font_type"style="left:135px;"><span id="dcount"></span></div> 36 <div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div> 37 <button id="pause"class="simple_font_type"style="left:300px;"onclick="judge_key(80)">暂停</button> 38 <div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div> 39 <button id="go_through"class="simple_font_type"style="left:600px;"onclick="judge_key(69)" disabled="true">关闭</button> 40 </div> 41 <div id="submit_page" align="center"> 42 <form name="upload" method="post" action="upload-for-online.php"> 43 <p> 44 <label for="textfield">GameMod:</label> 45 <input name="GameMod" id="GameMod"></input> 46 </p> 47 <p> 48 <label for="textfield">Level :</label> 49 <input name="Level" id="Level"></input> 50 </p> 51 <p> 52 <label for="textfield">Name :</label> 53 <input type="text" name="Name" id="Name"value="Enter_Your_Name"></input> 54 </p> 55 <p> 56 <label for="textfield">Score :</label> 57 <input type="text" name="Score" id="Score"></input> 58 </p> 59 <p> 60 <label for="textfield">Food :</label> 61 <input type="text" name="Food" id="Food"></input> 62 </p> 63 <p> 64 <input type="submit" name="submit" id="submit" value="submit"> 65 </p> 66 </form> 67 </div> 68 <div id="hide_page"></div> 69 </div> 70 </body> 71 <head> 72 <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js"></script> 73 <script src="crazy_snake.js"></script> 74 </head> 75 </html>
1 var hexcase=0;function hex_md5(a){return rstr2hex(rstr_md5(str2rstr_utf8(a)))}function hex_hmac_md5(a,b){return rstr2hex(rstr_hmac_md5(str2rstr_utf8(a),str2rstr_utf8(b)))}function md5_vm_test(){return hex_md5("abc").toLowerCase()=="900150983cd24fb0d6963f7d28e17f72"}function rstr_md5(a){return binl2rstr(binl_md5(rstr2binl(a),a.length*8))}function rstr_hmac_md5(c,f){var e=rstr2binl(c);if(e.length>16){e=binl_md5(e,c.length*8)}var a=Array(16),d=Array(16);for(var b=0;b<16;b++){a[b]=e[b]^909522486;d[b]=e[b]^1549556828}var g=binl_md5(a.concat(rstr2binl(f)),512+f.length*8);return binl2rstr(binl_md5(d.concat(g),512+128))}function rstr2hex(c){try{hexcase}catch(g){hexcase=0}var f=hexcase?"0123456789ABCDEF":"0123456789abcdef";var b="";var a;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);b+=f.charAt((a>>>4)&15)+f.charAt(a&15)}return b}function str2rstr_utf8(c){var b="";var d=-1;var a,e;while(++d<c.length){a=c.charCodeAt(d);e=d+1<c.length?c.charCodeAt(d+1):0;if(55296<=a&&a<=56319&&56320<=e&&e<=57343){a=65536+((a&1023)<<10)+(e&1023);d++}if(a<=127){b+=String.fromCharCode(a)}else{if(a<=2047){b+=String.fromCharCode(192|((a>>>6)&31),128|(a&63))}else{if(a<=65535){b+=String.fromCharCode(224|((a>>>12)&15),128|((a>>>6)&63),128|(a&63))}else{if(a<=2097151){b+=String.fromCharCode(240|((a>>>18)&7),128|((a>>>12)&63),128|((a>>>6)&63),128|(a&63))}}}}}return b}function rstr2binl(b){var a=Array(b.length>>2);for(var c=0;c<a.length;c++){a[c]=0}for(var c=0;c<b.length*8;c+=8){a[c>>5]|=(b.charCodeAt(c/8)&255)<<(c%32)}return a}function binl2rstr(b){var a="";for(var c=0;c<b.length*32;c+=8){a+=String.fromCharCode((b[c>>5]>>>(c%32))&255)}return a}function binl_md5(p,k){p[k>>5]|=128<<((k)%32);p[(((k+64)>>>9)<<4)+14]=k;var o=1732584193;var n=-271733879;var m=-1732584194;var l=271733878;for(var g=0;g<p.length;g+=16){var j=o;var h=n;var f=m;var e=l;o=md5_ff(o,n,m,l,p[g+0],7,-680876936);l=md5_ff(l,o,n,m,p[g+1],12,-389564586);m=md5_ff(m,l,o,n,p[g+2],17,606105819);n=md5_ff(n,m,l,o,p[g+3],22,-1044525330);o=md5_ff(o,n,m,l,p[g+4],7,-176418897);l=md5_ff(l,o,n,m,p[g+5],12,1200080426);m=md5_ff(m,l,o,n,p[g+6],17,-1473231341);n=md5_ff(n,m,l,o,p[g+7],22,-45705983);o=md5_ff(o,n,m,l,p[g+8],7,1770035416);l=md5_ff(l,o,n,m,p[g+9],12,-1958414417);m=md5_ff(m,l,o,n,p[g+10],17,-42063);n=md5_ff(n,m,l,o,p[g+11],22,-1990404162);o=md5_ff(o,n,m,l,p[g+12],7,1804603682);l=md5_ff(l,o,n,m,p[g+13],12,-40341101);m=md5_ff(m,l,o,n,p[g+14],17,-1502002290);n=md5_ff(n,m,l,o,p[g+15],22,1236535329);o=md5_gg(o,n,m,l,p[g+1],5,-165796510);l=md5_gg(l,o,n,m,p[g+6],9,-1069501632);m=md5_gg(m,l,o,n,p[g+11],14,643717713);n=md5_gg(n,m,l,o,p[g+0],20,-373897302);o=md5_gg(o,n,m,l,p[g+5],5,-701558691);l=md5_gg(l,o,n,m,p[g+10],9,38016083);m=md5_gg(m,l,o,n,p[g+15],14,-660478335);n=md5_gg(n,m,l,o,p[g+4],20,-405537848);o=md5_gg(o,n,m,l,p[g+9],5,568446438);l=md5_gg(l,o,n,m,p[g+14],9,-1019803690);m=md5_gg(m,l,o,n,p[g+3],14,-187363961);n=md5_gg(n,m,l,o,p[g+8],20,1163531501);o=md5_gg(o,n,m,l,p[g+13],5,-1444681467);l=md5_gg(l,o,n,m,p[g+2],9,-51403784);m=md5_gg(m,l,o,n,p[g+7],14,1735328473);n=md5_gg(n,m,l,o,p[g+12],20,-1926607734);o=md5_hh(o,n,m,l,p[g+5],4,-378558);l=md5_hh(l,o,n,m,p[g+8],11,-2022574463);m=md5_hh(m,l,o,n,p[g+11],16,1839030562);n=md5_hh(n,m,l,o,p[g+14],23,-35309556);o=md5_hh(o,n,m,l,p[g+1],4,-1530992060);l=md5_hh(l,o,n,m,p[g+4],11,1272893353);m=md5_hh(m,l,o,n,p[g+7],16,-155497632);n=md5_hh(n,m,l,o,p[g+10],23,-1094730640);o=md5_hh(o,n,m,l,p[g+13],4,681279174);l=md5_hh(l,o,n,m,p[g+0],11,-358537222);m=md5_hh(m,l,o,n,p[g+3],16,-722521979);n=md5_hh(n,m,l,o,p[g+6],23,76029189);o=md5_hh(o,n,m,l,p[g+9],4,-640364487);l=md5_hh(l,o,n,m,p[g+12],11,-421815835);m=md5_hh(m,l,o,n,p[g+15],16,530742520);n=md5_hh(n,m,l,o,p[g+2],23,-995338651);o=md5_ii(o,n,m,l,p[g+0],6,-198630844);l=md5_ii(l,o,n,m,p[g+7],10,1126891415);m=md5_ii(m,l,o,n,p[g+14],15,-1416354905);n=md5_ii(n,m,l,o,p[g+5],21,-57434055);o=md5_ii(o,n,m,l,p[g+12],6,1700485571);l=md5_ii(l,o,n,m,p[g+3],10,-1894986606);m=md5_ii(m,l,o,n,p[g+10],15,-1051523);n=md5_ii(n,m,l,o,p[g+1],21,-2054922799);o=md5_ii(o,n,m,l,p[g+8],6,1873313359);l=md5_ii(l,o,n,m,p[g+15],10,-30611744);m=md5_ii(m,l,o,n,p[g+6],15,-1560198380);n=md5_ii(n,m,l,o,p[g+13],21,1309151649);o=md5_ii(o,n,m,l,p[g+4],6,-145523070);l=md5_ii(l,o,n,m,p[g+11],10,-1120210379);m=md5_ii(m,l,o,n,p[g+2],15,718787259);n=md5_ii(n,m,l,o,p[g+9],21,-343485551);o=safe_add(o,j);n=safe_add(n,h);m=safe_add(m,f);l=safe_add(l,e)}return Array(o,n,m,l)}function md5_cmn(h,e,d,c,g,f){return safe_add(bit_rol(safe_add(safe_add(e,h),safe_add(c,f)),g),d)}function md5_ff(g,f,k,j,e,i,h){return md5_cmn((f&k)|((~f)&j),g,f,e,i,h)}function md5_gg(g,f,k,j,e,i,h){return md5_cmn((f&j)|(k&(~j)),g,f,e,i,h)}function md5_hh(g,f,k,j,e,i,h){return md5_cmn(f^k^j,g,f,e,i,h)}function md5_ii(g,f,k,j,e,i,h){return md5_cmn(k^(f|(~j)),g,f,e,i,h)}function safe_add(a,d){var c=(a&65535)+(d&65535);var b=(a>>16)+(d>>16)+(c>>16);return(b<<16)|(c&65535)}function bit_rol(a,b){return(a<<b)|(a>>>(32-b))}; 2 var cell_size=20,Height=30,Width=40; 3 var map=new Array() 4 for (var i=0;i<Width;i++) 5 { 6 map[i]=new Array() 7 for (var j=0;j<Height;j++) map[i][j]=0;//状压二进制0000有无食物；有无道具；第二条蛇；第一条蛇 8 } 9 function struct() 10 { 11 this.snake=[]; 12 this.food=0; 13 this.score=0; 14 this.direction=0; 15 this.next_direction=0; 16 this.len=0; 17 this.getfood=false; 18 } 19 struct.prototype.cgd=function(opr) 20 { 21 if(opr==1&&this.direction!=1&&this.direction!=3)this.next_direction=1;//左 22 if(opr==2&&this.direction!=2&&this.direction!=4)this.next_direction=2;//上 23 if(opr==3&&this.direction!=1&&this.direction!=3)this.next_direction=3;//右 24 if(opr==4&&this.direction!=2&&this.direction!=4)this.next_direction=4;//下 25 } 26 struct.prototype.walk=function(num)//向前移动一格 27 { 28 this.ahead(this.snake[0].x,this.snake[0].y); 29 this.direction=this.next_direction; 30 this.next_direction=this.direction; 31 if (this.direction==1)this.snake[0].x--; 32 if (this.direction==2)this.snake[0].y--; 33 if (this.direction==3)this.snake[0].x++; 34 if (this.direction==4)this.snake[0].y++; 35 if (through) 36 { 37 if(this.snake[0].x>=Width)this.snake[0].x-=Width; 38 if(this.snake[0].x<0)this.snake[0].x+=Width; 39 if(this.snake[0].y>=Height)this.snake[0].y-=Height; 40 if(this.snake[0].y<0)this.snake[0].y+=Height; 41 } 42 if (this.snake[0].x<0||this.snake[0].y<0||this.snake[0].x>=Width||this.snake[0].y>=Height)return false; 43 if (map[this.snake[0].x][this.snake[0].y]&num)return false; 44 map[this.snake[0].x][this.snake[0].y]+=num; 45 return true; 46 } 47 struct.prototype.ahead=function(x0,y0){this.len++;this.snake.unshift({x:x0,y:y0});}//加入蛇头 48 struct.prototype.backward=function(num){this.len--;map[this.snake[this.len].x][this.snake[this.len].y]-=num;this.snake.pop();}//删除蛇尾 49 struct.prototype.gethead=function(){return this.snake[0];}//获取蛇头 50 struct.prototype.gettail=function(){return this.snake[this.len];}//获取蛇尾 51 var c=null;//canvas 52 var s1=new struct(); 53 var s2=new struct(); 54 var time_interval=null;//移动 55 var draw_interval=null;//画图 56 var score=null;//分数 57 var direction1=3,direction2=4;//方向 58 var next_direction1=3,next_direction2=4; 59 var foodx=0,foody=0; 60 var paused=false;//暂停状态 61 var through=false;//穿墙 62 var T=100; 63 var sx=0,sy=0,ex=0,ey=0;//手势 64 var Administrator_access=false;//管理员权限 65 var adjust_ratio=1.0; 66 var gamemode="";//游戏模式 67 var level=0; 68 var down_interval=null,dsum=0,bonus=false;//连续吃到食物的奖励分 69 function judge_key(opr) 70 { 71 if (paused==false) 72 { 73 switch(opr){case 37:s1.cgd(1);break;case 38:s1.cgd(2);break;case 39:s1.cgd(3);break;case 40:s1.cgd(4);break;} 74 if (gamemode=="DoublePlayer") 75 switch(opr){case 65:s2.cgd(1);break;case 87:s2.cgd(2);break;case 68:s2.cgd(3);break;case 83:s2.cgd(4);break;} 76 } 77 if(opr==80)//p 78 { 79 if(paused==true) 80 { 81 move_interval=setInterval(move,T); 82 draw_interval=setInterval(draw,10); 83 if (dsum>0)down_interval=setInterval(dcount,100); 84 paused=false; 85 document.getElementById('pause').innerHTML="暂停"; 86 document.getElementById('pause_status').innerHTML="游戏进行中"; 87 }else 88 { 89 clearInterval(move_interval); 90 clearInterval(draw_interval); 91 clearInterval(down_interval); 92 paused=true; 93 document.getElementById('pause').innerHTML="开始"; 94 document.getElementById('pause_status').innerHTML="游戏已暂停"; 95 } 96 } 97 if (opr==69&&Administrator_access==true)//e 98 { 99 if (through==true) 100 { 101 through=false; 102 document.getElementById('go_through').innerHTML="开启"; 103 document.getElementById('go_through_walls').innerHTML="穿墙：关闭"; 104 }else 105 { 106 through=true; 107 document.getElementById('go_through').innerHTML="关闭"; 108 document.getElementById('go_through_walls').innerHTML="穿墙：开启"; 109 } 110 } 111 } 112 function draw() 113 { 114 c.clearRect(0,0,cell_size*Width,cell_size*Height); 115 //======================================================================================蛇1 116 c.strokeStyle="#ffffff";//白 117 c.fillStyle="#0000ff";//深蓝 118 c.fillRect(s1.snake[0].x*cell_size,s1.snake[0].y*cell_size,cell_size,cell_size); 119 c.beginPath(); 120 c.moveTo(s1.snake[0].x*cell_size,s1.snake[0].y*cell_size); 121 c.lineTo((s1.snake[0].x+1)*cell_size,s1.snake[0].y*cell_size); 122 c.lineTo((s1.snake[0].x+1)*cell_size,(s1.snake[0].y+1)*cell_size); 123 c.lineTo(s1.snake[0].x*cell_size,(s1.snake[0].y+1)*cell_size); 124 c.closePath(); 125 c.stroke(); 126 c.fillStyle="#66ffff";//浅蓝 127 for (var i=1;i<s1.len;i++) 128 { 129 c.fillRect(s1.snake[i].x*cell_size,s1.snake[i].y*cell_size,cell_size,cell_size); 130 c.beginPath(); 131 c.moveTo(s1.snake[i].x*cell_size,s1.snake[i].y*cell_size); 132 c.lineTo((s1.snake[i].x+1)*cell_size,s1.snake[i].y*cell_size); 133 c.lineTo((s1.snake[i].x+1)*cell_size,(s1.snake[i].y+1)*cell_size); 134 c.lineTo(s1.snake[i].x*cell_size,(s1.snake[i].y+1)*cell_size); 135 c.closePath(); 136 c.stroke(); 137 } 138 //======================================================================================食物 139 c.fillStyle="#ffff00";//黄 140 c.strokeStyle="#ff0000";//红 141 c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size); 142 c.beginPath(); 143 c.moveTo(foodx*cell_size,foody*cell_size); 144 c.lineTo((foodx+1)*cell_size,foody*cell_size); 145 c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size); 146 c.lineTo(foodx*cell_size,(foody+1)*cell_size); 147 c.closePath(); 148 c.stroke(); 149 150 if (gamemode!="DoublePlayer")return; 151 //======================================================================================蛇2 152 c.strokeStyle="#ffffff";//白 153 c.fillStyle="#ff3333";//红 154 if(map[s2.snake[0].x][s2.snake[0].y]&1)c.fillStyle="#333333";//深灰 155 c.fillRect(s2.snake[0].x*cell_size,s2.snake[0].y*cell_size,cell_size,cell_size); 156 c.beginPath(); 157 c.moveTo(s2.snake[0].x*cell_size,s2.snake[0].y*cell_size); 158 c.lineTo((s2.snake[0].x+1)*cell_size,s2.snake[0].y*cell_size); 159 c.lineTo((s2.snake[0].x+1)*cell_size,(s2.snake[0].y+1)*cell_size); 160 c.lineTo(s2.snake[0].x*cell_size,(s2.snake[0].y+1)*cell_size); 161 c.closePath(); 162 c.stroke(); 163 for (var i=1;i<s2.len;i++) 164 { 165 c.fillStyle="#ffbdbd";//浅红 166 if((map[s2.snake[i].x][s2.snake[i].y]&1)!=0)c.fillStyle="#999999";//灰 167 c.fillRect(s2.snake[i].x*cell_size,s2.snake[i].y*cell_size,cell_size,cell_size); 168 c.beginPath(); 169 c.moveTo(s2.snake[i].x*cell_size,s2.snake[i].y*cell_size); 170 c.lineTo((s2.snake[i].x+1)*cell_size,s2.snake[i].y*cell_size); 171 c.lineTo((s2.snake[i].x+1)*cell_size,(s2.snake[i].y+1)*cell_size); 172 c.lineTo(s2.snake[i].x*cell_size,(s2.snake[i].y+1)*cell_size); 173 c.closePath(); 174 c.stroke(); 175 } 176 } 177 function move() 178 { 179 if(s1.walk(1)==false||gamemode=="DoublePlayer"&&s2.walk(2)==false)solve_dead(); 180 var x1=s1.gethead().x,y1=s1.gethead().y; 181 if (gamemode=="DoublePlayer"){var x2=s2.gethead().x,y2=s2.gethead().y;} 182 judge_eat(); 183 if (s1.getfood||s2.getfood)add_food(); 184 if (s1.getfood==false)s1.backward(1); 185 s1.getfood=false; 186 if (gamemode=="DoublePlayer") 187 { 188 if (s2.getfood==false)s2.backward(2); 189 s2.getfood=false; 190 } 191 } 192 function judge_eat() 193 { 194 var x1=s1.snake[0].x,y1=s1.snake[0].y; 195 if (gamemode=="DoublePlayer"){var x2=s2.snake[0].x,y2=s2.snake[0].y;} 196 var mrk1=0,mrk2=0; 197 mrk1=(x1==foodx&&y1==foody);if(gamemode=="DoublePlayer")mrk2=(x2==foodx&&y2==foody); 198 if (mrk1){s1.getfood=true;s1.food++;}if (mrk2){s2.getfood=true;s2.food++;} 199 if (mrk1==false&&mrk2==false)return; 200 if (T>(5-level)*(6-level))T*=(1-level*0.01); 201 clearInterval(move_interval);move_interval=setInterval(move,T); 202 if (mrk1){s1.score+=s1.food*level;if (bonus)s1.score+=3*level*(s1.food-1);} 203 if (mrk2){s2.score+=s2.food*level;if (bonus)s2.score+=3*level*(s2.food-1);} 204 if (gamemode!="DoublePlayer")score.innerHTML=s1.score; 205 if (gamemode=="DoublePlayer")score.innerHTML=s1.score+":"+s2.score; 206 bonus=true;dsum=10;document.getElementById("dcount").innerHTML=dsum; 207 document.getElementById("dcount").fontColor="#00CCFF"; 208 document.getElementById("score_table").style.backgroundColor="#00CCFF"; 209 clearInterval(down_interval); 210 down_interval=setInterval(dcount,1000); 211 } 212 function dcount() 213 { 214 dsum-=1; 215 if (dsum<0){clearInterval(down_interval);return;} 216 document.getElementById("dcount").innerHTML=dsum; 217 if (dsum==0){document.getElementById("score_table").style.backgroundColor="";bonus=false;} 218 } 219 function solve_dead(now,rnk) 220 { 221 clearInterval(move_interval); 222 clearInterval(draw_interval); 223 clearInterval(down_interval); 224 document.getElementById("pause_status").innerHTML="你跪了QAQ"; 225 document.getElementById("pause").disabled="true"; 226 document.getElementById("go_through").disabled="true"; 227 document.getElementById("page").removeEventListener("touchstart",touchStart,false); 228 document.getElementById("page").removeEventListener("touchend",touchEnd,false); 229 document.removeEventListener("keydown",jud,false); 230 submit_score(); 231 } 232 function submit_score() 233 { 234 document.getElementById("submit_page").style.visibility="visible"; 235 document.getElementById("hide_page").style.zIndex="20"; 236 document.getElementById("submit_page").style.zIndex="30"; 237 document.getElementById("GameMod").value=gamemode; 238 document.getElementById("Level").value=level; 239 if(gamemode!="DoublePlayer")document.getElementById("Score").value=s1.score; 240 else document.getElementById("Score").value=s1.score+":"+s2.score; 241 if(gamemode!="DoublePlayer")document.getElementById("Food").value=s1.food; 242 else document.getElementById("Food").value=s1.food+":"+s2.food; 243 document.getElementById("GameMod").readOnly="true"; 244 document.getElementById("Level").readOnly="true"; 245 document.getElementById("Score").readOnly="true"; 246 document.getElementById("Food").readOnly="true"; 247 $("#submit_page").fadeTo(500,1); 248 $("#hide_page").fadeTo(1000,0.5); 249 } 250 function add_food() 251 { 252 map[foodx][foody]-=4; 253 foodx=-1; 254 foody=-1; 255 while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0) 256 { 257 foodx=Math.floor(Math.random()*(Width-1)); 258 foody=Math.floor(Math.random()*(Height-1)); 259 } 260 map[foodx][foody]+=4; 261 } 262 function touchStart(event) 263 { 264 event.preventDefault; 265 event=event||window.event; 266 var touch=event.changedTouches[0]; 267 sx=touch.pageX; 268 sy=touch.pageY; 269 } 270 function touchEnd(event) 271 { 272 event.preventDefault; 273 event=event||wondow.event; 274 var touch=event.changedTouches[0]; 275 ex=touch.pageX; 276 ey=touch.pageY; 277 //tan(pi/9)=tan(20)=0.364 278 //tan(pi/6)=tan(30)=0.577 279 if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37); 280 if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38); 281 if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39); 282 if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40); 283 } 284 function jud(event) 285 { 286 var event=event||window.event; 287 judge_key(event.keyCode); 288 } 289 function startgame_SinglePlayer()//单人经典模式 290 { 291 s1.direction=s1.next_direction=3; 292 through=true; 293 score.innerHTML=0; 294 for (var i=0;i<4;i++) 295 { 296 s1.ahead(i,0); 297 map[i][0]+=1; 298 } 299 map[foodx][foody]+=4;add_food(); 300 draw(); 301 move_interval=setInterval(move,T); 302 draw_interval=setInterval(draw,10); 303 document.getElementById("page").addEventListener("touchstart",touchStart,false); 304 document.getElementById("page").addEventListener("touchend",touchEnd,false); 305 document.addEventListener("keydown",jud,false); 306 } 307 function startgame_DoublePlayer()//双人经典模式 308 { 309 s1.direction=s1.next_direction=3; 310 s2.direction=s2.next_direction=4; 311 through=true; 312 score.innerHTML=s1.score+":"+s2.score; 313 for (var i=0;i<4;i++) 314 { 315 s1.ahead(i,0); 316 map[i][0]+=1; 317 } 318 for (var i=0;i<4;i++) 319 { 320 s2.ahead(0,i); 321 map[0][i]+=2; 322 } 323 map[foodx][foody]+=4;add_food(); 324 draw(); 325 move_interval=setInterval(move,T); 326 draw_interval=setInterval(draw,10); 327 document.addEventListener("keydown",jud,false); 328 } 329 function startgame(opr) 330 { 331 $("#start_button").fadeTo(1000,0); 332 $("#select_page").fadeTo(2000,0);document.getElementById("select_page").style.visibility="hidden"; 333 document.getElementById("page").style.visibility="visible"; 334 c=document.getElementById("screen").getContext("2d"); 335 score=document.getElementById("scores"); 336 paused=false; 337 if(opr=="SinglePlayer")startgame_SinglePlayer(); 338 if(opr=="DoublePlayer")startgame_DoublePlayer(); 339 } 340 function choose_mode(opr) 341 { 342 if (opr==1)gamemode="SinglePlayer"; 343 if (opr==2)gamemode="DoublePlayer"; 344 $("#single_button").fadeTo(1000,0);document.getElementById("single_button").disabled="true";document.getElementById("single_button").style.color="#D6D6D6"; 345 $("#double_button").fadeTo(1000,0);document.getElementById("double_button").disabled="true";document.getElementById("double_button").style.color="#D6D6D6"; 346 $("#items_button").fadeTo(1000,0); 347 $("#rating_button").fadeTo(1000,0); 348 $("#Admin_button").fadeTo(1000,0);document.getElementById("Admin_button").disabled="true"; 349 $("#level_1").fadeTo(2000,1);document.getElementById("level_1").disabled="";document.getElementById("level_1").style.zIndex="16"; 350 $("#level_2").fadeTo(2000,1);document.getElementById("level_2").disabled="";document.getElementById("level_2").style.zIndex="16"; 351 $("#level_3").fadeTo(2000,1);document.getElementById("level_3").disabled="";document.getElementById("level_3").style.zIndex="16"; 352 $("#level_4").fadeTo(2000,1);document.getElementById("level_4").disabled="";document.getElementById("level_4").style.zIndex="16"; 353 $("#level_5").fadeTo(2000,1);document.getElementById("level_5").disabled="";document.getElementById("level_5").style.zIndex="16"; 354 } 355 function choose_level(opr) 356 { 357 level=opr; 358 $("#level_1").fadeTo(2000,0);document.getElementById("level_1").disabled="true"; 359 $("#level_2").fadeTo(2000,0);document.getElementById("level_2").disabled="true"; 360 $("#level_3").fadeTo(2000,0);document.getElementById("level_3").disabled="true"; 361 $("#level_4").fadeTo(2000,0);document.getElementById("level_4").disabled="true"; 362 $("#level_5").fadeTo(2000,0);document.getElementById("level_5").disabled="true"; 363 $("#start_button").fadeTo(2000,1);document.getElementById("start_button").disabled="";document.getElementById("start_button").style.zIndex="22"; 364 } 365 366 function open_Admin() 367 { 368 var password=prompt("输入管理员密码！",""); 369 if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d") 370 { 371 Administrator_access=true; 372 alert("欢迎回来,权限狗！") 373 document.getElementById("go_through").disabled=""; 374 }else 375 { 376 Administrator_access=true; 377 alert("你连权限狗都不是还装什么权限狗！") 378 document.getElementById("Admin_button").style.color="#D6D6D6"; 379 } 380 document.getElementById("Admin_button").disabled="true"; 381 $("#Admin_button").fadeTo(1000,0); 382 } 383 function auto_adjust() 384 { 385 var now_Height=document.documentElement.clientHeight; 386 var now_Width=document.documentElement.clientWidth; 387 if (now_Height>=700&&now_Width>=850)return; 388 var Height_ratio=now_Height/700; 389 var Width_ratio=now_Width/850; 390 adjust_ratio=Math.min(Height_ratio,Width_ratio); 391 var autocg=document.getElementsByTagName("meta")[1]; 392 autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2); 393 } 394 $(function(){ 395 auto_adjust(); 396 $("#single_button").fadeTo(2000,1); 397 $("#double_button").fadeTo(2000,1); 398 $("#items_button").fadeTo(2000,1); 399 $("#rating_button").fadeTo(2000,1); 400 $("#Admin_button").fadeTo(2000,1); 401 });
更多内容敬请期待……
——by zhber，转载请注明来源
