Hugging Face's logo

Spaces:
Kbartawi
/
stuff
Running

App Files Community
stuff / index.html
Kbartawi's picture
Kbartawi
Add 2 files
66ca689 verified
Raw History Blame Contribute Delete
24.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Super Mario Bros - HTML5 Clone</title>
 <style>
 body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 background: linear-gradient(to bottom, #1e90ff 0%, #58b7ff 100%);
 font-family: 'Arial', sans-serif;
 touch-action: manipulation;
 }
#game-container {
 position: relative;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 }
#game-world {
 position: absolute;
 width: 3000px;
 height: 100vh;
 background-color: #1e90ff;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="5" fill="white" opacity="0.4"/><circle cx="60" cy="35" r="7" fill="white" opacity="0.4"/><circle cx="80" cy="10" r="4" fill="white" opacity="0.4"/></svg>');
 background-size: 100px 100px;
 }
#ground {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 64px;
 background-color: #5c3927;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="%2390562a"/><rect x="0" y="0" width="32" height="8" fill="%23a87842"/><rect x="0" y="8" width="32" height="8" fill="%23604228"/><rect x="0" y="16" width="32" height="8" fill="%23a87842"/><rect x="0" y="24" width="32" height="8" fill="%23604228"/></svg>');
 }
#mario {
 position: absolute;
 width: 48px;
 height: 64px;
 bottom: 64px;
 left: 100px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 48 64"><path d="M0,48 L16,48 L16,64 L0,64 Z" fill="%23cc0000"/><path d="M32,48 L48,48 L48,64 L32,64 Z" fill="%23cc0000"/><path d="M8,32 L40,32 L40,48 L8,48 Z" fill="%23f8f808"/><path d="M16,24 L32,24 L32,32 L16,32 Z" fill="%23cc0000"/><path d="M16,16 L32,16 L32,24 L16,24 Z" fill="%23f8f808"/><path d="M8,16 L16,16 L16,24 L8,24 Z" fill="%23f8f808"/><path d="M32,16 L40,16 L40,24 L32,24 Z" fill="%23f8f808"/><path d="M16,8 L32,8 L32,16 L16,16 Z" fill="%23806020"/><circle cx="16" cy="12" r="2" fill="%23000000"/><circle cx="32" cy="12" r="2" fill="%23000000"/><path d="M20,16 L28,16 L28,20 L24,24 L20,20 Z" fill="%23000000"/><path d="M8,4 L40,4 L40,8 L32,8 L32,16 L16,16 L16,8 L8,8 Z" fill="%23806020"/></svg>');
 background-repeat: no-repeat;
 z-index: 10;
 transition: transform 0.05s;
 transform-origin: center bottom;
 image-rendering: pixelated;
 }
.mario-walk {
 animation: marioWalk 0.3s steps(3) infinite;
 }
