JS 20行代码贪吃蛇

作者: 索隆萨克 | 来源:发表于2018-10-08 17:39 被阅读103次

贪吃蛇
前端大神作品推荐
贪吃蛇
JS高级学习:贪吃蛇案例
JS 20行代码贪吃蛇
贪吃蛇练习（html 、JS）
不小心用js重做了一遍贪吃蛇
Day12-用pygame写贪吃蛇游戏
JS编写的贪吃蛇Dome
WEB 八

效果

image.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇重构</title>
    <style>
        body {
            display: flex;
            height: 100vh;
            margin: 0;
            padding: 0;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
    <script>
        var snake = [41, 40],       //snake队列表示蛇身，初始节点存在但不显示
            direction = 1,          //1表示向右，-1表示向左，20表示向下，-20表示向上
            food = 43,              //食物的位置
            n,                      //与下次移动的位置有关
            box = document.getElementById('can').getContext('2d');
                                    //从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点
        function draw(seat, color) {
            box.fillStyle = color;
            box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
                                    //用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。
        }
        document.onkeydown = function(evt) {    
                                    //当键盘上下左右键摁下的时候改变direction
            direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
        };
        !function() {
            snake.unshift(n = snake[0] + direction);    
                                    //此时的n为下次蛇头出现的位置，n进入队列
            if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
                                    //if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序
                return alert("GAME OVER!");
            }
            draw(n, "lime");        //画出蛇头下次出现的位置
            if(n == food) {         //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
                while (snake.indexOf(food = ~~(Math.random() * 400)) >= 0);
                draw(food, "yellow");
            } else {                //没有吃到食物时正常移动，蛇尾出队列
                draw(snake.pop(),"black");
            }
            setTimeout(arguments.callee, 150);      
                                    //每隔0.15秒执行函数一次，可以调节蛇的速度
        }();
    </script>
</body>
</html>