使用 Bootstrap 和 JavaScript 创建一个简单的 WASD 控制游戏

本教程将指导您如何使用 Bootstrap 和 JavaScript 创建一个简单的游戏，其中玩家可以使用 WASD 键进行移动。

示例代码：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Bootstrap Game</title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
  <style>
    #player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id='player'></div>

  <script>
    document.addEventListener('keydown', function(event) {
      const player = document.getElementById('player');
      const step = 10;
      let top = parseInt(player.style.top) || 0;
      let left = parseInt(player.style.left) || 0;

      switch (event.key) {
        case 'w':
          top -= step;
          break;
        case 'a':
          left -= step;
          break;
        case 's':
          top += step;
          break;
        case 'd':
          left += step;
          break;
      }

      player.style.top = top + 'px';
      player.style.left = left + 'px';
    });
  </script>
</body>
</html>

解释：

HTML 结构：
- 我们创建一个 div 元素，并使用 id='player' 来标识玩家。
- 包含 Bootstrap 的 CSS 文件。
- 在 <style> 标签中添加 CSS 样式，定义玩家的外观（一个红色的正方形）。
JavaScript 代码：
- 我们使用 document.addEventListener('keydown', ...) 监听键盘按下事件。
- 当按键按下时，我们获取玩家元素的 top 和 left 样式值，并根据按下的键进行相应的移动。
- switch 语句根据按键值（'w', 'a', 's', 'd'）更新玩家的位置。
- 玩家的移动步长由 step 变量控制。
- 最后，我们将更新后的 top 和 left 值应用到玩家元素的样式。

运行结果：

当您加载此 HTML 文件时，您将看到一个红色的正方形在屏幕中央。使用 WASD 键可以控制正方形的移动。

进一步扩展：

添加更多元素（例如，障碍物、目标）来使游戏更有趣。
使用更复杂的游戏逻辑和动画来增强游戏体验。
使用 JavaScript 库来简化游戏开发过程。

使用 Bootstrap 和 JavaScript 创建一个简单的 WASD 控制游戏