These 32 files and commands come from the same configuration used by the download.
Entry point: src/main.ts
import { createUI } from "./ui"
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera"
import { Engine } from "@babylonjs/core/Engines/engine"
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight"
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial"
import { Color3, Color4 } from "@babylonjs/core/Maths/math.color"
import { Vector3 } from "@babylonjs/core/Maths/math.vector"
import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder"
import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder"
import { CreateSphere } from "@babylonjs/core/Meshes/Builders/sphereBuilder"
import { Scene } from "@babylonjs/core/scene"
import "./style.css"
import { advanceScore } from "./score"
import { createSimulation } from "./simulation"
import { createInput } from "./input"
const simulation = createSimulation({ x: 0, y: 0, speed: 5, minX: -7.5, maxX: 7.5, minY: -5.5, maxY: 5.5 })
const canvas = document.createElement("canvas")
canvas.setAttribute("aria-label", "3D game. Use arrow keys to collect gold.")
canvas.tabIndex = 0
document.querySelector("#game")?.append(canvas)
const controls = createInput(canvas)
const engine = new Engine(canvas, true)
const scene = new Scene(engine)
scene.clearColor = new Color4(0.04, 0.08, 0.12, 1)
new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 3, 18, Vector3.Zero(), scene)
new HemisphericLight("light", new Vector3(0, 1, 0), scene)
const ground = CreateGround("ground", { width: 16, height: 12 }, scene)
const groundMaterial = new StandardMaterial("ground-material", scene)
groundMaterial.diffuseColor = new Color3(0.1, 0.2, 0.25)
ground.material = groundMaterial
const player = CreateBox("player", { size: 0.7 }, scene)
player.position.y = 0.35
const playerMaterial = new StandardMaterial("player-material", scene)
playerMaterial.diffuseColor = new Color3(0.7, 0.96, 0.42)
player.material = playerMaterial
const collectible = CreateSphere("collectible", { diameter: 0.55 }, scene)
collectible.position.set(3, 0.5, 0)
const gold = new StandardMaterial("gold", scene)
gold.diffuseColor = new Color3(1, 0.7, 0.3)
collectible.material = gold
const ui = createUI()
window.addEventListener("pagehide", () => ui.dispose(), { once: true })
let score = 0
scene.onBeforeRenderObservable.add(() => {
scene.physicsEnabled = !ui.isPaused()
if (ui.isPaused()) return
const position = simulation.step(controls.read(), engine.getDeltaTime() / 1000)
player.position.x = position.x
player.position.z = -position.y
if (Vector3.Distance(player.position, collectible.position) < 0.8) {
score = advanceScore(score)
const label = document.querySelector("#score")
if (label) label.textContent = "Collected: " + score
collectible.position.set(Math.random() * 14 - 7, 0.5, Math.random() * 10 - 5)
}
})
engine.runRenderLoop(() => scene.render())
window.addEventListener("resize", () => engine.resize())
window.addEventListener("pagehide", () => { scene.dispose(); engine.dispose() }, { once: true })