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