493 Academy

CHAT

TREE

can you make cup hed with the same grafics

BUDDY

Let's build a Cuphead-style game! I made you a run-and-shoot level with your own hero, a boss to battle, and jumping platforms. Try moving with arrow keys, jump with up, and shoot with space! What do you want to add next — maybe more enemies or a health bar power-up?

TREE

same drawn grafics

BUDDY

Got it! Right now your hero and boss use pictures you upload. To get that hand-drawn cartoon look like Cuphead, tap ADD PICTURE under the code and upload drawings for your hero and boss — I can then plug them right in! Do you want me to help you think of what to draw (like a cup character with gloves, and a big silly boss)?

TREE

yes

BUDDY

Great! Here are some fun ideas to draw: **For your hero (cup character):** - A cup body with two white glove hands (like fists) - Big round eyes and a big smile - Straw or candy cane arms - Shoes like little boots - Maybe a bowtie! **For your boss:** - Make it BIG and silly, like a giant angry teapot, a mean carrot, or a grumpy moon - Give it big eyes, sharp eyebrows, and maybe arms to attack with - Bright colors so it pops against the background Draw them on a plain white or blank background so they look neat when they pop into the game. Once you tap ADD PICTURE and upload them, tell me and I'll swap them into the game for your hero and boss!

TREE

you draw them

BUDDY

I can't draw pictures myself, but I can build the shapes right in the code using simple HTML shapes — like a cartoon cup hero and a goofy boss made of circles and colors, no picture upload needed! Want me to do that instead so we don't need any drawings at all?

TREE

do that

BUDDY

You got it! I built your hero and boss right out of shapes in the code - a cute cup guy with glove hands and a big goofy round boss with eyebrows and arms. No pictures needed! Try it out - want me to add a funny face animation when the boss gets hit next?

TREE

yes

BUDDY

placeholder

TREE

it not showing

BUDDY

Oops, let me fix that! I'll build your hero and boss out of shapes right now so they show up properly.

TREE

it should be a side scroler

BUDDY

