Spaces:

Kbartawi
/

stuff

Running

App Files Files Community

Kbartawi commited on Mar 30, 2025

Commit

66ca689

verified ·

1 Parent(s): a7031c6

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +512 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Stuff
-emoji: 📈
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: stuff
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,512 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>