Hugging Face's logo

Spaces:
MagicBullets
/
dosegame-com
Running

App Files Community
dosegame-com / index.html
MagicBullets's picture
MagicBullets
undefined - Initial Deployment
9203a64 verified
raw
history blame
57.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DoseGame - Retro Arcade Gaming</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root {
--neon-purple: #b967ff;
--neon-cyan: #00ffff;
--dark-bg: #0a0a1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--dark-bg);
color: white;
overflow-x: hidden;
position: relative;
min-height: 100vh;
background-image:
radial-gradient(circle at 10% 20%, rgba(185, 103, 255, 0.1) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 20%);
}
/* CRT Effect */
.crt::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 1000;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
animation: flicker 0.15s infinite;
}
@keyframes flicker {
0% { opacity: 0.8; }
50% { opacity: 0.6; }
100% { opacity: 0.8; }
}
/* Pixel Art Header */
.pixel-header {
font-family: 'Press Start 2P', cursive;
text-transform: uppercase;
text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
animation: neon-pulse 2s infinite alternate;
}
@keyframes neon-pulse {
0% { text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple); }
100% { text-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-purple), 0 0 40px var(--neon-cyan); }
}
/* Neon Buttons */
.neon-btn {
transition: all 0.3s ease;
border: 2px solid var(--neon-purple);
box-shadow: 0 0 10px var(--neon-purple);
}
.neon-btn:hover {
background-color: var(--neon-purple);
box-shadow: 0 0 20px var(--neon-purple), 0 0 30px var(--neon-cyan);
transform: translateY(-2px);
}
.neon-cyan-btn {
border-color: var(--neon-cyan);
box-shadow: 0 0 10px var(--neon-cyan);
}
.neon-cyan-btn:hover {
background-color: var(--neon-cyan);
box-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-purple);
}
/* Game Cards */
.game-card {
transition: all 0.3s ease;
background: rgba(20, 20, 40, 0.7);
border: 1px solid rgba(185, 103, 255, 0.3);
overflow: hidden;
}
.game-card:hover {
transform: translateY(-5px);
border-color: var(--neon-purple);
box-shadow: 0 0 20px rgba(185, 103, 255, 0.5);
}
/* Retro Inputs */
.retro-input {
background: rgba(0, 0, 0, 0.5);
border: 2px solid var(--neon-cyan);
color: white;
padding: 0.5rem 1rem;
}
.retro-input:focus {
outline: none;
border-color: var(--neon-purple);
box-shadow: 0 0 10px var(--neon-purple);
}
/* Particle Background */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(10, 10, 26, 0.8);
}
::-webkit-scrollbar-thumb {
background: var(--neon-purple);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--neon-cyan);
}
/* Retro Radio Buttons */
.retro-radio input[type="radio"] {
display: none;
}
.retro-radio label {
display: inline-block;
padding: 0.5rem 1rem;
border: 2px solid var(--neon-cyan);
cursor: pointer;
transition: all 0.3s;
}
.retro-radio input[type="radio"]:checked + label {
background-color: var(--neon-cyan);
color: black;
font-weight: bold;
}
/* Pixel Art Elements */
.pixel-art {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
/* Asteroids Game Canvas */
#asteroids-canvas {
border: 3px solid var(--neon-purple);
box-shadow: 0 0 20px rgba(185, 103, 255, 0.5);
background: black;
}
/* Achievement Badges */
.achievement-badge {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 0 10px var(--neon-purple);
position: relative;
}
.achievement-badge::after {
content: "";
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--dark-bg);
display: flex;
align-items: center;
justify-content: center;
}
.achievement-badge i {
z-index: 1;
}
/* Mobile Navigation */
.mobile-menu {
transform: translateX(100%);
transition: transform 0.3s ease;
}
.mobile-menu.active {
transform: translateX(0);
}
/* Customization Preview */
.customization-preview {
border: 3px dashed var(--neon-cyan);
background: rgba(0, 0, 0, 0.5);
}
/* Shopping Cart */
.cart-item {
border-bottom: 1px solid rgba(185, 103, 255, 0.3);
}
.cart-item:last-child {
border-bottom: none;
}
</style>
</head>
<body class="crt">
<!-- Particle Background -->
<div id="particles-js"></div>
<!-- Header -->
<header class="sticky top-0 z-50 bg-black bg-opacity-80 backdrop-blur-sm border-b border-purple-500">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<div class="pixel-header text-2xl md:text-3xl">DOSEGAME</div>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-6">
<a href="#hero" class="text-purple-300 hover:text-cyan-300 transition">Home</a>
<a href="#library" class="text-purple-300 hover:text-cyan-300 transition">Games</a>
<a href="#customize" class="text-purple-300 hover:text-cyan-300 transition">Customize</a>
<a href="#shop" class="text-purple-300 hover:text-cyan-300 transition">Shop</a>
<a href="#asteroids" class="text-purple-300 hover:text-cyan-300 transition">Play Asteroids</a>
</nav>
<div class="flex items-center space-x-4">
<div class="relative">
<button id="cartButton" class="text-2xl text-cyan-300 relative">
<i class="fas fa-shopping-cart"></i>
<span id="cartCount" class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
</button>
</div>
<div class="hidden md:flex space-x-2">
<button class="neon-btn px-4 py-1 rounded">Login</button>
<button class="neon-cyan-btn px-4 py-1 rounded">Register</button>
</div>
<!-- Mobile Menu Button -->
<button id="mobileMenuButton" class="md:hidden text-2xl text-purple-300">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- Mobile Navigation -->
<div id="mobileMenu" class="mobile-menu fixed top-0 right-0 h-full w-64 bg-black bg-opacity-95 backdrop-blur-lg z-50 p-6">
<div class="flex justify-end mb-8">
<button id="closeMenuButton" class="text-2xl text-purple-300">
<i class="fas fa-times"></i>
</button>
</div>
<nav class="flex flex-col space-y-6">
<a href="#hero" class="text-purple-300 hover:text-cyan-300 transition text-xl">Home</a>
<a href="#library" class="text-purple-300 hover:text-cyan-300 transition text-xl">Games</a>
<a href="#customize" class="text-purple-300 hover:text-cyan-300 transition text-xl">Customize</a>
<a href="#shop" class="text-purple-300 hover:text-cyan-300 transition text-xl">Shop</a>
<a href="#asteroids" class="text-purple-300 hover:text-cyan-300 transition text-xl">Play Asteroids</a>
<div class="pt-4 border-t border-purple-800">
<button class="neon-btn w-full py-2 rounded mb-3">Login</button>
<button class="neon-cyan-btn w-full py-2 rounded">Register</button>
</div>
</nav>
</div>
</header>
<!-- Hero Section -->
<section id="hero" class="py-16 md:py-24 relative">
<div class="container mx-auto px-4 text-center">
<h1 class="pixel-header text-3xl md:text-5xl mb-8 animate-pulse">
Play Classic Arcade Games Online - Free!
</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
<!-- Pac-Man Card -->
<div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
<div class="bg-gray-800 h-48 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Pac-Man</h3>
<button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
</div>
</div>
<!-- Asteroids Card -->
<div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
<div class="bg-gray-800 h-48 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Asteroids</h3>
<button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
</div>
</div>
<!-- Space Invaders Card -->
<div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
<div class="bg-gray-800 h-48 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Space Invaders</h3>
<button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
</div>
</div>
</div>
</div>
</section>
<!-- Game Library -->
<section id="library" class="py-16 bg-black bg-opacity-30">
<div class="container mx-auto px-4">
<h2 class="pixel-header text-3xl mb-2 text-center">Game Library</h2>
<p class="text-center text-purple-300 mb-10">Choose from our collection of classic arcade games</p>
<!-- Filters and Search -->
<div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
<div class="flex flex-wrap gap-2">
<button class="neon-cyan-btn px-4 py-1 rounded">All Games</button>
<button class="neon-btn px-4 py-1 rounded">Action</button>
<button class="neon-btn px-4 py-1 rounded">Puzzle</button>
<button class="neon-btn px-4 py-1 rounded">Classic</button>
<button class="neon-btn px-4 py-1 rounded">Most Popular</button>
</div>
<div class="relative">
<input type="text" placeholder="Search games..." class="retro-input rounded-full pl-4 pr-10 py-2 w-64">
<i class="fas fa-search absolute right-3 top-3 text-cyan-300"></i>
</div>
</div>
<!-- Game Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Example Game Card -->
<div class="game-card rounded-lg overflow-hidden">
<div class="bg-gray-800 h-40 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="text-lg font-bold">Pac-Man</h3>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400"></i>
<span class="ml-1">4.8</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 12.4K plays</span>
<span class="text-sm text-gray-400">1980</span>
</div>
<div class="flex gap-2">
<button class="neon-btn flex-1 py-1 rounded">PLAY</button>
<button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
</div>
</div>
</div>
<!-- Additional game cards would go here -->
<!-- For brevity, I'll duplicate one card -->
<div class="game-card rounded-lg overflow-hidden">
<div class="bg-gray-800 h-40 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="text-lg font-bold">Tetris</h3>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400"></i>
<span class="ml-1">4.9</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 8.7K plays</span>
<span class="text-sm text-gray-400">1984</span>
</div>
<div class="flex gap-2">
<button class="neon-btn flex-1 py-1 rounded">PLAY</button>
<button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
</div>
</div>
</div>
<div class="game-card rounded-lg overflow-hidden">
<div class="bg-gray-800 h-40 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="text-lg font-bold">Space Invaders</h3>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400"></i>
<span class="ml-1">4.7</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 9.2K plays</span>
<span class="text-sm text-gray-400">1978</span>
</div>
<div class="flex gap-2">
<button class="neon-btn flex-1 py-1 rounded">PLAY</button>
<button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
</div>
</div>
</div>
<div class="game-card rounded-lg overflow-hidden">
<div class="bg-gray-800 h-40 flex items-center justify-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="text-lg font-bold">Donkey Kong</h3>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400"></i>
<span class="ml-1">4.6</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 6.3K plays</span>
<span class="text-sm text-gray-400">1981</span>
</div>
<div class="flex gap-2">
<button class="neon-btn flex-1 py-1 rounded">PLAY</button>
<button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<button class="neon-cyan-btn px-6 py-2 rounded">Load More Games</button>
</div>
</div>
</section>
<!-- Customization Section -->
<section id="customize" class="py-16">
<div class="container mx-auto px-4">
<h2 class="pixel-header text-3xl mb-2 text-center">Game Customization</h2>
<p class="text-center text-purple-300 mb-10">Make It Personal!</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
<!-- Form -->
<div>
<form class="space-y-6">
<div>
<label class="block text-cyan-300 mb-2">Player Name</label>
<input type="text" class="retro-input w-full rounded" placeholder="Enter your name">
</div>
<div>
<label class="block text-cyan-300 mb-2">Family Members</label>
<div class="space-y-3">
<input type="text" class="retro-input w-full rounded" placeholder="Family member 1">
<input type="text" class="retro-input w-full rounded" placeholder="Family member 2">
<button type="button" class="neon-btn py-1 px-4 rounded">+ Add Member</button>
</div>
</div>
<div>
<label class="block text-cyan-300 mb-2">Custom Colors</label>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block mb-1">Player Color</label>
<input type="color" class="w-full h-10" value="#b967ff">
</div>
<div>
<label class="block mb-1">Enemy Color</label>
<input type="color" class="w-full h-10" value="#00ffff">
</div>
</div>
</div>
<div>
<label class="block text-cyan-300 mb-2">Difficulty Level</label>
<div class="retro-radio flex gap-4">
<div>
<input type="radio" id="easy" name="difficulty" checked>
<label for="easy">Easy</label>
</div>
<div>
<input type="radio" id="medium" name="difficulty">
<label for="medium">Medium</label>
</div>
<div>
<input type="radio" id="hard" name="difficulty">
<label for="hard">Hard</label>
</div>
</div>
</div>
<button class="neon-cyan-btn w-full py-3 rounded-lg text-lg font-bold">Save Custom Game</button>
</form>
</div>
<!-- Preview -->
<div class="flex flex-col">
<h3 class="text-xl font-bold mb-4 text-center">Live Preview</h3>
<div class="customization-preview flex-grow rounded-lg p-6 flex flex-col items-center justify-center">
<div class="bg-gray-800 w-full max-w-md h-64 flex items-center justify-center mb-6">
<div class="text-center">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4" />
<p class="text-cyan-300">Player: <span class="text-purple-300">YourName</span></p>
<p class="mt-2 text-gray-400">Difficulty: Easy</p>
</div>
</div>
<p class="text-gray-400 text-center">Your customized game will appear here</p>
</div>
</div>
</div>
</div>
</section>
<!-- Shopping Cart -->
<section id="shop" class="py-16 bg-black bg-opacity-30">
<div class="container mx-auto px-4">
<h2 class="pixel-header text-3xl mb-2 text-center">Premium Features</h2>
<p class="text-center text-purple-300 mb-10">Enhance your gaming experience</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<!-- Shop Item -->
<div class="game-card rounded-lg p-6 text-center">
<div class="text-4xl text-cyan-300 mb-4">
<i class="fas fa-ad"></i>
</div>
<h3 class="text-xl font-bold mb-2">Remove Ads</h3>
<p class="text-gray-300 mb-4">Enjoy ad-free gaming experience</p>
<p class="text-2xl font-bold text-purple-300 mb-4">$4.99</p>
<button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Remove Ads" data-price="4.99">Add to Cart</button>
</div>
<!-- Shop Item -->
<div class="game-card rounded-lg p-6 text-center">
<div class="text-4xl text-cyan-300 mb-4">
<i class="fas fa-palette"></i>
</div>
<h3 class="text-xl font-bold mb-2">Custom Themes</h3>
<p class="text-gray-300 mb-4">10+ exclusive themes for all games</p>
<p class="text-2xl font-bold text-purple-300 mb-4">$9.99</p>
<button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Custom Themes" data-price="9.99">Add to Cart</button>
</div>
<!-- Shop Item -->
<div class="game-card rounded-lg p-6 text-center">
<div class="text-4xl text-cyan-300 mb-4">
<i class="fas fa-heart"></i>
</div>
<h3 class="text-xl font-bold mb-2">Extra Lives</h3>
<p class="text-gray-300 mb-4">Get 25 extra lives for all games</p>
<p class="text-2xl font-bold text-purple-300 mb-4">$2.99</p>
<button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Extra Lives" data-price="2.99">Add to Cart</button>
</div>
<!-- Shop Item -->
<div class="game-card rounded-lg p-6 text-center">
<div class="text-4xl text-cyan-300 mb-4">
<i class="fas fa-trophy"></i>
</div>
<h3 class="text-xl font-bold mb-2">Leaderboard Access</h3>
<p class="text-gray-300 mb-4">Compete on global high score boards</p>
<p class="text-2xl font-bold text-purple-300 mb-4">$7.99</p>
<button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Leaderboard Access" data-price="7.99">Add to Cart</button>
</div>
</div>
<!-- Cart Display (hidden by default) -->
<div id="cartDisplay" class="hidden bg-black bg-opacity-50 rounded-lg p-6 max-w-3xl mx-auto">
<h3 class="text-2xl font-bold mb-6 text-center">Your Shopping Cart</h3>
<div id="cartItems" class="mb-6">
<!-- Cart items will be added here dynamically -->
</div>
<div class="flex justify-between items-center mb-6">
<span class="text-xl">Total:</span>
<span id="cartTotal" class="text-2xl font-bold text-purple-300">$0.00</span>
</div>
<button id="checkoutButton" class="neon-cyan-btn w-full py-3 rounded-lg text-lg font-bold">Proceed to Checkout</button>
</div>
</div>
</section>
<!-- Asteroids Game -->
<section id="asteroids" class="py-16">
<div class="container mx-auto px-4">
<h2 class="pixel-header text-3xl mb-2 text-center">Play Asteroids</h2>
<p class="text-center text-purple-300 mb-10">Use arrow keys to move, spacebar to shoot</p>
<div class="flex justify-center">
<div class="relative">
<canvas id="asteroids-canvas" width="800" height="500" class="w-full max-w-full"></canvas>
<div id="gameOver" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center">
<h3 class="pixel-header text-4xl mb-4 text-red-500">GAME OVER</h3>
<p class="text-2xl mb-2">Score: <span id="finalScore">0</span></p>
<p class="text-xl mb-6">High Score: <span id="highScore">0</span></p>
<div class="flex gap-4">
<button id="playAgainBtn" class="neon-cyan-btn px-6 py-2 rounded">Play Again</button>
<button class="neon-btn px-6 py-2 rounded">Customize</button>
</div>
</div>
</div>
</div>
<div class="mt-8 max-w-2xl mx-auto">
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="bg-black bg-opacity-50 p-4 rounded text-center">
<p class="text-gray-400">SCORE</p>
<p id="scoreDisplay" class="text-2xl font-bold">0</p>
</div>
<div class="bg-black bg-opacity-50 p-4 rounded text-center">
<p class="text-gray-400">LIVES</p>
<p id="livesDisplay" class="text-2xl font-bold">3</p>
</div>
<div class="bg-black bg-opacity-50 p-4 rounded text-center">
<p class="text-gray-400">LEVEL</p>
<p id="levelDisplay" class="text-2xl font-bold">1</p>
</div>
</div>
<div class="text-center">
<button id="fullscreenBtn" class="neon-btn px-6 py-2 rounded mr-3">
<i class="fas fa-expand mr-2"></i>Fullscreen
</button>
<button id="soundToggle" class="neon-btn px-6 py-2 rounded">
<i class="fas fa-volume-up mr-2"></i>Sound: ON
</button>
</div>
</div>
</div>
</section>
<!-- User Features -->
<section class="py-16 bg-black bg-opacity-30">
<div class="container mx-auto px-4">
<h2 class="pixel-header text-3xl mb-10 text-center">User Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Achievements -->
<div>
<h3 class="text-2xl font-bold mb-6 text-cyan-300">Achievements</h3>
<div class="grid grid-cols-3 gap-6">
<div class="text-center">
<div class="achievement-badge mx-auto mb-3">
<i class="fas fa-star"></i>
</div>
<p class="font-bold">First Play</p>
<p class="text-sm text-gray-400">Play your first game</p>
</div>
<div class="text-center">
<div class="achievement-badge mx-auto mb-3">
<i class="fas fa-trophy"></i>
</div>
<p class="font-bold">High Scorer</p>
<p class="text-sm text-gray-400">Reach top 10 in any game</p>
</div>
<div class="text-center">
<div class="achievement-badge mx-auto mb-3">
<i class="fas fa-gamepad"></i>
</div>
<p class="font-bold">Completionist</p>
<p class="text-sm text-gray-400">Play all games</p>
</div>
</div>
</div>
<!-- Social Sharing -->
<div>
<h3 class="text-2xl font-bold mb-6 text-cyan-300">Share Your Score</h3>
<div class="flex gap-4 justify-center">
<button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
<i class="fab fa-twitter"></i>
</button>
<button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
<i class="fab fa-facebook-f"></i>
</button>
<button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
<i class="fab fa-discord"></i>
</button>
</div>
<div class="mt-8">
<h3 class="text-xl font-bold mb-4">Keyboard Shortcuts</h3>
<ul class="space-y-2">
<li class="flex justify-between">
<span>Pause Game</span>
<span class="bg-gray-800 px-2 py-1 rounded">P</span>
</li>
<li class="flex justify-between">
<span>Mute Sound</span>
<span class="bg-gray-800 px-2 py-1 rounded">M</span>
</li>
<li class="flex justify-between">
<span>Fullscreen</span>
<span class="bg-gray-800 px-2 py-1 rounded">F</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="pt-16 pb-8 border-t border-purple-900">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<!-- Games Column -->
<div>
<h4 class="text-xl font-bold mb-4 text-cyan-300">Games</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-purple-300">All Games</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">New Releases</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Top Rated</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Most Played</a></li>
</ul>
</div>
<!-- Support Column -->
<div>
<h4 class="text-xl font-bold mb-4 text-cyan-300">Support</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-purple-300">Help Center</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">FAQs</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Contact Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Feedback</a></li>
</ul>
</div>
<!-- Company Column -->
<div>
<h4 class="text-xl font-bold mb-4 text-cyan-300">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-purple-300">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-300">Press</a></li>
</ul>
</div>
<!-- Newsletter -->
<div>
<h4 class="text-xl font-bold mb-4 text-cyan-300">Newsletter</h4>
<p class="text-gray-400 mb-4">Subscribe for updates and promotions</p>
<div class="flex">
<input type="email" placeholder="Your email" class="retro-input rounded-l-lg w-full">
<button class="neon-cyan-btn px-4 py-2 rounded-r-lg">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-purple-900 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="pixel-header text-xl">DOSEGAME</div>
<p class="text-gray-500 text-sm mt-2">© 2023 DoseGame. All rights reserved.</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Initialize Particles.js
document.addEventListener('DOMContentLoaded', function() {
particlesJS('particles-js', {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#b967ff" },
shape: { type: "circle" },
opacity: { value: 0.5, random: true },
size: { value: 3, random: true },
line_linked: { enable: false },
move: {
enable: true,
speed: 1,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "repulse" },
onclick: { enable: true, mode: "push" },
resize: true
}
}
});
});
// Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobileMenuButton');
const closeMenuButton = document.getElementById('closeMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.add('active');
});
closeMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('active');
});
// Shopping Cart Functionality
const cartButton = document.getElementById('cartButton');
const cartDisplay = document.getElementById('cartDisplay');
const cartItems = document.getElementById('cartItems');
const cartTotal = document.getElementById('cartTotal');
const cartCount = document.getElementById('cartCount');
const addToCartButtons = document.querySelectorAll('.add-to-cart');
const checkoutButton = document.getElementById('checkoutButton');
let cart = [];
addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
const item = button.getAttribute('data-item');
const price = parseFloat(button.getAttribute('data-price'));
cart.push({ item, price });
updateCart();
// Show cart display
cartDisplay.classList.remove('hidden');
// Cart animation
cartCount.classList.add('animate-ping');
setTimeout(() => {
cartCount.classList.remove('animate-ping');
}, 500);
});
});
function updateCart() {
cartItems.innerHTML = '';
let total = 0;
cart.forEach((item, index) => {
total += item.price;
const cartItem = document.createElement('div');
cartItem.className = 'cart-item py-3 flex justify-between items-center';
cartItem.innerHTML = `
<div>
<p class="font-bold">${item.item}</p>
<p class="text-gray-400">$${item.price.toFixed(2)}</p>
</div>
<button class="text-red-500 remove-item" data-index="${index}">
<i class="fas fa-trash"></i>
</button>
`;
cartItems.appendChild(cartItem);
});
cartTotal.textContent = `$${total.toFixed(2)}`;
cartCount.textContent = cart.length;
// Add event listeners to remove buttons
document.querySelectorAll('.remove-item').forEach(button => {
button.addEventListener('click', () => {
const index = parseInt(button.getAttribute('data-index'));
cart.splice(index, 1);
updateCart();
if (cart.length === 0) {
cartDisplay.classList.add('hidden');
}
});
});
}
cartButton.addEventListener('click', () => {
if (cart.length > 0) {
cartDisplay.classList.toggle('hidden');
}
});
checkoutButton.addEventListener('click', () => {
alert('Checkout functionality would be implemented here!');
});
// Asteroids Game
const canvas = document.getElementById('asteroids-canvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('scoreDisplay');
const livesDisplay = document.getElementById('livesDisplay');
const levelDisplay = document.getElementById('levelDisplay');
const gameOverScreen = document.getElementById('gameOver');
const finalScore = document.getElementById('finalScore');
const highScore = document.getElementById('highScore');
const playAgainBtn = document.getElementById('playAgainBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
const soundToggle = document.getElementById('soundToggle');
// Game state
let gameActive = true;
let score = 0;
let lives = 3;
let level = 1;
// Player ship
const ship = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 15,
angle: Math.PI / 2,
rotation: 0,
thrusting: false,
thrust: {
x: 0,
y: 0
},
velocity: {
x: 0,
y: 0
}
};
// Asteroids
let asteroids = [];
// Bullets
let bullets = [];
// Initialize game
function initGame() {
gameActive = true;
score = 0;
lives = 3;
level = 1;
asteroids = [];
bullets = [];
// Create initial asteroids
for (let i = 0; i < 4; i++) {
createAsteroid();
}
updateDisplays();
gameOverScreen.classList.add('hidden');
}
// Create asteroid
function createAsteroid() {
const size = Math.random() * 30 + 20;
const x = Math.random() < 0.5 ?
-size :
canvas.width + size;
const y = Math.random() * canvas.height;
asteroids.push({
x,
y,
size,
speed: Math.random() * 2 + 1,
angle: Math.random() * Math.PI * 2,
vertices: Math.floor(Math.random() * 5) + 5
});
}
// Update displays
function updateDisplays() {
scoreDisplay.textContent = score;
livesDisplay.textContent = lives;
levelDisplay.textContent = level;
}
// Draw ship
function drawShip() {
ctx.save();
ctx.translate(ship.x, ship.y);
ctx.rotate(ship.angle);
// Draw ship
ctx.strokeStyle = '#b967ff';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, -ship.radius);
ctx.lineTo(ship.radius, ship.radius);
ctx.lineTo(-ship.radius, ship.radius);
ctx.closePath();
ctx.stroke();
// Draw thrust
if (ship.thrusting) {
ctx.strokeStyle = '#00ffff';
ctx.beginPath();
ctx.moveTo(-ship.radius * 0.5, ship.radius);
ctx.lineTo(0, ship.radius + 10);
ctx.lineTo(ship.radius * 0.5, ship.radius);
ctx.stroke();
}
ctx.restore();
}
// Draw asteroids
function drawAsteroids() {
asteroids.forEach(asteroid => {
ctx.save();
ctx.translate(asteroid.x, asteroid.y);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.beginPath();
for (let i = 0; i < asteroid.vertices; i++) {
const angle = (i / asteroid.vertices) * Math.PI * 2;
const distance = asteroid.size * (0.7 + Math.random() * 0.3);
const x = Math.cos(angle) * distance;
const y = Math.sin(angle) * distance;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.closePath();
ctx.stroke();
ctx.restore();
});
}
// Draw bullets
function drawBullets() {
bullets.forEach(bullet => {
ctx.fillStyle = '#00ffff';
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
ctx.fill();
});
}
// Update game objects
function update() {
if (!gameActive) return;
// Update ship position
ship.x += ship.velocity.x;
ship.y += ship.velocity.y;
// Apply friction
ship.velocity.x *= 0.98;
ship.velocity.y *= 0.98;
// Apply thrust
if (ship.thrusting) {
ship.velocity.x += Math.cos(ship.angle) * 0.1;
ship.velocity.y += Math.sin(ship.angle) * 0.1;
}
// Wrap ship around screen
if (ship.x < -ship.radius) ship.x = canvas.width + ship.radius;
if (ship.x > canvas.width + ship.radius) ship.x = -ship.radius;
if (ship.y < -ship.radius) ship.y = canvas.height + ship.radius;
if (ship.y > canvas.height + ship.radius) ship.y = -ship.radius;
// Update asteroids
asteroids.forEach(asteroid => {
asteroid.x += Math.cos(asteroid.angle) * asteroid.speed;
asteroid.y += Math.sin(asteroid.angle) * asteroid.speed;
// Wrap asteroids around screen
if (asteroid.x < -asteroid.size) asteroid.x = canvas.width + asteroid.size;
if (asteroid.x > canvas.width + asteroid.size) asteroid.x = -asteroid.size;
if (asteroid.y < -asteroid.size) asteroid.y = canvas.height + asteroid.size;
if (asteroid.y > canvas.height + asteroid.size) asteroid.y = -asteroid.size;
});
// Update bullets
bullets.forEach((bullet, index) => {
bullet.x += Math.cos(bullet.angle) * bullet.speed;
bullet.y += Math.sin(bullet.angle) * bullet.speed;
// Remove bullets that go off screen
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullets.splice(index, 1);
}
});
// Check collisions
checkCollisions();
}
// Check collisions
function checkCollisions() {
// Check bullet-asteroid collisions
bullets.forEach((bullet, bulletIndex) => {
asteroids.forEach((asteroid, asteroidIndex) => {
const dx = bullet.x - asteroid.x;
const dy = bullet.y - asteroid.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < asteroid.size) {
// Remove bullet and asteroid
bullets.splice(bulletIndex, 1);
asteroids.splice(asteroidIndex, 1);
// Add score
score += Math.floor(asteroid.size);
updateDisplays();
// Create new asteroids if needed
if (asteroids.length === 0) {
level++;
for (let i = 0; i < level + 3; i++) {
createAsteroid();
}
updateDisplays();
}
}
});
});
// Check ship-asteroid collisions
asteroids.forEach(asteroid => {
const dx = ship.x - asteroid.x;
const dy = ship.y - asteroid.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < ship.radius + asteroid.size) {
// Lose a life
lives--;
updateDisplays();
// Reset ship position
ship.x = canvas.width / 2;
ship.y = canvas.height / 2;
ship.velocity.x = 0;
ship.velocity.y = 0;
// Game over
if (lives <= 0) {
gameActive = false;
finalScore.textContent = score;
// Get high score from localStorage
const storedHighScore = localStorage.getItem('asteroidsHighScore') || 0;
if (score > storedHighScore) {
localStorage.setItem('asteroidsHighScore', score);
highScore.textContent = score;
} else {
highScore.textContent = storedHighScore;
}
gameOverScreen.classList.remove('hidden');
}
}
});
}
// Draw game
function draw() {
// Clear canvas
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw stars
ctx.fillStyle = 'white';
for (let i = 0; i < 100; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = Math.random() * 2;
ctx.fillRect(x, y, size, size);
}
// Draw game objects
drawAsteroids();
drawBullets();
drawShip();
}
// Game loop
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// Start game
initGame();
gameLoop();
// Event listeners
document.addEventListener('keydown', (e) => {
if (!gameActive) return;
switch(e.key) {
case 'ArrowLeft':
ship.rotation = -0.1;
break;
case 'ArrowRight':
ship.rotation = 0.1;
break;
case 'ArrowUp':
ship.thrusting = true;
break;
case ' ':
// Fire bullet
bullets.push({
x: ship.x + Math.cos(ship.angle) * ship.radius,
y: ship.y + Math.sin(ship.angle) * ship.radius,
angle: ship.angle,
speed: 5
});
break;
}
});
document.addEventListener('keyup', (e) => {
switch(e.key) {
case 'ArrowLeft':
case 'ArrowRight':
ship.rotation = 0;
break;
case 'ArrowUp':
ship.thrusting = false;
break;
}
});
// Update ship rotation
setInterval(() => {
ship.angle += ship.rotation;
}, 16);
// Play again button
playAgainBtn.addEventListener('click', initGame);
// Fullscreen button
fullscreenBtn.addEventListener('click', () => {
if (canvas.requestFullscreen) {
canvas.requestFullscreen();
} else if (canvas.mozRequestFullScreen) {
canvas.mozRequestFullScreen();
} else if (canvas.webkitRequestFullscreen) {
canvas.webkitRequestFullscreen();
} else if (canvas.msRequestFullscreen) {
canvas.msRequestFullscreen();
}
});
// Sound toggle
let soundOn = true;
soundToggle.addEventListener('click', () => {
soundOn = !soundOn;
soundToggle.innerHTML = soundOn ?
'<i class="fas fa-volume-up mr-2"></i>Sound: ON' :
'<i class="fas fa-volume-mute mr-2"></i>Sound: OFF';
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MagicBullets/dosegame-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>