html5超簡單貪吃蛇

fdpg 9年前發布 | 10K 次閱讀 JavaScript HTML5 

 
<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>
 本文由用戶 fdpg 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！