尽享奇趣，运筹帷幄：three.js 推箱子小游戏大显身手

2023-10-26 19:23:28

大家好，欢迎来到 three.js 推箱子游戏世界的第三章。上一章中，我们生成了游戏的场景。现在，让我们携手并进，赋予它以互动功能，实现键盘操控、人物移动、箱子移动以及移动动画效果。

1. 聆听键盘的指令

首先，我们需要让游戏能够响应玩家的指令，这就意味着监听键盘事件。three.js 提供了丰富的事件监听器，让我们轻松实现这一目标。

// 监听键盘按下事件
document.addEventListener('keydown', (event) => {
  // 这里我们处理键盘按下事件
  switch (event.key) {
    case 'ArrowUp':
      // 上箭头键被按下，执行人物向上移动
      movePlayer('up');
      break;
    case 'ArrowDown':
      // 下箭头键被按下，执行人物向下移动
      movePlayer('down');
      break;
    case 'ArrowLeft':
      // 左箭头键被按下，执行人物向左移动
      movePlayer('left');
      break;
    case 'ArrowRight':
      // 右箭头键被按下，执行人物向右移动
      movePlayer('right');
      break;
  }
});

2. 人物的灵动脚步

接下来，让我们让人物在三维世界中行走。我们会将人物移动的逻辑封装成一个函数，然后在监听键盘事件的代码中调用它。

function movePlayer(direction) {
  // 获取人物当前的位置
  const playerPosition = player.position;

  // 根据不同的方向，计算出人物新的位置
  switch (direction) {
    case 'up':
      playerPosition.z -= 1;
      break;
    case 'down':
      playerPosition.z += 1;
      break;
    case 'left':
      playerPosition.x -= 1;
      break;
    case 'right':
      playerPosition.x += 1;
      break;
  }

  // 将人物移动到新位置
  player.position.set(playerPosition.x, playerPosition.y, playerPosition.z);
}

3. 箱子的巧妙移动

箱子移动的逻辑与人物移动的逻辑十分相似。我们会创建一个类似的函数来处理箱子的移动。

function moveBox(direction) {
  // 获取箱子当前的位置
  const boxPosition = box.position;

  // 根据不同的方向，计算出箱子新的位置
  switch (direction) {
    case 'up':
      boxPosition.z -= 1;
      break;
    case 'down':
      boxPosition.z += 1;
      break;
    case 'left':
      boxPosition.x -= 1;
      break;
    case 'right':
      boxPosition.x += 1;
      break;
  }

  // 将箱子移动到新位置
  box.position.set(boxPosition.x, boxPosition.y, boxPosition.z);
}

4. 灵动动画，悦享视觉盛宴

为了让游戏更加生动，我们为人物和箱子的移动添加了动画效果。three.js 的动画系统十分强大，我们可以轻松实现这一目标。

// 为人物移动添加动画效果
player.userData.moveAnimation = gsap.timeline()
  .to(player.position, {
    duration: 0.5,
    ease: "power2.out",
    x: playerPosition.x,
    z: playerPosition.z
  });

// 为箱子移动添加动画效果
box.userData.moveAnimation = gsap.timeline()
  .to(box.position, {
    duration: 0.5,
    ease: "power2.out",
    x: boxPosition.x,
    z: boxPosition.z
  });