Spaces:

Dr-Neal
/

nitro-drift-rumble

Running

App Files Files Community

Dr-Neal commited on Oct 9, 2025

Commit

3432bc7

verified ·

1 Parent(s): df3d745

FUCK IT... HELP ME PLAN TO CONVERT THIS INTO THE ULTIMATE STAR FIGHTER GAME

Browse files

Files changed (3) hide show

dogfight.html +331 -0
index.html +3 -3
starfighter.html +228 -0

dogfight.html ADDED Viewed

	@@ -0,0 +1,331 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>STARFIGHTER ULTIMATE - DOGFIGHT</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=Orbitron:wght@400;700&family=Rajdhani:wght@500&display=swap');
+        body {
+            font-family: 'Orbitron', sans-serif;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: #000;
+            color: #0ff;
+        }
+        #game-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .game-hud {
+            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 #0ff;
+            box-shadow: 0 0 10px #0ff;
+        }
+        .game-hud span {
+            margin-right: 20px;
+            font-size: 18px;
+        }
+        .game-hud i {
+            margin-right: 5px;
+            color: #0ff;
+        }
+        .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 #f00;
+            text-align: center;
+            z-index: 200;
+            display: none;
+        }
+        .pause-menu h2 {
+            font-size: 36px;
+            margin-bottom: 20px;
+            color: #0ff;
+            text-shadow: 0 0 10px #f00;
+        }
+        .pause-menu button {
+            background: linear-gradient(45deg, #f00, #0ff);
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            margin: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 18px;
+            font-family: 'Orbitron', sans-serif;
+        }
+        .radar {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            border: 2px solid #0ff;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container"></div>
+    <div class="game-hud">
+        <span><i data-feather="shield"></i> Shields: <span id="shields">100%</span></span>
+        <span><i data-feather="zap"></i> Energy: <span id="energy">100%</span></span>
+        <span><i data-feather="target"></i> Kills: <span id="kills">0</span></span>
+        <button id="pause-btn" style="position: absolute; right: 20px; top: 10px;">
+            <i data-feather="pause"></i>
+        </button>
+    </div>
+    <div class="radar"></div>
+    <div class="pause-menu">
+        <h2>BATTLE 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> RETURN TO HANGAR</button>
+    </div>
+    <script>
+        feather.replace();
+        // Starfighter game implementation
+        const config = {
+            type: Phaser.AUTO,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            backgroundColor: '#000033',
+            scene: {
+                preload: preload,
+                create: create,
+                update: update
+            },
+            physics: {
+                default: 'arcade',
+                arcade: {
+                    gravity: { y: 0 },
+                    debug: false
+                }
+            }
+        };
+        const game = new Phaser.Game(config);
+        let ship, enemies = [], lasers = [], enemyLasers = [];
+        let shields = 100, energy = 100, kills = 0;
+        let cursors, fireButton, gamePaused = false;
+        function preload() {
+            this.load.image('stars', 'http://static.photos/space/1200x630/1');
+            this.load.image('ship', 'https://labs.phaser.io/assets/sprites/thrust_ship.png');
+            this.load.image('enemy', 'https://labs.phaser.io/assets/sprites/thrust_ship2.png');
+            this.load.image('laser', 'https://labs.phaser.io/assets/sprites/bullets/bullet6.png');
+            this.load.image('explosion', 'https://labs.phaser.io/assets/sprites/explosion.png');
+            this.load.image('powerup', 'https://labs.phaser.io/assets/sprites/asteroid.png');
+        }
+        function create() {
+            // Create starfield background
+            this.add.tileSprite(0, 0, config.width * 2, config.height * 2, 'stars').setOrigin(0, 0);
+            // Create player ship
+            ship = this.physics.add.sprite(config.width / 2, config.height / 2, 'ship');
+            ship.setCollideWorldBounds(true);
+            ship.setScale(0.8);
+            ship.setAngle(-90);
+            // Create enemies
+            createEnemyWave(this);
+            // Controls
+            cursors = this.input.keyboard.createCursorKeys();
+            fireButton = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
+            // Collisions
+            this.physics.add.overlap(ship, enemyLasers, hitByLaser, null, this);
+            this.physics.add.overlap(lasers, enemies, hitEnemy, null, this);
+            // 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 = 'starfighter.html';
+            });
+        }
+        function update() {
+            if (gamePaused) return;
+            // Player movement
+            if (cursors.left.isDown) {
+                ship.setVelocityX(-200);
+            } else if (cursors.right.isDown) {
+                ship.setVelocityX(200);
+            } else {
+                ship.setVelocityX(0);
+            }
+            if (cursors.up.isDown) {
+                ship.setVelocityY(-200);
+            } else if (cursors.down.isDown) {
+                ship.setVelocityY(200);
+            } else {
+                ship.setVelocityY(0);
+            }
+            // Firing
+            if (fireButton.isDown && energy > 0) {
+                fireLaser(this);
+                energy -= 2;
+                if (energy < 0) energy = 0;
+                document.getElementById('energy').textContent = `${energy}%`;
+            }
+            // Recharge energy when not firing
+            if (fireButton.isUp && energy < 100) {
+                energy += 0.5;
+                document.getElementById('energy').textContent = `${Math.floor(energy)}%`;
+            }
+            // Enemy AI
+            enemies.forEach(enemy => {
+                this.physics.moveToObject(enemy, ship, 100);
+                // Enemy firing logic
+                if (Phaser.Math.Between(1, 100) > 98) {
+                    const angle = Phaser.Math.Angle.Between(
+                        enemy.x, enemy.y,
+                        ship.x, ship.y
+                    );
+                    const laser = this.physics.add.sprite(enemy.x, enemy.y, 'laser');
+                    laser.setVelocity(
+                        Math.cos(angle) * 300,
+                        Math.sin(angle) * 300
+                    );
+                    laser.setTint(0xff0000);
+                    enemyLasers.push(laser);
+                }
+            });
+            // Clean up off-screen lasers
+            lasers.forEach(laser => {
+                if (laser.y < 0 || laser.y > config.height || laser.x < 0 || laser.x > config.width) {
+                    laser.destroy();
+                    lasers.splice(lasers.indexOf(laser), 1);
+                }
+            });
+            enemyLasers.forEach(laser => {
+                if (laser.y < 0 || laser.y > config.height || laser.x < 0 || laser.x > config.width) {
+                    laser.destroy();
+                    enemyLasers.splice(enemyLasers.indexOf(laser), 1);
+                }
+            });
+            // Spawn more enemies if needed
+            if (enemies.length < 5) {
+                createEnemyWave(this);
+            }
+        }
+        function createEnemyWave(scene) {
+            for (let i = 0; i < 5; i++) {
+                const x = Phaser.Math.Between(0, config.width);
+                const y = Phaser.Math.Between(0, config.height / 2);
+                const enemy = scene.physics.add.sprite(x, y, 'enemy');
+                enemy.setScale(0.8);
+                enemy.setTint(0xff0000);
+                enemies.push(enemy);
+            }
+        }
+        function fireLaser(scene) {
+            const laser = scene.physics.add.sprite(ship.x, ship.y - 20, 'laser');
+            laser.setVelocityY(-500);
+            laser.setTint(0x00ffff);
+            lasers.push(laser);
+        }
+        function hitByLaser(player, laser) {
+            laser.destroy();
+            shields -= 10;
+            if (shields < 0) shields = 0;
+            document.getElementById('shields').textContent = `${shields}%`;
+            if (shields <= 0) {
+                gameOver(scene);
+            }
+        }
+        function hitEnemy(laser, enemy) {
+            laser.destroy();
+            enemies.splice(enemies.indexOf(enemy), 1);
+            enemy.destroy();
+            // Create explosion
+            const explosion = this.add.sprite(enemy.x, enemy.y, 'explosion');
+            explosion.setScale(2);
+            explosion.play('explode');
+            kills++;
+            document.getElementById('kills').textContent = kills;
+        }
+        function gameOver(scene) {
+            alert(`Mission Failed! You destroyed ${kills} enemy ships.`);
+            restartGame();
+        }
+        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>

