gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout Demo</title>
<style>
  body,html{margin:0;height:100%;overflow:hidden;background:#111;font-family:sans-serif;color:#fff;}
  #gameCanvas{background:#222;display:block;margin:auto;}
  #overlay{
    position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,0.7);font-size:2rem;cursor:pointer;
    user-select:none;
  }
  #ui{position:absolute;top:10px;left:10px;font-size:1rem;z-index:2;}
  #ui span{margin-right:15px;}
  #msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
        font-size:2rem;text-align:center;display:none;z-index:3;}
  #restartBtn{
    margin-top:15px;padding:8px 16px;background:#0a0;color:#000;
    border:none;border-radius:4px;font-weight:bold;cursor:pointer;
  }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="overlay">Click or press any key to start</div>
<div id="ui"><span id="score">Score: 0</span><span id="lives">Lives: 3</span></div>
<div id="msg"></div>
<script>
(() => {
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const msgBox = document.getElementById('msg');
  const scoreEl = document.getElementById('score');
  const livesEl = document.getElementById('lives');

  // responsive canvas
  function resize() {
    const w = Math.min(window.innerWidth, 800);
    const h = Math.min(window.innerHeight, 600);
    canvas.width = w;
    canvas.height = h;
  }
  window.addEventListener('resize', resize);
  resize();

  // Game variables
  let paddle, balls, bricks, powerUps, particles;
  let score = 0, lives = 3;
  let gameState = 'start'; // start, playing, over, win
  let paddleWidthTimer = null;

  // Constants
  const PADDLE_HEIGHT = 12;
  const PADDLE_SPEED = 6;
  const BALL_SPEED = 5;
  const ROWS = 6, COLS = 10;
  const BRICK_WIDTH = (canvas.width - 40) / COLS;
  const BRICK_HEIGHT = 20;
  const POWERUP_SIZE = 16;
  const POWERUP_TYPES = {WIDER: 'W', MULTI: 'M'};
  const PARTICLE_COUNT = 15;

  // Helpers
  function rand(min, max){return Math.random()*(max-min)+min;}

  // Classes
  class Paddle{
    constructor(){
      this.width = 100;
      this.height = PADDLE_HEIGHT;
      this.x = (canvas.width - this.width)/2;
      this.y = canvas.height - this.height - 10;
      this.vx = 0;
    }
    move(){ this.x += this.vx; this.x = Math.max(0, Math.min(canvas.width - this.width, this.x));}
    draw(){ ctx.fillStyle = '#0af'; ctx.fillRect(this.x,this.y,this.width,this.height); }
    setWidth(w){
      this.width = w;
      if(this.x + this.width > canvas.width) this.x = canvas.width - this.width;
    }
  }

  class Ball{
    constructor(x,y,dx,dy){
      this.r = 8;
      this.x = x; this.y = y;
      this.dx = dx; this.dy = dy;
      this.active = true;
    }
    update(){
      this.x += this.dx;
      this.y += this.dy;

      // wall collisions
      if(this.x - this.r < 0){ this.x = this.r; this.dx = -this.dx; }
      if(this.x + this.r > canvas.width){ this.x = canvas.width - this.r; this.dx = -this.dx; }
      if(this.y - this.r < 0){ this.y = this.r; this.dy = -this.dy; }

      // paddle collision
      if(this.y + this.r >= paddle.y && this.y + this.r <= paddle.y + paddle.height &&
         this.x >= paddle.x && this.x <= paddle.x + paddle.width){
        this.y = paddle.y - this.r;
        // angle based on hit position
        const hitPos = (this.x - paddle.x) / paddle.width - 0.5; // -0.5 to 0.5
        const angle = hitPos * Math.PI/3; // max 60deg
        const speed = Math.hypot(this.dx, this.dy);
        this.dx = speed * Math.sin(angle);
        this.dy = -speed * Math.cos(angle);
      }

      // bottom loss
      if(this.y - this.r > canvas.height){
        this.active = false;
      }

      // brick collision
      for(let i=0;i<bricks.length;i++){
        const b = bricks[i];
        if(!b) continue;
        if(this.x + this.r > b.x && this.x - this.r < b.x + b.w &&
           this.y + this.r > b.y && this.y - this.r < b.y + b.h){
          // simple reflection
          const overlapX = Math.min(this.x + this.r - b.x, b.x + b.w - (this.x - this.r));
          const overlapY = Math.min(this.y + this.r - b.y, b.y + b.h - (this.y - this.r));
          if(overlapX < overlapY) this.dx = -this.dx;
          else this.dy = -this.dy;

          // hit brick
          b.hit();
          break;
        }
      }
    }
    draw(){ ctx.fillStyle = '#ff0'; ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fill();}
  }

  class Brick{
    constructor(x,y,hard=false,hasPower=false){
      this.x = x; this.y = y; this.w = BRICK_WIDTH-4; this.h = BRICK_HEIGHT-4;
      this.hits = hard?2:1;
      this.maxHits = this.hits;
      this.hasPower = hasPower;
      this.powerType = hasPower? (Math.random()<0.5?POWERUP_TYPES.WIDER:POWERUP_TYPES.MULTI):null;
    }
    hit(){
      this.hits--;
      score += 10;
      if(this.hits<=0){
        // spawn particles
        for(let i=0;i<PARTICLE_COUNT;i++) particles.push(new Particle(this.x+this.w/2,this.y+this.h/2));
        // drop powerup
        if(this.hasPower){
          powerUps.push(new PowerUp(this.x+this.w/2,this.y+this.h/2,this.powerType));
        }
        // remove brick
        const idx = bricks.indexOf(this);
        if(idx>-1) bricks.splice(idx,1);
        // win check
        if(bricks.length===0){ gameState='win'; showMessage('You Win!');}
      }else{
        // crack visual (just change color)
      }
    }
    draw(){
      ctx.fillStyle = this.hits===2 ? '#a33' : '#3a3';
      ctx.fillRect(this.x,this.y,this.w,this.h);
      if(this.hasPower){
        ctx.fillStyle = '#ff0';
        ctx.font = '12px sans-serif';
        ctx.textAlign='center';
        ctx.textBaseline='middle';
        ctx.fillText(this.powerType,this.x+this.w/2,this.y+this.h/2+1);
      }
      if(this.hits===1 && this.maxHits===2){
        // draw crack
        ctx.strokeStyle = '#fff';
        ctx.beginPath();
        ctx.moveTo(this.x+2,this.y+2);
        ctx.lineTo(this.x+this.w-2,this.y+this.h-2);
        ctx.stroke();
      }
    }
  }

  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;
      // caught?
      if(this.y+this.size/2 >= paddle.y && this.x>paddle.x && this.x<paddle.x+paddle.width){
        this.apply();
        this.active=false;
      }
      // out of screen
      if(this.y - this.size/2 > canvas.height) this.active=false;
    }
    apply(){
      if(this.type===POWERUP_TYPES.WIDER){
        paddle.setWidth(paddle.width*1.5);
        clearTimeout(paddleWidthTimer);
        paddleWidthTimer=setTimeout(()=>{paddle.setWidth(100);},10000);
      }else if(this.type===POWERUP_TYPES.MULTI){
        // add two extra balls
        for(let i=0;i<2;i++){
          const angle = rand(-Math.PI/4, Math.PI/4);
          const speed = BALL_SPEED;
          balls.push(new Ball(paddle.x+paddle.width/2, paddle.y-10,
            speed*Math.sin(angle), -speed*Math.cos(angle)));
        }
      }
    }
    draw(){
      ctx.fillStyle = this.type===POWERUP_TYPES.WIDER?'#0f0':'#f0f';
      ctx.fillRect(this.x-this.size/2,this.y-this.size/2,this.size,this.size);
    }
  }

  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.r=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.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fill();
    }
  }

  // Init functions
  function init(){
    paddle = new Paddle();
    balls = [new Ball(canvas.width/2, canvas.height-30, rand(-1,1)*BALL_SPEED, -BALL_SPEED)];
    bricks=[];
    powerUps=[];
    particles=[];
    score=0; lives=3;
    updateUI();
    // create bricks
    for(let r=0;r<ROWS;r++){
      for(let c=0;c<COLS;c++){
        const x = 20 + c*BRICK_WIDTH;
        const y = 20 + r*BRICK_HEIGHT;
        const hard = Math.random()<0.2; // 20% tough
        const power = Math.random()<0.1; // 10% power
        bricks.push(new Brick(x,y,hard,power));
      }
    }
    gameState='playing';
    overlay.style.display='none';
    msgBox.style.display='none';
  }

  function updateUI(){
    scoreEl.textContent='Score: '+score;
    livesEl.textContent='Lives: '+lives;
  }

  function showMessage(text){
    msgBox.innerHTML = '<div>'+text+'</div><button id="restartBtn">Restart</button>';
    msgBox.style.display='block';
    document.getElementById('restartBtn').onclick = ()=>{init();};
  }

  // Input handling
  let leftPressed=false,rightPressed=false;
  document.addEventListener('keydown',e=>{
    if(gameState!=='playing') return;
    if(e.key==='ArrowLeft') leftPressed=true;
    else if(e.key==='ArrowRight') rightPressed=true;
  });
  document.addEventListener('keyup',e=>{
    if(e.key==='ArrowLeft') leftPressed=false;
    else if(e.key==='ArrowRight') rightPressed=false;
  });
  canvas.addEventListener('mousemove',e=>{
    if(gameState!=='playing') return;
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, mouseX - paddle.width/2));
  });
  overlay.addEventListener('click',()=>{init();});
  document.addEventListener('keydown',e=>{ if(gameState==='start') init(); });

  // Simple AI for demo: move paddle towards first ball
  function autoMovePaddle(){
    if(balls.length===0) return;
    const targetX = balls[0].x;
    const center = paddle.x + paddle.width/2;
    const diff = targetX - center;
    if(Math.abs(diff)>3){
      paddle.vx = diff>0 ? PADDLE_SPEED : -PADDLE_SPEED;
    }else paddle.vx=0;
  }

  // Main loop
  function loop(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(gameState==='playing'){
      // paddle control
      if(leftPressed) paddle.vx = -PADDLE_SPEED;
      else if(rightPressed) paddle.vx = PADDLE_SPEED;
      else if(!leftPressed && !rightPressed) paddle.vx = 0;
      // auto demo movement (only if no user input)
      if(!leftPressed && !rightPressed) autoMovePaddle();
      paddle.move();
      paddle.draw();

      // balls
      for(let i=balls.length-1;i>=0;i--){
        const b=balls[i];
        if(!b.active){
          balls.splice(i,1);
          continue;
        }
        b.update();
        b.draw();
      }
      // lose life if all balls lost
      if(balls.length===0){
        lives--;
        updateUI();
        if(lives<=0){
          gameState='over';
          showMessage('Game Over');
        }else{
          // reset one ball
          balls.push(new Ball(paddle.x + paddle.width/2, paddle.y-12, rand(-1,1)*BALL_SPEED, -BALL_SPEED));
        }
      }

      // bricks
      bricks.forEach(b=>b.draw());

      // powerups
      for(let i=powerUps.length-1;i>=0;i--){
        const p=powerUps[i];
        if(!p.active){ powerUps.splice(i,1); continue;}
        p.update(); p.draw();
      }

      // particles
      for(let i=particles.length-1;i>=0;i--){
        const p=particles[i];
        p.update(); p.draw();
        if(p.life<=0) particles.splice(i,1);
      }
    }
    requestAnimationFrame(loop);
  }
  loop();
})();
</script>
</body>
</html>