gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout Demo</title>
<style>
  body,html{margin:0;height:100%;background:#111;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
  #gameCanvas{background:#222;display:block;margin:auto}
  #overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:2rem;background:rgba(0,0,0,0.7);
    cursor:pointer;
  }
  #ui{
    position:absolute;top:10px;left:10px;right:10px;
    display:flex;justify-content:space-between;pointer-events:none;
    font-size:1.2rem;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="overlay">Click or press any key to start</div>
<div id="ui"><div id="score">Score: 0</div><div id="lives">Lives: 3</div></div>
<script>
(() => {
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const scoreEl = document.getElementById('score');
  const livesEl = document.getElementById('lives');

  const W = canvas.width, H = canvas.height;
  let paddle, balls, bricks, powerUps, particles;
  let leftPressed = false, rightPressed = false;
  let gameRunning = false, gameOver = false, victory = false;
  let score = 0, lives = 3;
  const PADDLE_WIDTH = 100, PADDLE_HEIGHT = 12;
  const BALL_RADIUS = 8;
  const POWERUP_SIZE = 20;
  const POWERUP_DURATION = 10000; // ms

  // ---- Utility ----
  function rand(min,max){return Math.random()*(max-min)+min;}
  function rectCollide(ax,ay,aw,ah,bx,by,bw,bh){
    return ax < bx+bw && ax+aw > bx && ay < by+bh && ay+ah > by;
  }

  // ---- Entities ----
  class Paddle{
    constructor(){ this.reset(); }
    reset(){ this.width=PADDLE_WIDTH; this.height=PADDLE_HEIGHT; this.x=(W-this.width)/2; this.y=H-this.height-10; this.speed=6; this.widerUntil=0; }
    update(){
      if(leftPressed) this.x-=this.speed;
      if(rightPressed) this.x+=this.speed;
      this.x=Math.max(0,Math.min(W-this.width,this.x));
      if(this.widerUntil && Date.now()>this.widerUntil) { this.width=PADDLE_WIDTH; this.widerUntil=0; }
    }
    draw(){ ctx.fillStyle='#0af'; ctx.fillRect(this.x,this.y,this.width,this.height); }
    widen(){ this.width = PADDLE_WIDTH*1.5; this.widerUntil = Date.now()+POWERUP_DURATION; }
  }

  class Ball{
    constructor(x,y,dx,dy){ this.x=x; this.y=y; this.dx=dx; this.dy=dy; this.radius=BALL_RADIUS; this.active=true; }
    update(){
      if(!this.active) return;
      this.x+=this.dx; this.y+=this.dy;
      // wall collisions
      if(this.x-this.radius<0||this.x+this.radius>W) this.dx*=-1;
      if(this.y-this.radius<0) this.dy*=-1;
      // paddle
      if(this.y+this.radius>=paddle.y && this.y+this.radius<=paddle.y+paddle.height &&
         this.x>=paddle.x && this.x<=paddle.x+paddle.width){
        const rel=(this.x-(paddle.x+paddle.width/2))/(paddle.width/2);
        const angle = rel*Math.PI/3 + Math.PI/2; // from 60° left to 60° right
        const speed=Math.hypot(this.dx,this.dy);
        this.dx=Math.cos(angle)*speed;
        this.dy=-Math.sin(angle)*speed;
        this.y = paddle.y - this.radius -1;
      }
      // bottom loss
      if(this.y-this.radius>H){
        this.active=false;
        checkBallsLoss();
      }
      // bricks
      for(let i=0;i<bricks.length;i++){
        const b=bricks[i];
        if(!b.alive) continue;
        if(rectCollide(this.x-this.radius,this.y-this.radius,this.radius*2,this.radius*2,
                       b.x,b.y,b.w,b.h)){
          // simple vertical/horizontal response
          const prevX=this.x-this.dx, prevY=this.y-this.dy;
          const hitFromLeft = prevX < b.x && this.dx>0;
          const hitFromRight = prevX > b.x+b.w && this.dx<0;
          const hitFromTop = prevY < b.y && this.dy>0;
          const hitFromBottom = prevY > b.y+b.h && this.dy<0;
          if(hitFromLeft||hitFromRight) this.dx*=-1;
          if(hitFromTop||hitFromBottom) this.dy*=-1;
          // brick hit
          b.hit();
          break;
        }
      }
    }
    draw(){ if(!this.active) return; ctx.fillStyle='#ff0'; ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); ctx.fill(); }
  }

  class Brick{
    constructor(x,y,w,h,hard=false,hasPower=false){
      this.x=x; this.y=y; this.w=w; this.h=h; this.hard=hard; this.hasPower=hasPower;
      this.alive=true; this.hitCount=0;
    }
    hit(){
      this.hitCount++;
      if(this.hard && this.hitCount===1){
        // crack
        this.cracked=true;
      }else{
        this.alive=false;
        score+=10;
        scoreEl.textContent='Score: '+score;
        createParticles(this.x+this.w/2,this.y+this.h/2);
        if(this.hasPower) spawnPowerUp(this.x+this.w/2,this.y+this.h/2);
        checkVictory();
      }
    }
    draw(){
      if(!this.alive) return;
      ctx.fillStyle = this.hard ? (this.cracked?'#b55':'#a33') : '#34c';
      ctx.fillRect(this.x,this.y,this.w,this.h);
      if(this.hasPower){
        ctx.fillStyle='#fff';
        ctx.font='16px sans-serif';
        ctx.textAlign='center';
        ctx.textBaseline='middle';
        ctx.fillText(this.hard?'⚡':'🔺', this.x+this.w/2, this.y+this.h/2);
      }
    }
  }

  class PowerUp{
    constructor(x,y,type){
      this.x=x; this.y=y; this.type=type; this.vy=2; this.size=POWERUP_SIZE; this.active=true;
    }
    update(){
      this.y+=this.vy;
      if(this.y>H) this.active=false;
      // catch
      if(rectCollide(this.x-this.size/2,this.y-this.size/2,this.size,this.size,
                     paddle.x,paddle.y,paddle.width,paddle.height)){
        this.apply();
        this.active=false;
      }
    }
    apply(){
      if(this.type==='wide'){
        paddle.widen();
      }else if(this.type==='multi'){
        // add two more balls
        for(let i=0;i<2;i++){
          const angle=rand(-Math.PI/4,Math.PI/4);
          const speed=4;
          balls.push(new Ball(paddle.x+paddle.width/2, paddle.y-10,
                              Math.cos(angle)*speed, -Math.abs(Math.sin(angle)*speed)));
        }
      }
    }
    draw(){
      ctx.fillStyle=this.type==='wide'?'#0f0':'#f0f';
      ctx.beginPath(); ctx.arc(this.x,this.y,this.size/2,0,Math.PI*2); ctx.fill();
      ctx.fillStyle='#000';
      ctx.font='12px sans-serif';
      ctx.textAlign='center';
      ctx.textBaseline='middle';
      ctx.fillText(this.type==='wide'?'W':'M',this.x,this.y);
    }
  }

  class Particle{
    constructor(x,y){
      this.x=x; this.y=y; this.vx=rand(-2,2); this.vy=rand(-2,2);
      this.life=30;
      this.size=rand(2,4);
    }
    update(){
      this.x+=this.vx; this.y+=this.vy; this.life--;
    }
    draw(){
      ctx.fillStyle='rgba(255,255,255,'+this.life/30+')';
      ctx.fillRect(this.x,this.y,this.size,this.size);
    }
  }

  function createParticles(x,y){
    for(let i=0;i=0;i<10;i++) particles.push(new Particle(x,y));
  }

  function spawnPowerUp(x,y){
    const type = Math.random()<0.5?'wide':'multi';
    powerUps.push(new PowerUp(x,y,type));
  }

  function init(){
    paddle = new Paddle();
    balls = [new Ball(W/2, H-60, 3, -3)];
    bricks=[];
    const rows=6, cols=10, brickW=70, brickH=20, gap=5, offsetY=60;
    for(let r=0;r<rows;r++){
      for(let c=0;c<cols;c++){
        const x=gap + c*(brickW+gap);
        const y=offsetY + r*(brickH+gap);
        const hard = Math.random()<0.2; // 20% tough
        const hasPower = Math.random()<0.1; // 10% power
        bricks.push(new Brick(x,y,brickW,brickH,hard,hasPower));
      }
    }
    powerUps=[]; particles=[];
    score=0; lives=3; gameOver=false; victory=false;
    scoreEl.textContent='Score: 0';
    livesEl.textContent='Lives: 3';
  }

  function checkBallsLoss(){
    if(balls.every(b=>!b.active)){
      lives--;
      livesEl.textContent='Lives: '+lives;
      if(lives>0){
        balls=[new Ball(W/2, H-60, 3, -3)];
      }else{
        gameOver=true;
        showEndScreen('Game Over');
      }
    }
  }

  function checkVictory(){
    if(bricks.every(b=>!b.alive)){
      victory=true;
      showEndScreen('You Win!');
    }
  }

  function showEndScreen(msg){
    gameRunning=false;
    overlay.textContent=msg+' - Click to Restart';
    overlay.style.display='flex';
  }

  function loop(){
    ctx.clearRect(0,0,W,H);
    // draw bricks
    bricks.forEach(b=>b.draw());
    // draw powerups
    powerUps.forEach(p=>{p.update(); p.draw();});
    powerUps=powerUps.filter(p=>p.active);
    // particles
    particles.forEach(p=>{p.update(); p.draw();});
    particles=particles.filter(p=>p.life>0);
    // paddle
    paddle.update(); paddle.draw();
    // balls
    balls.forEach(b=>{b.update(); b.draw();});
    requestAnimationFrame(loop);
  }

  // ---- Input ----
  document.addEventListener('keydown',e=>{
    if(e.key==='ArrowLeft') leftPressed=true;
    if(e.key==='ArrowRight') rightPressed=true;
    if(!gameRunning){ startGame(); }
  });
  document.addEventListener('keyup',e=>{
    if(e.key==='ArrowLeft') leftPressed=false;
    if(e.key==='ArrowRight') rightPressed=false;
  });
  canvas.addEventListener('mousemove',e=>{
    const rect=canvas.getBoundingClientRect();
    const mx=e.clientX-rect.left;
    paddle.x = Math.max(0,Math.min(W-paddle.width,mx-paddle.width/2));
  });
  overlay.addEventListener('click',startGame);
  function startGame(){
    overlay.style.display='none';
    if(gameOver||victory) init();
    gameRunning=true;
  }

  // ---- Init ----
  init();
  loop();
})();
</script>
</body>
</html>