20 行 JS 代码实现贪吃蛇

2017-06-14 14:19:42 +08:00
 caiyongji
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20 行 JS 代码实现贪吃蛇</title>
</head>
<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,~~(t/20)*20,18,18);
    }
    document.onkeydown=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,500);
    }();
    </script>
</body>
</html>
2293 次点击
所在节点    JavaScript
4 条回复
qq292382270
2017-06-14 15:53:18 +08:00
不会前端的人看起来觉得好 NB ...
580a388da131
2017-06-14 18:06:57 +08:00
xiaojunjor
2017-06-16 09:58:41 +08:00
这是 csdn 的 jslang 写的吧,很久之前了
pyufftj
2017-06-17 10:00:39 +08:00
有点注释就更好了。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/368341

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX