体验不一样的推箱子小游戏，带你走进ThreeJs的世界

2023-04-04 18:52:11

用 Three.js 制作推箱子游戏：初学者指南

创建游戏场景

准备开始你的 Three.js 之旅了吗？ Three.js 是一款功能强大的 JavaScript 库，可以轻松创建引人入胜的 3D 图形。首先，创建一个场景，这是容纳所有游戏对象的容器。然后添加一个透视相机，定义观察者的视角。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;

添加对象到场景中

下一步是添加对象，例如立方体、球体或圆柱体。通过定义几何形状和材质，可以创建各种形状。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

渲染场景

最后，渲染场景，将 3D 对象转换为 2D 图像。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

游戏的基本逻辑

移动玩家

使用键盘事件控制玩家的移动。

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') {
    player.position.z += 1;
  } else if (event.key === 'ArrowDown') {
    player.position.z -= 1;
  } else if (event.key === 'ArrowLeft') {
    player.position.x -= 1;
  } else if (event.key === 'ArrowRight') {
    player.position.x += 1;
  }
});

移动箱子

当玩家移动时，箱子也移动，使其保持在玩家前面。

if (player.position.x === box.position.x && player.position.z === box.position.z) {
  if (event.key === 'ArrowUp') {
    box.position.z += 1;
  } else if (event.key === 'ArrowDown') {
    box.position.z -= 1;
  } else if (event.key === 'ArrowLeft') {
    box.position.x -= 1;
  } else if (event.key === 'ArrowRight') {
    box.position.x += 1;
  }
}

检测胜利条件

当箱子移动到目标位置时，游戏获胜。

if (box.position.x === goal.position.x && box.position.z === goal.position.z) {
  alert('You win!');
}

示例代码

// 场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;

// 玩家
const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const player = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(player);

// 箱子
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);

// 目标
const goalGeometry = new THREE.BoxGeometry(1, 1, 1);
const goalMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const goal = new THREE.Mesh(goalGeometry, goalMaterial);
goal.position.set(5, 0, 5);
scene.add(goal);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();