index.html CHANGED Viewed

@@ -177,9 +177,9 @@
         <!-- Footer -->
         <div class="mt-16 text-center text-gray-400">
-            <a href="game.html" class="inline-block bg-gradient-to-r from-purple-600 to-cyan-500 text-white px-6 py-2 rounded-full font-bold text-lg hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/30 mb-6">
-                Open in Browser
-            </a>
             <div class="flex justify-center space-x-6 mb-4">
 <a href="#" class="hover:text-cyan-400 transition-colors"><i data-feather="twitter"></i></a>
                 <a href="#" class="hover:text-purple-400 transition-colors"><i data-feather="instagram"></i></a>

         <!-- Footer -->
         <div class="mt-16 text-center text-gray-400">
+            <a href="starfighter.html" class="inline-block bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-6 py-2 rounded-full font-bold text-lg hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-cyan-500/30 mb-6">
+                STARFIGHTER MODE
+</a>
             <div class="flex justify-center space-x-6 mb-4">
 <a href="#" class="hover:text-cyan-400 transition-colors"><i data-feather="twitter"></i></a>
                 <a href="#" class="hover:text-purple-400 transition-colors"><i data-feather="instagram"></i></a>

starfighter.html ADDED Viewed

	@@ -0,0 +1,228 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>STARFIGHTER ULTIMATE</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500&display=swap');
