MiniMax M3.1 Flash

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Burger Breakout</title>
<style>
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #090611;
    color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 50% 15%, rgba(255, 44, 115, .16), transparent 45%),
      radial-gradient(circle at 15% 85%, rgba(90, 60, 255, .14), transparent 40%),
      #090611;
  }
  #wrap {
    position: relative;
    width: min(100vw, calc(100vh * 1.5));
    aspect-ratio: 3 / 2;
    max-height: 100vh;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: #0d0919;
    box-shadow: 0 22px 80px rgba(0,0,0,.65), 0 0 40px rgba(255,45,120,.12);
    touch-action: none;
  }
  #hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 22px 30px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    background: rgba(12, 8, 24, .88);
    backdrop-filter: blur(10px);
    text-align: center;
    pointer-events: none;
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    transition: opacity .4s ease;
    animation: float 2.2s ease-in-out infinite;
  }
  #hint strong {
    display: block;
    font-size: clamp(18px, 3vw, 28px);
    letter-spacing: .03em;
    color: #ff6b9e;
    margin-bottom: 7px;
  }
  #hint span { color: #d8cfe6; font-size: clamp(12px, 1.7vw, 16px); }
  @keyframes float { 50% { transform: translate(-50%, calc(-50% - 5px)); } }
  #hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .badge {
    position: absolute;
    top: 18px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(8,5,18,.72);
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 800;
    letter-spacing: .08em;
    font-size: clamp(11px, 1.7vw, 15px);
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
  }
  #score { left: 18px; color: #ffe082; }
  #lives { right: 18px; color: #ff709e; }
  #title {
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    font-size: clamp(13px, 2.4vw, 22px);
    font-weight: 900;
    letter-spacing: .14em;
    color: #fff;
    text-shadow: 0 0 18px rgba(255,80,140,.65);
    white-space: nowrap;
  }
  @media (max-width: 560px) {
    #wrap { width: 100vw; height: 66.666vw; max-height: 100vh; }
    #hint { padding: 16px 18px; }
    .badge { top: 10px; }
    #score { left: 10px; }
    #lives { right: 10px; }
    #title { top: 10px; letter-spacing: .06em; }
  }
</style>
</head>
<body>
<div id="wrap">
  <canvas id="game" width="960" height="640"></canvas>
  <div id="hud">
    <div class="badge" id="score">SCORE 0</div>
    <div class="badge" id="lives">♥ ♥ ♥</div>
    <div id="title">HEART BURGER BREAKOUT</div>
  </div>
  <div id="hint"><strong>🍔 Click or press a key to start</strong><span>The demo burger is already playing!</span></div>