@keyframes marioWalk {
 0% { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 48 64"><path d="M0,48 L16,48 L16,64 L0,64 Z" fill="%23cc0000"/><path d="M32,48 L48,48 L48,64 L32,64 Z" fill="%23cc0000"/><path d="M8,32 L40,32 L40,48 L8,48 Z" fill="%23f8f808"/><path d="M16,24 L32,24 L32,32 L16,32 Z" fill="%23cc0000"/><path d="M16,16 L32,16 L32,24 L16,24 Z" fill="%23f8f808"/><path d="M8,16 L16,16 L16,24 L8,24 Z" fill="%23f8f808"/><path d="M32,16 L40,16 L40,24 L32,24 Z" fill="%23f8f808"/><path d="M16,8 L32,8 L32,16 L16,16 Z" fill="%23806020"/><circle cx="16" cy="12" r="2" fill="%23000000"/><circle cx="32" cy="12" r="2" fill="%23000000"/><path d="M20,16 L28,16 L28,20 L24,24 L20,20 Z" fill="%23000000"/><path d="M8,4 L40,4 L40,8 L32,8 L32,16 L16,16 L16,8 L8,8 Z" fill="%23806020"/></svg>'); }
 33% { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 48 64"><path d="M0,48 L16,48 L16,60 L0,60 Z" fill="%23cc0000"/><path d="M32,48 L48,48 L48,64 L32,64 Z" fill="%23cc0000"/><path d="M8,32 L40,32 L40,48 L8,48 Z" fill="%23f8f808"/><path d="M16,24 L32,24 L32,32 L16,32 Z" fill="%23cc0000"/><path d="M16,16 L32,16 L32,24 L16,24 Z" fill="%23f8f808"/><path d="M8,16 L16,16 L16,24 L8,24 Z" fill="%23f8f808"/><path d="M32,16 L40,16 L40,24 L32,24 Z" fill="%23f8f808"/><path d="M16,8 L32,8 L32,16 L16,16 Z" fill="%23806020"/><circle cx="16" cy="12" r="2" fill="%23000000"/><circle cx="32" cy="12" r="2" fill="%23000000"/><path d="M20,16 L28,16 L28,20 L24,24 L20,20 Z" fill="%23000000"/><path d="M8,4 L40,4 L40,8 L32,8 L32,16 L16,16 L16,8 L8,8 Z" fill="%23806020"/></svg>'); }
 66% { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 48 64"><path d="M0,48 L16,48 L16,64 L0,64 Z" fill="%23cc0000"/><path d="M32,48 L48,48 L48,60 L32,60 Z" fill="%23cc0000"/><path d="M8,32 L40,32 L40,48 L8,48 Z" fill="%23f8f808"/><path d="M16,24 L32,24 L32,32 L16,32 Z" fill="%23cc0000"/><path d="M16,16 L32,16 L32,24 L16,24 Z" fill="%23f8f808"/><path d="M8,16 L16,16 L16,24 L8,24 Z" fill="%23f8f808"/><path d="M32,16 L40,16 L40,24 L32,24 Z" fill="%23f8f808"/><path d="M16,8 L32,8 L32,16 L16,16 Z" fill="%23806020"/><circle cx="16" cy="12" r="2" fill="%23000000"/><circle cx="32" cy="12" r="2" fill="%23000000"/><path d="M20,16 L28,16 L28,20 L24,24 L20,20 Z" fill="%23000000"/><path d="M8,4 L40,4 L40,8 L32,8 L32,16 L16,16 L16,8 L8,8 Z" fill="%23806020"/></svg>'); }
 }
.mario-jump {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 48 64"><path d="M0,48 L16,48 L16,64 L0,64 Z" fill="%23cc0000"/><path d="M32,48 L48,48 L48,64 L32,64 Z" fill="%23cc0000"/><path d="M8,32 L40,32 L40,48 L8,48 Z" fill="%23f8f808"/><path d="M16,24 L32,24 L32,32 L16,32 Z" fill="%23cc0000"/><path d="M16,16 L32,16 L32,24 L16,24 Z" fill="%23f8f808"/><path d="M8,16 L16,16 L16,24 L8,24 Z" fill="%23f8f808"/><path d="M32,16 L40,16 L40,24 L32,24 Z" fill="%23f8f808"/><path d="M16,8 L32,8 L32,16 L16,16 Z" fill="%23806020"/><circle cx="16" cy="12" r="2" fill="%23000000"/><circle cx="32" cy="12" r="2" fill="%23000000"/><path d="M20,16 L28,16 L28,20 L24,24 L20,20 Z" fill="%23000000"/><path d="M8,4 L40,4 L40,8 L32,8 L32,16 L16,16 L16,8 L8,8 Z" fill="%23806020"/></svg>');
 transform: scale(1.2);
 }
.block {
 position: absolute;
 width: 48px;
 height: 48px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><rect width="48" height="48" fill="%23b58c45"/><rect x="4" y="4" width="40" height="40" fill="%23d4a059"/><rect x="8" y="8" width="32" height="32" fill="%23b58c45"/><rect x="12" y="12" width="24" height="24" fill="%23d4a059"/><rect x="16" y="16" width="16" height="16" fill="%23b58c45"/><rect x="20" y="20" width="8" height="8" fill="%23d4a059"/></svg>');
 z-index: 5;
 image-rendering: pixelated;
 }
.brick {
 position: absolute;
 width: 48px;
 height: 48px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><rect width="48" height="48" fill="%23cc0000"/><path d="M0,4 L48,4 L48,8 L0,8 Z M0,12 L48,12 L48,16 L0,16 Z M0,20 L48,20 L48,24 L0,24 Z M0,28 L48,28 L48,32 L0,32 Z M0,36 L48,36 L48,40 L0,40 Z M0,44 L48,44 L48,48 L0,48 Z" fill="%23990000"/></svg>');
 z-index: 5;
 image-rendering: pixelated;
 }
.question-block {
 position: absolute;
 width: 48px;
 height: 48px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><rect width="48" height="48" fill="%23f8d808"/><rect x="4" y="4" width="40" height="40" fill="%23f8f808"/><rect x="8" y="8" width="32" height="32" fill="%23f8d808"/><path d="M24,16 L32,24 L24,32 L16,24 Z" fill="%23f8f808"/></svg>');
 z-index: 5;
 animation: blockBounce 0.5s infinite alternate;
 image-rendering: pixelated;
 }
@keyframes blockBounce {
 0% { transform: translateY(0); }
 100% { transform: translateY(-3px); }
 }
.pipe {
 position: absolute;
 width: 96px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="100" viewBox="0 0 96 100"><rect width="96" height="24" fill="%23189409"/><rect y="24" width="96" height="76" fill="%2320b010"/><rect x="8" y="8" width="80" height="16" fill="%2330c020"/><rect x="16" y="28" width="64" height="72" fill="%2330c020"/></svg>');
 background-repeat: repeat-y;
 background-size: 96px 96px;
 z-index: 5;
 image-rendering: pixelated;
 }
.coin {
 position: absolute;
 width: 24px;
 height: 24px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23f8f808" stroke="%23f8d808" stroke-width="2"/><path d="M12,5 C15,5 19,8 19,12 C19,16 15,19 12,19 C9,19 5,16 5,12 C5,8 9,5 12,5 Z" fill="%23e8c810"/><path d="M12,8 C14,8 16,10 16,12 C16,14 14,16 12,16 C10,16 8,14 8,12 C8,10 10,8 12,8 Z" fill="%23f8f808"/></svg>');
 z-index: 4;
 animation: coinSpin 0.5s linear infinite;
 image-rendering: pixelated;
 }
@keyframes coinSpin {
 0% { transform: scale(1) rotateY(0deg); }
 50% { transform: scale(1.2) rotateY(180deg); }
 100% { transform: scale(1) rotateY(360deg); }
 }
.goomba {
 position: absolute;
 width: 48px;
 height: 45px;
 bottom: 64px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="45" viewBox="0 0 48 45"><path d="M8,0 C12,0 39,0 40,0 C44,0 48,4 48,8 C48,30 48,30 48,30 C48,38 40,45 40,45 L8,45 C0,45 0,38 0,30 C0,30 0,10 0,8 C0,4 4,0 8,0 Z" fill="%23805c28"/><rect y="15" width="48" height="30" fill="%23684428"/><rect x="6" y="6" width="12" height="9" fill="%23000000"/><rect x="30" y="6" width="12" height="9" fill="%23000000"/><rect x="18" y="24" width="12" height="3" fill="%23000000"/><rect x="12" y="36" width="8" height="9" fill="%23000000"/><rect x="28" y="36" width="8" height="9" fill="%23000000"/></svg>');
 z-index: 6;
 animation: goombaWalk 1s steps(2) infinite;
 image-rendering: pixelated;
 }
@keyframes goombaWalk {
 0% { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="45" viewBox="0 0 48 45"><path d="M8,0 C12,0 39,0 40,0 C44,0 48,4 48,8 C48,30 48,30 48,30 C48,38 40,45 40,45 L8,45 C0,45 0,38 0,30 C0,30 0,10 0,8 C0,4 4,0 8,0 Z" fill="%23805c28"/><rect y="15" width="48" height="30" fill="%23684428"/><rect x="6" y="6" width="12" height="9" fill="%23000000"/><rect x="30" y="6" width="12" height="9" fill="%23000000"/><rect x="18" y="24" width="12" height="3" fill="%23000000"/><rect x="12" y="36" width="8" height="9" fill="%23000000"/><rect x="28" y="36" width="8" height="9" fill="%23000000"/></svg>'); }
 50% { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="45" viewBox="0 0 48 45"><path d="M8,0 C12,0 39,0 40,0 C44,0 48,4 48,8 C48,30 48,30 48,30 C48,34 47,38 40,45 L8,45 C5,45 0,40 0,32 C0,32 0,10 0,8 C0,4 4,0 8,0 Z" fill="%23805c28"/><rect y="15" width="48" height="30" fill="%23684428"/><rect x="6" y="6" width="12" height="9" fill="%23000000"/><rect x="30" y="6" width="12" height="9" fill="%23000000"/><rect x="18" y="24" width="12" height="3" fill="%23000000"/><rect x="12" y="36" width="8" height="9" fill="%23000000"/><rect x="28" y="36" width="8" height="9" fill="%23000000"/></svg>'); }
 }
.goomba-squashed {
 animation: none;
 height: 20px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20"><rect y="0" width="48" height="20" fill="%23805c28"/><rect x="18" y="5" width="12" height="3" fill="%23000000"/></svg>');
 }
#hud {
 position: fixed;
 top: 10px;
 left: 10px;
 color: white;
 font-size: 24px;
 font-weight: bold;
 text-shadow: 3px 3px 0 #000;
 z-index: 100;
 padding: 10px;
 background-color: rgba(0,0,0,0.5);
 border-radius: 10px;
 display: flex;
 gap: 20px;
 }
.hud-item {
 display: flex;
 align-items: center;
 }
#controls-info {
 position: fixed;
 bottom: 10px;
 left: 10px;
 color: white;
 font-size: 16px;
 text-shadow: 2px 2px 0 #000;
 background-color: rgba(0,0,0,0.7);
 padding: 10px 15px;
 border-radius: 10px;
 z-index: 100;
 }
#game-over {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.8);
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: white;
 font-size: 48px;
 font-weight: bold;
 text-shadow: 4px 4px 0 #000;
 z-index: 200;
 }
#restart-btn {
 margin-top: 30px;
 padding: 15px 30px;
 background-color: #ff0000;
 color: white;
 border: none;
 border-radius: 10px;
 font-size: 24px;
 font-weight: bold;
 cursor: pointer;
 box-shadow: 0 5px 0 #990000, 0 5px 10px rgba(0,0,0,0.5);
 transition: all 0.1s;
 }
#restart-btn:active {
 transform: translateY(5px);
 box-shadow: 0 0 0 #990000, 0 5px 10px rgba(0,0,0,0.5);
 }
