demo地址:

https://lyf521.github.io/docs/blog/animation/snake.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇</title>
  6.     <style>
  7.         body{
  8.             width: 100%;
  9.             display: flex;
  10.             height: 100vh;
  11.             margin: 0;
  12.             padding: 0;
  13.             justify-content: center;
  14.             align-content: center;
  15.             align-items: center;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <h4>键盘上下左右键控制</h4>
  21.     <div>
  22.         <canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
  23.     </div>
  24.     <script>
  25.         var snake = [41, 40],   // snake队列表示蛇身，初始节点存在但是不显示
  26.           direction = 1,    // 1 - 向右， -1 - 向左， 20 - 向下， -20 - 向上
  27.           food = 43,    // 食物的位置
  28.           n,    // 与下次移动的位置有关
  29.           box = document.getElementById('can').getContext('2d');
  30.             // 从0到399表示box里 [0-19]*[0-19]的所有节点，每20px一个节点
  32.         function draw(seat, color) {
  33.            box.fillStyle = color;
  34.            box.fillRect(seat % 20 * 20 + 1, ~~(seat / 20) * 20 +1, 18, 18)  // ~~对一个浮点型的数取反再取反，得到的数就是去掉小数位的整数了
  35.            //用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高
  36.         }
  38.         document.onkeydown = function (evt) {
  39.             //当键盘上下左右键摁下的时候改变direction
  40.            // 键值 左 - 37 ，右 - 39， 上 - 38， 下 - 40
  41.            direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
  42.         }
  44.         !function () {
  45.            // 此时的n为下次蛇头出现的位置，n进入队列
  46.            snake.unshift(n = snake[0] + direction);
  48.            if (snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19){
  49.               // if 语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序
  50.               return alert('GAME OVER - 游戏结束!')
  51.            }
  53.            draw(n, 'lime')  // 画出蛇头下次出现的位置
  55.            if(n == food) {
  56.               // 如果吃到食物，产生一个蛇身以外的随机的点，不会去掉蛇尾
  57.               while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
  58.               draw(food, 'yellow')
  59.            } else {
  60.               // 没有吃到食物继续移动，蛇尾出队列
  61.               draw(snake.pop(), 'black')
  62.            }
  64.            // 每隔0.15s执行一次函数，可以调节蛇的速度
  65.            // callee 是 arguments 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数,已废弃
  66.            setTimeout(arguments.callee, 220)
  67.         }();
  68.     </script>
  69. </body>
  70. </html>