Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nitro Drift Rumble - Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap'); | |
| body { | |
| font-family: 'Racing Sans One', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background: #000; | |
| color: white; | |
| } | |
| #game-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .game-ui { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 100; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| border: 2px solid #00ffff; | |
| } | |
| .game-ui span { | |
| margin-right: 20px; | |
| font-size: 18px; | |
| } | |
| .game-ui i { | |
| margin-right: 5px; | |
| color: #00ffff; | |
| } | |
| .pause-menu { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: rgba(0, 0, 0, 0.9); | |
| padding: 30px; | |
| border-radius: 15px; | |
| border: 3px solid #ff00ff; | |
| text-align: center; | |
| z-index: 200; | |
| display: none; | |
| } | |
| .pause-menu h2 { | |
| font-size: 36px; | |
| margin-bottom: 20px; | |
| color: #00ffff; | |
| text-shadow: 0 0 10px #ff00ff; | |
| } | |
| .pause-menu button { | |
| background: linear-gradient(45deg, #ff00ff, #00ffff); | |
| border: none; | |
| color: white; | |
| padding: 10px 20px; | |
| margin: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 18px; | |
| font-family: 'Racing Sans One', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-container"></div> | |
| <div class="game-ui"> | |
| <span><i data-feather="clock"></i> Time: <span id="time">00:00</span></span> | |
| <span><i data-feather="award"></i> Score: <span id="score">0</span></span> | |
| <span><i data-feather="zap"></i> Boost: <span id="boost">100%</span></span> | |
| <button id="pause-btn" style="position: absolute; right: 20px; top: 10px;"> | |
| <i data-feather="pause"></i> | |
| </button> | |
| </div> | |
| <div class="pause-menu"> | |
| <h2>GAME PAUSED</h2> | |
| <button id="resume-btn"><i data-feather="play"></i> RESUME</button> | |
| <button id="restart-btn"><i data-feather="refresh-cw"></i> RESTART</button> | |
| <button id="quit-btn"><i data-feather="home"></i> QUIT</button> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Simple racing game implementation | |
| const config = { | |
| type: Phaser.AUTO, | |
| width: window.innerWidth, | |
| height: window.innerHeight, | |
| backgroundColor: '#111122', | |
| scene: { | |
| preload: preload, | |
| create: create, | |
| update: update | |
| }, | |
| physics: { | |
| default: 'arcade', | |
| arcade: { | |
| gravity: { y: 0 }, | |
| debug: false | |
| } | |
| } | |
| }; | |
| const game = new Phaser.Game(config); | |
| let car, track, cursors, speedText, score = 0, time = 0, boost = 100; | |
| let obstacles = []; | |
| let powerups = []; | |
| let gamePaused = false; | |
| function preload() { | |
| this.load.image('track', 'https://labs.phaser.io/assets/skies/space3.png'); | |
| this.load.image('car', 'https://labs.phaser.io/assets/sprites/asteroid.png'); | |
| this.load.image('obstacle', 'https://labs.phaser.io/assets/sprites/asteroid.png'); | |
| this.load.image('boost', 'https://labs.phaser.io/assets/sprites/asteroid.png'); | |
| } | |
| function create() { | |
| // Create track | |
| track = this.add.tileSprite(0, 0, config.width * 2, config.height * 2, 'track'); | |
| track.setOrigin(0, 0); | |
| // Create car | |
| car = this.physics.add.sprite(config.width / 2, config.height / 2, 'car'); | |
| car.setCollideWorldBounds(true); | |
| car.setScale(0.5); | |
| // Create some obstacles | |
| for (let i = 0; i < 10; i++) { | |
| let obstacle = this.physics.add.sprite( | |
| Phaser.Math.Between(0, config.width), | |
| Phaser.Math.Between(0, config.height), | |
| 'obstacle' | |
| ); | |
| obstacle.setScale(0.3); | |
| obstacle.setTint(0xff0000); | |
| obstacles.push(obstacle); | |
| } | |
| // Create some powerups | |
| for (let i = 0; i < 5; i++) { | |
| let powerup = this.physics.add.sprite( | |
| Phaser.Math.Between(0, config.width), | |
| Phaser.Math.Between(0, config.height), | |
| 'boost' | |
| ); | |
| powerup.setScale(0.2); | |
| powerup.setTint(0x00ff00); | |
| powerups.push(powerup); | |
| } | |
| // Set up collisions | |
| this.physics.add.collider(car, obstacles, hitObstacle, null, this); | |
| this.physics.add.overlap(car, powerups, collectPowerup, null, this); | |
| // Controls | |
| cursors = this.input.keyboard.createCursorKeys(); | |
| // Timer | |
| this.time.addEvent({ | |
| delay: 1000, | |
| callback: updateTime, | |
| callbackScope: this, | |
| loop: true | |
| }); | |
| // UI events | |
| document.getElementById('pause-btn').addEventListener('click', togglePause); | |
| document.getElementById('resume-btn').addEventListener('click', togglePause); | |
| document.getElementById('restart-btn').addEventListener('click', restartGame); | |
| document.getElementById('quit-btn').addEventListener('click', () => { | |
| window.location.href = 'index.html'; | |
| }); | |
| } | |
| function update() { | |
| if (gamePaused) return; | |
| // Movement controls | |
| if (cursors.left.isDown) { | |
| car.setAngle(-15); | |
| car.setVelocityX(-200); | |
| } else if (cursors.right.isDown) { | |
| car.setAngle(15); | |
| car.setVelocityX(200); | |
| } else { | |
| car.setAngle(0); | |
| car.setVelocityX(0); | |
| } | |
| if (cursors.up.isDown) { | |
| car.setVelocityY(-200); | |
| if (boost > 0 && Phaser.Input.Keyboard.JustDown(cursors.up)) { | |
| car.setVelocityY(-400); | |
| boost -= 10; | |
| document.getElementById('boost').textContent = `${boost}%`; | |
| } | |
| } else if (cursors.down.isDown) { | |
| car.setVelocityY(200); | |
| } else { | |
| car.setVelocityY(0); | |
| } | |
| // Camera follows car | |
| this.cameras.main.scrollX = car.x - config.width / 2; | |
| this.cameras.main.scrollY = car.y - config.height / 2; | |
| } | |
| function hitObstacle() { | |
| score -= 10; | |
| if (score < 0) score = 0; | |
| document.getElementById('score').textContent = score; | |
| } | |
| function collectPowerup(car, powerup) { | |
| powerup.destroy(); | |
| score += 20; | |
| boost += 20; | |
| if (boost > 100) boost = 100; | |
| document.getElementById('score').textContent = score; | |
| document.getElementById('boost').textContent = `${boost}%`; | |
| } | |
| function updateTime() { | |
| if (gamePaused) return; | |
| time++; | |
| const minutes = Math.floor(time / 60).toString().padStart(2, '0'); | |
| const seconds = (time % 60).toString().padStart(2, '0'); | |
| document.getElementById('time').textContent = `${minutes}:${seconds}`; | |
| } | |
| function togglePause() { | |
| gamePaused = !gamePaused; | |
| const pauseMenu = document.querySelector('.pause-menu'); | |
| pauseMenu.style.display = gamePaused ? 'block' : 'none'; | |
| if (gamePaused) { | |
| this.scene.pause(); | |
| } else { | |
| this.scene.resume(); | |
| } | |
| } | |
| function restartGame() { | |
| window.location.reload(); | |
| } | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| game.scale.resize(window.innerWidth, window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> |