This model didn't return a displayable web page for this challenge.
View raw output
<style>
/* --- RESET & GENERAL ---------------------------------------------------- */
*{box-sizing:border-box;padding:0;margin:0;font-family:'Courier New',monospace}
body{display:flex;align-items:center;justify-content:center;height:100vh;background:#222;color:#000}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
/* --- "GAME BOY" SHELL --------------------------------------------------- */
#gameboy{
width:480px;max-width:90vw;aspect-ratio:1/0.8;background:#7aab6f;
padding:18px;border-radius:12px;border:4px solid #3d6841;
box-shadow:0 0 0 6px #1b2f1f inset,0 8px 16px rgba(0,0,0,.6)
}
/* --- LCD SCREEN --------------------------------------------------------- */
#lcd{
width:100%;height:100%;background:#a9d84b;
border:4px solid #3d6841;border-radius:4px;
position:relative;overflow:hidden
}
/* --- SPRITE ZONES ------------------------------------------------------- */
#enemySprite,#playerSprite{
position:absolute;font-size:3.2rem;user-select:none;
filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))
}
#enemySprite{top:8%;right:8%}
#playerSprite{bottom:35%;left:8%}
/* --- STATUS BOXES ------------------------------------------------------- */
.status{
position:absolute;width:45%;border:2px solid #000;background:#dfe3d4;
padding:4px;font-size:.8rem
}
#enemyStatus{top:4%;left:4%}
#playerStatus{bottom:43%;right:4%}
.nameLv{display:flex;justify-content:space-between}
.bar{
height:6px;background:#666;margin-top:2px;overflow:hidden
}
.gauge{
height:100%;background:#34c039;width:100%;transition:width .3s
}
.hpText{text-align:right;font-size:.7rem}
/* --- TEXT & MENU BOX ---------------------------------------------------- */
#textbox{
position:absolute;bottom:0;left:0;width:100%;height:36%;
background:#dfe3d4;border-top:4px solid #000;
padding:6px;display:flex;flex-direction:column;justify-content:space-between
}
#text{
flex:1;font-size:.9rem;white-space:pre-line;line-height:1.2;
overflow:hidden
}
#menu{
display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:4px
}
#menu button{
padding:4px;background:#a9d84b;border:2px solid #000;border-radius:2px
}
#menu button:disabled{opacity:.4;cursor:default}
/* --- TYPE‑WRITER CURSOR ------------------------------------------------- */
#cursor{
display:inline-block;width:6px;background:#000;animation:blink 1s steps(1) infinite
}
@keyframes blink{50%{opacity:0}}
</style>
</head>
<body>
<div id="gameboy">
<div id="lcd">
<div id="enemySprite">🔥</div>
<div id="playerSprite">⚡</div>
<div id="enemyStatus" class="status">
<div class="nameLv"><span id="enemyName">CHARMANDER</span><span>Lv5</span></div>
<div class="bar"><div id="enemyHPBar" class="gauge"></div></div>
<div id="enemyHpText" class="hpText"></div>
</div>
<div id="playerStatus" class="status">
<div class="nameLv"><span id="playerName">PIKACHU</span><span>Lv5</span></div>
<div class="bar"><div id="playerHPBar" class="gauge"></div></div>
<div id="playerHpText" class="hpText"></div>
</div>
<div id="textbox">
<div id="text"></div>
<div id="menu"></div>
</div>
</div>
</div>
<script>
/* ---------------------------------------------------------------------
Tiny Pokémon battle engine – just enough for nostalgia!
--------------------------------------------------------------------- */
const player = {
name:"Pikachu",sprite:"⚡",level:5,maxHp:35,hp:35,
moves:[
{name:"Thunderbolt",power:25},
{name:"Quick Attack",power:12},
{name:"Tail Whip",power:0},
{name:"Growl",power:0}
]
};
const enemy = {
name:"Charmander",sprite:"🔥",level:5,maxHp:30,hp:30,
moves:[
{name:"Ember",power:15},
{name:"Scratch",power:10}
]
};
const textEl = document.getElementById("text");
const menuEl = document.getElementById("menu");
const cursor = document.createElement("span");
cursor.id="cursor";
cursor.textContent=" ";
document.getElementById("enemySprite").textContent = enemy.sprite;
document.getElementById("playerSprite").textContent = player.sprite;
function updateBars(){
document.getElementById("playerHpText").textContent = 'HP: ' + player.hp + '/' + player.maxHp;
document.getElementById("enemyHpText").textContent = 'HP: ' + enemy.hp + '/' + enemy.maxHp;
document.getElementById("playerHPBar").style.width = '' + player.hp/player.maxHp*100 + '%';
document.getElementById("enemyHPBar").style.width = '' + enemy.hp/enemy.maxHp*100 + '%';
}
updateBars();
/* ---- Text‑box Typewriter -------------------------------------------- */
function showText(msg, cb){
menuEl.innerHTML="";
textEl.innerHTML="";
let i=0;
textEl.appendChild(cursor);
const speed=25;
const interval = setInterval(()=>{
if(i<msg.length){
cursor.before(msg[i++]);
}else{
clearInterval(interval);
cursor.remove();
setTimeout(cb,300);
}
},speed);
}
/* ---- Menu helpers --------------------------------------------------- */
function mainMenu(){
menuEl.innerHTML="";
const options=["FIGHT","BAG","POKÉMON","RUN"];
options.forEach((opt,idx)=>{
const b=document.createElement("button");
b.textContent=opt;
b.onclick=()=>{
if(opt==="FIGHT") moveMenu();
else showText(opt + ' is not implemented yet!',playerTurn);
};
if(idx>1) b.disabled=true; // keep only FIGHT for real.
menuEl.appendChild(b);
});
}
function moveMenu(){
menuEl.innerHTML="";
player.moves.forEach((m,idx)=>{
const b=document.createElement("button");
b.textContent=m.name;
b.onclick=()=>chooseMove(idx);
menuEl.appendChild(b);
});
}
function chooseMove(idx){
const move=player.moves[idx];
if(move.power===0){
showText(player.name + ' used ' + move.name + '!
But nothing happened…',enemyTurn);
return;
}
const dmg = rand(move.power/2,move.power);
enemy.hp=Math.max(0,enemy.hp-dmg);
updateBars();
showText(player.name + ' used ' + move.name + '!
It did ' + dmg + ' damage!',()=>{
if(enemy.hp===0){
showText(enemy.name + ' fainted!
You win!',()=>{
menuEl.innerHTML="";
});
}else{
enemyTurn();
}
});
}
function enemyTurn(){
const move = enemy.moves[rand(0, enemy.moves.length-1)];
const dmg = rand(move.power/2,move.power);
player.hp = Math.max(0, player.hp-dmg);
updateBars();
showText(enemy.name + ' used ' + move.name + '!
' + dmg + ' damage to ' + player.name + '!',()=>{
if(player.hp===0){
showText(player.name + ' fainted!
You blacked out…',()=>menuEl.innerHTML="");
}else{
playerTurn();
}
});
}
function playerTurn(){
showText('What will ' + player.name + ' do?',mainMenu);
}
/* ---- Utility --------------------------------------------------------- */
function rand(min,max){ // inclusive int
return Math.floor(Math.random()*(max-min+1))+min;
}
/* ---- START THE BATTLE ------------------------------------------------- */
showText('Wild ' + enemy.name + ' appeared!',()=>{
showText(player.name + ', I choose you!',playerTurn);
});
</script>