#title {
 position: fixed;
 top: 20px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 32px;
 font-weight: bold;
 text-shadow: 4px 4px 0 #000;
 z-index: 100;
 animation: titleBounce 1s infinite alternate;
 }
@keyframes titleBounce {
 0% { transform: translateY(0); }
 100% { transform: translateY(-10px); }
 }
 </style>
</head>
<body>
 <div id="title">SUPER MARIO BROS</div>
 <div id="game-container">
 <div id="game-world">
 <div id="ground"></div>
 <div id="mario"></div>
 </div>
 </div>
<div id="hud">
 <div class="hud-item">Coins: <span id="coins">0</span></div>
 <div class="hud-item">Score: <span id="score">0</span></div>
 <div class="hud-item">World: <span>1-1</span></div>
 </div>
<div id="controls-info">
 ← → to Move | ↑/SPACE to Jump
 </div>
<div id="game-over">
 <h1>GAME OVER!</h1>
 <button id="restart-btn">PLAY AGAIN</button>
 </div>
<audio id="jump-sound" preload="auto">
 <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ...">
 </audio>
 <audio id="coin-sound" preload="auto">
 <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ...">
 </audio>
 <audio id="bump-sound" preload="auto">
 <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ...">
 </audio>
 <audio id="stomp-sound" preload="auto">
 <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ...">
 </audio>
 <audio id="die-sound" preload="auto">
 <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ...">
 </audio>
 <audio id="theme-music" preload="auto" loop>
 <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ...">
 </audio>
