贪吃蛇(js小游戏)

来源:互联网 发布:课时统计软件app 编辑:程序博客网 时间:2024/03/28 16:48
<!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>

原创粉丝点击