贪吃蛇小游戏css+javascript代码实现（全）

「爱情、让人受尽委屈。」 2022-12-17 03:27 186阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>贪吃蛇</title>
      <style>
        body {
          display: flex;
          height: 100vh;
          margin: 0;
          padding: 0;
          justify-content: center;
          align-items: center;
        }
      </style>
    </head>
    
    
    <body>
      <script>
    
        var snake = [40, 40];   //蛇身
        var direction = 1;      //方向
        var food = 43;          //食物的位置
        var n;                  // 下一个蛇头的位置
        var box = document.getElementById('game').getContext('2d');
        // 绘制每个点位
        var draw = function (seat, color) {
          box.fillStyle = color;
          box.fillRect(seat % 20 * 20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
        }
        document.onkeydown = function (e) {
          console.log(e.keyCode)
          // 获取蛇头方向
          /*
              e.keyCode 键盘按键Unicode值 左上右下分别对应 37,38,39,40,
              snake[1] - snake[0] : 获得蛇当前的方向
              n = [-1, -20, 1, 20][(e.keyCode - 37)] || direction 获得用户期望的方向
                  [-1, -20, 1, 20][(e.keyCode - 37)] || direction
                  根据当前用户按键, 取值. 如果用户按下的不是 "左上右下" e.keyCode - 37 
                  的范围一定不再 0,1,2,3 这几个数字范围内
                  所以后面跟一个 ||   direction, 这样的算法可以得出      
                  n 要么等于用户期望的方向, 要么等于当前蛇头的方向     
              蛇头方向 = 当前方向 === 用户期望的方向 ? 当前方向 : 用户期望的方向
          */
          direction = snake[1] - snake[0] == (
            n = [-1, -20, 1, 20][(e.keyCode - 37)] || direction
          ) ? direction : n;
        }
          ; (function () {
            snake.unshift(n = snake[0] + direction); // 得出蛇头的位置: 蛇头 + 方向
            // 碰撞检测
            if (
              (snake.indexOf(n, 1) > 0) ||    // 撞上蛇身
              (n < 0) ||                      // 撞墙 上
              (n > 399) ||                    // 撞墙 下
              (direction === 1 && n % 20 === 0) || // 撞墙 右
              (direction === -1 && n % 20 === 19)  // 撞墙 做
            ) {
              // return console.log('game over')
              return alert('您可真菜！！！')
            }
            // 绘制蛇头
            draw(n, 'red');
            if (n === food) {
              // 得到下一个食物的位置
              while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
              // 绘制下一个食物
              draw(food, 'yellow');
            } else {
              // 蛇尾出列
              draw(snake.pop(), 'black');
            }
            setTimeout(arguments.callee, 150);
          })();
    
      </script>
    </body>
    
    </html>