Let's make it a real side-scroller! I rebuilt the whole game: you run through a long level with the background scrolling as you go, hop across platforms, and fight the boss at the end. Your hero and boss are drawn with fun cartoon shapes right in the code — no pictures needed! Try arrow keys to move, UP to jump, SPACE to shoot. Want me to add more enemies along the way to the boss next?

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cup Hero</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    background: #2b1d3c;
    overflow: hidden;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
  }
  #wrap {
    position: relative;
    width: 800px;
    height: 500px;
    margin: 20px auto;
    background: linear-gradient(to bottom, #bfe8ff 0%, #eaf6ff 40%, #f7d9a0 70%, #d9b06b 100%);
    border: 8px solid #4a2c17;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  #world {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3200px;
  }
  #hud {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #4a2c17;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 0 #fff;
  }
  #hud2 {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #4a2c17;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 0 #fff;
  }
  .cloud {
    position: absolute;
    width: 90px;
    height: 40px;
    background: white;
    border-radius: 50px;
    opacity: 0.85;
  }
  #ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #7a4a2b;
    border-top: 6px solid #4a2c17;
  }
  .platform {
    position: absolute;
    height: 18px;
    background: #7a4a2b;
    border: 3px solid #4a2c17;
    border-radius: 8px;
  }
  #player {
    position: absolute;
    width: 60px;
    height: 70px;
    z-index: 5;
  }
  .cupBody {
    position: absolute;
    left: 12px;
    top: 0;
    width: 36px;
    height: 46px;
    background: #fdf6e3;
    border: 3px solid #4a2c17;
    border-radius: 10px 10px 16px 16px;
  }
  .cupFace {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .eye {
    position: absolute;
    top: 14px;
    width: 7px;
    height: 9px;
    background: #222;
    border-radius: 50%;
  }
  .eyeL { left: 6px; }
  .eyeR { right: 6px; }
  .cupSmile {
    position: absolute;
    top: 26px;
    left: 9px;
    width: 16px;
    height: 8px;
    border-bottom: 3px solid #222;
    border-radius: 0 0 10px 10px;
  }
  .cupStraw {
    position: absolute;
    top: -14px;
    left: 12px;
    width: 8px;
    height: 16px;
    background: repeating-linear-gradient(45deg, #ff4b4b, #ff4b4b 4px, #fff 4px, #fff 8px);
    border: 2px solid #4a2c17;
    border-radius: 3px;
  }
  .glove {
    position: absolute;
    top: 30px;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #4a2c17;
    border-radius: 50%;
  }
  .gloveL { left: -6px; }
  .gloveR { right: -6px; }
  .leg {
    position: absolute;
    bottom: -8px;
    width: 10px;
    height: 14px;
    background: #4a2c17;
    border-radius: 3px;
  }
  .legL { left: 16px; }
  .legR { right: 16px; }
  .bullet {
    position: absolute;
    width: 16px;
    height: 8px;
    background: radial-gradient(circle, #fff59a, #ff8c00);
    border-radius: 8px;
    z-index: 4;
    box-shadow: 0 0 6px #ff8c00;
  }
  #boss {
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 3;
  }
  .bossHead {
    position: absolute;
    top: 0;
    left: 25px;
    width: 100px;
    height: 100px;
    background: #7ed957;
    border: 4px solid #2b4a17;
    border-radius: 50%;
  }
  .bossEyebrow {
    position: absolute;
    top: 30px;
    width: 26px;
    height: 6px;
    background: #2b4a17;
    border-radius: 4px;
  }
  .bEbL { left: 14px; transform: rotate(-15deg); }
  .bEbR { right: 14px; transform: rotate(15deg); }
  .bossEye {
    position: absolute;
    top: 42px;
    width: 14px;
    height: 18px;
    background: #fff;
    border: 3px solid #2b4a17;
    border-radius: 50%;
  }
  .bossEye::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 4px;
    width: 6px;
    height: 8px;
    background: #222;
    border-radius: 50%;
  }
  .bEyeL { left: 20px; }
  .bEyeR { right: 20px; }
  .bossMouth {
    position: absolute;
    top: 68px;
    left: 30px;
    width: 40px;
    height: 16px;
    background: #a00;
    border: 3px solid #2b4a17;
    border-radius: 0 0 20px 20px;
  }
  .bossArm {
    position: absolute;
    top: 60px;
    width: 20px;
    height: 60px;
    background: #7ed957;
    border: 4px solid #2b4a17;
    border-radius: 10px;
  }
  .bArmL { left: -10px; transform: rotate(20deg); }
  .bArmR { right: -10px; transform: rotate(-20deg); }
  .bossbullet {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #ff5a5a, #a00);
    border-radius: 50%;
    z-index: 4;
    box-shadow: 0 0 6px #a00;
  }
  .enemy {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 3;
  }
  .enemyBody {
    width: 100%;
    height: 100%;
    background: #ff8fb3;
    border: 3px solid #7a1f3d;
    border-radius: 50%;
    position: relative;
  }
  .enemyEye {
    position: absolute;
    top: 12px;
    width: 6px;
    height: 8px;
    background: #222;
    border-radius: 50%;
  }
  .eEyeL{ left: 10px;}
  .eEyeR{ right: 10px;}
  #bossHealthBar {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 20px;
    background: #333;
    border: 3px solid #4a2c17;
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
    display: none;
  }
  #bossHealthFill {
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #ff4040, #ff9040);
    transition: width 0.2s;
  }
  #msg {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #4a2c17;
    z-index: 20;
    display: none;
  }
  #startScreen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(20,10,30,0.9);
    color: #ffcc00;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #startScreen h1 {
    font-size: 44px;
    text-shadow: 3px 3px 0 #4a2c17;
    margin-bottom: 10px;
  }
  #startScreen button {
    font-size: 24px;
    padding: 12px 28px;
    border-radius: 12px;
    border: 4px solid #4a2c17;
    background: #ffcc00;
    color: #4a2c17;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
  }
  #startScreen p {
    color: #fff;
    max-width: 500px;
    font-size: 16px;
  }
</style>
</head>
<body>

<div id="wrap">
  <div id="hud">Lives: <span id="lives">3</span></div>
  <div id="hud2">Score: <span id="score">0</span></div>
  <div id="bossHealthBar"><div id="bossHealthFill"></div></div>

  <div id="world">
    <div class="cloud" style="top:20px; left:60px;"></div>
    <div class="cloud" style="top:60px; left:400px;"></div>
    <div class="cloud" style="top:30px; left:650px;"></div>
    <div class="cloud" style="top:40px; left:1000px;"></div>
    <div class="cloud" style="top:70px; left:1400px;"></div>
    <div class="cloud" style="top:25px; left:1800px;"></div>
    <div class="cloud" style="top:50px; left:2200px;"></div>
    <div class="cloud" style="top:35px; left:2700px;"></div>

    <div class="platform" style="bottom:150px; left:300px; width:140px;"></div>
    <div class="platform" style="bottom:250px; left:600px; width:140px;"></div>
    <div class="platform" style="bottom:150px; left:900px; width:140px;"></div>
    <div class="platform" style="bottom:200px; left:1300px; width:140px;"></div>
    <div class="platform" style="bottom:150px; left:1700px; width:140px;"></div>
    <div class="platform" style="bottom:250px; left:2100px; width:140px;"></div>
    <div class="platform" style="bottom:150px; left:2500px; width:140px;"></div>

    <div id="ground"></div>

    <div class="enemy" id="enemy1"><div class="enemyBody"><div class="enemyEye eEyeL"></div><div class="enemyEye eEyeR"></div></div></div>
    <div class="enemy" id="enemy2"><div class="enemyBody"><div class="enemyEye eEyeL"></div><div class="enemyEye eEyeR"></div></div></div>
    <div class="enemy" id="enemy3"><div class="enemyBody"><div class="enemyEye eEyeL"></div><div class="enemyEye eEyeR"></div></div></div>

    <div id="player">
      <div class="cupBody">
        <div class="cupFace">
          <div class="eye eyeL"></div>
          <div class="eye eyeR"></div>
          <div class="cupSmile"></div>
        </div>
        <div class="cupStraw"></div>
      </div>
      <div class="glove gloveL"></div>
      <div class="glove gloveR"></div>
      <div class="leg legL"></div>
      <div class="leg legR"></div>
    </div>

    <div id="boss">
      <div class="bossHead" id="bossHead">
        <div class="bossEyebrow bEbL"></div>
        <div class="bossEyebrow bEbR"></div>
        <div class="bossEye bEyeL"></div>
        <div class="bossEye bEyeR"></div>
        <div class="bossMouth" id="bossMouth"></div>
      </div>
      <div class="bossArm bArmL"></div>
      <div class="bossArm bArmR"></div>
    </div>
  </div>

  <div id="msg">YOU WIN!</div>

  <div id="startScreen">
    <h1>CUP HERO</h1>
    <p>Arrow keys to move, UP to jump, SPACE to shoot magic bullets!<br>Run through the level, dodge enemies, and beat the boss at the end!</p>
    <button id="startBtn">START GAME</button>
  </div>
