Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Endless Runner</title> | |
| <style> | |
| body { margin: 0; overflow: hidden; } | |
| canvas { display: block; } | |
| #score { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| color: white; | |
| font-family: Arial; | |
| font-size: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="score">Score: 0</div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script> | |
| // Scene setup | |
| 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); | |
| // Player | |
| const playerGeometry = new THREE.BoxGeometry(1, 1, 1); | |
| const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| const player = new THREE.Mesh(playerGeometry, playerMaterial); | |
| player.position.y = 0.5; | |
| scene.add(player); | |
| // Ground | |
| const groundGeometry = new THREE.PlaneGeometry(10, 1000); | |
| const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 }); | |
| const ground = new THREE.Mesh(groundGeometry, groundMaterial); | |
| ground.rotation.x = -Math.PI / 2; | |
| ground.position.y = 0; | |
| scene.add(ground); | |
| // Game variables | |
| let obstacles = []; | |
| let score = 0; | |
| let isJumping = false; | |
| let jumpVelocity = 0; | |
| let gameSpeed = 0.1; | |
| let lastObstacleTime = 0; | |
| camera.position.z = 5; | |
| camera.position.y = 5; | |
| camera.lookAt(0, 0, 0); | |
| // Obstacle creation | |
| function createObstacle() { | |
| const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1); | |
| const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); | |
| const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial); | |
| obstacle.position.y = 0.5; | |
| obstacle.position.z = -50; | |
| obstacle.position.x = Math.random() * 4 - 2; | |
| scene.add(obstacle); | |
| obstacles.push(obstacle); | |
| } | |
| // Jump mechanics | |
| document.addEventListener('keydown', (event) => { | |
| if (event.code === 'Space' && !isJumping) { | |
| isJumping = true; | |
| jumpVelocity = 0.3; | |
| } | |
| }); | |
| // Game loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Update ground movement | |
| ground.position.z += gameSpeed; | |
| if (ground.position.z > 100) { | |
| ground.position.z = 0; | |
| } | |
| // Jump physics | |
| if (isJumping) { | |
| player.position.y += jumpVelocity; | |
| jumpVelocity -= 0.015; | |
| if (player.position.y <= 0.5) { | |
| player.position.y = 0.5; | |
| isJumping = false; | |
| jumpVelocity = 0; | |
| } | |
| } | |
| // Obstacle management | |
| const currentTime = Date.now(); | |
| if (currentTime - lastObstacleTime > 2000) { | |
| createObstacle(); | |
| lastObstacleTime = currentTime; | |
| } | |
| // Move and check obstacles | |
| obstacles.forEach((obstacle, index) => { | |
| obstacle.position.z += gameSpeed; | |
| // Collision detection | |
| if (Math.abs(obstacle.position.z - player.position.z) < 1 && | |
| Math.abs(obstacle.position.x - player.position.x) < 1 && | |
| player.position.y < 1.5) { | |
| alert('Game Over! Score: ' + score); | |
| obstacles.forEach(o => scene.remove(o)); | |
| obstacles = []; | |
| score = 0; | |
| } | |
| // Remove obstacles that passed | |
| if (obstacle.position.z > 10) { | |
| scene.remove(obstacle); | |
| obstacles.splice(index, 1); | |
| score += 10; | |
| } | |
| }); | |
| // Update score | |
| document.getElementById('score').textContent = 'Score: ' + score; | |
| // Increase difficulty | |
| gameSpeed += 0.0001; | |
| renderer.render(scene, camera); | |
| } | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |