分享一个用html5实现的贪吃蛇特效代码

百变鹏仔 2个月前 (10-18) #H5教程
文章标签贪吃蛇
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码，喜欢的小伙伴们可以看一下
<html>    <head>        <meta charset=&#39;utf-8&#39;/>        <title>Snake</title>    </head>    <body>        <canvas id="plank" style="border"></canvas>        <script type="text/javascript">            //内置大量BUG，I&#39;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(&#39;plank&#39;);            var context = canvas.getContext(&#39;2d&#39;);            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(&#39;\\tGame over&#39;);                        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(&#39;P键开始/暂停，方向键控制&#39;,0,350);                drawScore(&#39;&#39;);                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>
【
文章推荐
分享一个用html5实现的贪吃蛇特效代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集
