温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

用html5实现的贪吃蛇特效的案例

发布时间:2020-10-20 16:14:14 来源:亿速云 阅读:170 作者:小新 栏目:web开发

这篇文章主要介绍了用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>

感谢你能够认真阅读完这篇文章,希望小编分享用html5实现的贪吃蛇特效的案例内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI