main.js

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Set up the Lunar Lander
const landerGeometry = new THREE.BoxGeometry();
const landerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const lander = new THREE.Mesh(landerGeometry, landerMaterial);
scene.add(lander);

// Set up the ground
const groundGeometry = new THREE.PlaneGeometry(5, 5);
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = Math.PI / 2;
scene.add(ground);

// Position camera and lander
camera.position.z = 5;
lander.position.y = 2;

// Handle user input
const onKeyDown = (event) => {
  if (event.code === "Space") {
    lander.position.y += 0.1;
  }
};

document.addEventListener("keydown", onKeyDown);

// Game loop
const animate = () => {
  requestAnimationFrame(animate);

  // Update lander position
  lander.position.y -= 0.01;

  // Check for successful landing
  if (lander.position.y <= 0.5 && Math.abs(lander.rotation.z) < 0.1) {
    console.log("Landed successfully!");
    // TODO: Transition to the Asteroids game
  }

  renderer.render(scene, camera);
};

animate();