Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>3D Railrush - Unlimited Edition</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body { margin: 0; overflow: hidden; background: #111; font-family: 'Arial Black', sans-serif; }
/* UI Styling */
#ui-layer {
position: absolute; top: 15px; left: 15px;
color: #FFD700; text-shadow: 2px 2px #000;
background: rgba(0,0,0,0.5); padding: 10px; border-radius: 10px;
border: 2px solid #FFD700;
}
.controls {
position: absolute; bottom: 30px; width: 100%;
display: flex; justify-content: space-evenly;
}
button {
width: 90px; height: 90px; border-radius: 50%;
background: rgba(255, 215, 0, 0.2); color: gold;
border: 3px solid gold; font-size: 30px;
box-shadow: 0 0 15px gold; touch-action: manipulation;
}
#game-over {
display: none; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); color: white; text-align: center;
}
</style>
</head>
<body>
<div id="ui-layer">
GOLD: <span id="goldText">∞ 999,999,999</span><br>
TICKETS: <span id="ticketText">UNLIMITED</span>
</div>
<div class="controls">
<button id="leftBtn">◀</button>
<button id="rightBtn">▶</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 1. Scene & Camera Setup
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x111111, 5, 30); // Cave effect
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Realistic Lighting
const sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(5, 10, 5);
scene.add(sun);
scene.add(new THREE.AmbientLight(0x303030));
// 3. The Infinite Rail Track
const trackGeo = new THREE.BoxGeometry(2, 0.2, 100);
const trackMat = new THREE.MeshStandardMaterial({ color: 0x444444, metalness: 0.8 });
const track = new THREE.Mesh(trackGeo, trackMat);
scene.add(track);
// 4. Player's Minecart
const cart = new THREE.Mesh(
new THREE.BoxGeometry(0.8, 0.6, 1.2),
new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.5 })
);
cart.position.y = 0.5;
scene.add(cart);
// 5. Unlimited Gold Coins
const coins = [];
const coinGeo = new THREE.CylinderGeometry(0.3, 0.3, 0.05, 12);
const coinMat = new THREE.MeshStandardMaterial({ color: 0xFFD700, metalness: 1 });
function spawnCoin(zPos) {
const coin = new THREE.Mesh(coinGeo, coinMat);
coin.rotation.x = Math.PI / 2;
coin.position.set(Math.random() > 0.5 ? 0.6 : -0.6, 0.8, zPos);
scene.add(coin);
coins.push(coin);
}
// Initially spawn some coins
for(let i=0; i<10; i++) spawnCoin(-i * 10);
camera.position.set(0, 3, 6);
camera.lookAt(0, 1, 0);
// 6. Mobile Controls
document.getElementById('leftBtn').addEventListener('pointerdown', () => cart.position.x = -0.6);
document.getElementById('rightBtn').addEventListener('pointerdown', () => cart.position.x = 0.6);
// 7. Game Loop
function animate() {
requestAnimationFrame(animate);
// Move Track (Infinite loop)
track.position.z += 0.3;
if(track.position.z > 40) track.position.z = 0;
// Move and Rotate Coins
coins.forEach((coin, index) => {
coin.position.z += 0.3;
coin.rotation.y += 0.05;
// Collision Detection
if(Math.abs(coin.position.z - cart.position.z) < 0.5 && Math.abs(coin.position.x - cart.position.x) < 0.5) {
coin.position.z = -50; // Reset coin to front
coin.position.x = Math.random() > 0.5 ? 0.6 : -0.6;
}
// If coin goes behind player
if(coin.position.z > 10) {
coin.position.z = -50;
}
});
renderer.render(scene, camera);
}
animate();
// Handle Screen Resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
2
2
124KB
595KB
1,101.0ms
204.0ms
1,101.0ms