Hugging Face's logo

Spaces:
2gfg
/
undefined
Running

App Files Community
undefined / index.html
2gfg's picture
2gfg
continue
9f1410d verified
raw
history blame contribute delete
19.1 kB
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SkyFlap Odyssey: Aerial Avian Adventure</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.60.0/phaser.min.js"></script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
body {
 font-family: 'Poppins', sans-serif;
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
 color: #f8fafc;
 overflow-x: hidden;
 }
.game-container {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 border-radius: 20px;
 overflow: hidden;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }
#gameCanvas {
 display: block;
 margin: 0 auto;
 border: 3px solid #475569;
 border-radius: 15px;
 background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%);
 }
.stats-overlay {
 position: absolute;
 top: 20px;
 left: 20px;
 z-index: 10;
 background: rgba(15, 23, 42, 0.8);
 padding: 15px;
 border-radius: 12px;
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 }
.score-animation {
 animation: scorePop 0.6s ease-out;
 }
@keyframes scorePop {
 0% { transform: scale(1); }
 50% { transform: scale(1.3); }
 100% { transform: scale(1); }
 }
.power-up-indicator {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { opacity: 1; }
 50% { opacity: 0.6; }
 100% { opacity: 1; }
 }
.menu-transition {
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
.parallax-bg {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: -1;
 }
.bg-layer-1 { animation: scrollBg 60s linear infinite; }
 .bg-layer-2 { animation: scrollBg 40s linear infinite; }
 .bg-layer-3 { animation: scrollBg 20s linear infinite; }
@keyframes scrollBg {
 from { transform: translateX(0); }
 to { transform: translateX(-100%); }
 }
 </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
 <!-- Parallax Background Elements -->
 <div class="parallax-bg">
 <div class="bg-layer-1 absolute inset-0 opacity-20">
 <div class="flex">
 <div class="w-64 h-64 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full blur-3xl"></div>
 <div class="w-48 h-48 bg-gradient-to-br from-green-400 to-blue-500 rounded-full blur-2xl ml-32"></div>
 </div>
 </div>
 <div class="bg-layer-2 absolute inset-0 opacity-15">
 <div class="flex mt-32">
 <div class="w-32 h-32 bg-gradient-to-br from-yellow-400 to-red-500 rounded-full blur-2xl"></div>
 <div class="w-56 h-56 bg-gradient-to-br from-pink-400 to-red-500 rounded-full blur-3xl ml-64"></div>
 </div>
 </div>
 <div class="bg-layer-3 absolute inset-0 opacity-10">
 <div class="flex mt-64">
 <div class="w-40 h-40 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full blur-2xl ml-96"></div>
 </div>
 </div>
 </div>
<div class="game-container">
 <!-- Game Stats Overlay -->
 <div class="stats-overlay">
 <div class="flex items-center space-x-6">
 <div class="text-center">
 <div class="text-sm text-gray-400">SCORE</div>
 <div id="currentScore" class="text-2xl font-bold text-white score-animation">0</div>
 </div>
 <div class="text-center">
 <div class="text-sm text-gray-400">BEST</div>
 <div id="bestScore" class="text-xl font-semibold text-yellow-400">0</div>
 </div>
 <div id="powerUpDisplay" class="hidden">
 <div class="text-center">
 <div class="text-sm text-gray-400">POWER</div>
 <div class="text-lg font-semibold text-green-400 power-up-indicator">ACTIVE</div>
 </div>
 </div>
 </div>
 </div>
<!-- Game Canvas -->
 <div id="gameCanvas" class="w-full h-auto"></div>
<!-- Start Menu -->
 <div id="startMenu" class="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-black/80 to-blue-900/80 backdrop-blur-sm">
 <div class="text-center space-y-6">
 <h1 class="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
 SkyFlap Odyssey
 </h1>
 <p class="text-xl text-gray-300">Aerial Avian Adventure</p>
<div class="space-y-4 mt-8">
 <button onclick="startGame()" class="w-64 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105">
 <i data-feather="play" class="inline mr-2"></i>
 Start Flight
 </button>
<button onclick="showSettings()" class="w-64 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300">
 <i data-feather="settings" class="inline mr-2"></i>
 Game Settings
 </button>
 </div>
<div class="mt-6 text-sm text-gray-400">
 <p>Tap, Click, or Press SPACE to flap</p>
 <p>Gamepad supported</p>
 </div>
 </div>
 </div>
<!-- Game Over Menu -->
 <div id="gameOverMenu" class="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-red-900/80 to-black/80 backdrop-blur-sm hidden">
 <div class="text-center space-y-6">
 <h2 class="text-4xl font-bold text-red-400">Flight Terminated</h2>
<div class="bg-black/50 p-6 rounded-2xl space-y-4">
 <div class="text-2xl font-semibold">Final Score: <span id="finalScore" class="text-yellow-400">0</span></div>
 <div class="text-lg">Best Score: <span id="finalBestScore" class="text-green-400">0</span></div>
<div class="space-y-3">
 <button onclick="restartGame()" class="w-64 bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300">
 <i data-feather="refresh-cw" class="inline mr-2"></i>
 Fly Again
 </button>
<button onclick="showStartMenu()" class="w-64 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300">
 <i data-feather="home" class="inline mr-2"></i>
 Main Menu
 </button>
 </div>
 </div>
 </div>
<!-- Settings Menu -->
 <div id="settingsMenu" class="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-gray-900/80 to-black/80 backdrop-blur-sm hidden">
 <div class="bg-black/70 p-8 rounded-2xl max-w-md w-full space-y-6">
 <h2 class="text-3xl font-bold text-center text-white">Settings</h2>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-300 mb-2">Music Volume</label>
 <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer slider">
 </div>
<div>
 <label class="block text-sm font-medium text-gray-300 mb-2">SFX Volume</label>
 <input type="range" min="0" max="100" value="70" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer slider">
 </div>
<div class="flex items-center justify-between">
 <span class="text-sm font-medium text-gray-300">Visual Effects</span>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" checked class="sr-only peer">
 <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
 </label>
 </div>
 </div>
<div class="flex space-x-4 pt-4">
 <button onclick="saveSettings()" class="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-2 px-4 rounded-xl transition-all duration-300">
 Save
 </button>
<button onclick="showStartMenu()" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded-xl transition-all duration-300">
 Cancel
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Control Instructions -->
 <div class="mt-8 text-center space-y-2">
 <div class="flex justify-center space-x-8 text-sm text-gray-400">
 <div class="flex items-center space-x-2">
 <i data-feather="mouse-pointer"></i>
 <span>Click/Tap</span>
 </div>
 <div class="flex items-center space-x-2">
 <i data-feather="square"></i>
 <span>Space Bar</span>
 </div>
 <div class="flex items-center space-x-2">
 <i data-feather="gamepad"></i>
 <span>Gamepad A</span>
 </div>
 </div>
 </div>
<script>
 // Initialize game variables
 let game;
 let currentScore = 0;
 let bestScore = 0;
 let isGameRunning = false;
// Load best score from localStorage
 if (localStorage.getItem('skyflapBestScore')) {
 bestScore = parseInt(localStorage.getItem('skyflapBestScore'));
 document.getElementById('bestScore').textContent = bestScore;
 }
 // Game configuration
 const config = {
 type: Phaser.AUTO,
 width: 800,
 height: 600,
 parent: 'gameCanvas',
 physics: {
 default: 'arcade',
 arcade: {
 gravity: { y: 800 },
 debug: false
 }
 },
 scene: {
 preload: preload,
 create: create,
 update: update
 },
 scale: {
 mode: Phaser.Scale.FIT,
 autoCenter: Phaser.Scale.CENTER_BOTH
 }
 };
 function preload() {
 // Load placeholder assets - in real implementation, these would be actual game assets
 this.load.image('bird', 'http://static.photos/nature/64x64/1');
 this.load.image('pipe', 'http://static.photos/green/128x512/2');
 this.load.image('background', 'http://static.photos/blue/800x600/3');
 }
 function create() {
 // Create background
 this.add.image(400, 300, 'background');
// Create bird
 this.bird = this.physics.add.sprite(100, 300, 'bird');
 this.bird.setCollideWorldBounds(true);
// Create pipe group
 this.pipes = this.physics.add.group();
// Input handlers
 this.input.on('pointerdown', flap, this);
 this.input.keyboard.on('keydown-SPACE', flap, this);
// Timer for pipe generation
 this.pipeTimer = this.time.addEvent({
 delay: 1500,
 callback: generatePipe,
 callbackScope: this,
 loop: true
 });
// Collision detection
 this.physics.add.collider(this.bird, this.pipes, gameOver, null, this);
// Score text
 this.scoreText = this.add.text(400, 50, '0', {
 fontSize: '32px',
 fill: '#ffffff',
 stroke: '#000000',
 strokeThickness: 4
 }).setOrigin(0.5);
 }
 function update() {
 if (!isGameRunning) return;
// Rotate bird based on velocity
 this.bird.rotation = Phaser.Math.Clamp(this.bird.body.velocity.y * 0.01, -0.5, 0.5);
 }
 function flap() {
 if (!isGameRunning) return;
 this.bird.setVelocityY(-300);
 }
 function generatePipe() {
 if (!isGameRunning) return;
const gap = 200;
 const pipeX = 800;
 const pipeY = Phaser.Math.Between(100, 500);
// Top pipe
 const topPipe = this.pipes.create(pipeX, pipeY - gap / 2, 'pipe');
 topPipe.setScale(1, -1);
 topPipe.setVelocityX(-200);
// Bottom pipe
 const bottomPipe = this.pipes.create(pipeX, pipeY + gap / 2, 'pipe');
 bottomPipe.setVelocityX(-200);
// Remove pipes when they go off screen
 this.time.delayedCall(4000, () => {
 topPipe.destroy();
 bottomPipe.destroy();
 });
// Increment score when passing pipes
 this.time.delayedCall(2000, () => {
 currentScore++;
 updateScore();
 });
 }
 function gameOver() {
 isGameRunning = false;
// Update best score
 if (currentScore > bestScore) {
 bestScore = currentScore;
 localStorage.setItem('skyflapBestScore', bestScore);
// Show game over menu
 document.getElementById('finalScore').textContent = currentScore;
 document.getElementById('finalBestScore').textContent = bestScore;
 document.getElementById('gameOverMenu').classList.remove('hidden');
 }
 function updateScore() {
 document.getElementById('currentScore').textContent = currentScore;
 document.getElementById('bestScore').textContent = bestScore;
// Add animation
 document.getElementById('currentScore').classList.add('score-animation');
 setTimeout(() => {
 document.getElementById('currentScore').classList.remove('score-animation');
 }, 600);
 }
 // UI Control Functions
 function startGame() {
 document.getElementById('startMenu').classList.add('hidden');
 document.getElementById('gameOverMenu').classList.add('hidden');
 isGameRunning = true;
 currentScore = 0;
 updateScore();
// Initialize game if not already created
 if (!game) {
 game = new Phaser.Game(config);
 } else {
 // Reset game state
 game.scene.restart();
 }
 }
 function restartGame() {
 document.getElementById('gameOverMenu').classList.add('hidden');
 isGameRunning = true;
 currentScore = 0;
 updateScore();
 game.scene.restart();
 }
 function showStartMenu() {
 document.getElementById('startMenu').classList.remove('hidden');
 document.getElementById('settingsMenu').classList.add('hidden');
 document.getElementById('gameOverMenu').classList.add('hidden');
 isGameRunning = false;
 }
 function showSettings() {
 document.getElementById('startMenu').classList.add('hidden');
 document.getElementById('settingsMenu').classList.remove('hidden');
 }
 function saveSettings() {
 // Save settings logic would go here
 showStartMenu();
 }
 // Gamepad support
 window.addEventListener("gamepadconnected", (e) => {
 console.log("Gamepad connected:", e.gamepad.id);
 });
 window.addEventListener("gamepaddisconnected", (e) => {
 console.log("Gamepad disconnected:", e.gamepad.id);
 });
 // Initialize Feather Icons
 document.addEventListener('DOMContentLoaded', function() {
 feather.replace();
 });
 // Responsive adjustments
 function handleResize() {
 const container = document.querySelector('.game-container');
 const canvas = document.getElementById('gameCanvas');
if (window.innerWidth < 768) {
 container.style.maxWidth = '100%';
 if (game) {
 game.scale.setGameSize(400, 300);
 }
 } else {
 container.style.maxWidth = '1200px';
 if (game) {
 game.scale.setGameSize(800, 600);
 }
 }
 }
 window.addEventListener('resize', handleResize);
 handleResize();
 </script>
</body>
</html>