</div>

<script>
const wrap = document.getElementById('wrap');
const world = document.getElementById('world');
const player = document.getElementById('player');
const boss = document.getElementById('boss');
const livesEl = document.getElementById('lives');
const scoreEl = document.getElementById('score');
const bossFill = document.getElementById('bossHealthFill');
const bossHealthBar = document.getElementById('bossHealthBar');
const msg = document.getElementById('msg');
const startScreen = document.getElementById('startScreen');
const startBtn = document.getElementById('startBtn');

const VIEW_W = 800, H = 500;
const WORLD_W = 3200;
const groundY = 60;

let px = 60, py = groundY, pvy = 0, facing = 1;
let onGround = true;
let lives = 3, score = 0;
let camX = 0;

const bossStartX = 2950;
let bossHP = 30;
let bossX = bossStartX, bossY = groundY + 10, bossDir = -1;
let bossVy = 0, bossJumpTimer = 0;
let bossActive = false;

let gameRunning = false;
let keys = {};

const platforms = [
  {x:300, y:150, w:140},
  {x:600, y:250, w:140},
  {x:900, y:150, w:140},
  {x:1300, y:200, w:140},
  {x:1700, y:150, w:140},
  {x:2100, y:250, w:140},
  {x:2500, y:150, w:140}
];

let enemies = [
  {id:'enemy1', x:500, y:groundY, alive:true, dir:1, minX:450, maxX:700},
  {id:'enemy2', x:1400, y:groundY, alive:true, dir:-1, minX:1300, maxX:1550},
  {id:'enemy3', x:2200, y:groundY, alive:true, dir:1, minX:2150, maxX:2400}
];

let bullets = [];
let bossBullets = [];
let shootCooldown = 0;
let bossShootCooldown = 60;
let invincible = 0;

function resetGame(){
  px = 60; py = groundY; pvy=0; onGround=true;
  lives = 3; score = 0; bossHP = 30;
  bossX = bossStartX; bossY = groundY+10; bossVy=0;
  bossActive = false;
  bossHealthBar.style.display = 'none';
  bullets = []; bossBullets = [];
  shootCooldown = 0; bossShootCooldown = 60;
  invincible = 0;
  camX = 0;
  msg.style.display = 'none';
  enemies = [
    {id:'enemy1', x:500, y:groundY, alive:true, dir:1, minX:450, maxX:700},
    {id:'enemy2', x:1400, y:groundY, alive:true, dir:-1, minX:1300, maxX:1550},
    {id:'enemy3', x:2200, y:groundY, alive:true, dir:1, minX:2150, maxX:2400}
  ];
  document.querySelectorAll('.enemy').forEach(el=> el.style.display = 'block');
  updateHUD();
}

function updateHUD(){
  livesEl.textContent = lives;
  scoreEl.textContent = score;
  bossFill.style.width = Math.max(0, (bossHP/30*100)) + '%';
}

document.addEventListener('keydown', e=>{
  keys[e.code] = true;
  if(e.code === 'Space') e.preventDefault();
});
document.addEventListener('keyup', e=>{
  keys[e.code] = false;
});

startBtn.addEventListener('click', ()=>{
  startScreen.style.display = 'none';
  resetGame();
  gameRunning = true;
});

function checkPlatformLanding(x, y, vy){
  for(const p of platforms){
    const px1 = x, px2 = x+50;
    if(px2 > p.x && px1 < p.x + p.w){
      const platTopFromBottom = p.y + 18;
      if(vy <= 0 && y <= platTopFromBottom + 10 && y >= platTopFromBottom - 12){
        return platTopFromBottom;
      }
    }
  }
  return null;
}

