一文搞懂Three.js手写跳一跳小游戏的核心代码（下）

动态生成随机方块，让跳一跳小游戏更刺激！

想象一下，在节奏明快的跳一跳游戏中，在你前方不断生成一个个大小不一、方向随机的方块，而你需要灵敏地控制角色跳跃，踩着这些方块不断前进。这就是我们今天要实现的，为 Three.js 跳一跳小游戏添加动态生成随机方块的功能！

动态生成方块

首先，我们创建了一个 createCube 函数，它接受方块的大小和位置作为参数，并返回一个新的方块对象。这个函数使用 Three.js 的几何体和材质创建了一个简单的立方体。

function createCube(size, position) {
  const geometry = new THREE.BoxGeometry(size, size, size);
  const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
  const cube = new THREE.Mesh(geometry, material);
  cube.position.copy(position);
  return cube;
}

在游戏循环中，我们调用这个函数来生成方块。我们把它放在角色移动之后，这样总有一个方块在角色前面。

function gameLoop() {
  // ...

  // 动态生成方块
  const cube = createCube(1, new THREE.Vector3(0, 0, -1));
  scene.add(cube);

  // ...
}

随机生成方块

接下来，我们修改 createCube 函数，使其能够随机生成方块的位置和方向。

function createCube(size, position) {
  // ...

  // 随机生成方块的位置和方向
  const randomX = Math.random() * 2 - 1;
  const randomY = Math.random() * 2 - 1;
  const randomZ = Math.random() * 2 - 1;
  const randomPosition = new THREE.Vector3(randomX, randomY, randomZ);
  randomPosition.normalize();
  randomPosition.multiplyScalar(10);
  cube.position.copy(randomPosition);

  // ...
}

现在，每次调用 createCube 函数时，都会生成一个随机位置和方向的方块，让游戏更具挑战性和趣味性。

碰撞检测

最后，我们需要检测角色是否与方块发生碰撞。为此，我们使用 Three.js 的内置碰撞检测器。

function checkCollision() {
  // 获取角色的包围盒
  const characterBoundingBox = character.geometry.boundingBox;

  // 获取所有方块的包围盒
  const cubes = scene.children.filter((object) => object instanceof THREE.Mesh);
  const cubeBoundingBoxes = cubes.map((cube) => cube.geometry.boundingBox);

  // 检测角色与方块是否发生碰撞
  for (let i = 0; i < cubeBoundingBoxes.length; i++) {
    if (characterBoundingBox.intersectsBox(cubeBoundingBoxes[i])) {
      // 角色与方块发生碰撞
      return true;
    }
  }

  // 角色与方块没有发生碰撞
  return false;
}

在游戏循环中，我们调用 checkCollision 函数来检测碰撞。如果检测到碰撞，可以执行相应的操作，例如重新开始游戏。

function gameLoop() {
  // ...

  // 检测碰撞
  const collision = checkCollision();
  if (collision) {
    // 角色与方块发生碰撞
    // ...
  }

  // ...
}

结论

恭喜你！通过动态生成随机方块和添加碰撞检测，我们为跳一跳小游戏增添了更多刺激性和挑战性。随着你不断练习，你可以掌握跳跃的时机，灵活地控制角色躲避方块，取得更高的分数。

常见问题解答

• 如何调整方块生成频率？
  在 gameLoop 函数中，可以通过更改生成方块的频率来调整方块生成频率。

• 如何改变方块的大小？
  在 createCube 函数中，可以更改 size 参数来改变方块的大小。

• 如何让方块移动更平滑？
  可以通过使用补间或平滑运动算法让方块移动更平滑。

• 如何让方块有不同的颜色？
  在 createCube 函数中，可以通过更改 material 的 color 属性让方块有不同的颜色。

• 如何让方块有不同的形状？
  Three.js 提供了多种几何体，你可以使用它们来创建不同形状的方块。