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

最新推荐文章于 2024-04-28 17:47:23 发布

晚安你

最新推荐文章于 2024-04-28 17:47:23 发布

阅读量645

点赞数

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_47439712/article/details/109205147

版权

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

<!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>