| <!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> |
| |
| const gameState = { |
| coins: 0, |
| score: 0, |
| lives: 3, |
| world: '1-1', |
| marioX: 100, |
| marioY: 0, |
| velocityX: 0, |
| velocityY: 0, |
| direction: 1, |
| 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 |
| } |
| }; |
| |
| |
| 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'); |
| |
| |
| 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'); |
| |
| |
| const blocks = []; |
| const bricks = []; |
| const questionBlocks = []; |
| const coins = []; |
| const pipes = []; |
| const goombas = []; |
| |
| |
| 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'; |
| |
| |
| mario.style.left = '100px'; |
| mario.style.bottom = '64px'; |
| mario.classList.remove('mario-walk', 'mario-jump'); |
| |
| |
| createLevel(); |
| |
| |
| requestAnimationFrame(gameLoop); |
| |
| |
| themeMusic.currentTime = 0; |
| themeMusic.volume = 0.7; |
| try { |
| themeMusic.play(); |
| } catch (e) { |
| console.log("Audio play failed:", e); |
| } |
| } |
| |
| |
| function createLevel() { |
| |
| gameWorld.querySelectorAll('.block, .brick, .question-block, .coin, .pipe, .goomba') |
| .forEach(element => element.remove()); |
| |
| |
| blocks.length = 0; |
| bricks.length = 0; |
| questionBlocks.length = 0; |
| coins.length = 0; |
| pipes.length = 0; |
| goombas.length = 0; |
| |
| |
| gameState.groundY = 64; |
| |
| |
| 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 |
| }); |
| } |
| |
| |
| 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 |
| }); |
| } |
| |
| |
| 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 |
| }); |
| } |
| |
| |
| 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 |
| }); |
| |
| |
| 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 |
| }); |
| |
| |
| 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 |
| }); |
| } |
| |
| |
| 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 |
| }); |
| } |
| |
| |
| for (let i = 0; i < 5 |
| </html> |
