Untitled

<!DOCTYPE html>
<html>
<head>
<title>Escape The Toy Factory</title>
<style>
body {
  margin: 0;
  overflow: hidden;
  background: black;
  color: white;
  font-family: Arial;
}
canvas {
  display: block;
  margin: 0 auto;
  background: #111;
}
#ui {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 18px;
}
</style>
</head>
<body>

<div id="ui">Keys: <span id="keys">0</span>/3</div>
<canvas id="game" width="800" height="500"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let player = { x:100, y:250, size:20, speed:3 };
let monster = { x:700, y:250, size:25, speed:1.5 };
let keys = [];
let collected = 0;
let gameOver = false;

for(let i=0;i<3;i++){
  keys.push({
    x: Math.random()*700+50,
    y: Math.random()*400+50,
    size:15
  });
}

function drawCircle(obj, color){
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(obj.x, obj.y, obj.size, 0, Math.PI*2);
  ctx.fill();
}

function flashlight(){
  ctx.fillStyle="rgba(0,0,0,0.9)";
  ctx.fillRect(0,0,canvas.width,canvas.height);

  ctx.globalCompositeOperation="destination-out";
  ctx.beginPath();
  ctx.arc(player.x, player.y, 100, 0, Math.PI*2);
  ctx.fill();
  ctx.globalCompositeOperation="source-over";
}

function updateMonster(){
  let dx = player.x - monster.x;
  let dy = player.y - monster.y;
  let dist = Math.sqrt(dx*dx + dy*dy);
  monster.x += (dx/dist) * monster.speed;
  monster.y += (dy/dist) * monster.speed;
}

function checkCollisions(){
  keys.forEach((key,index)=>{
    let dx = player.x - key.x;
    let dy = player.y - key.y;
    if(Math.sqrt(dx*dx+dy*dy)<20){
      keys.splice(index,1);
      collected++;
      document.getElementById("keys").textContent=collected;
    }
  });

  let dx = player.x - monster.x;
  let dy = player.y - monster.y;
  if(Math.sqrt(dx*dx+dy*dy)<25){
    gameOver=true;
  }
}

function gameLoop(){
  if(gameOver){
    alert("The toy got you... 😈");
    location.reload();
  }

  ctx.clearRect(0,0,canvas.width,canvas.height);

  drawCircle(player,"cyan");
  drawCircle(monster,"red");

  keys.forEach(key=>drawCircle(key,"yellow"));

  updateMonster();
  checkCollisions();
  flashlight();

  if(collected===3){
    alert("You escaped the factory! 🎉");
    location.reload();
  }

  requestAnimationFrame(gameLoop);
}

document.addEventListener("keydown",e=>{
  if(e.key==="w") player.y-=player.speed;
  if(e.key==="s") player.y+=player.speed;
  if(e.key==="a") player.x-=player.speed;
  if(e.key==="d") player.x+=player.speed;
});

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