DeepSeek V4 Flash 0423

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>❤️ burger · heart breaker</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #1a0e28;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }
    .game-container {
      background: #2d1b3d;
      padding: 20px 20px 25px;
      border-radius: 40px 40px 20px 20px;
      box-shadow: 0 20px 30px rgba(0,0,0,0.6);
    }
    canvas {
      display: block;
      width: 720px;
      height: 480px;
      border-radius: 24px;
      background: #130b1c;
      box-shadow: inset 0 0 0 2px #daaaff33, 0 10px 20px #00000066;
      cursor: pointer;
      margin: 0 auto;
    }
    .info {
      display: flex;
      justify-content: space-between;
      color: #fddaff;
      font-weight: bold;
      padding: 12px 8px 0;
      font-size: 1.2rem;
      letter-spacing: 0.5px;
    }
    .info span {
      background: #3c2555;
      padding: 6px 18px;
      border-radius: 40px;
      box-shadow: 0 4px 0 #1f0f2b;
    }
    @media (max-width: 760px) {
      .game-container { padding: 10px; }
      canvas { width: 100%; height: auto; aspect-ratio: 720/480; }
    }
  </style>
</head>
<body>
<div class="game-container">
  <canvas id="gameCanvas" width="720" height="480"></canvas>
  <div class="info">
    <span>❤️ <span id="scoreDisplay">0</span></span>
    <span id="messageDisplay">click / key to start</span>
  </div>
