学习1-js开发实现简单贪吃蛇游戏

最新推荐文章于 2024-05-02 14:46:08 发布

Gyoung阿广

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： js开发实现简单贪吃蛇游戏

本文链接：https://blog.csdn.net/u012755393/article/details/51338044

版权

JavaScript 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

学习1-js开发实现简单贪吃蛇游戏

<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background:Black"></canvas>
<script>
    var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("can").getContext("2d");
    function draw(t,c){
        ctx.fillStyle=c;
        ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
    }
    document.οnkeydοwn=function(e){fx=sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
    !function(){
        sn.unshift(n=sn[0]+fx);
        if(sn.indexOf(n,1)>0 || n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) return alert("GAME OVER");
        draw(n,"Lime");
        if(n==dz){
            while(sn.indexOf(dz=~~(Math.random()*400))>=0);
            draw(dz,"Yellow");
        }else
            draw(sn.pop(),"Black");
        setTimeout(arguments.callee,130);
    }();
</script>
</body>
</html>