html5超简单贪吃蛇

2021-09-24 10:30:14 浏览数 (1)

代码语言:javascript复制
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Snake</title>
    </head>
    <body>
        <canvas id="plank" style="border"></canvas>
        <script type="text/javascript">
            //内置大量BUG,I'm sorry.
            var lev=100;                //定时器间隔时间
            var num=30;             //网格大小,现在是30x30
            var direction=3;            //0:up  1:down  2:left  3:right
            var handle;             //用于管理定时器
            var score=0;                //分数
            var pause=true;         //暂停使用
            var canvas = document.getElementById('plank');
            var context = canvas.getContext('2d');
            var snakex=new Array();     //存储蛇身x坐标,下同
            var snakey=new Array();
            var prize=new Array(-1,-1);     //食物的位置

        function rand(){            //产生随机数
            return parseInt(Math.random()*num);
        }

        function chk(x,y){          //检查是否结束,包括越界
            if(x<0||y<0) return false;
            if(x>num-1||y>num-1) return false;
            for (var i=0; i!=snakex.length-1;i  ) {
                if(snakex[i]==x&&snakey[i]==y) {return false;}
            };
            return true;
        }

        function drawScore(text){       //打印分数
            context.clearRect(0,0,300,25);
            context.fillText("Score:" text,5,5);
        }

        function makeprize(){           //产生食物的位置
            var flag=false;
            var prizepre=new Array(2);  //使用链表会更好
            while(!flag){           //食物位置不能在蛇体内
                flag=true;
                prizepre[0]=rand();prizepre[1]=rand();
                for (var i=0; i!=snakex.length;i  ) {
                    if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;}
                }
            }
            prize=prizepre;
        }

        function runscore(x,y){     //判断是否吃到食物,并做处理
            if(prize[0]==x&&prize[1]==y){
                score=score 1;
                drawScore(score);
                snakex[snakex.length]=prize[0];
                snakey[snakey.length]=prize[1];
                makeprize();
                drawNode(prize[0],prize[1]);
                return true;
            }
            return false;
        }

        function run(){             //定时器用来判断snake行进方向等等
            switch(direction){          //方向
                case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break;
                case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1] 1;break;
                case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break;
                case 3: snakex[snakex.length]=snakex[snakex.length-1] 1;snakey[snakey.length]=snakey[snakey.length-1];break;
            }
            if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){
                if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) {
                    clearInterval(handle);
                    drawScore('\tGame over');
                    return;
                }
                drawNode(snakex[snakex.length-1],snakey[snakey.length-1]);
            }
            clearNode(snakex[0],snakey[0]);
            snakex.shift();
            snakey.shift();
        }

        function drawNode(x,y){     //画点,共30X30个点(10*10像素算1个点)
            context.fillRect(x*10 1,y*10 31,10,10);
        }

        function clearNode(x,y){
            context.clearRect(x*10 1,y*10 31,10,10);
        }

        function init(){        //初始化,设置画布大小,启动定时器等等
            canvas.width = 510;
            canvas.height = 600;
            context.font = "normal 20px Airl";
            context.textBaseline = "top";
            context.fillText('P键开始/暂停,方向键控制',0,350);
            drawScore('');
            context.strokeRect(0,30,302,302);
            makeprize();
            drawNode(prize[0],prize[1]);
            snakex[0]=0;snakex[1]=1;snakex[2]=2;
            snakey[0]=0;snakey[1]=0;snakey[2]=0;
            drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]);
        }

        document.onkeydown=function(event){     //注册键盘事件,up,down,left,right,暂停键p
            var e = event || window.event;
            if(e&&e.keyCode==38){
                direction=0;
            }
            if(e&&e.keyCode==40){
                direction=1;
            }
            if(e&&e.keyCode==37){
                direction=2;
            }
            if(e&&e.keyCode==39){
                direction=3;
            }
            if(e&&e.keyCode==80){
                if(pause) {pause=false;handle=setInterval(run,lev);}
                else {pause=true;clearInterval(handle);}
            }
        }


        init();
    </script>
</body>

</html>
</pre> 

0 人点赞