【搬运】贪吃蛇!!!

javascript 同时被 2 个专栏收录
1 篇文章 0 订阅
1 篇文章 0 订阅

原创作品,转载请注明来源

——搬运自我的另一个博客……(这算骗访问量吗?!读书人的事……)



估计没几个人会想到研究性学习搞加各种特效的贪吃蛇的吧

把这几周搞研究性学习的结果记录一下

本人负责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是我学长,我是他小号
展开阅读全文
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

zhb1997

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值