<script>
 // Game state
 const gameState = {
 coins: 0,
 score: 0,
 lives: 3,
 world: '1-1',
 marioX: 100,
 marioY: 0,
 velocityX: 0,
 velocityY: 0,
 direction: 1, // 1 for right, -1 for left
 isJumping: false,
 isWalking: false,
 isAlive: true,
 cameraX: 0,
 gravity: 0.5,
 jumpForce: -13,
 speed: 5,
 moveAcceleration: 0.7,
 moveDeceleration: 0.7,
 maxSpeed: 8,
 groundY: 0,
 keys: {
 ArrowLeft: false,
 ArrowRight: false,
 ArrowUp: false,
 Space: false,
 KeyA: false,
 KeyD: false,
 KeyW: false
 }
 };
 // DOM elements
 const gameContainer = document.getElementById('game-container');
 const gameWorld = document.getElementById('game-world');
 const mario = document.getElementById('mario');
 const ground = document.getElementById('ground');
 const coinsDisplay = document.getElementById('coins');
 const scoreDisplay = document.getElementById('score');
 const gameOverScreen = document.getElementById('game-over');
 const restartBtn = document.getElementById('restart-btn');
 const title = document.getElementById('title');
 // Audio elements
 const jumpSound = document.getElementById('jump-sound');
 const coinSound = document.getElementById('coin-sound');
 const bumpSound = document.getElementById('bump-sound');
 const stompSound = document.getElementById('stomp-sound');
 const dieSound = document.getElementById('die-sound');
 const themeMusic = document.getElementById('theme-music');
 // Game objects
 const blocks = [];
 const bricks = [];
 const questionBlocks = [];
 const coins = [];
 const pipes = [];
 const goombas = [];
 // Initialize the game
 function initGame() {
 gameState.coins = 0;
 gameState.score = 0;
 gameState.lives = 3;
 gameState.marioX = 100;
 gameState.marioY = 0;
 gameState.velocityX = 0;
 gameState.velocityY = 0;
 gameState.direction = 1;
 gameState.isJumping = false;
 gameState.isWalking = false;
 gameState.isAlive = true;
 gameState.cameraX = 0;
 gameOverScreen.style.display = 'none';
// Reset Mario position and appearance
 mario.style.left = '100px';
 mario.style.bottom = '64px';
 mario.classList.remove('mario-walk', 'mario-jump');
// Create level elements
 createLevel();
// Start game loop
 requestAnimationFrame(gameLoop);
// Play theme music
 themeMusic.currentTime = 0;
 themeMusic.volume = 0.7;
 try {
 themeMusic.play();
 } catch (e) {
 console.log("Audio play failed:", e);
 }
 }
 // Create level elements
 function createLevel() {
 // Clear existing elements
 gameWorld.querySelectorAll('.block, .brick, .question-block, .coin, .pipe, .goomba')
 .forEach(element => element.remove());
// Clear arrays
 blocks.length = 0;
 bricks.length = 0;
 questionBlocks.length = 0;
 coins.length = 0;
 pipes.length = 0;
 goombas.length = 0;
 // Calculate ground position
 gameState.groundY = 64; // Height of ground element
 // Add platforms
 for (let i = 0; i < 10; i++) {
 const block = document.createElement('div');
 block.className = 'block';
 block.style.left = (500 + i * 48) + 'px';
 block.style.bottom = '150px';
 gameWorld.appendChild(block);
 blocks.push({
 element: block,
 x: 500 + i * 48,
 y: 150,
 width: 48,
 height: 48
 });
 }
 // Add bricks
 for (let i = 0; i < 3; i++) {
 const brick = document.createElement('div');
 brick.className = 'brick';
 brick.style.left = (300 + i * 60) + 'px';
 brick.style.bottom = '200px';
 gameWorld.appendChild(brick);
 bricks.push({
 element: brick,
 x: 300 + i * 60,
 y: 200,
 width: 48,
 height: 48
 });
 }
 // Add question blocks
 for (let i = 0; i < 2; i++) {
 const block = document.createElement('div');
 block.className = 'question-block';
 block.style.left = (700 + i * 120) + 'px';
 block.style.bottom = '200px';
 gameWorld.appendChild(block);
 questionBlocks.push({
 element: block,
 x: 700 + i * 120,
 y: 200,
 width: 48,
 height: 48
 });
 }
 // Add pipes
 const pipe = document.createElement('div');
 pipe.className = 'pipe';
 pipe.style.left = '1200px';
 pipe.style.bottom = '0px';
 pipe.style.height = '150px';
 gameWorld.appendChild(pipe);
 pipes.push({
 element: pipe,
 x: 1200,
 y: 0,
 width: 96,
 height: 150
 });
 // Add more pipes
 const pipe2 = document.createElement('div');
 pipe2.className = 'pipe';
 pipe2.style.left = '1800px';
 pipe2.style.bottom = '0px';
 pipe2.style.height = '180px';
 gameWorld.appendChild(pipe2);
 pipes.push({
 element: pipe2,
 x: 1800,
 y: 0,
 width: 96,
 height: 180
 });
 // Add coins
 for (let i = 0; i < 8; i++) {
 const coin = document.createElement('div');
 coin.className = 'coin';
 coin.style.left = (800 + i * 70) + 'px';
 coin.style.bottom = '250px';
 gameWorld.appendChild(coin);
 coins.push({
 element: coin,
 x: 800 + i * 70,
 y: 250,
 width: 24,
 height: 24
 });
 }
 // Add floating coins
 for (let i = 0; i < 5; i++) {
 const coin = document.createElement('div');
 coin.className = 'coin';
 coin.style.left = (1500 + i * 150) + 'px';
 coin.style.bottom = '150px';
 gameWorld.appendChild(coin);
 coins.push({
 element: coin,
 x: 1500 + i * 150,
 y: 150,
 width: 24,
 height: 24
 });
 }
 // Add enemies
 for (let i = 0; i < 5
</html>