function gameLoop(){
  if(gameRunning){
    update();
  }
  render();
  requestAnimationFrame(gameLoop);
}

function update(){
  const speed = 4;
  if(keys['ArrowLeft']){ px -= speed; facing = -1; }
  if(keys['ArrowRight']){ px += speed; facing = 1; }
  px = Math.max(0, Math.min(WORLD_W-60, px));

  if(keys['ArrowUp'] && onGround){
    pvy = 9.5;
    onGround = false;
  }
  pvy -= 0.5;
  py += pvy;

  let landed = false;
  const platLand = checkPlatformLanding(px, py, pvy);
  if(platLand !== null && pvy < 0){
    py = platLand;
    pvy = 0;
    onGround = true;
    landed = true;
  }
  if(!landed && py <= groundY){
    py = groundY;
    pvy = 0;
    onGround = true;
  } else if(!landed){
    onGround = false;
  }

  // camera follows player, clamps to world
  camX = px - VIEW_W/2 + 30;
  camX = Math.max(0, Math.min(WORLD_W - VIEW_W, camX));

  // activate boss when player gets close
  if(!bossActive && px > bossStartX - 250){
    bossActive = true;
    bossHealthBar.style.display = 'block';
  }

  if(shootCooldown > 0) shootCooldown--;
  if(keys['Space'] && shootCooldown === 0){
    bullets.push({x: px + (facing===1?55:-10), y: py+35, dir: facing});
    shootCooldown = 14;
  }

  bullets.forEach(b=> b.x += b.dir*9);
  bullets = bullets.filter(b=> b.x > camX-20 && b.x < camX+VIEW_W+20);

  // enemies patrol
  enemies.forEach(en=>{
    if(!en.alive) return;
    en.x += en.dir*1.5;
    if(en.x < en.minX) en.dir = 1;
    if(en.x > en.maxX) en.dir = -1;
  });

  // bullets vs enemies
  bullets = bullets.filter(b=>{
    for(const en of enemies){
      if(en.alive && b.x > en.x && b.x < en.x+40 && b.y > en.y && b.y < en.y+40){
        en.alive = false;
        score += 5;
        updateHUD();
        return false;
      }
    }
    return true;
  });

  // enemy touching player
  enemies.forEach(en=>{
    if(en.alive && invincible===0 && px+50 > en.x && px < en.x+40 && py < en.y+40 && py+70 > en.y){
      lives -= 1;
      invincible = 60;
      updateHUD();
    }
  });

  // boss AI
  if(bossActive && bossHP > 0){
    bossX += bossDir*2;
    if(bossX < bossStartX - 150) bossDir = 1;
    if(bossX > bossStartX + 100) bossDir = -1;

    bossJumpTimer--;
    if(bossJumpTimer <= 0 && bossY <= groundY+11){
      bossVy = 8;
      bossJumpTimer = 90 + Math.random()*60;
    }
    bossVy -= 0.4;
    bossY += bossVy;
    if(bossY < groundY+10){ bossY = groundY+10; bossVy = 0; }

    bossShootCooldown--;
    if(bossShootCooldown <= 0){
      bossBullets.push({x: bossX+10, y: bossY+50, dir:-1});
      bossShootCooldown = 70 + Math.random()*40;
    }
  }
  bossBullets.forEach(b=> b.x += b.dir*6);
  bossBullets = bossBullets.filter(b=> b.x > camX-20 && b.x < camX+VIEW_W+20);

  if(bossActive){
    bullets = bullets.filter(b=>{
      if(bossHP > 0 && b.x > bossX && b.x < bossX+150 && b.y > bossY && b.y < bossY+150){
        bossHP -= 1;
        score += 10;
        updateHUD();
        return false;
      }
      return true;
    });
  }

  if(invincible > 0) invincible--;
  bossBullets = bossBullets.filter(b=>{
    if(invincible === 0 && b.x > px && b.x < px+60 && b.y > py && b.y < py+70){
      lives -= 1;
      invincible = 60;
      updateHUD();
      return false;
    }
    return true;
  });

  if(bossActive && bossHP > 0 && invincible === 0 && px+50 > bossX && px < bossX+150 && py < bossY+150 && py+70 > bossY){
    lives -= 1;
    invincible = 60;
    updateHUD();
  }

  if(bossActive && bossHP <= 0){
    gameRunning = false;
    msg.textContent = 'YOU WIN! Score: ' + score;
    msg.style.display = 'block';
  }
  if(lives <= 0){
    gameRunning = false;
    msg.textContent = 'GAME OVER';
    msg.style.display = 'block';
  }
}

