This model didn't return a displayable web page for this challenge.
View raw output
# Super Mario Bros. Level Recreation
I've created a fully interactive Super Mario Bros. level that captures the spirit of Nintendo games. This single-page HTML features authentic gameplay mechanics, colorful pixel art, and classic Mario elements - all while staying true to the original game's charm.
```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. - Castle Run</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', monospace;
background: linear-gradient(to bottom, #6495ED, #1E90FF);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 0 #000;
}
.game-container {
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
border: 4px solid #DAA520;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
background: linear-gradient(to bottom, #6495ED 70%, #2E8B57 70%);
}
.game-title {
position: absolute;
top: 10px;
left: 0;
width: 100%;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
text-shadow:
3px 0 0 #E52421,
-3px 0 0 #E52421,
0 3px 0 #E52421,
0 -3px 0 #E52421,
3px 3px 0 #E52421,
-3px 3px 0 #E52421,
3px -3px 0 #E52421,
-3px -3px 0 #E52421;
z-index: 10;
letter-spacing: 3px;
text-transform: uppercase;
}
.ui-overlay {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 20px;
z-index: 10;
}
.ui-element {
background: rgba(0, 0, 0, 0.5);
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
min-width: 80px;
text-align: center;
}
.ui-element span {
color: #FFFF00;
font-size: 24px;
display: block;
}
.level-container {
position: absolute;
width: 4000px;
height: 500px;
transform: translateX(0);
transition: transform 0.1s linear;
}
/* Ground and platforms */
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #8B4513;
border-top: 4px solid #DAA520;
}
.platform {
position: absolute;
background: #8B4513;
border: 2px solid #DAA520;
border-bottom: none;
}
/* Pipes */
.pipe {
position: absolute;
background: #00A86B;
border: 2px solid #000;
border-bottom: none;
}
.pipe-top {
position: absolute;
background: #00A86B;
border: 2px solid #000;
border-top: none;
border-radius: 0 0 10px 10px;
}
/* Coins */
.coin {
position: absolute;
width: 20px;
height: 20px;
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 5px #FFA500, inset 0 0 5px #DAA520;
animation: coinSpin 0.5s infinite alternate;
}
@keyframes coinSpin {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
/* Question blocks */
.question-block {
position: absolute;
width: 40px;
height: 40px;
background: #E5D9B6;
border: 2px solid #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: #000;
animation: blockBounce 1.5s infinite;
}
@keyframes blockBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.used-block {
background: #A9A9A9;
}
/* Mario character */
#mario {
position: absolute;
width: 40px;
height: 60px;
z-index: 10;
transition: transform 0.1s;
}
/* Mario CSS art */
#mario::before {
content: '';
position: absolute;
width: 40px;
height: 60px;
background: #E52421;
border-radius: 20px 20px 0 0;
z-index: 2;
}
#mario::after {
content: '';
position: absolute;
width: 40px;
height: 15px;
background: #E52421;
top: -5px;
border-radius: 20px 20px 0 0;
z-index: 3;
}
.mario-hat {
position: absolute;
width: 40px;
height: 15px;
background: #E52421;
top: -10px;
border-radius: 20px 20px 0 0;
z-index: 4;
}
.mario-face {
position: absolute;
width: 30px;
height: 25px;
background: #FFB6C1;
top: 20px;
left: 5px;
border-radius: 15px 15px 0 0;
z-index: 5;
}
.mario-eyes {
position: absolute;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
top: 25px;
}
.mario-eye-left {
left: 8px;
}
.mario-eye-right {
right: 8px;
}
.mario-mustache {
position: absolute;
width: 20px;
height: 5px;
background: #000;
top: 35px;
left: 10px;
border-radius: 0 0 5px 5px;
}
.mario-arms {
position: absolute;
width: 10px;
height: 20px;
background: #FFB6C1;
top: 30px;
}
.mario-arm-left {
left: -5px;
border-radius: 5px 0 0 5px;
}
.mario-arm-right {
right: -5px;
border-radius: 0 5px 5px 0;
}
.mario-legs {
position: absolute;
width: 15px;
height: 20px;
background: #000;
bottom: 0;
}
.mario-leg-left {
left: 5px;
border-radius: 0 0 3px 3px;
}
.mario-leg-right {
right: 5px;
border-radius: 0 0 3px 3px;
}
/* Goomba enemy */
.goomba {
position: absolute;
width: 40px;
height: 30px;
z-index: 5;
}
.goomba::before {
content: '';
position: absolute;
width: 40px;
height: 30px;
background: #8B4513;
border-radius: 50% 50% 0 0;
}
.goomba::after {
content: '';
position: absolute;
width: 40px;
height: 10px;
background: #000;
bottom: -5px;
border-radius: 0 0 10px 10px;
}
.goomba-eye {
position: absolute;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
top: 5px;
}
.goomba-eye-left {
left: 8px;
}
.goomba-eye-right {
right: 8px;
}
/* Koopa Troopa */
.koopa {
position: absolute;
width: 40px;
height: 45px;
z-index: 5;
}
.koopa-shell {
position: absolute;
width: 40px;
height: 30px;
background: #008000;
border-radius: 50% 50% 0 0;
top: 0;
}
.koopa-body {
position: absolute;
width: 30px;
height: 25px;
background: #FFB6C1;
border-radius: 15px 15px 0 0;
top: 15px;
left: 5px;
}
.koopa-eye {
position: absolute;
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
top: 20px;
}
.koopa-eye-left {
left: 10px;
}
.koopa-eye-right {
right: 10px;
}
.koopa-leg {
position: absolute;
width: 8px;
height: 15px;
background: #FFB6C1;
bottom: 0;
border-radius: 2px;
}
/* Flag */
.flag-pole {
position: absolute;
width: 8px;
height: 300px;
background: #D3D3D3;
bottom: 100px;
left: 3700px;
}
.flag {
position: absolute;
width: 30px;
height: 30px;
background: #FF0000;
bottom: 250px;
left: 3690px;
border: 1px solid #000;
}
/* Castle */
.castle {
position: absolute;
width: 200px;
height: 200px;
background: #D3D3D3;
bottom: 100px;
right: 50px;
border: 2px solid #000;
}
.castle-top {
position: absolute;
width: 220px;
height: 40px;
background: #8B4513;
bottom: 200px;
right: 40px;
}
.castle-tower {
position: absolute;
width: 60px;
height: 80px;
background: #D3D3D3;
border: 2px solid #000;
}
.castle-tower-left {
bottom: 180px;
right: 190px;
}
.castle-tower-right {
bottom: 180px;
right: 30px;
}
.tower-top {
position: absolute;
width: 70px;
height: 20px;
background: #8B4513;
border: 2px solid #000;
}
.tower-top-left {
bottom: 260px;
right: 185px;
}
.tower-top-right {
bottom: 260px;
right: 25px;
}
.castle-door {
position: absolute;
width: 50px;
height: 80px;
background: #8B4513;
bottom: 100px;
right: 125px;
border: 1px solid #000;
}
/* Coins collection effect */
.coin-collected {
animation: coinCollect 0.5s forwards;
}
@keyframes coinCollect {
to {
transform: translateY(-30px) scale(0.5);
opacity: 0;
}
}
/* Jump effect */
.mario-jump {
animation: marioJump 0.3s forwards;
}
@keyframes marioJump {
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
}
/* Game over */
.game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
display: none;
}
.game-over h2 {
font-size: 48px;
color: #FF0000;
margin-bottom: 20px;
text-shadow: 3px 3px 0 #000;
}
.game-over p {
font-size: 24px;
margin: 10px 0;
}
.restart-btn {
background: #E52421;
color: white;
border: none;
padding: 12px 30px;
font-size: 20px;
font-weight: bold;
border-radius: 30px;
margin-top: 20px;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 4px 0 #A00000;
}
.restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 #A00000;
}
.restart-btn:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #A00000;
}
/* Controls info */
.controls {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
background: rgba(0, 0, 0, 0.3);
padding: 5px;
}
.controls span {
background: rgba(0, 0, 0, 0.3);
padding: 0 10px;
border-radius: 15px;
margin: 0 5px;
font-weight: bold;
}
/* Score animation */
.score-popup {
position: absolute;
color: #FFFF00;
font-weight: bold;
z-index: 20;
animation: scoreRise 1s forwards;
}
@keyframes scoreRise {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-30px); opacity: 0; }
}
/* Power-up effects */
.starman {
animation: starman 0.2s infinite;
}
@keyframes starman {
0% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(180deg); }
100% { filter: hue-rotate(360deg); }
}
/* Hidden elements for sound */
.sound {
display: none;
}
</style>
</head>
<body>
<div class="game-container">
<div class="game-title">Super Mario Bros. - Castle Run</div>
<div class="ui-overlay">
<div class="ui-element">
COINS<br><span id="coin-count">0</span>
</div>
<div class="ui-element">
SCORE<br><span id="score">0</span>
</div>
<div class="ui-element">
WORLD<br><span>1-1</span>
</div>
</div>
<div class="level-container" id="level">
<div class="ground"></div>
<!-- Platforms -->
<div class="platform" style="left: 200px; top: 300px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 400px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 600px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 800px; top: 150px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1000px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1200px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1400px; top: 300px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1600px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1800px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2000px; top: 150px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2200px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2400px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2600px; top: 300px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2800px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 3000px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 3200px; top: 150px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 3400px; top: 100px; width: 100px; height: 20px;"></div>
<!-- Pipes -->
<div class="pipe" style="left: 300px; bottom: 100px; width: 60px; height: 80px;"></div>
<div class="pipe-top" style="left: 300px; bottom: 180px; width: 60px; height: 20px;"></div>
<div class="pipe" style="left: 700px; bottom: 100px; width: 80px; height: 100px;"></div>
<div class="pipe-top" style="left: 700px; bottom: 200px; width: 80px; height: 20px;"></div>
<div class="pipe" style="left: 1100px; bottom: 100px; width: 100px; height: 120px;"></div>
<div class="pipe-top" style="left: 1100px; bottom: 220px; width: 100px; height: 20px;"></div>
<!-- Question blocks -->
<div class="question-block" style="left: 500px; bottom: 160px;" id="qblock1"></div>
<div class="question-block" style="left: 900px; bottom: 160px;" id="qblock2"></div>
<div class="question-block" style="left: 1300px; bottom: 160px;" id="qblock3"></div>
<div class="question-block" style="left: 1700px; bottom: 160px;" id="qblock4"></div>
<div class="question-block" style="left: 2100px; bottom: 160px;" id="qblock5"></div>
<div class="question-block" style="left: 2500px; bottom: 160px;" id="qblock6"></div>
<div class="question-block" style="left: 2900px; bottom: 160px;" id="qblock7"></div>
<!-- Coins -->
<div class="coin" style="left: 250px; bottom: 130px;"></div>
<div class="coin" style="left: 270px; bottom: 130px;"></div>
<div class="coin" style="left: 290px; bottom: 130px;"></div>
<div class="coin" style="left: 450px; bottom: 80px;"></div>
<div class="coin" style="left: 470px; bottom: 80px;"></div>
<div class="coin" style="left: 490px; bottom: 80px;"></div>
<div class="coin" style="left: 650px; bottom: 50px;"></div>
<div class="coin" style="left: 670px; bottom: 50px;"></div>
<div class="coin" style="left: 690px; bottom: 50px;"></div>
<div class="coin" style="left: 850px; bottom: 0px;"></div>
<div class="coin" style="left: 870px; bottom: 0px;"></div>
<div class="coin" style="left: 890px; bottom: 0px;"></div>
<div class="coin" style="left: 1050px; bottom: 50px;"></div>
<div class="coin" style="left: 1070px; bottom: 50px;"></div>
<div class="coin" style="left: 1090px; bottom: 50px;"></div>
<div class="coin" style="left: 1250px; bottom: 80px;"></div>
<div class="coin" style="left: 1270px; bottom: 80px;"></div>
<div class="coin" style="left: 1290px; bottom: 80px;"></div>
<div class="coin" style="left: 1450px; bottom: 130px;"></div>
<div class="coin" style="left: 1470px; bottom: 130px;"></div>
<div class="coin" style="left: 1490px; bottom: 130px;"></div>
<div class="coin" style="left: 1650px; bottom: 80px;"></div>
<div class="coin" style="left: 1670px; bottom: 80px;"></div>
<div class="coin" style="left: 1690px; bottom: 80px;"></div>
<div class="coin" style="left: 1850px; bottom: 50px;"></div>
<div class="coin" style="left: 1870px; bottom: 50px;"></div>
<div class="coin" style="left: 1890px; bottom: 50px;"></div>
<div class="coin" style="left: 2050px; bottom: 0px;"></div>
<div class="coin" style="left: 2070px; bottom: 0px;"></div>
<div class="coin" style="left: 2090px; bottom: 0px;"></div>
<div class="coin" style="left: 2250px; bottom: 50px;"></div>
<div class="coin" style="left: 2270px; bottom: 50px;"></div>
<div class="coin" style="left: 2290px; bottom: 50px;"></div>
<div class="coin" style="left: 2450px; bottom: 80px;"></div>
<div class="coin" style="left: 2470px; bottom: 80px;"></div>
<div class="coin" style="left: 2490px; bottom: 80px;"></div>
<div class="coin" style="left: 2650px; bottom: 130px;"></div>
<div class="coin" style="left: 2670px; bottom: 130px;"></div>
<div class="coin" style="left: 2690px; bottom: 130px;"></div>
<div class="coin" style="left: 2850px; bottom: 80px;"></div>
<div class="coin" style="left: 2870px; bottom: 80px;"></div>
<div class="coin" style="left: 2890px; bottom: 80px;"></div>
<div class="coin" style="left: 3050px; bottom: 50px;"></div>
<div class="coin" style="left: 3070px; bottom: 50px;"></div>
<div class="coin" style="left: 3090px; bottom: 50px;"></div>
<div class="coin" style="left: 3250px; bottom: 0px;"></div>
<div class="coin" style="left: 3270px; bottom: 0px;"></div>
<div class="coin" style="left: 3290px; bottom: 0px;"></div>
<div class="coin" style="left: 3450px; bottom: -40px;"></div>
<div class="coin" style="left: 3470px; bottom: -40px;"></div>
<div class="coin" style="left: 3490px; bottom: -40px;"></div>
<!-- Enemies -->
<div class="goomba" style="left: 400px; bottom: 100px;"></div>
<div class="goomba" style="left: 800px; bottom: 100px;"></div>
<div class="goomba" style="left: 1200px; bottom: 100px;"></div>
<div class="goomba" style="left: 1600px; bottom: 100px;"></div>
<div class="goomba" style="left: 2000px; bottom: 100px;"></div>
<div class="goomba" style="left: 2400px; bottom: 100px;"></div>
<div class="goomba" style="left: 2800px; bottom: 100px;"></div>
<div class="goomba" style="left: 3200px; bottom: 100px;"></div>
<div class="koopa" style="left: 1000px; bottom: 100px;"></div>
<div class="koopa" style="left: 1800px; bottom: 100px;"></div>
<div class="koopa" style="left: 2600px; bottom: 100px;"></div>
<div class="koopa" style="left: 3400px; bottom: 100px;"></div>
<!-- Flag and castle -->
<div class="flag-pole"></div>
<div class="flag"></div>
<div class="castle"></div>
<div class="castle-top"></div>
<div class="castle-tower castle-tower-left"></div>
<div class="castle-tower castle-tower-right"></div>
<div class="tower-top tower-top-left"></div>
<div class="tower-top tower-top-right"></div>
<div class="castle-door"></div>
<!-- Mario -->
<div id="mario">
<div class="mario-hat"></div>
<div class="mario-face">
<div class="mario-eyes mario-eye-left"></div>
<div class="mario-eyes mario-eye-right"></div>
<div class="mario-mustache"></div>
</div>
<div class="mario-arms mario-arm-left"></div>
<div class="mario-arms mario-arm-right"></div>
<div class="mario-legs mario-leg-left"></div>
<div class="mario-legs mario-leg-right"></div>
</div>
</div>
<div class="controls">
CONTROLS: <span>← →</span> Move | <span>SPACE</span> Jump | <span>ENTER</span> Restart
</div>
<div class="game-over" id="game-over">
<h2>GAME OVER</h2>
<p>Your adventure ends here!</p>
<p>Coins collected: <span id="final-coins">0</span></p>
<p>Final score: <span id="final-score">0</span></p>
<button class="restart-btn" id="restart-btn">Play Again</button>
</div>
<!-- Sound effects -->
<audio id="coin-sound" class="sound">
<source src="data:audio/wav;base64,UklGRiQDAABXQVZFZm10IBAAAAABAAEAiBUAAIgVAAABAAgAZGF0YQADAACBhYqFbF1fdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBh......
