用html和js写一个完整的贪吃蛇游戏，需要完整代码

大瓶可乐@php.cn: 2024-11-04 120浏览

摘要：

构建一个贪吃蛇游戏需要 HTML、CSS 和 JavaScript 的结合。HTML 用于创建游戏界面，而 CSS 用于设计游戏各元素的样式。JavaScript 负责游戏的逻辑，包括移动蛇、检测碰撞和管理游戏状态。

完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>贪吃蛇</title>
  <style>
    #gameboard {
      width: 500px;
      height: 500px;
      border: 1px solid black;
    }

    #snake {
      width: 10px;
      height: 10px;
      background-color: green;
    }

    #food {
      width: 10px;
      height: 10px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="gameboard"></div>
  <script>
    var snake = [
      { x: 200, y: 200 },
      { x: 190, y: 200 },
      { x: 180, y: 200 },
      { x: 170, y: 200 },
      { x: 160, y: 200 },
    ];

    var food = { x: 100, y: 100 };

    var dx = 10;
    var dy = 0;

    function drawSnake() {
      for (var i = 0; i < snake.length; i++) {
        var snakePart = snake[i];
        $("#gameboard").append("<div id='snake' style='top:" + snakePart.y + "px; left:" + snakePart.x + "px;'></div>");
      }
    }

    function drawFood() {
      $("#gameboard").append("<div id='food' style='top:" + food.y + "px; left:" + food.x + "px;'></div>");
    }

    function moveSnake() {
      var head = {
        x: snake[0].x + dx,
        y: snake[0].y + dy
      };

      snake.unshift(head);

      if (snake[0].x == food.x && snake[0].y == food.y) {
        food.x = Math.floor(Math.random() * 490) + 10;
        food.y = Math.floor(Math.random() * 490) + 10;
      } else {
        snake.pop();
      }
    }

    $(document).keydown(function(e) {
      switch (e.which) {
        case 37: // left
          dx = -10;
          dy = 0;
          break;
        case 38: // up
          dx = 0;
          dy = -10;
          break;
        case 39: // right
          dx = 10;
          dy = 0;
          break;
        case 40: // down
          dx = 0;
          dy = 10;
          break;
      }
    });

    function startGame() {
      drawSnake();
      drawFood();
      setInterval(moveSnake, 100);
    }

    startGame();
  </script>
</body>
</html>

总结：

上述代码包含了创建贪吃蛇游戏所需的所有必要元素，包括表示蛇和食物的 HTML 元素、跟踪游戏状态并处理移动逻辑的 JavaScript 代码，以及定义样式的 CSS 代码。通过结合 HTML、CSS 和 JavaScript，可以创建出一个可以玩且具有响应性的贪吃蛇游戏。

提问点赞

php中文网免责声明：以上内容除特别注明外均来源于网友提问，php中文网回答，权益归原著者所有；

用html和js写一个完整的贪吃蛇游戏，需要完整代码

热门问题