3D Endless Runner Game with Three.js and JavaScript

54 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

3D Endless Runner Game with Three.js and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random 3D HTML Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #111;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            pointer-events: none;
        }
        #gameover {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff3333;
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
            display: none;
        }
        #restart-btn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
            font-weight: bold;
            background: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.2s;
        }
        #restart-btn:hover {
            background: #ddd;
        }
    </style>
    
    <script src="https://cloudflare.com"></script>
</head>
<body>

<div id="ui">Score: <span id="score">0</span></div>
    <div id="gameover">
        GAME OVER
        <br>
        <button id="restart-btn" onclick="resetGame()">Play Again</button>
    </div>

// Track keyboard inputs
        const keys = { Left: false, Right: false };
        window.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'a') keys.Left = true;
            if (e.key === 'ArrowRight' || e.key === 'd') keys.Right = true;
        });
        window.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'a') keys.Left = false;
            if (e.key === 'ArrowRight' || e.key === 'd') keys.Right = false;
        });

init();
        animate();

// --- 2. INITIALIZE THE 3D WORLD ---
        function init() {
            // Create the Scene
            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2(0x111111, 0.015); // Adds depth/fog

// Setup Camera (Field of View, Aspect Ratio, Near, Far planes)
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 5, 10); // Positioned up and back
            camera.lookAt(0, 0, 0);       // Pointing at the center

// Setup WebGL Renderer
            renderer = new id="three".WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true; // Enable shadows
            document.body.appendChild(renderer.domElement);

// Add Lighting
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
            scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
            dirLight.position.set(5, 20, 10);
            dirLight.castShadow = true;
            scene.add(dirLight);

// Create Floor (The track)
            const floorGeo = new THREE.BoxGeometry(12, 1, 100);
            const floorMat = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.8 });
            const floor = new THREE.Mesh(floorGeo, floorMat);
            floor.position.y = -0.5;
            floor.receiveShadow = true;
            scene.add(floor);

// Create Player (Sphere)
            const playerGeo = new THREE.SphereGeometry(0.6, 32, 32);
            const playerMat = new THREE.MeshStandardMaterial({ color: 0x00ff88, roughness: 0.2 });
            player = new THREE.Mesh(playerGeo, playerMat);
            player.position.set(0, 0.6, 5);
            player.castShadow = true;
            scene.add(player);

// Handle window resizing
            window.addEventListener('resize', onWindowResize);
        }

// --- 3. RANDOM GENERATION LOGIC ---
        function spawnObstacle() {
            const width = Math.random() * 2 + 1; // Random width between 1 and 3
            const geo = new THREE.BoxGeometry(width, 1.5, 1);
            
            // Random distinct neon color
            const randomColor = new THREE.Color().setHSL(Math.random(), 1, 0.5);
            const mat = new THREE.MeshStandardMaterial({ color: randomColor, roughness: 0.5 });
            const obs = new THREE.Mesh(geo, mat);

// Random X position across the 12-unit wide track
            const randomX = (Math.random() - 0.5) * 10; 
            obs.position.set(randomX, 0.75, -50); // Start far away
            obs.castShadow = true;

scene.add(obs);
            obstacles.push(obs);
        }

// --- 4. ENGINE GAME LOOP ---
        function animate() {
            requestAnimationFrame(animate);

if (!isGameOver) {
                // Handle Player Movement
                if (keys.Left && player.position.x > -5) player.position.x -= 0.15;
                if (keys.Right && player.position.x < 5) player.position.x += 0.15;

// Move and Update Obstacles
                spawnTimer++;
                if (spawnTimer > 25) { // Spawn an object roughly every half second
                    spawnObstacle();
                    spawnTimer = 0;
                }

for (let i = obstacles.length - 1; i >= 0; i--) {
                    let obs = obstacles[i];
                    obs.position.z += speed; // Move towards player

// Basic 3D Bounding Box Collision Check
                    const pBox = new THREE.Box3().setFromObject(player);
                    const oBox = new THREE.Box3().setFromObject(obs);

if (pBox.intersectsBox(oBox)) {
                        endGame();
                    }

// Recycle off-screen obstacles to save performance
                    if (obs.position.z > 15) {
                        scene.remove(obs);
                        obstacles.splice(i, 1);
                        score += 10;
                        document.getElementById('score').innerText = score;
                        
                        // Slowly scale game speed up over time
                        speed += 0.005;
                    }
                }
            }

renderer.render(scene, camera);
        }

// --- 5. UTILITY FUNCTIONS ---
        function endGame() {
            isGameOver = true;
            document.getElementById('gameover').style.display = 'block';
        }

function resetGame() {
            // Clear existing obstacles
            obstacles.forEach(obs => scene.remove(obs));
            obstacles = [];
            
            // Reset player and metrics
            player.position.set(0, 0.6, 5);
            score = 0;
            speed = 0.4;
            document.getElementById('score').innerText = score;
            document.getElementById('gameover').style.display = 'none';
            isGameOver = false;
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>

CSS

Comments 0

…

3D Endless Runner Game with Three.js and JavaScript

Recommended

Comments 0