原创作品，转载请注明来源
——搬运自我的另一个博客……（这算骗访问量吗？！读书人的事……）
估计没几个人会想到研究性学习搞加各种特效的贪吃蛇的吧
把这几周搞研究性学习的结果记录一下
本人负责html代码相关……数据库维护请转到app.htouko.com/snake/（为什么换服务器了？我也不知道……）
1.0：学会了用canvas画布画出好烂好烂的贪吃蛇界面……而且仅仅是界面……不过初学者嘛……不要在意这些细节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crazy_SNAKE</title>
<style type="text/css">
*{margin:0;padding:0;font-family: "Microsoft YaHei";}
#page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:980px;}
#yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;}
</style>
<script type="text/javascript">
var cell_size=20;
var Height=30;
var Width=40;
//const define
var map=new Array()//地图状态
for (var i=0;i<Height;i++)
{
map[i]=new Array()
for (var j=0;j<Width;j++) map[i][j]=0;
}
var snake=[];//蛇的坐标
var c=null;//绘图对象
var direction=3;//方向
var length=4;//长度
var foodx=0;//食物坐标
var foody=0;
//var define
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
c.strokestyle="black";
c.linewidth=1.0;
//======================================================================================横线竖线
for (var i=1;i<=Height;i++)
{
c.beginPath();
c.moveTo(0,i*cell_size);
c.lineTo(Width*cell_size,i*cell_size);
c.stroke();
}
for(var i=1;i<=Width;i++)
{
c.beginPath();
c.moveTo(i*cell_size,0);
c.lineTo(i*cell_size,Height*cell_size);
c.stroke();
}
}
function init()
{
for (var i=0;i<length;i++)
{
snake.unshift({x:i,y:0});
map[i][0]=1;
}
add_food();
draw();
}
function move()
{
}
function judge_eat()
{
}
function judge_dead()
{
}
function add_food()
{
foodx=-1;
foody=-1;
while(!(foodx>=0&&foody>=0&&foodx<=Width&&foody<=Height&&map[foodx][foody]==0))
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
}
window.οnlοad=function()
{
c=document.getElementById('screen').getContext('2d');
init();
}
</script>
</head>
<body>
<div id="page">
<div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div>
</div>
</body>
</html>2.0：贪吃蛇的基本框架完成。随机生成食物，方向键移动，加入e键穿墙、p键暂停功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crazy_SNAKE</title>
<style type="text/css">
#page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:900px;}
#yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;}
#mark{font-weight:800;}
#scores{color:red;}
</style>
<script type="text/javascript">
var cell_size=20;
var Height=30;
var Width=40;
//const define
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;
}
var snake=[];//蛇的坐标
var c=null;//绘图对象
var time_interval=null;//移动计时器
var draw_interval=null;//画图计时器
var score=null;//分数
var direction=3;//方向
var next_direction=3;
var length=4;//长度
var foodx=0;//食物x坐标
var foody=0;//食物y坐标
var paused=false;//暂停状态
var getfood=false;//吃到食物
var through=false;//穿墙
var T=150;//周期，控制蛇的速度
//var define
function change_through()
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：已关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：已开启";
}
}
function judge_key(opr)
{
if(opr==37&&direction!=1&&direction!=3)next_direction=1;
else if(opr==38&&direction!=2&&direction!=4)next_direction=2;
else if(opr==39&&direction!=1&&direction!=3)next_direction=3;
else if(opr==40&&direction!=2&&direction!=4)next_direction=4;
else if(opr==80)
{
if(paused)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,20);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="状态：已开始";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="状态：已暂停";
}
}else if (opr==69)change_through();
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================横线竖线
c.strokeStyle="black";
for (var i=0;i<=Height;i++)
{
c.beginPath();
c.moveTo(0,i*cell_size);
c.lineTo(Width*cell_size,i*cell_size);
c.stroke();
}
for(var i=0;i<Width;i++)
{
c.beginPath();
c.moveTo(i*cell_size,0);
c.lineTo(i*cell_size,Height*cell_size);
c.stroke();
}
//======================================================================================蛇身
c.strokeStyle="white";
c.fillStyle="blue";
for (var i=0;i<length;i++)
{
c.fillRect(snake[i].x*cell_size,snake[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake[i].x*cell_size,snake[i].y*cell_size);
c.lineTo((snake[i].x+1)*cell_size,snake[i].y*cell_size);
c.lineTo((snake[i].x+1)*cell_size,(snake[i].y+1)*cell_size);
c.lineTo(snake[i].x*cell_size,(snake[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="yellow";
c.strokeStyle="red";
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
}
function init()
{
for (var i = 0; i < length; i++)
{
snake.unshift({x:i,y:0});
map[i][0]=1;
}
add_food();
draw();
score.innerHTML=0;
}
function move()
{
var nx=snake[0].x,ny=snake[0].y;
direction=next_direction;
next_direction=direction;
if (direction==1)nx--;
if (direction==2)ny--;
if (direction==3)nx++;
if (direction==4)ny++;
if (through)
{
if (nx>=Width)nx-=Width;
if (nx<0)nx+=Width;
if (ny>=Height)ny-=Height;
if (ny<0)ny+=Height;
}
if (judge_dead(nx,ny))return;
judge_eat(nx,ny);
map[nx][ny]=1;
snake.unshift({x:nx,y:ny});
if (!getfood)
{
map[snake[length-1].x][snake[length-1].y]=0;
snake.pop();
}
else
{
length++;
getfood=false;
}
console.log(through);
}
function judge_eat(nx,ny)
{
if (foodx==nx&&foody==ny)
{
add_food();
getfood=true;
if (T>=40)T-=20;
score.innerHTML++;
}
}
function judge_dead(nx,ny)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&!through)||map[nx][ny])
{
alert("Game Over!");
clearInterval(move_interval);
clearInterval(draw_interval);
return 1;
}
return 0;
}
function add_food()
{
foodx=-1;
foody=-1;
while(!(foodx>=0&&foody>=0&&foodx<Width&&foody<Height&&map[foodx][foody]==0))
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
}
window.οnlοad=function()
{
c=document.getElementById('screen').getContext('2d');
score=document.getElementById('scores');
paused=false;
through=false;
init();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,20);
document.οnkeydοwn=function(event)
{
var event=event||window.event;
judge_key(event.keyCode);
}
}
</script>
</head>
<body>
<div id="page">
<div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div>
<div id="status">
<div id="mark"><b>得分：<span id="scores"></span></b></div>
<div id="pause_status">状态：已开始</div>
<button οnclick="judge_key(80)"id="pause">暂停</button>
<div id="go_through_walls">穿墙：已关闭</div>
<button οnclick="change_through()"id="go_through">开启</button>
</div>
</body>
</html>2.1：一些优化：
1、修正了吃到食物之后贪吃蛇不能正确加速的bug
2、修正了死掉以后还能控制穿墙和暂停的bug
3、 加特技~duang~现在方向键和鼠标滑动都可以控制贪吃蛇了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crazy_SNAKE</title>
<style type="text/css">
#page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:900px;}
#yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;}
#mark{font-weight:800;}
#scores{color:red;}
</style>
<script type="text/javascript">
var cell_size=20,Height=30,Width=40;//const define
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;
}
var snake=[];//蛇的坐标
var c=null;//绘图对象
var time_interval=null;//移动计时器
var draw_interval=null;//画图计时器
var score=null;//分数
var direction=3;//方向
var next_direction=3;
var length=4;//长度
var foodx=0;//食物x坐标
var foody=0;//食物y坐标
var paused=false;//暂停状态
var getfood=false;//吃到食物
var through=false;//穿墙
var sx=0,sy=0,ex=0,ey=0;//手势读取
var T=150;//周期，控制蛇的速度
//var define
function judge_key(opr)
{
if(opr==37&&direction!=1&&direction!=3)next_direction=1;//左
else if(opr==38&&direction!=2&&direction!=4)next_direction=2;//上
else if(opr==39&&direction!=1&&direction!=3)next_direction=3;//右
else if(opr==40&&direction!=2&&direction!=4)next_direction=4;//下
else if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="状态：已开始";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="状态：已暂停";
}
}else if (opr==69)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：已关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：已开启";
}
}
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================横线竖线
c.strokeStyle="black";
for (var i=0;i<=Height;i++)
{
c.beginPath();
c.moveTo(0,i*cell_size);
c.lineTo(Width*cell_size,i*cell_size);
c.stroke();
}
for(var i=0;i<Width;i++)
{
c.beginPath();
c.moveTo(i*cell_size,0);
c.lineTo(i*cell_size,Height*cell_size);
c.stroke();
}
//======================================================================================蛇身
c.strokeStyle="white";
c.fillStyle="blue";
for (var i=0;i<length;i++)
{
c.fillRect(snake[i].x*cell_size,snake[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake[i].x*cell_size,snake[i].y*cell_size);
c.lineTo((snake[i].x+1)*cell_size,snake[i].y*cell_size);
c.lineTo((snake[i].x+1)*cell_size,(snake[i].y+1)*cell_size);
c.lineTo(snake[i].x*cell_size,(snake[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="yellow";
c.strokeStyle="red";
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
}
function init()
{
for (var i=0;i<length;i++)
{
snake.unshift({x:i,y:0});
map[i][0]=1;
}
add_food();
draw();
score.innerHTML=0;
}
function move()
{
var nx=snake[0].x,ny=snake[0].y;
direction=next_direction;
next_direction=direction;
if (direction==1)nx--;
if (direction==2)ny--;
if (direction==3)nx++;
if (direction==4)ny++;
if (through)
{
if (nx>=Width)nx-=Width;
if (nx<0)nx+=Width;
if (ny>=Height)ny-=Height;
if (ny<0)ny+=Height;
}
if (judge_dead(nx,ny))return;
judge_eat(nx,ny);
map[nx][ny]=1;
snake.unshift({x:nx,y:ny});
if (!getfood)
{
map[snake[length].x][snake[length].y]=0;
snake.pop();
}
else
{
length++;
getfood=false;
}
}
function judge_eat(nx,ny)
{
if (foodx==nx&&foody==ny)
{
add_food();
getfood=true;
if (T>=60)T-=10;
clearInterval(move_interval);
move_interval=setInterval(move,T);
score.innerHTML++;
}
}
function judge_dead(nx,ny)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||map[nx][ny])
{
alert("Game Over!");
clearInterval(move_interval);
clearInterval(draw_interval);
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("mousedown",touchStart,false);
document.getElementById("page").removeEventListener("mouseup",touchEnd,false);
document.removeEventListener("keydown",jud,false);
return 1;
}
return 0;
}
function add_food()
{
foodx=-1;
foody=-1;
while(!(foodx>=0&&foody>=0&&foodx<Width&&foody<Height&&map[foodx][foody]==0))
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
}
function touchStart(event)
{
event=event||window.event;
event.preventDefault();
sx=event.clientX;
sy=event.clientY;
}
function touchEnd(event)
{
event=event||wondow.event;
event.preventDefault();
ex=event.clientX;
ey=event.clientY;
//tan(pi/9)=tan(20)=0.364
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.364)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.364)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.364)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.364)judge_key(40);
}
function jud(event)
{
var event=event||window.event;
event.preventDefault();
judge_key(event.keyCode);
}
window.οnlοad=function()
{
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;through=false;
init();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("mousedown",touchStart,false);
document.getElementById("page").addEventListener("mouseup",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
</script>
</head>
<body>
<div id="page">
<div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div>
<div id="status">
<div id="mark">得分：<span id="scores"></span></div>
<div id="pause_status">状态：已开始</div>
<button οnclick="judge_key(80)"id="pause">暂停</button>
<div id="go_through_walls">穿墙：已关闭</div>
<button οnclick="judge_key(60)"id="go_through">开启</button>
</div>
</body>
</html>2.2：更多的优化：
1、移除手动开关穿墙
2、画面优化：蛇身加特技，显示内容微调
3、取消网格的绘制
4、添加了开始界面，不太完善，将来会一步步改善的
5、移除了鼠标控制的功能，加入触屏控制，并略加大了滑动判定的角度。现在在手机上也能玩了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crazy_SNAKE</title>
<style type="text/css">
#page{margin-left:20px;margin-top:20px;height:600px;width:900px;position:absolute;top:0px;left:0px;float:left;z-index:0;}
#yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;}
#mark{font-weight:800;}
#scores{color:red;}
#select_button{
opacity: 1;
border-collapse: separate;
border-color: #FFFFFF;
width: 160px;
height: 90px;
z-index: 5;
color: #0000FF;
font-style: italic;
font-weight: bolder;
font-size: x-large;
text-align: center;
text-shadow: 8px 8px 3px #666666;
border-radius: 25px;
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%);
top: 265px;
left: 370px;
position: absolute;
background-size: cover;
}
#select_page{
position: fixed;
top: 0px;
left: 0px;
margin-top: 0px;
margin-left: 0px;
width: 900px;
height: 600px;
float: left;
z-index: 1;
background-size: cover;
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;
}
</style>
<script type="text/javascript">
var cell_size=20,Height=30,Width=40;//const define
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;
}
var snake=[];//蛇的坐标
var c=null;//绘图对象
var time_interval=null;//移动计时器
var draw_interval=null;//画图计时器
var score=null;//分数
var direction=3;//方向
var next_direction=3;
var length=4;//长度
var foodx=0;//食物x坐标
var foody=0;//食物y坐标
var paused=false;//暂停状态
var getfood=false;//吃到食物
var through=false;//穿墙
var sx=0,sy=0,ex=0,ey=0;//手势读取
var T=150;//周期，控制蛇的速度
//var define
function judge_key(opr)
{
if(opr==37&&direction!=1&&direction!=3)next_direction=1;//左
else if(opr==38&&direction!=2&&direction!=4)next_direction=2;//上
else if(opr==39&&direction!=1&&direction!=3)next_direction=3;//右
else if(opr==40&&direction!=2&&direction!=4)next_direction=4;//下
else if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="游戏进行中";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="游戏已暂停";
}
}/*else if (opr==69)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：开启";
}
}*/
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================横线竖线
/* c.strokeStyle="black";
for (var i=0;i<=Height;i++)
{
c.beginPath();
c.moveTo(0,i*cell_size);
c.lineTo(Width*cell_size,i*cell_size);
c.stroke();
}
for(var i=0;i<Width;i++)
{
c.beginPath();
c.moveTo(i*cell_size,0);
c.lineTo(i*cell_size,Height*cell_size);
c.stroke();
}
*/
//======================================================================================蛇身
c.strokeStyle="white";
c.fillStyle="blue";
c.fillRect(snake[0].x*cell_size,snake[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake[0].x*cell_size,snake[0].y*cell_size);
c.lineTo((snake[0].x+1)*cell_size,snake[0].y*cell_size);
c.lineTo((snake[0].x+1)*cell_size,(snake[0].y+1)*cell_size);
c.lineTo(snake[0].x*cell_size,(snake[0].y+1)*cell_size);
c.closePath();
c.stroke();
c.fillStyle="#00ffff";
for (var i=1;i<length;i++)
{
c.fillRect(snake[i].x*cell_size,snake[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake[i].x*cell_size,snake[i].y*cell_size);
c.lineTo((snake[i].x+1)*cell_size,snake[i].y*cell_size);
c.lineTo((snake[i].x+1)*cell_size,(snake[i].y+1)*cell_size);
c.lineTo(snake[i].x*cell_size,(snake[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="yellow";
c.strokeStyle="red";
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
}
function init()
{
for (var i=0;i<length;i++)
{
snake.unshift({x:i,y:0});
map[i][0]=1;
}
add_food();
draw();
score.innerHTML=0;
}
function move()
{
var nx=snake[0].x,ny=snake[0].y;
direction=next_direction;
next_direction=direction;
if (direction==1)nx--;
if (direction==2)ny--;
if (direction==3)nx++;
if (direction==4)ny++;
if (through)
{
if (nx>=Width)nx-=Width;
if (nx<0)nx+=Width;
if (ny>=Height)ny-=Height;
if (ny<0)ny+=Height;
}
if (judge_dead(nx,ny))return;
judge_eat(nx,ny);
map[nx][ny]=1;
snake.unshift({x:nx,y:ny});
if (!getfood)
{
map[snake[length].x][snake[length].y]=0;
snake.pop();
}
else
{
length++;
getfood=false;
}
}
function judge_eat(nx,ny)
{
if (foodx==nx&&foody==ny)
{
add_food();
getfood=true;
if (T>=60)T-=10;
clearInterval(move_interval);
move_interval=setInterval(move,T);
score.innerHTML++;
}
}
function judge_dead(nx,ny)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||map[nx][ny])
{
alert("Game Over!");
clearInterval(move_interval);
clearInterval(draw_interval);
document.getElementById("pause_status").innerHTML="你跪了QAQ";
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("touchstart",touchStart,false);
document.getElementById("page").removeEventListener("touchend",touchEnd,false);
document.removeEventListener("keydown",jud,false);
return 1;
}
return 0;
}
function add_food()
{
foodx=-1;
foody=-1;
while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]==1)
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
}
function touchStart(event)
{
event=event||window.event;
event.preventDefault();
var touch=event.changedTouches[0];
sx=touch.pageX;
sy=touch.pageY;
}
function touchEnd(event)
{
event=event||wondow.event;
event.preventDefault();
var touch=event.changedTouches[0];
ex=touch.pageX;
ey=touch.pageY;
//tan(pi/9)=tan(20)=0.364
//tan(pi/6)=tan(30)=0.577
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40);
}6
function jud(event)
{
var event=event||window.event;
event.preventDefault();
judge_key(event.keyCode);
}
function startgame()
{
document.getElementById("select_page").style.display="none";
document.getElementById("page").style.display="block";
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;through=false;
init();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("touchstart",touchStart,false);
document.getElementById("page").addEventListener("touchend",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
</script>
</head>
<body>
<div id="select_page" style="display:block">
<button id="select_button" οnclick="startgame()">开始游戏！</button>
</div>
<div id="page" style="display:none">
<div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div>
<div id="status">
<div id="mark">得分：<span id="scores"></span></div>
<div id="pause_status">游戏进行中</div>
<button οnclick="judge_key(80)"id="pause">暂停</button>
<div id="go_through_walls">穿墙：关闭</div>
<button οnclick="judge_key(60)"id="go_through" disabled="true">开启</button>
</div>
</body>
</html>3.0 ：全新版本！加入双人游戏模式！（仅限电脑端）
1、版本更新，加入双人模式
2、加入伪·响应式布局，自动调整大小
3、加入管理员权限（权限狗）
4、修正可以暂停后无限调整方向的bug
5、全新的开始界面更酷炫了
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=0.5">
<meta charset="utf-8">
<title>crazy_snake_1</title>
<style type="text/css">
#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; }
.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;}
#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;}
#canvas{ position: absolute; top: 0px; right: 0px; max-width: 800px; max-height: 600px; display: inline-block; border: 2px inset #666666; }
.simple_font_type{ font-size: 15px; }
</style>
</head>
<body style="margin:0;">
<div id="select_page">
<button id="single_button"class="select_button"οnclick="choose_mode(1);"style="top:25%;left:25%;">单人模式</button>
<button id="double_button"class="select_button"οnclick="choose_mode(2);"style="top:25%;left:75%;">双人模式</button>
<button id="items_button"class="select_button"οnclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;"disabled="true">道具场</button>
<button id="rating_button"class="select_button"οnclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;"disabled="true">天梯排位赛</button>
<button id="start_button"class="select_button"οnclick="startgame(gamemode);"style="top:50%;left:50%;color:#D6D6D6;"disabled="true">开始游戏！</button>
<button id="Admin_button"class="select_button"οnclick="open_Admin();"style="top:90%;left:50%;color:#D6D6D6;">管理员权限狗!!!</button>
</div>
<div id="page" style="visibility:hidden;">
<div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div>
<div id="status">
<div class="simple_font_type"><b>得分：<span id="scores"style="color:red"></b></span></div>
<div id="pause_status"class="simple_font_type">游戏进行中</div>
<button id="pause"class="simple_font_type"οnclick="judge_key(80)">暂停</button>
<div id="go_through_walls"class="simple_font_type">穿墙：开启</div>
<button id="go_through"class="simple_font_type"οnclick="judge_key(69)" disabled="true">关闭</button>
</div>
</div>
</body>
<head>
<script type="text/javascript">
var cell_size=20.0,Height=30,Width=40;
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇；
}
var snake_1=[];//蛇坐标
var snake_2=[];
var c=null;//绘图对象
var time_interval=null;//移动计时器
var draw_interval=null;//画图计时器
var score=null,score_1=0,score_2=0;//分数
var direction_1=3,direction=4;//方向
var next_direction_1=3,next_direction_2=4;
var foodx=0,foody=0;
var length_1=4,length_2=4;//长度
var paused=false;//暂停状态
var getfood_1=false,getfood_2=false;//吃到食物
var through=false;//穿墙
var T=150;//周期，控制蛇的速度
var sx=0,sy=0,ex=0,ey=0;//手势读取
var Administrator_access=false;//管理员权限
var adjust_ratio=1.0;//伪·响应式布局
var gamemode="";//游戏模式
var players=1;
function judge_key(opr)
{
if (paused==false)
{
if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左
if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上
if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右
if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下
if (players==2)
{
if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左
if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上
if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右
if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下
}
}
if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="游戏进行中";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="游戏已暂停";
}
}
if (opr==69&&Administrator_access==true)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：开启";
}
}
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================蛇1
c.strokeStyle="#ffffff";//白
c.fillStyle="#0000ff";//深蓝
c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size);
c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size);
c.closePath();
c.stroke();
c.fillStyle="#66ffff";//浅蓝
for (var i=1;i<length_1;i++)
{
c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size);
c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="#ffff00";//黄
c.strokeStyle="#ff0000";//红
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
if (players==1)return;
//======================================================================================蛇2
c.strokeStyle="#ffffff";//白
c.fillStyle="#ff3333";//红
if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰
c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size);
c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size);
c.closePath();
c.stroke();
for (var i=1;i<length_2;i++)
{
c.fillStyle="#FFBDBD";//浅红
if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰
c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size);
c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
}
function move()
{
var nx1=snake_1[0].x,ny1=snake_1[0].y;
direction_1=next_direction_1;next_direction_1=direction_1;
if (direction_1==1)nx1--;
if (direction_1==2)ny1--;
if (direction_1==3)nx1++;
if (direction_1==4)ny1++;
if (players==2)
{
var nx2=snake_2[0].x,ny2=snake_2[0].y;
direction_2=next_direction_2;next_direction_2=direction_2;
if (direction_2==1)nx2--;
if (direction_2==2)ny2--;
if (direction_2==3)nx2++;
if (direction_2==4)ny2++;
}
if (through)
{
if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width;
if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height;
}
if (through&&players==2)
{
if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width;
if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height;
}
if (judge_dead(nx1,ny1,1))return;
if (players==2&&judge_dead(nx2,ny2,2))return;
judge_eat(nx1,ny1,1);
if (players==2)judge_eat(nx2,ny2,2);
if (getfood_1||getfood_2)add_food();
map[nx1][ny1]+=1;
snake_1.unshift({x:nx1,y:ny1});
if (getfood_1==false)
{
map[snake_1[length_1].x][snake_1[length_1].y]-=1;
snake_1.pop();
}
else
{
length_1++;
getfood_1=false;
}
if (players==2)
{
map[nx2][ny2]+=2;
snake_2.unshift({x:nx2,y:ny2});
if (getfood_2==false)
{
map[snake_2[length_2].x][snake_2[length_2].y]-=2;
snake_2.pop();
}
else
{
length_2++;
getfood_2=false;
}
}
}
function judge_eat(nx,ny,snake_number)
{
if (nx==foodx&&ny==foody)
{
if (snake_number==1)getfood_1=true;
if (snake_number==2)getfood_2=true;
if (T>=60)T-=10;
clearInterval(move_interval);
move_interval=setInterval(move,T);
if (snake_number==1)score_1++;
if (snake_number==2)score_2++;
if (players==1)score.innerHTML=score_1;
if (players==2)score.innerHTML=score_1+":"+score_2;
}
}
function judge_dead(nx,ny,snake_number)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0)
{
alert("Game Over!");
clearInterval(move_interval);
clearInterval(draw_interval);
document.getElementById("pause_status").innerHTML="你跪了QAQ";
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("touchstart",touchStart,false);
document.getElementById("page").removeEventListener("touchend",touchEnd,false);
document.removeEventListener("keydown",jud,false);
return 1;
}
return 0;
}
function add_food()
{
map[foodx][foody]-=4;
foodx=-1;
foody=-1;
while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0)
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
map[foodx][foody]+=4;
}
function touchStart(event)
{
event=event||window.event;
event.preventDefault();
var touch=event.changedTouches[0];
sx=touch.pageX;
sy=touch.pageY;
}
function touchEnd(event)
{
event=event||wondow.event;
event.preventDefault();
var touch=event.changedTouches[0];
ex=touch.pageX;
ey=touch.pageY;
//tan(pi/9)=tan(20)=0.364
//tan(pi/6)=tan(30)=0.577
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40);
}
function jud(event)
{
var event=event||window.event;
event.preventDefault();
judge_key(event.keyCode);
}
function startgame_single_classic()//单人经典模式
{
players=1;
through=true;
score.innerHTML=0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]+=1;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("touchstart",touchStart,false);
document.getElementById("page").addEventListener("touchend",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
function startgame_double_classic()//双人经典模式
{
players=2;
through=true;
score.innerHTML=0+":"+0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]=map[i][0]+1;
}
for (var i=0;i<length_2;i++)
{
snake_2.unshift({x:0,y:i});
map[0][i]+=2;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.addEventListener("keydown",jud,false);
}
function startgame(opr)
{
document.getElementById("select_page").style.visibility="hidden";
document.getElementById("page").style.visibility="visible";
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;
if(opr=="single_classic")startgame_single_classic();
if(opr=="double_classic")startgame_double_classic();
}
function choose_mode(opr)
{
if (opr==1)gamemode="single_classic";
if (opr==2)gamemode="double_classic";
document.getElementById("single_button").disabled="true";
document.getElementById("single_button").style.color="#D6D6D6";
document.getElementById("double_button").disabled="true";
document.getElementById("double_button").style.color="#D6D6D6";
document.getElementById("start_button").style.color="#0000FF";
document.getElementById("start_button").disabled="";
document.getElementById("Admin_button").disabled="true";
}
function open_Admin()
{
Administrator_access=true;
document.getElementById("go_through").disabled="";
}
function auto_adjust()
{
var now_Height=document.documentElement.clientHeight;
var now_Width=document.documentElement.clientWidth;
if (now_Height>=620&&now_Width>=950)return;
var Height_ratio=now_Height/620;
var Width_ratio=now_Width/950;
adjust_ratio=Math.min(Height_ratio,Width_ratio);
document.getElementById("select_page").style.width=900*adjust_ratio+"px";
document.getElementById("select_page").style.height=600*adjust_ratio+"px";
document.getElementById("page").style.width=900*adjust_ratio+"px";
document.getElementById("page").style.height=600*adjust_ratio+"px";
var fonts=document.getElementsByClassName("simple_font_type");
for(var i=0;fonts[i];i++)fonts[i].style.fontSize=15*adjust_ratio+"px";
var buttons=document.getElementsByClassName("select_button");
for(var i=0;buttons[i];i++)
{
buttons[i].style.height=90*adjust_ratio+"px";
buttons[i].style.width=160*adjust_ratio+"px";
buttons[i].style.marginLeft=-80*adjust_ratio+"px";
buttons[i].style.marginTop=-45*adjust_ratio+"px";
buttons[i].style.fontSize=25*adjust_ratio+"px";
buttons[i].style.textShadow=3*adjust_ratio+"px "+3*adjust_ratio+"px "+1*adjust_ratio+"px #999999";
buttons[i].style.borderRadius=25*adjust_ratio+"px";
}
document.getElementById("screen").style.height=675*adjust_ratio-75+"px";
document.getElementById("screen").style.width=900*adjust_ratio-100+"px";
if (now_Height<214)
{
document.getElementById("start_button").innerHTML="开始";
document.getElementById("start_button").style.fontSize=30*adjust_ratio+"px";
}
}
window.οnlοad=auto_adjust();
</script>
</head>
</html>3.1：五一期间做了一些修正
1、管理员权限并不是你想开就能开的……现在要获得管理员权限需要密码咯……
2、布局调整。显示的文字放在下方
3、“伪·响应式布局”改为“更伪·响应式布局"。只支持手机端和平板电脑端的缩放，但是效果更加拔群
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>crazy_snake_1</title>
<style type="text/css">
#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;}
.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;}
#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; }
#canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;}
.simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;}
</style>
</head>
<body style="margin:0;">
<div id="select_page">
<button id="single_button"class="select_button"οnclick="choose_mode(1);"style="top:25%;left:25%;">单人模式</button>
<button id="double_button"class="select_button"οnclick="choose_mode(2);"style="top:25%;left:75%;">双人模式</button>
<button id="items_button"class="select_button"οnclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;"disabled="true">道具场</button>
<button id="rating_button"class="select_button"οnclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;"disabled="true">天梯排位赛</button>
<button id="start_button"class="select_button"οnclick="startgame(gamemode);"style="top:50%;left:50%;color:#D6D6D6;"disabled="true">开始游戏！</button>
<button id="Admin_button"class="select_button"οnclick="open_Admin();"style="top:25%;left:50%;">管理员权限狗</button>
</div>
<div id="page" style="visibility:hidden;">
<div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div>
<div id="status">
<div class="simple_font_type"style="left:0px;"><b>得分：<span id="scores" style="color:red"></b></span></div>
<div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div>
<button id="pause"class="simple_font_type"style="left:300px;"οnclick="judge_key(80)">暂停</button>
<div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div>
<button id="go_through"class="simple_font_type"style="left:600px;"οnclick="judge_key(69)" disabled="true">关闭</button>
</div>
</div>
</body>
<head>
<script type="text/javascript">
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))};
var cell_size=20.0,Height=30,Width=40;
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇；
}
var snake_1=[];//蛇坐标
var snake_2=[];
var c=null;//绘图对象
var time_interval=null;//移动计时器
var draw_interval=null;//画图计时器
var score=null,score_1=0,score_2=0;//分数
var direction_1=3,direction=4;//方向
var next_direction_1=3,next_direction_2=4;
var foodx=0,foody=0;
var length_1=4,length_2=4;//长度
var paused=false;//暂停状态
var getfood_1=false,getfood_2=false;//吃到食物
var through=false;//穿墙
var T=150;//周期，控制蛇的速度
var sx=0,sy=0,ex=0,ey=0;//手势读取
var Administrator_access=false;//管理员权限
var adjust_ratio=1.0;//伪·响应式布局
var gamemode="";//游戏模式
var players=1;
function judge_key(opr)
{
if (paused==false)
{
if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左
if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上
if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右
if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下
if (players==2)
{
if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左
if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上
if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右
if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下
}
}
if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="游戏进行中";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="游戏已暂停";
}
}
if (opr==69&&Administrator_access==true)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：开启";
}
}
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================蛇1
c.strokeStyle="#ffffff";//白
c.fillStyle="#0000ff";//深蓝
c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size);
c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size);
c.closePath();
c.stroke();
c.fillStyle="#66ffff";//浅蓝
for (var i=1;i<length_1;i++)
{
c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size);
c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="#ffff00";//黄
c.strokeStyle="#ff0000";//红
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
if (players==1)return;
//======================================================================================蛇2
c.strokeStyle="#ffffff";//白
c.fillStyle="#ff3333";//红
if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰
c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size);
c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size);
c.closePath();
c.stroke();
for (var i=1;i<length_2;i++)
{
c.fillStyle="#FFBDBD";//浅红
if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰
c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size);
c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
}
function move()
{
var nx1=snake_1[0].x,ny1=snake_1[0].y;
direction_1=next_direction_1;next_direction_1=direction_1;
if (direction_1==1)nx1--;
if (direction_1==2)ny1--;
if (direction_1==3)nx1++;
if (direction_1==4)ny1++;
if (players==2)
{
var nx2=snake_2[0].x,ny2=snake_2[0].y;
direction_2=next_direction_2;next_direction_2=direction_2;
if (direction_2==1)nx2--;
if (direction_2==2)ny2--;
if (direction_2==3)nx2++;
if (direction_2==4)ny2++;
}
if (through)
{
if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width;
if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height;
}
if (through&&players==2)
{
if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width;
if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height;
}
if (judge_dead(nx1,ny1,1))return;
if (players==2&&judge_dead(nx2,ny2,2))return;
judge_eat(nx1,ny1,1);
if (players==2)judge_eat(nx2,ny2,2);
if (getfood_1||getfood_2)add_food();
map[nx1][ny1]+=1;
snake_1.unshift({x:nx1,y:ny1});
if (getfood_1==false)
{
map[snake_1[length_1].x][snake_1[length_1].y]-=1;
snake_1.pop();
}
else
{
length_1++;
getfood_1=false;
}
if (players==2)
{
map[nx2][ny2]+=2;
snake_2.unshift({x:nx2,y:ny2});
if (getfood_2==false)
{
map[snake_2[length_2].x][snake_2[length_2].y]-=2;
snake_2.pop();
}
else
{
length_2++;
getfood_2=false;
}
}
}
function judge_eat(nx,ny,snake_number)
{
if (nx==foodx&&ny==foody)
{
if (snake_number==1)getfood_1=true;
if (snake_number==2)getfood_2=true;
if (T>=60)T-=10;
clearInterval(move_interval);
move_interval=setInterval(move,T);
if (snake_number==1)score_1++;
if (snake_number==2)score_2++;
if (players==1)score.innerHTML=score_1;
if (players==2)score.innerHTML=score_1+":"+score_2;
}
}
function judge_dead(nx,ny,snake_number)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0)
{
alert("Game Over!");
clearInterval(move_interval);
clearInterval(draw_interval);
document.getElementById("pause_status").innerHTML="你跪了QAQ";
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("touchstart",touchStart,false);
document.getElementById("page").removeEventListener("touchend",touchEnd,false);
document.removeEventListener("keydown",jud,false);
return 1;
}
return 0;
}
function add_food()
{
map[foodx][foody]-=4;
foodx=-1;
foody=-1;
while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0)
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
map[foodx][foody]+=4;
}
function touchStart(event)
{
event=event||window.event;
event.preventDefault();
var touch=event.changedTouches[0];
sx=touch.pageX;
sy=touch.pageY;
}
function touchEnd(event)
{
event=event||wondow.event;
//event.preventDefault();
var touch=event.changedTouches[0];
ex=touch.pageX;
ey=touch.pageY;
//tan(pi/9)=tan(20)=0.364
//tan(pi/6)=tan(30)=0.577
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40);
}
function jud(event)
{
var event=event||window.event;
//event.preventDefault();
judge_key(event.keyCode);
}
function startgame_single_classic()//单人经典模式
{
players=1;
through=true;
score.innerHTML=0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]+=1;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("touchstart",touchStart,false);
document.getElementById("page").addEventListener("touchend",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
function startgame_double_classic()//双人经典模式
{
players=2;
through=true;
score.innerHTML=0+":"+0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]=map[i][0]+1;
}
for (var i=0;i<length_2;i++)
{
snake_2.unshift({x:0,y:i});
map[0][i]+=2;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.addEventListener("keydown",jud,false);
}
function startgame(opr)
{
document.getElementById("select_page").style.visibility="hidden";
document.getElementById("page").style.visibility="visible";
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;
if(opr=="single_classic")startgame_single_classic();
if(opr=="double_classic")startgame_double_classic();
}
function choose_mode(opr)
{
if (opr==1)gamemode="single_classic";
if (opr==2)gamemode="double_classic";
document.getElementById("single_button").disabled="true";
document.getElementById("single_button").style.color="#D6D6D6";
document.getElementById("double_button").disabled="true";
document.getElementById("double_button").style.color="#D6D6D6";
document.getElementById("start_button").style.color="#0000FF";
document.getElementById("start_button").disabled="";
}
function open_Admin()
{
var password=prompt("输入管理员密码！","");
if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d")
{
Administrator_access=true;
alert("欢迎回来,权限狗！")
document.getElementById("go_through").disabled="";
}else
{
Administrator_access=true;
alert("你连权限狗都不是还装什么权限狗！")
}
document.getElementById("Admin_button").disabled="true";
document.getElementById("Admin_button").style.color="#D6D6D6";
}
function auto_adjust()
{
var now_Height=document.documentElement.clientHeight;
var now_Width=document.documentElement.clientWidth;
if (now_Height>=650&&now_Width>=950)return;
var Height_ratio=now_Height/650;
var Width_ratio=now_Width/950;
adjust_ratio=Math.min(Height_ratio,Width_ratio);
var autocg=document.getElementsByTagName("meta")[1];
autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2);
}
window.οnlοad=auto_adjust();
</script>
</head>
</html>3.2：duang~更多的特技！
1、用jQuery重写的开始界面更酷炫了（为偷懒直接指到服务器上面jQuery了）
2、加入了全新的10秒内连续吃到食物双倍分的效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>crazy_snake_1</title>
<style type="text/css">
#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;}
.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;}
#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; }
#canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;}
.simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;}
</style>
</head>
<body style="margin:0;">
<div id="select_page">
<button id="single_button"class="select_button"οnclick="choose_mode(1);"style="top:25%;left:25%;">单人模式</button>
<button id="double_button"class="select_button"οnclick="choose_mode(2);"style="top:25%;left:75%;">双人模式</button>
<button id="items_button"class="select_button"οnclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;"disabled="true">道具场</button>
<button id="rating_button"class="select_button"οnclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;"disabled="true">天梯排位赛</button>
<button id="start_button"class="select_button"οnclick="startgame(gamemode);"style="top:50%;left:50%;"disabled="true">开始游戏！</button>
<button id="Admin_button"class="select_button"οnclick="open_Admin();"style="top:25%;left:50%;">管理员权限狗</button>
</div>
<div id="page" style="visibility:hidden;">
<div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div>
<div id="status">
<div class="simple_font_type"style="left:0px;"><b>得分：<span id="scores" style="color:red"></b></span></div>
<div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div>
<button id="pause"class="simple_font_type"style="left:300px;"οnclick="judge_key(80)">暂停</button>
<div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div>
<button id="go_through"class="simple_font_type"style="left:600px;"οnclick="judge_key(69)" disabled="true">关闭</button>
</div>
</div>
</body>
<head>
<script src="http://app.htouko.com/snake/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
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))};
var cell_size=20.0,Height=30,Width=40;
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇；
}
var snake_1=[];//蛇坐标
var snake_2=[];
var c=null;//绘图对象
var time_interval=null;//移动计时器
var draw_interval=null;//画图计时器
var down_interval=null;
var score=null,score_1=0,score_2=0;//分数
var direction_1=3,direction=4;//方向
var next_direction_1=3,next_direction_2=4;
var foodx=0,foody=0;
var length_1=4,length_2=4;//长度
var paused=false;//暂停状态
var getfood_1=false,getfood_2=false;//吃到食物
var through=false;//穿墙
var T=150;//周期，控制蛇的速度
var sx=0,sy=0,ex=0,ey=0;//手势读取
var Administrator_access=false;//管理员权限
var adjust_ratio=1.0;//伪·响应式布局
var gamemode="";//游戏模式
var players=1;
var dsum=0,add_score=false;//连续吃到食物的奖励分
function judge_key(opr)
{
if (paused==false)
{
if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左
if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上
if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右
if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下
if (players==2)
{
if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左
if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上
if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右
if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下
}
}
if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
if (dsum>0)down_interval=setInterval(dcount,100);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="游戏进行中";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
clearInterval(down_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="游戏已暂停";
}
}
if (opr==69&&Administrator_access==true)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：开启";
}
}
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================蛇1
c.strokeStyle="#ffffff";//白
c.fillStyle="#0000ff";//深蓝
c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size);
c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size);
c.closePath();
c.stroke();
c.fillStyle="#66ffff";//浅蓝
for (var i=1;i<length_1;i++)
{
c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size);
c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="#ffff00";//黄
c.strokeStyle="#ff0000";//红
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
if (players==1)return;
//======================================================================================蛇2
c.strokeStyle="#ffffff";//白
c.fillStyle="#ff3333";//红
if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰
c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size);
c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size);
c.closePath();
c.stroke();
for (var i=1;i<length_2;i++)
{
c.fillStyle="#FFBDBD";//浅红
if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰
c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size);
c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
}
function move()
{
var nx1=snake_1[0].x,ny1=snake_1[0].y;
direction_1=next_direction_1;next_direction_1=direction_1;
if (direction_1==1)nx1--;
if (direction_1==2)ny1--;
if (direction_1==3)nx1++;
if (direction_1==4)ny1++;
if (players==2)
{
var nx2=snake_2[0].x,ny2=snake_2[0].y;
direction_2=next_direction_2;next_direction_2=direction_2;
if (direction_2==1)nx2--;
if (direction_2==2)ny2--;
if (direction_2==3)nx2++;
if (direction_2==4)ny2++;
}
if (through)
{
if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width;
if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height;
}
if (through&&players==2)
{
if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width;
if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height;
}
if (judge_dead(nx1,ny1,1))return;
if (players==2&&judge_dead(nx2,ny2,2))return;
judge_eat(nx1,ny1,1);
if (players==2)judge_eat(nx2,ny2,2);
if (getfood_1||getfood_2)add_food();
map[nx1][ny1]+=1;
snake_1.unshift({x:nx1,y:ny1});
if (getfood_1==false)
{
map[snake_1[length_1].x][snake_1[length_1].y]-=1;
snake_1.pop();
}
else
{
length_1++;
getfood_1=false;
}
if (players==2)
{
map[nx2][ny2]+=2;
snake_2.unshift({x:nx2,y:ny2});
if (getfood_2==false)
{
map[snake_2[length_2].x][snake_2[length_2].y]-=2;
snake_2.pop();
}
else
{
length_2++;
getfood_2=false;
}
}
}
function judge_eat(nx,ny,snake_number)
{
if (nx==foodx&&ny==foody)
{
if (snake_number==1)getfood_1=true;
if (snake_number==2)getfood_2=true;
if (T>=60)T-=10;
clearInterval(move_interval);
move_interval=setInterval(move,T);
if (snake_number==1)score_1++;
if (snake_number==2)score_2++;
if (players==1)score.innerHTML=score_1;
if (players==2)score.innerHTML=score_1+":"+score_2;
if (add_score==true)
{
if (snake_number==1)score_1++;
if (snake_number==2)score_2++;
if (players==1)score.innerHTML=score_1;
if (players==2)score.innerHTML=score_1+":"+score_2;
}
add_score=true;dsum=100;
clearInterval(down_interval);
down_interval=setInterval(dcount,100);
}
}
function dcount()
{
dsum-=1;
if (dsum<0) clearInterval(down_interval);
if (dsum<=0) add_score=false;
}
function judge_dead(nx,ny,snake_number)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0)
{
clearInterval(move_interval);
clearInterval(draw_interval);
clearInterval(down_interval);
alert("Game Over!");
document.getElementById("pause_status").innerHTML="你跪了QAQ";
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("touchstart",touchStart,false);
document.getElementById("page").removeEventListener("touchend",touchEnd,false);
document.removeEventListener("keydown",jud,false);
return 1;
}
return 0;
}
function add_food()
{
map[foodx][foody]-=4;
foodx=-1;
foody=-1;
while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0)
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
map[foodx][foody]+=4;
}
function touchStart(event)
{
event.preventDefault;
event=event||window.event;
var touch=event.changedTouches[0];
sx=touch.pageX;
sy=touch.pageY;
}
function touchEnd(event)
{
event.preventDefault;
event=event||wondow.event;
var touch=event.changedTouches[0];
ex=touch.pageX;
ey=touch.pageY;
//tan(pi/9)=tan(20)=0.364
//tan(pi/6)=tan(30)=0.577
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40);
}
function jud(event)
{
var event=event||window.event;
judge_key(event.keyCode);
}
function startgame_single_classic()//单人经典模式
{
players=1;
through=true;
score.innerHTML=0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]+=1;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("touchstart",touchStart,false);
document.getElementById("page").addEventListener("touchend",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
function startgame_double_classic()//双人经典模式
{
players=2;
through=true;
score.innerHTML=0+":"+0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]=map[i][0]+1;
}
for (var i=0;i<length_2;i++)
{
snake_2.unshift({x:0,y:i});
map[0][i]+=2;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.addEventListener("keydown",jud,false);
}
function startgame(opr)
{
$("#start_button").fadeTo(1000,0);
$("#select_page").fadeTo(2000,0);
document.getElementById("select_page").style.visibility="hidden";
document.getElementById("page").style.visibility="visible";
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;
if(opr=="single_classic")startgame_single_classic();
if(opr=="double_classic")startgame_double_classic();
}
function choose_mode(opr)
{
if (opr==1)gamemode="single_classic";
if (opr==2)gamemode="double_classic";
document.getElementById("single_button").disabled="true";
document.getElementById("single_button").style.color="#D6D6D6";
$("#single_button").fadeTo(1000,0);
document.getElementById("double_button").disabled="true";
document.getElementById("double_button").style.color="#D6D6D6";
$("#double_button").fadeTo(1000,0);
$("#items_button").fadeTo(1000,0);
$("#rating_button").fadeTo(1000,0);
document.getElementById("Admin_button").disabled="true";
$("#Admin_button").fadeTo(1000,0);
document.getElementById("start_button").disabled="";
$("#start_button").fadeTo(2000,1);
}
function open_Admin()
{
var password=prompt("输入管理员密码！","");
if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d")
{
Administrator_access=true;
alert("欢迎回来,权限狗！")
document.getElementById("go_through").disabled="";
}else
{
Administrator_access=true;
alert("你连权限狗都不是还装什么权限狗！")
document.getElementById("Admin_button").style.color="#D6D6D6";
}
document.getElementById("Admin_button").disabled="true";
$("#Admin_button").fadeTo(1000,0);
}
function auto_adjust()
{
var now_Height=document.documentElement.clientHeight;
var now_Width=document.documentElement.clientWidth;
if (now_Height>=700&&now_Width>=850)return;
var Height_ratio=now_Height/700;
var Width_ratio=now_Width/850;
adjust_ratio=Math.min(Height_ratio,Width_ratio);
var autocg=document.getElementsByTagName("meta")[1];
autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2);
}
$(function(){
auto_adjust();
$("#single_button").fadeTo(2000,1);
$("#double_button").fadeTo(2000,1);
$("#items_button").fadeTo(2000,1);
$("#rating_button").fadeTo(2000,1);
$("#Admin_button").fadeTo(3000,1);
});
</script>
</head>
</html>3.3：全新的记分规则，看到分数几千几万的是不是比原来就更霸气了？
1、加入不同难度，可以在一开始选完游戏模式之后选择。从易到难依次为：“极弱无比”、“有点意思”、“奥义很爽”、“丧心病狂”、“无♂双♂大♂王”！难度越高吃到食物获得的分数越高，速度也会越快咯
2、全新的和难度挂钩的记分规则，并加入10秒内连续吃两个有加分的奖励。在得分一栏显示的奖励buff消失之前赶快把食物吃掉吧！
3、修正原来双人模式两人同时吃第一个食物会出现1:2的bug
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>crazy_snake_1</title>
<style type="text/css">
#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;}
.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;}
#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; }
#canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;}
.simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;}
</style>
</head>
<body style="margin:0;">
<div id="select_page">
<button id="single_button"class="select_button"οnclick="choose_mode(1);"style="top:25%;left:25%;z-index:15;">单人模式</button>
<button id="double_button"class="select_button"οnclick="choose_mode(2);"style="top:25%;left:75%;z-index:15;">双人模式</button>
<button id="items_button"class="select_button"οnclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;z-index:15;"disabled="true">道具场</button>
<button id="rating_button"class="select_button"οnclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;z-index:15;"disabled="true">天梯排位赛</button>
<button id="start_button"class="select_button"οnclick="startgame(gamemode);"style="top:50%;left:50%;z-index:11;"disabled="true">开始游戏！</button>
<button id="Admin_button"class="select_button"οnclick="open_Admin();"style="top:25%;left:50%;z-index:20;">管理员权限狗</button>
<button id="level_1"class="select_button"οnclick="choose_level(1);"style="top:25%;left:25%;z-index:12;"disabled="true">极弱无比</button>
<button id="level_2"class="select_button"οnclick="choose_level(2);"style="top:25%;left:75%;z-index:12;"disabled="true">有点意思</button>
<button id="level_3"class="select_button"οnclick="choose_level(3);"style="top:50%;left:50%;z-index:12;"disabled="true">奥义很爽</button>
<button id="level_4"class="select_button"οnclick="choose_level(4);"style="top:75%;left:25%;z-index:12;"disabled="true">丧心病狂</button>
<button id="level_5"class="select_button"οnclick="choose_level(5);"style="top:75%;left:75%;z-index:12;"disabled="true">无双大王</button>
</div>
<div id="page" style="visibility:hidden;">
<div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div>
<div id="status">
<div id="score_table"class="simple_font_type"style="left:0px;width:120px;"><b>得分：<span id="scores" style="color:red"></b></span></div>
<div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div>
<button id="pause"class="simple_font_type"style="left:300px;"οnclick="judge_key(80)">暂停</button>
<div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div>
<button id="go_through"class="simple_font_type"style="left:600px;"οnclick="judge_key(69)" disabled="true">关闭</button>
</div>
</div>
</body>
<head>
<script src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
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))};
var cell_size=20.0,Height=30,Width=40;
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇；
}
var snake_1=[];//坐标
var snake_2=[];
var c=null;//canvas
var time_interval=null;//移动
var draw_interval=null;//画图
var score=null,food1=0,food2=0,score_1=0,score_2=0;//分数
var direction_1=3,direction=4;//方向
var next_direction_1=3,next_direction_2=4;
var foodx=0,foody=0;
var length_1=4,length_2=4;//长度
var paused=false;//暂停状态
var getfood_1=false,getfood_2=false;//吃到食物
var through=false;//穿墙
var T=100;
var sx=0,sy=0,ex=0,ey=0;//手势
var Administrator_access=false;//管理员权限
var adjust_ratio=1.0;
var gamemode="";//游戏模式
var players=1;
var level=0;
var down_interval=null,dsum=0,bonus=false;//连续吃到食物的奖励分
function judge_key(opr)
{
if (paused==false)
{
if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左
if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上
if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右
if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下
if (players==2)
{
if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左
if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上
if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右
if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下
}
}
if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
if (dsum>0)down_interval=setInterval(dcount,100);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="游戏进行中";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
clearInterval(down_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="游戏已暂停";
}
}
if (opr==69&&Administrator_access==true)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：开启";
}
}
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================蛇1
c.strokeStyle="#ffffff";//白
c.fillStyle="#0000ff";//深蓝
c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size);
c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size);
c.closePath();
c.stroke();
c.fillStyle="#66ffff";//浅蓝
for (var i=1;i<length_1;i++)
{
c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size);
c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="#ffff00";//黄
c.strokeStyle="#ff0000";//红
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
if (players==1)return;
//======================================================================================蛇2
c.strokeStyle="#ffffff";//白
c.fillStyle="#ff3333";//红
if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰
c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size);
c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size);
c.closePath();
c.stroke();
for (var i=1;i<length_2;i++)
{
c.fillStyle="#FFBDBD";//浅红
if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰
c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size);
c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
}
function move()
{
var nx1=snake_1[0].x,ny1=snake_1[0].y;
direction_1=next_direction_1;next_direction_1=direction_1;
if (direction_1==1)nx1--;
if (direction_1==2)ny1--;
if (direction_1==3)nx1++;
if (direction_1==4)ny1++;
if (players==2)
{
var nx2=snake_2[0].x,ny2=snake_2[0].y;
direction_2=next_direction_2;next_direction_2=direction_2;
if (direction_2==1)nx2--;
if (direction_2==2)ny2--;
if (direction_2==3)nx2++;
if (direction_2==4)ny2++;
}
if (through)
{
if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width;
if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height;
}
if (through&&players==2)
{
if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width;
if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height;
}
if (judge_dead(nx1,ny1,1))return;
if (players==2&&judge_dead(nx2,ny2,2))return;
judge_eat(nx1,ny1,nx2,ny2);
if (getfood_1||getfood_2)add_food();
map[nx1][ny1]+=1;
snake_1.unshift({x:nx1,y:ny1});
if (getfood_1==false)
{
map[snake_1[length_1].x][snake_1[length_1].y]-=1;
snake_1.pop();
}
else
{
length_1++;
getfood_1=false;
}
if (players==2)
{
map[nx2][ny2]+=2;
snake_2.unshift({x:nx2,y:ny2});
if (getfood_2==false)
{
map[snake_2[length_2].x][snake_2[length_2].y]-=2;
snake_2.pop();
}
else
{
length_2++;
getfood_2=false;
}
}
}
function judge_eat(x1,y1,x2,y2)
{
var mrk1=(x1==foodx&&y1==foody),mrk2=(x2==foodx&&y2==foody);
if (mrk1){getfood_1=true;food1++;}if (mrk2){getfood_2=true;food2++;}
if (mrk1==false&&mrk2==false)return;
if (T>(5-level)*(6-level))T*=(1-level*0.01);
clearInterval(move_interval);move_interval=setInterval(move,T);
if (mrk1){score_1+=food1*level;if (bonus)score_1+=3*level*(food1-1);}
if (mrk2){score_2+=food2*level;if (bonus)score_2+=3*level*(food2-1);}
if (players==1)score.innerHTML=score_1;
if (players==2)score.innerHTML=score_1+":"+score_2;
bonus=true;dsum=100;
document.getElementById("score_table").style.backgroundColor="#00CCFF";
clearInterval(down_interval);
down_interval=setInterval(dcount,100);
}
function dcount()
{
dsum-=1;
if (dsum<0)clearInterval(down_interval);
if (dsum<=0){document.getElementById("score_table").style.backgroundColor="";bonus=false;}
}
function judge_dead(nx,ny,snake_number)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0)
{
clearInterval(move_interval);
clearInterval(draw_interval);
clearInterval(down_interval);
alert("Game Over!");
document.getElementById("pause_status").innerHTML="你跪了QAQ";
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("touchstart",touchStart,false);
document.getElementById("page").removeEventListener("touchend",touchEnd,false);
document.removeEventListener("keydown",jud,false);
return 1;
}
return 0;
}
function add_food()
{
map[foodx][foody]-=4;
foodx=-1;
foody=-1;
while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0)
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
map[foodx][foody]+=4;
}
function touchStart(event)
{
event.preventDefault;
event=event||window.event;
var touch=event.changedTouches[0];
sx=touch.pageX;
sy=touch.pageY;
}
function touchEnd(event)
{
event.preventDefault;
event=event||wondow.event;
var touch=event.changedTouches[0];
ex=touch.pageX;
ey=touch.pageY;
//tan(pi/9)=tan(20)=0.364
//tan(pi/6)=tan(30)=0.577
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40);
}
function jud(event)
{
var event=event||window.event;
judge_key(event.keyCode);
}
function startgame_single_classic()//单人经典模式
{
players=1;
through=true;
score.innerHTML=0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]+=1;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("touchstart",touchStart,false);
document.getElementById("page").addEventListener("touchend",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
function startgame_double_classic()//双人经典模式
{
players=2;
through=true;
score.innerHTML=0+":"+0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]=map[i][0]+1;
}
for (var i=0;i<length_2;i++)
{
snake_2.unshift({x:0,y:i});
map[0][i]+=2;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.addEventListener("keydown",jud,false);
}
function startgame(opr)
{
$("#start_button").fadeTo(1000,0);
$("#select_page").fadeTo(2000,0);document.getElementById("select_page").style.visibility="hidden";
document.getElementById("page").style.visibility="visible";
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;
if(opr=="single_classic")startgame_single_classic();
if(opr=="double_classic")startgame_double_classic();
}
function choose_mode(opr)
{
if (opr==1)gamemode="single_classic";
if (opr==2)gamemode="double_classic";
$("#single_button").fadeTo(1000,0);document.getElementById("single_button").disabled="true";document.getElementById("single_button").style.color="#D6D6D6";
$("#double_button").fadeTo(1000,0);document.getElementById("double_button").disabled="true";document.getElementById("double_button").style.color="#D6D6D6";
$("#items_button").fadeTo(1000,0);
$("#rating_button").fadeTo(1000,0);
$("#Admin_button").fadeTo(1000,0);document.getElementById("Admin_button").disabled="true";
$("#level_1").fadeTo(2000,1);document.getElementById("level_1").disabled="";document.getElementById("level_1").style.zIndex="16";
$("#level_2").fadeTo(2000,1);document.getElementById("level_2").disabled="";document.getElementById("level_2").style.zIndex="16";
$("#level_3").fadeTo(2000,1);document.getElementById("level_3").disabled="";document.getElementById("level_3").style.zIndex="16";
$("#level_4").fadeTo(2000,1);document.getElementById("level_4").disabled="";document.getElementById("level_4").style.zIndex="16";
$("#level_5").fadeTo(2000,1);document.getElementById("level_5").disabled="";document.getElementById("level_5").style.zIndex="16";
}
function choose_level(opr)
{
level=opr;
$("#level_1").fadeTo(2000,0);document.getElementById("level_1").disabled="true";
$("#level_2").fadeTo(2000,0);document.getElementById("level_2").disabled="true";
$("#level_3").fadeTo(2000,0);document.getElementById("level_3").disabled="true";
$("#level_4").fadeTo(2000,0);document.getElementById("level_4").disabled="true";
$("#level_5").fadeTo(2000,0);document.getElementById("level_5").disabled="true";
$("#start_button").fadeTo(2000,1);document.getElementById("start_button").disabled="";document.getElementById("start_button").style.zIndex="22";
}
function open_Admin()
{
var password=prompt("输入管理员密码！","");
if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d")
{
Administrator_access=true;
alert("欢迎回来,权限狗！")
document.getElementById("go_through").disabled="";
}else
{
Administrator_access=true;
alert("你连权限狗都不是还装什么权限狗！")
document.getElementById("Admin_button").style.color="#D6D6D6";
}
document.getElementById("Admin_button").disabled="true";
$("#Admin_button").fadeTo(1000,0);
}
function auto_adjust()
{
var now_Height=document.documentElement.clientHeight;
var now_Width=document.documentElement.clientWidth;
if (now_Height>=700&&now_Width>=850)return;
var Height_ratio=now_Height/700;
var Width_ratio=now_Width/850;
adjust_ratio=Math.min(Height_ratio,Width_ratio);
var autocg=document.getElementsByTagName("meta")[1];
autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2);
}
$(function(){
auto_adjust();
$("#single_button").fadeTo(2000,1);
$("#double_button").fadeTo(2000,1);
$("#items_button").fadeTo(2000,1);
$("#rating_button").fadeTo(2000,1);
$("#Admin_button").fadeTo(2000,1);
});
</script>
</head>
</html>4.0：在线游戏模式与客户端兼容啦！现在游戏结束之后能提交成绩到排行榜了
1、在czx学长的指导下知道了有个东西叫前端库……改了一下jQuery的路径
2、支持游戏结束后成绩上传，写的比较挫，大家善待它……不要把服务器玩坏_(:3] <)_
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>crazy_snake_1</title>
<style type="text/css">
#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;}
.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;}
#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; }
#canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;z-index:3;}
.simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;}
#hide_page{position:fixed;top:0px;left:0px;height:700px;width:850px;background-color: #333333;opacity:0;z-index:1;}
#submit_page{position:absolute;left:31.56%;top:30.3%;width:245px;height:230px;opacity:0;background-color:#00FFFF;z-index:0;visibility:hidden;}
</style>
</head>
<body style="margin:0;">
<div id="select_page">
<button id="single_button"class="select_button"οnclick="choose_mode(1);"style="top:25%;left:25%;z-index:15;">单人模式</button>
<button id="double_button"class="select_button"οnclick="choose_mode(2);"style="top:25%;left:75%;z-index:15;">双人模式</button>
<button id="items_button"class="select_button"οnclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;z-index:15;"disabled="true">道具场</button>
<button id="rating_button"class="select_button"οnclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;z-index:15;"disabled="true">天梯排位赛</button>
<button id="start_button"class="select_button"οnclick="startgame(gamemode);"style="top:50%;left:50%;z-index:11;"disabled="true">开始游戏！</button>
<button id="Admin_button"class="select_button"οnclick="open_Admin();"style="top:25%;left:50%;z-index:20;">管理员权限狗</button>
<button id="level_1"class="select_button"οnclick="choose_level(1);"style="top:25%;left:25%;z-index:12;"disabled="true">极弱无比</button>
<button id="level_2"class="select_button"οnclick="choose_level(2);"style="top:25%;left:75%;z-index:12;"disabled="true">有点意思</button>
<button id="level_3"class="select_button"οnclick="choose_level(3);"style="top:50%;left:50%;z-index:12;"disabled="true">奥义很爽</button>
<button id="level_4"class="select_button"οnclick="choose_level(4);"style="top:75%;left:25%;z-index:12;"disabled="true">丧心病狂</button>
<button id="level_5"class="select_button"οnclick="choose_level(5);"style="top:75%;left:75%;z-index:12;"disabled="true">无双大王</button>
</div>
<div id="page" style="visibility:hidden;">
<div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div>
<div id="status">
<div id="score_table"class="simple_font_type"style="left:0px;width:120px;"><b>得分<span id="scores" style="color:red"></b></span></div>
<div id="bonus_table"class="simple_font_type"style="left:135px;"><span id="dcount"></span></div>
<div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div>
<button id="pause"class="simple_font_type"style="left:300px;"οnclick="judge_key(80)">暂停</button>
<div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div>
<button id="go_through"class="simple_font_type"style="left:600px;"οnclick="judge_key(69)" disabled="true">关闭</button>
</div>
<div id="submit_page" align="center">
<form name="upload" method="post" action="upload-for-online.php">
<p>
<label for="textfield">GameMod:</label>
<input name="GameMod" id="GameMod"></input>
</p>
<p>
<label for="textfield">Level :</label>
<input name="Level" id="Level"></input>
</p>
<p>
<label for="textfield">Name :</label>
<input type="text" name="Name" id="Name"value="Enter_Your_Name"></input>
</p>
<p>
<label for="textfield">Score :</label>
<input type="text" name="Score" id="Score"></input>
</p>
<p>
<label for="textfield">Food :</label>
<input type="text" name="Food" id="Food"></input>
</p>
<p>
<input type="submit" name="submit" id="submit" value="submit">
</p>
</form>
</div>
<div id="hide_page"></div>
</div>
</body>
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
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))};
var cell_size=20.0,Height=30,Width=40;
var map=new Array()//地图状态
for (var i=0;i<Width;i++)
{
map[i]=new Array()
for (var j=0;j<Height;j++) map[i][j]=0;//状态压缩：二进制0000：有无食物；有无道具；第二条蛇；第一条蛇
}
var snake_1=[];//坐标
var snake_2=[];
var c=null;//canvas
var time_interval=null;//移动
var draw_interval=null;//画图
var score=null,food1=0,food2=0,score_1=0,score_2=0;//分数
var direction_1=3,direction=4;//方向
var next_direction_1=3,next_direction_2=4;
var foodx=0,foody=0;
var length_1=4,length_2=4;//长度
var paused=false;//暂停状态
var getfood_1=false,getfood_2=false;//吃到食物
var through=false;//穿墙
var T=100;
var sx=0,sy=0,ex=0,ey=0;//手势
var Administrator_access=false;//管理员权限
var adjust_ratio=1.0;
var gamemode="";//游戏模式
var players=1;
var level=0;
var down_interval=null,dsum=0,bonus=false;//连续吃到食物的奖励分
function judge_key(opr)
{
if (paused==false)
{
if(opr==37&&direction_1!=1&&direction_1!=3)next_direction_1=1;//左
if(opr==38&&direction_1!=2&&direction_1!=4)next_direction_1=2;//上
if(opr==39&&direction_1!=1&&direction_1!=3)next_direction_1=3;//右
if(opr==40&&direction_1!=2&&direction_1!=4)next_direction_1=4;//下
if (players==2)
{
if(opr==65&&direction_2!=1&&direction_2!=3)next_direction_2=1;//a左
if(opr==87&&direction_2!=2&&direction_2!=4)next_direction_2=2;//w上
if(opr==68&&direction_2!=1&&direction_2!=3)next_direction_2=3;//d右
if(opr==83&&direction_2!=2&&direction_2!=4)next_direction_2=4;//s下
}
}
if(opr==80)//p
{
if(paused==true)
{
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
if (dsum>0)down_interval=setInterval(dcount,100);
paused=false;
document.getElementById('pause').innerHTML="暂停";
document.getElementById('pause_status').innerHTML="游戏进行中";
}else
{
clearInterval(move_interval);
clearInterval(draw_interval);
clearInterval(down_interval);
paused=true;
document.getElementById('pause').innerHTML="开始";
document.getElementById('pause_status').innerHTML="游戏已暂停";
}
}
if (opr==69&&Administrator_access==true)//e
{
if (through==true)
{
through=false;
document.getElementById('go_through').innerHTML="开启";
document.getElementById('go_through_walls').innerHTML="穿墙：关闭";
}else
{
through=true;
document.getElementById('go_through').innerHTML="关闭";
document.getElementById('go_through_walls').innerHTML="穿墙：开启";
}
}
}
function draw()
{
c.clearRect(0,0,cell_size*Width,cell_size*Height);
//======================================================================================蛇1
c.strokeStyle="#ffffff";//白
c.fillStyle="#0000ff";//深蓝
c.fillRect(snake_1[0].x*cell_size,snake_1[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[0].x*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,snake_1[0].y*cell_size);
c.lineTo((snake_1[0].x+1)*cell_size,(snake_1[0].y+1)*cell_size);
c.lineTo(snake_1[0].x*cell_size,(snake_1[0].y+1)*cell_size);
c.closePath();
c.stroke();
c.fillStyle="#66ffff";//浅蓝
for (var i=1;i<length_1;i++)
{
c.fillRect(snake_1[i].x*cell_size,snake_1[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_1[i].x*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,snake_1[i].y*cell_size);
c.lineTo((snake_1[i].x+1)*cell_size,(snake_1[i].y+1)*cell_size);
c.lineTo(snake_1[i].x*cell_size,(snake_1[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
//======================================================================================食物
c.fillStyle="#ffff00";//黄
c.strokeStyle="#ff0000";//红
c.fillRect(foodx*cell_size,foody*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(foodx*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,foody*cell_size);
c.lineTo((foodx+1)*cell_size,(foody+1)*cell_size);
c.lineTo(foodx*cell_size,(foody+1)*cell_size);
c.closePath();
c.stroke();
if (players==1)return;
//======================================================================================蛇2
c.strokeStyle="#ffffff";//白
c.fillStyle="#ff3333";//红
if((map[snake_2[0].x][snake_2[0].y]&1)!=0)c.fillStyle="#333333";//深灰
c.fillRect(snake_2[0].x*cell_size,snake_2[0].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[0].x*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,snake_2[0].y*cell_size);
c.lineTo((snake_2[0].x+1)*cell_size,(snake_2[0].y+1)*cell_size);
c.lineTo(snake_2[0].x*cell_size,(snake_2[0].y+1)*cell_size);
c.closePath();
c.stroke();
for (var i=1;i<length_2;i++)
{
c.fillStyle="#FFBDBD";//浅红
if((map[snake_2[i].x][snake_2[i].y]&1)!=0)c.fillStyle="#999999";//灰
c.fillRect(snake_2[i].x*cell_size,snake_2[i].y*cell_size,cell_size,cell_size);
c.beginPath();
c.moveTo(snake_2[i].x*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,snake_2[i].y*cell_size);
c.lineTo((snake_2[i].x+1)*cell_size,(snake_2[i].y+1)*cell_size);
c.lineTo(snake_2[i].x*cell_size,(snake_2[i].y+1)*cell_size);
c.closePath();
c.stroke();
}
}
function move()
{
var nx1=snake_1[0].x,ny1=snake_1[0].y;
direction_1=next_direction_1;next_direction_1=direction_1;
if (direction_1==1)nx1--;
if (direction_1==2)ny1--;
if (direction_1==3)nx1++;
if (direction_1==4)ny1++;
if (players==2)
{
var nx2=snake_2[0].x,ny2=snake_2[0].y;
direction_2=next_direction_2;next_direction_2=direction_2;
if (direction_2==1)nx2--;
if (direction_2==2)ny2--;
if (direction_2==3)nx2++;
if (direction_2==4)ny2++;
}
if (through)
{
if(nx1>=Width)nx1-=Width;if(nx1<0)nx1+=Width;
if(ny1>=Height)ny1-=Height;if(ny1<0)ny1+=Height;
}
if (through&&players==2)
{
if(nx2>=Width)nx2-=Width;if(nx2<0)nx2+=Width;
if(ny2>=Height)ny2-=Height;if(ny2<0)ny2+=Height;
}
if (judge_dead(nx1,ny1,1))return;
if (players==2&&judge_dead(nx2,ny2,2))return;
judge_eat(nx1,ny1,nx2,ny2);
if (getfood_1||getfood_2)add_food();
map[nx1][ny1]+=1;
snake_1.unshift({x:nx1,y:ny1});
if (getfood_1==false)
{
map[snake_1[length_1].x][snake_1[length_1].y]-=1;
snake_1.pop();
}
else
{
length_1++;
getfood_1=false;
}
if (players==2)
{
map[nx2][ny2]+=2;
snake_2.unshift({x:nx2,y:ny2});
if (getfood_2==false)
{
map[snake_2[length_2].x][snake_2[length_2].y]-=2;
snake_2.pop();
}
else
{
length_2++;
getfood_2=false;
}
}
}
function judge_eat(x1,y1,x2,y2)
{
var mrk1=(x1==foodx&&y1==foody),mrk2=(x2==foodx&&y2==foody);
if (mrk1){getfood_1=true;food1++;}if (mrk2){getfood_2=true;food2++;}
if (mrk1==false&&mrk2==false)return;
if (T>(5-level)*(6-level))T*=(1-level*0.01);
clearInterval(move_interval);move_interval=setInterval(move,T);
if (mrk1){score_1+=food1*level;if (bonus)score_1+=3*level*(food1-1);}
if (mrk2){score_2+=food2*level;if (bonus)score_2+=3*level*(food2-1);}
if (players==1)score.innerHTML=score_1;
if (players==2)score.innerHTML=score_1+":"+score_2;
bonus=true;dsum=10;document.getElementById("dcount").innerHTML=dsum;
document.getElementById("dcount").fontColor="#00CCFF";
document.getElementById("score_table").style.backgroundColor="#00CCFF";
clearInterval(down_interval);
down_interval=setInterval(dcount,1000);
}
function dcount()
{
dsum-=1;
if (dsum<0){clearInterval(down_interval);return;}
document.getElementById("dcount").innerHTML=dsum;
if (dsum==0){document.getElementById("score_table").style.backgroundColor="";bonus=false;}
}
function judge_dead(nx,ny,snake_number)
{
if (((nx<0||nx>=Width||ny<0||ny>=Height)&&through==false)||(map[nx][ny]&snake_number)!=0)
{
clearInterval(move_interval);
clearInterval(draw_interval);
clearInterval(down_interval);
document.getElementById("pause_status").innerHTML="你跪了QAQ";
document.getElementById("pause").disabled="true";
document.getElementById("go_through").disabled="true";
document.getElementById("page").removeEventListener("touchstart",touchStart,false);
document.getElementById("page").removeEventListener("touchend",touchEnd,false);
document.removeEventListener("keydown",jud,false);
submit_score();
return 1;
}
return 0;
}
function submit_score()
{
document.getElementById("submit_page").style.visibility="visible";
document.getElementById("hide_page").style.zIndex="20";
document.getElementById("submit_page").style.zIndex="30";
document.getElementById("GameMod").value=gamemode;
document.getElementById("Level").value=level;
if(players==1)document.getElementById("Score").value=score_1;
else document.getElementById("Score").value=score_1+":"+score_2;
if(players==1)document.getElementById("Food").value=food1;
else document.getElementById("Food").value=food1+":"+food2;
document.getElementById("GameMod").readOnly="true";
document.getElementById("Level").readOnly="true";
document.getElementById("Score").readOnly="true";
document.getElementById("Food").readOnly="true";
$("#submit_page").fadeTo(500,1);
$("#hide_page").fadeTo(1000,0.5);
}
function add_food()
{
map[foodx][foody]-=4;
foodx=-1;
foody=-1;
while(foodx<0||foody<0||foodx>=Width||foody>=Height||map[foodx][foody]!=0)
{
foodx=Math.floor(Math.random()*(Width-1));
foody=Math.floor(Math.random()*(Height-1));
}
map[foodx][foody]+=4;
}
function touchStart(event)
{
event.preventDefault;
event=event||window.event;
var touch=event.changedTouches[0];
sx=touch.pageX;
sy=touch.pageY;
}
function touchEnd(event)
{
event.preventDefault;
event=event||wondow.event;
var touch=event.changedTouches[0];
ex=touch.pageX;
ey=touch.pageY;
//tan(pi/9)=tan(20)=0.364
//tan(pi/6)=tan(30)=0.577
if (sx-ex>20&&Math.abs(ey-sy)/(sx-ex)<0.577)judge_key(37);
if (sy-ey>20&&Math.abs(ex-sx)/(sy-ey)<0.577)judge_key(38);
if (ex-sx>20&&Math.abs(ey-sy)/(ex-sx)<0.577)judge_key(39);
if (ey-sy>20&&Math.abs(ex-sx)/(ey-sy)<0.577)judge_key(40);
}
function jud(event)
{
var event=event||window.event;
judge_key(event.keyCode);
}
function startgame_SinglePlayer()//单人经典模式
{
players=1;
through=true;
score.innerHTML=0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]+=1;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.getElementById("page").addEventListener("touchstart",touchStart,false);
document.getElementById("page").addEventListener("touchend",touchEnd,false);
document.addEventListener("keydown",jud,false);
}
function startgame_DoublePlayer()//双人经典模式
{
players=2;
through=true;
score.innerHTML=0+":"+0;
for (var i=0;i<length_1;i++)
{
snake_1.unshift({x:i,y:0});
map[i][0]=map[i][0]+1;
}
for (var i=0;i<length_2;i++)
{
snake_2.unshift({x:0,y:i});
map[0][i]+=2;
}
map[foodx][foody]+=4;add_food();
draw();
move_interval=setInterval(move,T);
draw_interval=setInterval(draw,10);
document.addEventListener("keydown",jud,false);
}
function startgame(opr)
{
$("#start_button").fadeTo(1000,0);
$("#select_page").fadeTo(2000,0);document.getElementById("select_page").style.visibility="hidden";
document.getElementById("page").style.visibility="visible";
c=document.getElementById("screen").getContext("2d");
score=document.getElementById("scores");
paused=false;
if(opr=="SinglePlayer")startgame_SinglePlayer();
if(opr=="DoublePlayer")startgame_DoublePlayer();
}
function choose_mode(opr)
{
if (opr==1)gamemode="SinglePlayer";
if (opr==2)gamemode="DoublePlayer";
$("#single_button").fadeTo(1000,0);document.getElementById("single_button").disabled="true";document.getElementById("single_button").style.color="#D6D6D6";
$("#double_button").fadeTo(1000,0);document.getElementById("double_button").disabled="true";document.getElementById("double_button").style.color="#D6D6D6";
$("#items_button").fadeTo(1000,0);
$("#rating_button").fadeTo(1000,0);
$("#Admin_button").fadeTo(1000,0);document.getElementById("Admin_button").disabled="true";
$("#level_1").fadeTo(2000,1);document.getElementById("level_1").disabled="";document.getElementById("level_1").style.zIndex="16";
$("#level_2").fadeTo(2000,1);document.getElementById("level_2").disabled="";document.getElementById("level_2").style.zIndex="16";
$("#level_3").fadeTo(2000,1);document.getElementById("level_3").disabled="";document.getElementById("level_3").style.zIndex="16";
$("#level_4").fadeTo(2000,1);document.getElementById("level_4").disabled="";document.getElementById("level_4").style.zIndex="16";
$("#level_5").fadeTo(2000,1);document.getElementById("level_5").disabled="";document.getElementById("level_5").style.zIndex="16";
}
function choose_level(opr)
{
level=opr;
$("#level_1").fadeTo(2000,0);document.getElementById("level_1").disabled="true";
$("#level_2").fadeTo(2000,0);document.getElementById("level_2").disabled="true";
$("#level_3").fadeTo(2000,0);document.getElementById("level_3").disabled="true";
$("#level_4").fadeTo(2000,0);document.getElementById("level_4").disabled="true";
$("#level_5").fadeTo(2000,0);document.getElementById("level_5").disabled="true";
$("#start_button").fadeTo(2000,1);document.getElementById("start_button").disabled="";document.getElementById("start_button").style.zIndex="22";
}
function open_Admin()
{
var password=prompt("输入管理员密码！","");
if (hex_md5(password)=="4a629baa664b8537c61f9ad2f2a6040d")
{
Administrator_access=true;
alert("欢迎回来,权限狗！")
document.getElementById("go_through").disabled="";
}else
{
Administrator_access=true;
alert("你连权限狗都不是还装什么权限狗！")
document.getElementById("Admin_button").style.color="#D6D6D6";
}
document.getElementById("Admin_button").disabled="true";
$("#Admin_button").fadeTo(1000,0);
}
function auto_adjust()
{
var now_Height=document.documentElement.clientHeight;
var now_Width=document.documentElement.clientWidth;
if (now_Height>=700&&now_Width>=850)return;
var Height_ratio=now_Height/700;
var Width_ratio=now_Width/850;
adjust_ratio=Math.min(Height_ratio,Width_ratio);
var autocg=document.getElementsByTagName("meta")[1];
autocg.content="width=device-width,initial-scale="+adjust_ratio.toFixed(2);
}
$(function(){
auto_adjust();
$("#single_button").fadeTo(2000,1);
$("#double_button").fadeTo(2000,1);
$("#items_button").fadeTo(2000,1);
$("#rating_button").fadeTo(2000,1);
$("#Admin_button").fadeTo(2000,1);
});
</script>
</head>
</html>4.1：对代码结构进行比较大的调整
1、用结构体的写法重写了代码架构，感觉自己么么哒……
2、把js代码拆到文件里调用（虽然没什么实际用途但是看起来很爽）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>crazy_snake</title>
<style type="text/css">
#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;}
.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;}
#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; }
#canvas{max-width: 800px;max-height: 600px;display: block;border: 1px inset #666666;height: 600px;width: 800px;z-index:3;}
.simple_font_type{font-size: 15px;display:inline-block;top:602px;position: absolute;}
#hide_page{position:fixed;top:0px;left:0px;height:700px;width:850px;background-color: #333333;opacity:0;z-index:1;}
#submit_page{position:absolute;left:31.56%;top:30.3%;width:245px;height:230px;opacity:0;background-color:#00FFFF;z-index:0;visibility:hidden;}
</style>
</head>
<body style="margin:0;">
<div id="select_page">
<button id="single_button"class="select_button"οnclick="choose_mode(1);"style="top:25%;left:25%;z-index:15;">单人模式</button>
<button id="double_button"class="select_button"οnclick="choose_mode(2);"style="top:25%;left:75%;z-index:15;">双人模式</button>
<button id="items_button"class="select_button"οnclick="choose_mode(3);"style="top:75%;left:25%;color:#D6D6D6;z-index:15;"disabled="true">道具场</button>
<button id="rating_button"class="select_button"οnclick="choose_mode(4);"style="top:75%;left:75%;color:#D6D6D6;z-index:15;"disabled="true">天梯排位赛</button>
<button id="start_button"class="select_button"οnclick="startgame(gamemode);"style="top:50%;left:50%;z-index:11;"disabled="true">开始游戏！</button>
<button id="Admin_button"class="select_button"οnclick="open_Admin();"style="top:25%;left:50%;z-index:20;">管理员权限狗</button>
<button id="level_1"class="select_button"οnclick="choose_level(1);"style="top:25%;left:25%;z-index:12;"disabled="true">极弱无比</button>
<button id="level_2"class="select_button"οnclick="choose_level(2);"style="top:25%;left:75%;z-index:12;"disabled="true">有点意思</button>
<button id="level_3"class="select_button"οnclick="choose_level(3);"style="top:50%;left:50%;z-index:12;"disabled="true">奥义很爽</button>
<button id="level_4"class="select_button"οnclick="choose_level(4);"style="top:75%;left:25%;z-index:12;"disabled="true">丧心病狂</button>
<button id="level_5"class="select_button"οnclick="choose_level(5);"style="top:75%;left:75%;z-index:12;"disabled="true">无双大王</button>
</div>
<div id="page" style="visibility:hidden;">
<div id="canvas"><canvas id="screen" height=600px width=800px></canvas></div>
<div id="status">
<div id="score_table"class="simple_font_type"style="left:0px;width:120px;"><b>得分<span id="scores" style="color:red"></b></span></div>
<div id="bonus_table"class="simple_font_type"style="left:135px;"><span id="dcount"></span></div>
<div id="pause_status"class="simple_font_type"style="left:200px;">游戏进行中</div>
<button id="pause"class="simple_font_type"style="left:300px;"οnclick="judge_key(80)">暂停</button>
<div id="go_through_walls"class="simple_font_type"style="left:500px;">穿墙：开启</div>
<button id="go_through"class="simple_font_type"style="left:600px;"οnclick="judge_key(69)" disabled="true">关闭</button>
</div>
<div id="submit_page" align="center">
<form name="upload" method="post" action="upload-for-online.php">
<p>
<label for="textfield">GameMod:</label>
<input name="GameMod" id="GameMod"></input>
</p>
<p>
<label for="textfield">Level :</label>
<input name="Level" id="Level"></input>
</p>
<p>
<label for="textfield">Name :</label>
<input type="text" name="Name" id="Name"value="Enter_Your_Name"></input>
</p>
<p>
<label for="textfield">Score :</label>
<input type="text" name="Score" id="Score"></input>
</p>
<p>
<label for="textfield">Food :</label>
<input type="text" name="Food" id="Food"></input>
</p>
<p>
<input type="submit" name="submit" id="submit" value="submit">
</p>
</form>
</div>
<div id="hide_page"></div>
</div>
</body>
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js"></script>
<script src="crazy_snake.js"></script>
</head>
</html>
更多内容敬请期待……
——hzwer是我学长，我是他小号
3719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