function render(){
  world.style.transform = 'translateX(' + (-camX) + 'px)';

  player.style.left = px + 'px';
  player.style.bottom = py + 'px';
  player.style.transform = facing === -1 ? 'scaleX(-1)' : 'scaleX(1)';
  player.style.opacity = (invincible>0 && Math.floor(invincible/6)%2===0) ? '0.4' : '1';

  boss.style.left = bossX + 'px';
  boss.style.bottom = bossY + 'px';
  boss.style.display = bossActive ? 'block' : 'none';

  enemies.forEach(en=>{
    const el = document.getElementById(en.id);
    if(!en.alive){ el.style.display = 'none'; return; }
    el.style.display = 'block';
    el.style.left = en.x + 'px';
    el.style.bottom = en.y + 'px';
  });

  document.querySelectorAll('.bullet').forEach(el=>el.remove());
  bullets.forEach(b=>{
    const el = document.createElement('div');
    el.className = 'bullet';
    el.style.left = b.x + 'px';
    el.style.bottom = b.y + 'px';
    world.appendChild(el);
  });

  document.querySelectorAll('.bossbullet').forEach(el=>el.remove());
  bossBullets.forEach(b=>{
    const el = document.createElement('div');
    el.className = 'bossbullet';
    el.style.left = b.x + 'px';
    el.style.bottom = b.y + 'px';
    world.appendChild(el);
  });
}

gameLoop();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cup Hero</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    background: #2b1d3c;
    overflow: hidden;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
  }
  #wrap {
    position: relative;
    width: 800px;
    height: 500px;
    margin: 20px auto;
    background: linear-gradient(to bottom, #bfe8ff 0%, #eaf6ff 40%, #f7d9a0 70%, #d9b06b 100%);
    border: 8px solid #4a2c17;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  #world {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3200px;
  }
  #hud {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #4a2c17;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 0 #fff;
  }
  #hud2 {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #4a2c17;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 0 #fff;
  }
  .cloud {
    position: absolute;
    width: 90px;
    height: 40px;
    background: white;
    border-radius: 50px;
    opacity: 0.85;
  }
  #ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #7a4a2b;
    border-top: 6px solid #4a2c17;
  }
  .platform {
    position: absolute;
    height: 18px;
    background: #7a4a2b;
    border: 3px solid #4a2c17;
    border-radius: 8px;
  }
  #player {
    position: absolute;
    width: 60px;
    height: 70px;
    z-index: 5;
  }
  .cupBody {
    position: absolute;
    left: 12px;
    top: 0;
    width: 36px;
    height: 46px;
    background: #fdf6e3;
    border: 3px solid #4a2c17;
    border-radius: 10px 10px 16px 16px;
  }
  .cupFace {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .eye {
    position: absolute;
    top: 14px;
    width: 7px;
    height: 9px;
    background: #222;
    border-radius: 50%;
  }
  .eyeL { left: 6px; }
  .eyeR { right: 6px; }
  .cupSmile {
    position: absolute;
    top: 26px;
    left: 9px;
    width: 16px;
    height: 8px;
    border-bottom: 3px solid #222;
    border-radius: 0 0 10px 10px;
  }
  .cupStraw {
    position: absolute;
    top: -14px;
    left: 12px;
    width: 8px;
    height: 16px;
    background: repeating-linear-gradient(45deg, #ff4b4b, #ff4b4b 4px, #fff 4px, #fff 8px);
    border: 2px solid #4a2c17;
    border-radius: 3px;
  }
  .glove {
    position: absolute;
    top: 30px;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #4a2c17;
    border-radius: 50%;
  }
  .gloveL { left: -6px; }
  .gloveR { right: -6px; }
  .leg {
    position: absolute;
    bottom: -8px;
    width: 10px;
    height: 14px;
    background: #4a2c17;
    border-radius: 3px;
  }
  .legL { left: 16px; }
  .legR { right: 16px; }
  .bullet {
    position: absolute;
    width: 16px;
    height: 8px;
    background: radial-gradient(circle, #fff59a, #ff8c00);
    border-radius: 8px;
    z-index: 4;
    box-shadow: 0 0 6px #ff8c00;
  }
  #boss {
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 3;
  }
  .bossHead {
    position: absolute;
    top: 0;
    left: 25px;
    width: 100px;
    height: 100px;
    background: #7ed957;
    border: 4px solid #2b4a17;
    border-radius: 50%;
  }
  .bossEyebrow {
    position: absolute;
    top: 30px;
    width: 26px;
    height: 6px;
    background: #2b4a17;
    border-radius: 4px;
  }
  .bEbL { left: 14px; transform: rotate(-15deg); }
  .bEbR { right: 14px; transform: rotate(15deg); }
  .bossEye {
    position: absolute;
    top: 42px;
    width: 14px;
    height: 18px;
    background: #fff;
    border: 3px solid #2b4a17;
    border-radius: 50%;
  }
  .bossEye::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 4px;
    width: 6px;
    height: 8px;
    background: #222;
    border-radius: 50%;
  }
  .bEyeL { left: 20px; }
  .bEyeR { right: 20px; }
  .bossMouth {
    position: absolute;
    top: 68px;
    left: 30px;
    width: 40px;
    height: 16px;
    background: #a00;
    border: 3px solid #2b4a17;
    border-radius: 0 0 20px 20px;
  }
  .bossArm {
    position: absolute;
    top: 60px;
    width: 20px;
    height: 60px;
    background: #7ed957;
    border: 4px solid #2b4a17;
    border-radius: 10px;
  }
  .bArmL { left: -10px; transform: rotate(20deg); }
  .bArmR { right: -10px; transform: rotate(-20deg); }
  .bossbullet {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #ff5a5a, #a00);
    border-radius: 50%;
    z-index: 4;
    box-shadow: 0 0 6px #a00;
  }
  .enemy {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 3;
  }
  .enemyBody {
    width: 100%;
    height: 100%;
    background: #ff8fb3;
    border: 3px solid #7a1f3d;
    border-radius: 50%;
    position: relative;
  }
  .enemyEye {
    position: absolute;
    top: 12px;
    width: 6px;
    height: 8px;
    background: #222;
    border-radius: 50%;
  }
  .eEyeL{ left: 10px;}
  .eEyeR{ right: 10px;}
  #bossHealthBar {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 20px;
    background: #333;
    border: 3px solid #4a2c17;
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
    display: none;
  }
  #bossHealthFill {
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #ff4040, #ff9040);
    transition: width 0.2s;
  }
  #msg {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #4a2c17;
    z-index: 20;
    display: none;
  }
  #startScreen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(20,10,30,0.9);
    color: #ffcc00;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #startScreen h1 {
    font-size: 44px;
    text-shadow: 3px 3px 0 #4a2c17;
    margin-bottom: 10px;
  }
  #startScreen button {
    font-size: 24px;
    padding: 12px 28px;
    border-radius: 12px;
    border: 4px solid #4a2c17;
    background: #ffcc00;
    color: #4a2c17;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
  }
  #startScreen p {
    color: #fff;
    max-width: 500px;
    font-size: 16px;
  }