</div>
<script>
(() => {
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const W = 960, H = 640;
  const scoreEl = document.getElementById('score');
  const livesEl = document.getElementById('lives');
  const hint = document.getElementById('hint');

  const COLORS = ['#ff4f87', '#ff7a59', '#ffb347', '#ffe066', '#7de2a7', '#5ac8fa', '#a78bfa', '#f472b6'];
  let paddle, ball, bricks, particles, floaters, score, lives, level, running = true, started = false, shake = 0;

  function makeBricks(level) {
    const rows = 4 + Math.min(level - 1, 3);
    const cols = 9;
    const gap = 7;
    const margin = 48;
    const width = (W - margin * 2 - gap * (cols - 1)) / cols;
    const height = 25;
    const top = 88;
    const out = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        out.push({
          x: margin + c * (width + gap),
          y: top + r * (height + gap),
          w: width, h: height,
          color: COLORS[(r + c + level) % COLORS.length],
          hp: level > 3 && (r + c) % 5 === 0 ? 2 : 1,
          alive: true
        });
      }
    }
    return out;
  }

  function reset() {
    paddle = { x: W / 2 - 58, w: 116, h: 28, y: H - 54, vx: 0 };
    ball = { x: W / 2, y: H - 88, r: 9, vx: 4.8, vy: -5.4 };
    bricks = makeBricks(level);
    particles = [];
    floaters = [];
    score = 0;
    lives = 3;
    level = 1;
    updateHud();
  }

  function updateHud() {
    scoreEl.textContent = 'SCORE ' + score.toString().padStart(5, '0');
    livesEl.textContent = '♥ '.repeat(Math.max(0, lives)).trim() || '—';
  }

  function burst(brick) {
    const count = 18;
    for (let i = 0; i < count; i++) {
      const a = Math.random() * Math.PI * 2;
      const speed = 1.2 + Math.random() * 5.5;
      particles.push({
        x: brick.x + Math.random() * brick.w,
        y: brick.y + Math.random() * brick.h,
        vx: Math.cos(a) * speed,
        vy: Math.sin(a) * speed - 2.2,
        size: 7 + Math.random() * 13,
        rot: Math.random() * Math.PI,
        vr: (Math.random() - .5) * .25,
        life: 1,
        color: Math.random() < .58 ? '#ff3d7f' : (Math.random() < .5 ? '#ff7eb3' : '#ffb6d5')
      });
    }
    floaters.push({ x: brick.x + brick.w / 2, y: brick.y, text: '+' + (brick.hp > 1 ? 25 : 10), life: 1 });
    shake = Math.max(shake, 4);
  }

  function drawHeart(x, y, size, color, rot = 0) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(rot);
    ctx.scale(size / 16, size / 16);
    ctx.beginPath();
    ctx.moveTo(0, 5);
    ctx.bezierCurveTo(-12, -4, -8, -14, 0, -7);
    ctx.bezierCurveTo(8, -14, 12, -4, 0, 5);
    ctx.fillStyle = color;
    ctx.shadowColor = color;
    ctx.shadowBlur = 8;
    ctx.fill();
    ctx.restore();
  }

  function drawBurger() {
    const x = paddle.x, y = paddle.y, w = paddle.w;
    ctx.save();
    ctx.shadowColor = '#ff4b83';
    ctx.shadowBlur = 18;
    // top bun
    ctx.fillStyle = '#f6ad55';
    ctx.beginPath();
    ctx.moveTo(x, y + 8);
    ctx.quadraticCurveTo(x + 5, y - 5, x + 18, y - 5);
    ctx.lineTo(x + w - 18, y - 5);
    ctx.quadraticCurveTo(x + w - 5, y - 5, x + w, y + 8);
    ctx.closePath();
    ctx.fill();
    ctx.shadowBlur = 0;
    // sesame
    ctx.fillStyle = '#fff3c4';
    [[.22,.35],[.38,.7],[.56,.3],[.72,.65],[.84,.38]].forEach(([a,b]) => {
      ctx.beginPath();
      ctx.ellipse(x + w*a, y + b*5, 2.3, 1.1, -.3, 0, Math.PI*2);
      ctx.fill();
    });
    // lettuce
    ctx.fillStyle = '#67d45c';
    ctx.beginPath();
    ctx.moveTo(x, y + 7);
    for (let i = 0; i <= 10; i++) {
      ctx.quadraticCurveTo(x + i*w/10 - w/20, y + 13 + (i%2?3:-1), x + i*w/10, y + 7);
    }
    ctx.lineTo(x + w, y + 3); ctx.lineTo(x, y + 3); ctx.closePath(); ctx.fill();
    // cheese
    ctx.fillStyle = '#ffd84d';
    ctx.beginPath();
    ctx.moveTo(x+1,y+8); ctx.lineTo(x+w-1,y+8);
    ctx.lineTo(x+w-10,y+17); ctx.lineTo(x+w*.72,y+12); ctx.lineTo(x+w*.56,y+18);
    ctx.lineTo(x+w*.38,y+12); ctx.lineTo(x+w*.22,y+17); ctx.lineTo(x+8,y+10);
    ctx.closePath(); ctx.fill();
    // patty
    ctx.fillStyle = '#6f3528';
    ctx.beginPath();
    ctx.ellipse(x+w/2,y+17,w/2-3,6,0,0,Math.PI*2); ctx.fill();
    // bottom bun
    ctx.fillStyle = '#e58c3e';
    ctx.beginPath();
    ctx.roundRect(x+2,y+20,w-4,9,4); ctx.fill();
    ctx.restore();
  }

  function resetBall() {
    ball.x = paddle.x + paddle.w/2;
    ball.y = paddle.y - 18;
    ball.vx = (Math.random()-.5)*5;
    ball.vy = -5.5;
  }

  function collideRect() {
    for (const b of bricks) {
      if (!b.alive) continue;
      if (ball.x + ball.r > b.x && ball.x - ball.r < b.x+b.w &&
          ball.y + ball.r > b.y && ball.y - ball.r < b.y+b.h) {
        const overlapL = ball.x - (b.x - ball.r);
        const overlapR = (b.x+b.w+ball.r) - ball.x;
        const overlapT = ball.y - (b.y-ball.r);
        const overlapB = (b.y+b.h+ball.r) - ball.y;
        const m = Math.min(overlapL,overlapR,overlapT,overlapB);
        if (m === overlapT || m === overlapB) ball.vy *= -1;
        else ball.vx *= -1;
        b.hp--;
        if (b.hp <= 0) {
          b.alive = false;
          score += 10;
          burst(b);
          updateHud();
        } else {
          score += 3;
          updateHud();
          for (let i=0;i<7;i++) particles.push({
            x:ball.x,y:ball.y,vx:(Math.random()-.5)*4,vy:(Math.random()-.5)*4,
            size:5+Math.random()*7,rot:0,vr:0,life:.7,color:b.color
          });
        }
        break;
      }
    }
  }

  function nextLevel() {
    if (bricks.every(b => !b.alive)) {
      level++;
      bricks = makeBricks(level);
      particles = [];
      floaters = [];
      resetBall();
      floaters.push({x:W/2,y:130,text:'LEVEL '+level+'!',life:1.5});
    }
  }

  function loseLife() {
    lives--;
    updateHud();
    if (lives <= 0) {
      reset();
      floaters.push({x:W/2,y:160,text:'NEW GAME!',life:1.6});
    } else resetBall();
  }

  function update(dt) {
    // Gentle autonomous paddle play behind the start prompt.
    if (!started) {
      const target = ball.x - paddle.w/2;
      paddle.x += (target - paddle.x) * .09;
    } else {
      paddle.x += paddle.vx;
    }
    paddle.x = Math.max(8, Math.min(W-paddle.w-8, paddle.x));

    ball.x += ball.vx * dt * 60;
    ball.y += ball.vy * dt * 60;

    if (ball.x < ball.r) { ball.x=ball.r; ball.vx=Math.abs(ball.vx); }
    if (ball.x > W-ball.r) { ball.x=W-ball.r; ball.vx=-Math.abs(ball.vx); }
    if (ball.y < ball.r+42) { ball.y=ball.r+42; ball.vy=Math.abs(ball.vy); }

    if (ball.y+ball.r >= paddle.y && ball.y-ball.r <= paddle.y+paddle.h &&
        ball.x >= paddle.x-4 && ball.x <= paddle.x+paddle.w+4 && ball.vy > 0) {
      ball.y = paddle.y-ball.r-1;
      const hit = (ball.x - (paddle.x+paddle.w/2)) / (paddle.w/2);
      const speed = Math.min(9, Math.hypot(ball.vx,ball.vy)+.15);
      const angle = hit * 1.05;
      ball.vx = Math.sin(angle)*speed;
      ball.vy = -Math.abs(Math.cos(angle)*speed);
      for(let i=0;i<5;i++) particles.push({
        x:ball.x,y:paddle.y,vx:(Math.random()-.5)*3,vy:-Math.random()*2,
        size:4+Math.random()*6,rot:0,vr:0,life:.5,color:'#ffd45e'
      });
    }

    collideRect();
    nextLevel();

    if (ball.y > H+20) loseLife();

    for (const p of particles) {
      p.x += p.vx * dt * 60;
      p.y += p.vy * dt * 60;
      p.vy += .16 * dt * 60;
      p.rot += p.vr * dt * 60;
      p.life -= dt * 1.15;
    }
    particles = particles.filter(p => p.life > 0 && p.y < H+30);

    for (const f of floaters) { f.y -= dt*28; f.life -= dt; }
    floaters = floaters.filter(f => f.life > 0);
    shake *= .9;
  }

  function draw() {
    ctx.save();
    if (shake > .2) ctx.translate((Math.random()-.5)*shake, (Math.random()-.5)*shake);
    const bg = ctx.createLinearGradient(0,0,0,H);
    bg.addColorStop(0,'#171027'); bg.addColorStop(.55,'#0e0a1a'); bg.addColorStop(1,'#080611');
    ctx.fillStyle=bg; ctx.fillRect(-10,-10,W+20,H+20);

    // subtle grid
    ctx.strokeStyle='rgba(255,255,255,.025)'; ctx.lineWidth=1;
    for(let x=0;x<W;x+=40){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
    for(let y=0;y<H;y+=40){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}

    // glowing divider
    ctx.fillStyle='rgba(255,80,140,.12)'; ctx.fillRect(0,42,W,2);

    for (const b of bricks) {
      if (!b.alive) continue;
      ctx.save();
      ctx.shadowColor=b.color; ctx.shadowBlur=12;
      const g=ctx.createLinearGradient(b.x,b.y,b.x,b.y+b.h);
      g.addColorStop(0,b.color); g.addColorStop(1,'#ffffff55');
      ctx.fillStyle=g;
      ctx.beginPath(); ctx.roundRect(b.x,b.y,b.w,b.h,6); ctx.fill();
      ctx.shadowBlur=0;
      ctx.fillStyle='rgba(255,255,255,.25)';
      ctx.beginPath(); ctx.roundRect(b.x+4,b.y+3,b.w-8,5,3); ctx.fill();
      if(b.hp>1){
        ctx.fillStyle='#fff'; ctx.font='bold 12px system-ui'; ctx.textAlign='center';
        ctx.fillText('♥',b.x+b.w/2,b.y+b.h-4);
      }
      ctx.restore();
    }

    for (const p of particles) {
      ctx.save(); ctx.globalAlpha=Math.max(0,Math.min(1,p.life));
      drawHeart(p.x,p.y,p.size,p.color,p.rot); ctx.restore();
    }

    // ball trail
    for(let i=4;i>=1;i--){
      ctx.beginPath();
      ctx.arc(ball.x-ball.vx*i*.55,ball.y-ball.vy*i*.55,ball.r*(1-i*.1),0,Math.PI*2);
      ctx.fillStyle=`rgba(255,255,255,${.05*(5-i)})`; ctx.fill();
    }
    ctx.save();
    ctx.shadowColor='#fff'; ctx.shadowBlur=18; ctx.fillStyle='#fff';
    ctx.beginPath(); ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2); ctx.fill();
    ctx.restore();

    drawBurger();

    for(const f of floaters){
      ctx.save(); ctx.globalAlpha=Math.min(1,f.life);
      ctx.fillStyle='#fff'; ctx.strokeStyle='#ff3d7f'; ctx.lineWidth=4;
      ctx.font='900 26px system-ui'; ctx.textAlign='center';
      ctx.strokeText(f.text,f.x,f.y); ctx.fillText(f.text,f.x,f.y); ctx.restore();
    }
    ctx.restore();
  }

  function loop(ts) {
    const dt = Math.min(.033, (ts-last)/1000 || .016); last=ts;
    update(dt); draw(); requestAnimationFrame(loop);
  }
  let last = 0;

  function begin() {
    if (!started) {
      started = true;
      hint.style.opacity = '0';
      setTimeout(()=>hint.remove(),450);
    }
  }
  canvas.addEventListener('pointermove', e => {
    begin();
    const r=canvas.getBoundingClientRect();
    const x=(e.clientX-r.left)/r.width*W;
    paddle.vx=(x-paddle.w/2-paddle.x)*.32;
  });
  canvas.addEventListener('pointerdown', begin);
  window.addEventListener('keydown', begin);
  window.addEventListener('keydown', e => {
    if(e.key==='ArrowLeft'||e.key==='a') paddle.vx=-9;
    if(e.key==='ArrowRight'||e.key==='d') paddle.vx=9;
  });
  window.addEventListener('keyup', e => {
    if(['ArrowLeft','ArrowRight','a','d'].includes(e.key)) paddle.vx=0;
  });

  reset();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>