+        body {
+            font-family: 'Orbitron', sans-serif;
+            overflow-x: hidden;
+            background: #000;
+            color: #0ff;
+        }
+        .vanta-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .neon-text {
+            text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff;
+        }
+        .hud-border {
+            border: 2px solid #0ff;
+            box-shadow: 0 0 10px #0ff, inset 0 0 10px #0ff;
+        }
+        .ship-card {
+            transition: all 0.3s;
+            background: rgba(0, 0, 0, 0.7);
+        }
+        .ship-card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px #0ff;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 5px #0ff; }
+            50% { box-shadow: 0 0 20px #0ff; }
+            100% { box-shadow: 0 0 5px #0ff; }
+        }
+    </style>
+</head>
+<body>
+    <div id="vanta-bg" class="vanta-bg"></div>
+    <div class="min-h-screen flex flex-col items-center justify-center px-4 py-12">
+        <!-- Header -->
+        <div class="text-center mb-12">
+            <h1 class="text-6xl md:text-8xl font-bold text-white neon-text mb-4">
+                STARFIGHTER <span class="text-red-500">ULTIMATE</span>
+            </h1>
+            <p class="text-xl text-cyan-200 mb-8 font-['Rajdhani']">
+                Engage in epic space battles across the galaxy!
+            </p>
+        </div>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-6xl">
+            <!-- Left Column - Game Preview -->
+            <div class="bg-black bg-opacity-70 rounded-xl p-6 hud-border backdrop-blur-sm">
+                <h2 class="text-3xl text-white mb-6 flex items-center">
+                    <i data-feather="target" class="mr-3 text-red-500"></i> COMBAT PREVIEW
+                </h2>
+                <div class="relative overflow-hidden rounded-lg h-64 md:h-96">
+                    <img src="http://static.photos/space/1024x576/42" alt="Game Screenshot" class="w-full h-full object-cover">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end justify-center">
+                        <div class="mb-6 text-center">
+                            <button onclick="startGame()" class="bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-8 py-3 rounded-full font-bold text-lg hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-cyan-500/30 pulse">
+                                LAUNCH BATTLE
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-3 gap-4">
+                    <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg text-center">
+                        <i data-feather="clock" class="text-cyan-400 w-8 h-8 mx-auto mb-2"></i>
+                        <p class="text-white font-bold">CAMPAIGN</p>
+                    </div>
+                    <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg text-center">
+                        <i data-feather="users" class="text-purple-400 w-8 h-8 mx-auto mb-2"></i>
+                        <p class="text-white font-bold">PVP ARENA</p>
+                    </div>
+                    <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg text-center">
+                        <i data-feather="award" class="text-yellow-400 w-8 h-8 mx-auto mb-2"></i>
+                        <p class="text-white font-bold">RANKINGS</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column - Features -->
+            <div class="bg-black bg-opacity-70 rounded-xl p-6 hud-border backdrop-blur-sm">
+                <h2 class="text-3xl text-white mb-6 flex items-center">
+                    <i data-feather="star" class="mr-3 text-yellow-400"></i> FEATURES
+                </h2>
+                <!-- Feature 1 -->
+                <div class="flex mb-6">
+                    <div class="mr-4">
+                        <div class="bg-blue-600 rounded-lg p-3">
+                            <i data-feather="spacecraft" class="text-white w-8 h-8"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-xl text-white font-bold mb-2">FLEET CUSTOMIZATION</h3>
+                        <p class="text-gray-300 font-['Rajdhani']">Command over 20 unique starfighters with modular upgrades.</p>
+                    </div>
+                </div>
+                <!-- Feature 2 -->
+                <div class="flex mb-6">
+                    <div class="mr-4">
+                        <div class="bg-purple-600 rounded-lg p-3">
+                            <i data-feather="galaxy" class="text-white w-8 h-8"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-xl text-white font-bold mb-2">DYNAMIC SYSTEMS</h3>
+                        <p class="text-gray-300 font-['Rajdhani']">Battle across nebulas, asteroid fields and dying stars.</p>
+                    </div>
+                </div>
+                <!-- Feature 3 -->
+                <div class="flex mb-6">
+                    <div class="mr-4">
+                        <div class="bg-red-600 rounded-lg p-3">
+                            <i data-feather="zap" class="text-white w-8 h-8"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-xl text-white font-bold mb-2">WEAPON SYSTEMS</h3>
+                        <p class="text-gray-300 font-['Rajdhani']">Unlock plasma cannons, photon torpedoes and EMP bursts.</p>
+                    </div>
+                </div>
+                <!-- Ship Selection -->
+                <div class="mt-8">
+                    <h3 class="text-xl text-white font-bold mb-4">SELECT YOUR STARFIGHTER</h3>
+                    <div class="grid grid-cols-3 gap-4">
+                        <div class="ship-card p-3 rounded-lg text-center cursor-pointer">
+                            <div class="bg-gray-800 rounded-lg p-2 mb-2">
+                                <i data-feather="triangle" class="text-cyan-400 w-8 h-8 mx-auto"></i>
+                            </div>
+                            <p class="text-sm">INTERCEPTOR</p>
+                        </div>
+                        <div class="ship-card p-3 rounded-lg text-center cursor-pointer">
+                            <div class="bg-gray-800 rounded-lg p-2 mb-2">
+                                <i data-feather="box" class="text-red-400 w-8 h-8 mx-auto"></i>
+                            </div>
+                            <p class="text-sm">GUNSHIP</p>
+                        </div>
+                        <div class="ship-card p-3 rounded-lg text-center cursor-pointer">
+                            <div class="bg-gray-800 rounded-lg p-2 mb-2">
+                                <i data-feather="hexagon" class="text-yellow-400 w-8 h-8 mx-auto"></i>
+                            </div>
+                            <p class="text-sm">BOMBER</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Footer -->
+        <div class="mt-16 text-center text-gray-400 font-['Rajdhani']">
+            <a href="dogfight.html" class="inline-block bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-6 py-2 rounded-full font-bold text-lg hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-cyan-500/30 mb-6">
+                INSTANT DOGFIGHT
+            </a>
+            <div class="flex justify-center space-x-6 mb-4">
+                <a href="#" class="hover:text-cyan-400 transition-colors"><i data-feather="twitter"></i></a>
+                <a href="#" class="hover:text-purple-400 transition-colors"><i data-feather="instagram"></i></a>
+                <a href="#" class="hover:text-red-400 transition-colors"><i data-feather="youtube"></i></a>
+                <a href="#" class="hover:text-blue-400 transition-colors"><i data-feather="discord"></i></a>
+            </div>
+            <p>© 2023 STARFIGHTER ULTIMATE. All rights reserved.</p>
+        </div>
+    </div>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x00ffff,
+            backgroundColor: 0x0,
+            points: 12.00,
+            maxDistance: 22.00,
+            spacing: 18.00
+        });
+        // Initialize Feather Icons
+        feather.replace();
+        // Game functionality
+        function startGame() {
+            window.location.href = "dogfight.html";
+        }
+        // Add spacecraft icon to feather
+        feather.replace({
+            'spacecraft': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L3 7l9 5 9-5-9-5zM3 7l9 5 9-5M3 7v10l9 5 9-5V7M12 22l9-5-9-5-9 5 9 5z"/></svg>',
+            'galaxy': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M14.83 9.17l4.24-4.24M14.83 9.17l3.53-3.53M4.93 19.07l4.24-4.24"/></svg>'
+        });
+    </script>
+</body>
+</html>