</style>
</head>
<body>

<div id="wrap">
  <div id="hud">Lives: <span id="lives">3</span></div>
  <div id="hud2">Score: <span id="score">0</span></div>
  <div id="bossHealthBar"><div id="bossHealthFill"></div></div>

  <div id="world">
    <div class="cloud" style="top:20px; left:60px;"></div>
    <div class="cloud" style="top:60px; left:400px;"></div>
    <div class="cloud" style="top:30px; left:650px;"></div>
    <div class="cloud" style="top:40px; left:1000px;"></div>
    <div class="cloud" style="top:70px; left:1400px;"></div>
    <div class="cloud" style="top:25px; left:1800px;"></div>
    <div class="cloud" style="top:50px; left:2200px;"></div>
    <div class="cloud" style="top:35px; left:2700px;"></div>

    <div class="platform" style="bottom:150px; left:300px; width:140px;"></div>
    <div class="platform" style="bottom:250px; left:600px; width:140px;"></div>
    <div class="platform" style="bottom:150px; left:900px; width:140px;"></div>
    <div class="platform" style="bottom:200px; left:1300px; width:140px;"></div>
    <div class="platform" style="bottom:150px; left:1700px; width:140px;"></div>
    <div class="platform" style="bottom:250px; left:2100px; width:140px;"></div>
    <div class="platform" style="bottom:150px; left:2500px; width:140px;"></div>

    <div id="ground"></div>

    <div class="enemy" id="enemy1"><div class="enemyBody"><div class="enemyEye eEyeL"></div><div class="enemyEye eEyeR"></div></div></div>
    <div class="enemy" id="enemy2"><div class="enemyBody"><div class="enemyEye eEyeL"></div><div class="enemyEye eEyeR"></div></div></div>
    <div class="enemy" id="enemy3"><div class="enemyBody"><div class="enemyEye eEyeL"></div><div class="enemyEye eEyeR"></div></div></div>

    <div id="player">
      <div class="cupBody">
        <div class="cupFace">
          <div class="eye eyeL"></div>
          <div class="eye eyeR"></div>
          <div class="cupSmile"></div>
        </div>
        <div class="cupStraw"></div>
      </div>
      <div class="glove gloveL"></div>
      <div class="glove gloveR"></div>
      <div class="leg legL"></div>
      <div class="leg legR"></div>
    </div>

    <div id="boss">
      <div class="bossHead" id="bossHead">
        <div class="bossEyebrow bEbL"></div>
        <div class="bossEyebrow bEbR"></div>
        <div class="bossEye bEyeL"></div>
        <div class="bossEye bEyeR"></div>
        <div class="bossMouth" id="bossMouth"></div>
      </div>
      <div class="bossArm bArmL"></div>
      <div class="bossArm bArmR"></div>
    </div>
  </div>

  <div id="msg">YOU WIN!</div>

  <div id="startScreen">
    <h1>CUP HERO</h1>
    <p>Arrow keys to move, UP to jump, SPACE to shoot magic bullets!<br>Run through the level, dodge enemies, and beat the boss at the end!</p>
    <button id="startBtn">START GAME</button>
  </div>