</div>
<script>
  (function(){
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreSpan = document.getElementById('scoreDisplay');
    const msgSpan = document.getElementById('messageDisplay');

    // ---------- GAME DIMENSIONS ----------
    const W = 720, H = 480;
    const PADDLE_W = 100, PADDLE_H = 28;
    const BALL_RADIUS = 10;
    const BRICK_ROWS = 6;
    const BRICK_COLS = 10;
    const BRICK_W = 60, BRICK_H = 22;
    const BRICK_PAD = 2;
    const BRICK_TOP = 60;
    const BRICK_LEFT = (W - (BRICK_COLS * (BRICK_W + BRICK_PAD) - BRICK_PAD)) / 2;

    // ---------- STATE ----------
    let paddle = { x: W/2 - PADDLE_W/2, y: H - 40 };
    let ball = { x: W/2, y: H - 60, dx: 3.5, dy: -3.8 };
    const BALL_SPEED = 4.2;

    let bricks = [];
    let score = 0;

    // heart explosion particles
    let hearts = [];

    // game control
    let gameActive = false;
    let gameRunning = false;   // true = simulation / play
    let demoMode = true;      // starts with demo AI

    // keyboard and mouse
    let keys = { left: false, right: false };

    // ---------- BRICK GRID ----------
    function buildBricks() {
      bricks = [];
      for (let row = 0; row < BRICK_ROWS; row++) {
        for (let col = 0; col < BRICK_COLS; col++) {
          const x = BRICK_LEFT + col * (BRICK_W + BRICK_PAD);
          const y = BRICK_TOP + row * (BRICK_H + BRICK_PAD);
          // colour palette: pink / coral / lavender
          const hue = 330 + row * 8 + col * 12;
          bricks.push({
            x, y, w: BRICK_W, h: BRICK_H,
            alive: true,
            color: `hsl(${hue % 360}, 85%, 70%)`
          });
        }
      }
    }
    buildBricks();

    // ---------- RESET BALL (with random direction) ----------
    function resetBall() {
      const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.8;
      const speed = BALL_SPEED;
      ball.x = W/2;
      ball.y = H - 60;
      ball.dx = Math.cos(angle) * speed;
      ball.dy = Math.sin(angle) * speed;
    }

    // ---------- HEART EXPLOSION ----------
    function spawnHearts(bx, by) {
      const count = 18 + Math.floor(Math.random() * 20);
      for (let i = 0; i < count; i++) {
        const angle = Math.random() * 2 * Math.PI;
        const speed = 1.5 + Math.random() * 3.8;
        hearts.push({
          x: bx + BRICK_W/2,
          y: by + BRICK_H/2,
          vx: Math.cos(angle) * speed,
          vy: Math.sin(angle) * speed - 1.0,
          size: 5 + Math.random() * 12,
          life: 1.0,
          decay: 0.006 + Math.random() * 0.012,
          rotation: Math.random() * 6.28,
          rotSpeed: (Math.random() - 0.5) * 0.12,
          color: `hsl(${340 + Math.random()*40}, 95%, ${60 + Math.random()*35}%)`
        });
      }
    }

    // ---------- COLLISION: BRICKS + BALL ----------
    function ballBrickCollision() {
      for (let brick of bricks) {
        if (!brick.alive) continue;
        const bx = brick.x, by = brick.y, bw = brick.w, bh = brick.h;
        const cx = Math.max(bx, Math.min(ball.x, bx + bw));
        const cy = Math.max(by, Math.min(ball.y, by + bh));
        const dx = ball.x - cx;
        const dy = ball.y - cy;
        const dist = Math.sqrt(dx*dx + dy*dy);
        if (dist < BALL_RADIUS) {
          // brick destroyed
          brick.alive = false;
          score++;
          scoreSpan.textContent = score;

          // heart explosion
          spawnHearts(bx, by);

          // bounce: simple normal reflection
          // find overlap direction
          const overlap = BALL_RADIUS - dist;
          if (dist > 0.001) {
            // push ball out
            const nx = dx / dist, ny = dy / dist;
            ball.x += nx * overlap;
            ball.y += ny * overlap;
            // reflect velocity (only if moving toward)
            const dot = ball.dx * nx + ball.dy * ny;
            if (dot < 0) {
              ball.dx -= 2 * dot * nx;
              ball.dy -= 2 * dot * ny;
            }
          } else {
            // fallback: reverse dy
            ball.dy *= -1;
          }
          // prevent getting stuck
          return true; // only one brick per frame
        }
      }
      return false;
    }

    // ---------- BALL WALL COLLISION + PADDLE ----------
    function handleWallPaddleCollision() {
      // walls
      if (ball.x - BALL_RADIUS < 0) { ball.x = BALL_RADIUS; ball.dx = -ball.dx; }
      if (ball.x + BALL_RADIUS > W) { ball.x = W - BALL_RADIUS; ball.dx = -ball.dx; }
      if (ball.y - BALL_RADIUS < 0) { ball.y = BALL_RADIUS; ball.dy = -ball.dy; }

      // paddle collision (hamburger!)
      let px = paddle.x, py = paddle.y, pw = PADDLE_W, ph = PADDLE_H;
      // ball vs rectangle paddle
      const cx = Math.max(px, Math.min(ball.x, px + pw));
      const cy = Math.max(py, Math.min(ball.y, py + ph));
      const dx = ball.x - cx;
      const dy = ball.y - cy;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < BALL_RADIUS) {
        const overlap = BALL_RADIUS - dist;
        if (dist > 0.001) {
          const nx = dx / dist, ny = dy / dist;
          ball.x += nx * overlap;
          ball.y += ny * overlap;
          const dot = ball.dx * nx + ball.dy * ny;
          if (dot < 0) {
            ball.dx -= 2 * dot * nx;
            ball.dy -= 2 * dot * ny;
          }
          // add a little paddle feel
          const hitPos = (ball.x - px) / pw - 0.5; // -0.5 .. 0.5
          ball.dx += hitPos * 1.2;
          // ensure ball moves downward at least a bit
          if (ball.dy > -1.0) ball.dy = -2.5;
          // normalize speed
          const sp = Math.hypot(ball.dx, ball.dy);
          const targetSpeed = BALL_SPEED;
          if (sp > 0.01) {
            ball.dx = (ball.dx / sp) * targetSpeed;
            ball.dy = (ball.dy / sp) * targetSpeed;
          }
        } else {
          ball.dy = -Math.abs(ball.dy);
        }
      }

      // bottom => game over
      if (ball.y + BALL_RADIUS > H + 20) {
        gameRunning = false;
        gameActive = false;
        msgSpan.textContent = '💔 game over · click to restart';
        return false;
      }
      return true;
    }

    // ---------- UPDATE ----------
    function update() {
      if (!gameRunning) return;

      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

      // collision brick
      ballBrickCollision();

      // wall + paddle
      if (!handleWallPaddleCollision()) {
        // game over
        return;
      }

      // check all bricks destroyed --> win
      const aliveCount = bricks.filter(b => b.alive).length;
      if (aliveCount === 0) {
        gameRunning = false;
        gameActive = false;
        msgSpan.textContent = '🎉 you win! click to restart';
        return;
      }

      // demo paddle AI
      if (demoMode) {
        const target = ball.x;
        const speed = 5.2;
        const center = paddle.x + PADDLE_W/2;
        if (center < target - 6) {
          paddle.x += speed;
        } else if (center > target + 6) {
          paddle.x -= speed;
        }
        // stay in bounds
        if (paddle.x < 0) paddle.x = 0;
        if (paddle.x + PADDLE_W > W) paddle.x = W - PADDLE_W;
      } else {
        // player control
        if (keys.left) paddle.x -= 6.5;
        if (keys.right) paddle.x += 6.5;
        if (paddle.x < 0) paddle.x = 0;
        if (paddle.x + PADDLE_W > W) paddle.x = W - PADDLE_W;
      }
    }

    // ---------- HEART PARTICLES ----------
    function updateHearts() {
      for (let i = hearts.length - 1; i >= 0; i--) {
        const h = hearts[i];
        h.x += h.vx;
        h.y += h.vy;
        h.vy += 0.12; // gravity
        h.vx *= 0.98;
        h.vy *= 0.98;
        h.life -= h.decay;
        h.rotation += h.rotSpeed;
        if (h.life <= 0 || h.y > H + 50) {
          hearts.splice(i, 1);
        }
      }
    }

    // ---------- DRAW ----------
    function draw() {
      ctx.clearRect(0, 0, W, H);
      // draw background hearts (tiny decoration)
      for (let i = 0; i < 25; i++) {
        ctx.globalAlpha = 0.06;
        ctx.fillStyle = '#ffb0d0';
        ctx.font = '18px serif';
        ctx.fillText('❤️', (i*37+9)%W, (i*23+17)%H);
      }
      ctx.globalAlpha = 1;

      // draw bricks
      for (let brick of bricks) {
        if (!brick.alive) continue;
        ctx.fillStyle = brick.color;
        ctx.shadowColor = '#ffaad4';
        ctx.shadowBlur = 12;
        ctx.beginPath();
        ctx.roundRect(brick.x, brick.y, brick.w, brick.h, 6);
        ctx.fill();
        // shiny
        ctx.shadowBlur = 0;
        ctx.fillStyle = '#ffffff30';
        ctx.beginPath();
        ctx.roundRect(brick.x+3, brick.y+2, brick.w-8, brick.h/4, 4);
        ctx.fill();
      }

      // draw hearts (particles)
      ctx.shadowBlur = 18;
      ctx.shadowColor = '#ff8ec4';
      for (let h of hearts) {
        ctx.save();
        ctx.translate(h.x, h.y);
        ctx.rotate(h.rotation);
        ctx.globalAlpha = h.life * 0.9;
        ctx.font = `${h.size}px serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = h.color;
        ctx.fillText('❤️', 0, 0);
        ctx.restore();
      }
      ctx.globalAlpha = 1;
      ctx.shadowBlur = 0;

      // draw paddle: HAMBURGER!!!
      ctx.shadowBlur = 20;
      ctx.shadowColor = '#ffb07a';
      const px = paddle.x, py = paddle.y;
      // bun top
      ctx.fillStyle = '#f5c782';
      ctx.beginPath();
      ctx.ellipse(px + PADDLE_W/2, py-5, 54, 16, 0, Math.PI, 0);
      ctx.fill();
      ctx.fillStyle = '#d49a4a';
      ctx.beginPath();
      ctx.ellipse(px + PADDLE_W/2, py-3, 50, 10, 0, Math.PI, 0);
      ctx.fill();
      // patty
      ctx.fillStyle = '#7a4d2a';
      ctx.beginPath();
      ctx.roundRect(px+6, py-2, PADDLE_W-12, 12, 6);
      ctx.fill();
      ctx.fillStyle = '#5a3520';
      ctx.beginPath();
      ctx.roundRect(px+12, py+1, PADDLE_W-24, 6, 3);
      ctx.fill();
      // lettuce
      ctx.fillStyle = '#7dbd5a';
      ctx.beginPath();
      ctx.roundRect(px+8, py-6, PADDLE_W-16, 6, 3);
      ctx.fill();
      // cheese
      ctx.fillStyle = '#fadb4a';
      ctx.beginPath();
      ctx.roundRect(px+16, py+5, PADDLE_W-32, 4, 2);
      ctx.fill();
      // bun bottom
      ctx.fillStyle = '#e8b96a';
      ctx.beginPath();
      ctx.ellipse(px + PADDLE_W/2, py+12, 46, 10, 0, 0, Math.PI);
      ctx.fill();
      // sesame dots
      ctx.fillStyle = '#efd29e';
      for (let i = 0; i < 6; i++) {
        ctx.beginPath();
        ctx.arc(px + 20 + i*14, py-11, 2.5, 0, 2*Math.PI);
        ctx.fill();
      }
      ctx.shadowBlur = 0;

      // ball = tiny heart (but visible)
      ctx.shadowBlur = 30;
      ctx.shadowColor = '#ff4d8c';
      ctx.font = '26px serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('💖', ball.x, ball.y);
      ctx.shadowBlur = 0;

      // overlay if not active
      if (!gameActive) {
        ctx.fillStyle = '#00000077';
        ctx.fillRect(0, 0, W, H);
        ctx.fillStyle = '#ffe0f0';
        ctx.font = 'bold 32px system-ui, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('🍔 click or press a key', W/2, H/2 - 10);
        ctx.font = '24px system-ui';
        ctx.fillStyle = '#fbc0d0';
        ctx.fillText('to start', W/2, H/2 + 50);
      }
    }

    // roundRect helper
    CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
      if (w < 2 * r) r = w / 2;
      if (h < 2 * r) r = h / 2;
      this.moveTo(x + r, y);
      this.lineTo(x + w - r, y);
      this.quadraticCurveTo(x + w, y, x + w, y + r);
      this.lineTo(x + w, y + h - r);
      this.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
      this.lineTo(x + r, y + h);
      this.quadraticCurveTo(x, y + h, x, y + h - r);
      this.lineTo(x, y + r);
      this.quadraticCurveTo(x, y, x + r, y);
      this.closePath();
      return this;
    };

    // ---------- GAME LOOP ----------
    function loop() {
      update();
      updateHearts();
      draw();
      requestAnimationFrame(loop);
    }

    // ---------- START / RESTART ----------
    function startGame() {
      // reset
      buildBricks();
      hearts = [];
      score = 0;
      scoreSpan.textContent = '0';
      resetBall();
      paddle.x = W/2 - PADDLE_W/2;
      paddle.y = H - 40;
      gameActive = true;
      gameRunning = true;
      demoMode = true;
      msgSpan.textContent = '🤖 demo AI';
    }

    function restartAsPlayer() {
      startGame();
      demoMode = false;
      msgSpan.textContent = '🎮 play!';
    }

    // ---------- EVENT LISTENERS ----------
    function onStart(e) {
      if (gameActive) return;
      // if bricks remain but game over, restart
      startGame();
      demoMode = true;
      msgSpan.textContent = '🤖 demo AI';
      e.preventDefault();
    }

    canvas.addEventListener('click', (e) => {
      if (!gameActive) {
        onStart(e);
        return;
      }
      // if already active, switch to player mode if in demo
      if (demoMode) {
        demoMode = false;
        msgSpan.textContent = '🎮 player mode';
        // adjust paddle position to mouse?
      }
    });

    window.addEventListener('keydown', (e) => {
      if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        if (!gameActive) {
          onStart(e);
          return;
        }
        // switch to player
        if (demoMode) {
          demoMode = false;
          msgSpan.textContent = '🎮 player mode';
        }
      }
      // player keys
      if (e.key === 'ArrowLeft') keys.left = true;
      if (e.key === 'ArrowRight') keys.right = true;
      // prevent scrolling
      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') e.preventDefault();
    });

    window.addEventListener('keyup', (e) => {
      if (e.key === 'ArrowLeft') keys.left = false;
      if (e.key === 'ArrowRight') keys.right = false;
    });

    // start loop
    loop();

    // initial idle overlay
    gameActive = false;
    gameRunning = false;
    msgSpan.textContent = '🍔 click / key to start';

    // extra: if window loses focus, keep keys
  })();
</script>
</body>
</html>