</div>

<script>
const wrap = document.getElementById('wrap');
const world = document.getElementById('world');
const player = document.getElementById('player');
const boss = document.getElementById('boss');
const livesEl = document.getElementById('lives');
const scoreEl = document.getElementById('score');
const bossFill = document.getElementById('bossHealthFill');
const bossHealthBar = document.getElementById('bossHealthBar');
const msg = document.getElementById('msg');
const startScreen = document.getElementById('startScreen');
const startBtn = document.getElementById('startBtn');

const VIEW_W = 800, H = 500;
const WORLD_W = 3200;
const groundY = 60;

let px = 60, py = groundY, pvy = 0, facing = 1;
let onGround = true;
let lives = 3, score = 0;
let camX = 0;

const bossStartX = 2950;
let bossHP = 30;
let bossX = bossStartX, bossY = groundY + 10, bossDir = -1;
let bossVy = 0, bossJumpTimer = 0;
let bossActive = false;

let gameRunning = false;
let keys = {};

const platforms = [
  {x:300, y:150, w:140},
  {x:600, y:250, w:140},
  {x:900, y:150, w:140},
  {x:1300, y:200, w:140},
  {x:1700, y:150, w:140},
  {x:2100, y:250, w:140},
  {x:2500, y:150, w:140}
];

let enemies = [
  {id:'enemy1', x:500, y:groundY, alive:true, dir:1, minX:450, maxX:700},
  {id:'enemy2', x:1400, y:groundY, alive:true, dir:-1, minX:1300, maxX:1550},
  {id:'enemy3', x:2200, y:groundY, alive:true, dir:1, minX:2150, maxX:2400}
];

let bullets = [];
let bossBullets = [];
let shootCooldown = 0;
let bossShootCooldown = 60;
let invincible = 0;

function resetGame(){
  px = 60; py = groundY; pvy=0; onGround=true;
  lives = 3; score = 0; bossHP = 30;
  bossX = bossStartX; bossY = groundY+10; bossVy=0;
  bossActive = false;
  bossHealthBar.style.display = 'none';
  bullets = []; bossBullets = [];
  shootCooldown = 0; bossShootCooldown = 60;
  invincible = 0;
  camX = 0;
  msg.style.display = 'none';
  enemies = [
    {id:'enemy1', x:500, y:groundY, alive:true, dir:1, minX:450, maxX:700},
    {id:'enemy2', x:1400, y:groundY, alive:true, dir:-1, minX:1300, maxX:1550},
    {id:'enemy3', x:2200, y:groundY, alive:true, dir:1, minX:2150, maxX:2400}
  ];
  document.querySelectorAll('.enemy').forEach(el=> el.style.display = 'block');
  updateHUD();
}

function updateHUD(){
  livesEl.textContent = lives;
  scoreEl.textContent = score;
  bossFill.style.width = Math.max(0, (bossHP/30*100)) + '%';
}

document.addEventListener('keydown', e=>{
  keys[e.code] = true;
  if(e.code === 'Space') e.preventDefault();
});
document.addEventListener('keyup', e=>{
  keys[e.code] = false;
});

startBtn.addEventListener('click', ()=>{
  startScreen.style.display = 'none';
  resetGame();
  gameRunning = true;
});

function checkPlatformLanding(x, y, vy){
  for(const p of platforms){
    const px1 = x, px2 = x+50;
    if(px2 > p.x && px1 < p.x + p.w){
      const platTopFromBottom = p.y + 18;
      if(vy <= 0 && y <= platTopFromBottom + 10 && y >= platTopFromBottom - 12){
        return platTopFromBottom;
      }
    }
  }
  return null;
}

function gameLoop(){
  if(gameRunning){
    update();
  }
  render();
  requestAnimationFrame(gameLoop);
}

function update(){
  const speed = 4;
  if(keys['ArrowLeft']){ px -= speed; facing = -1; }
  if(keys['ArrowRight']){ px += speed; facing = 1; }
  px = Math.max(0, Math.min(WORLD_W-60, px));

  if(keys['ArrowUp'] && onGround){
    pvy = 9.5;
    onGround = false;
  }
  pvy -= 0.5;
  py += pvy;

  let landed = false;
  const platLand = checkPlatformLanding(px, py, pvy);
  if(platLand !== null && pvy < 0){
    py = platLand;
    pvy = 0;
    onGround = true;
    landed = true;
  }
  if(!landed && py <= groundY){
    py = groundY;
    pvy = 0;
    onGround = true;
  } else if(!landed){
    onGround = false;
  }

  // camera follows player, clamps to world
  camX = px - VIEW_W/2 + 30;
  camX = Math.max(0, Math.min(WORLD_W - VIEW_W, camX));

  // activate boss when player gets close
  if(!bossActive && px > bossStartX - 250){
    bossActive = true;
    bossHealthBar.style.display = 'block';
  }

  if(shootCooldown > 0) shootCooldown--;
  if(keys['Space'] && shootCooldown === 0){
    bullets.push({x: px + (facing===1?55:-10), y: py+35, dir: facing});
    shootCooldown = 14;
  }

  bullets.forEach(b=> b.x += b.dir*9);
  bullets = bullets.filter(b=> b.x > camX-20 && b.x < camX+VIEW_W+20);

  // enemies patrol
  enemies.forEach(en=>{
    if(!en.alive) return;
    en.x += en.dir*1.5;
    if(en.x < en.minX) en.dir = 1;
    if(en.x > en.maxX) en.dir = -1;
  });

  // bullets vs enemies
  bullets = bullets.filter(b=>{
    for(const en of enemies){
      if(en.alive && b.x > en.x && b.x < en.x+40 && b.y > en.y && b.y < en.y+40){
        en.alive = false;
        score += 5;
        updateHUD();
        return false;
      }
    }
    return true;
  });

  // enemy touching player
  enemies.forEach(en=>{
    if(en.alive && invincible===0 && px+50 > en.x && px < en.x+40 && py < en.y+40 && py+70 > en.y){
      lives -= 1;
      invincible = 60;
      updateHUD();
    }
  });

  // boss AI
  if(bossActive && bossHP > 0){
    bossX += bossDir*2;
    if(bossX < bossStartX - 150) bossDir = 1;
    if(bossX > bossStartX + 100) bossDir = -1;

    bossJumpTimer--;
    if(bossJumpTimer <= 0 && bossY <= groundY+11){
      bossVy = 8;
      bossJumpTimer = 90 + Math.random()*60;
    }
    bossVy -= 0.4;
    bossY += bossVy;
    if(bossY < groundY+10){ bossY = groundY+10; bossVy = 0; }

    bossShootCooldown--;
    if(bossShootCooldown <= 0){
      bossBullets.push({x: bossX+10, y: bossY+50, dir:-1});
      bossShootCooldown = 70 + Math.random()*40;
    }
  }
  bossBullets.forEach(b=> b.x += b.dir*6);
  bossBullets = bossBullets.filter(b=> b.x > camX-20 && b.x < camX+VIEW_W+20);

  if(bossActive){
    bullets = bullets.filter(b=>{
      if(bossHP > 0 && b.x > bossX && b.x < bossX+150 && b.y > bossY && b.y < bossY+150){
        bossHP -= 1;
        score += 10;
        updateHUD();
        return false;
      }
      return true;
    });
  }

  if(invincible > 0) invincible--;
  bossBullets = bossBullets.filter(b=>{
    if(invincible === 0 && b.x > px && b.x < px+60 && b.y > py && b.y < py+70){
      lives -= 1;
      invincible = 60;
      updateHUD();
      return false;
    }
    return true;
  });

  if(bossActive && bossHP > 0 && invincible === 0 && px+50 > bossX && px < bossX+150 && py < bossY+150 && py+70 > bossY){
    lives -= 1;
    invincible = 60;
    updateHUD();
  }

  if(bossActive && bossHP <= 0){
    gameRunning = false;
    msg.textContent = 'YOU WIN! Score: ' + score;
    msg.style.display = 'block';
  }
  if(lives <= 0){
    gameRunning = false;
    msg.textContent = 'GAME OVER';
    msg.style.display = 'block';
  }
}

function render(){
  world.style.transform = 'translateX(' + (-camX) + 'px)';

  player.style.left = px + 'px';
  player.style.bottom = py + 'px';
  player.style.transform = facing === -1 ? 'scaleX(-1)' : 'scaleX(1)';
  player.style.opacity = (invincible>0 && Math.floor(invincible/6)%2===0) ? '0.4' : '1';

  boss.style.left = bossX + 'px';
  boss.style.bottom = bossY + 'px';
  boss.style.display = bossActive ? 'block' : 'none';

  enemies.forEach(en=>{
    const el = document.getElementById(en.id);
    if(!en.alive){ el.style.display = 'none'; return; }
    el.style.display = 'block';
    el.style.left = en.x + 'px';
    el.style.bottom = en.y + 'px';
  });

  document.querySelectorAll('.bullet').forEach(el=>el.remove());
  bullets.forEach(b=>{
    const el = document.createElement('div');
    el.className = 'bullet';
    el.style.left = b.x + 'px';
    el.style.bottom = b.y + 'px';
    world.appendChild(el);
  });

  document.querySelectorAll('.bossbullet').forEach(el=>el.remove());
  bossBullets.forEach(b=>{
    const el = document.createElement('div');
    el.className = 'bossbullet';
    el.style.left = b.x + 'px';
    el.style.bottom = b.y + 'px';
    world.appendChild(el);
  });
}

gameLoop();
</script>
</body>
</html>

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!