<!DOCTYPE html>

<head>

<style>

*{margin:0;padding:0;box-sizing:border-box;}

body,html{height:100%;overflow:hidden;position:relative;font-family:Arial,sans-serif;background:black;color:white;}

canvas{display:block;background:black;}

#score{position:absolute;top:10px;left:10px;font-size:24px;}

#gameOver{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;text-align:center;display:none;}

#startButton{position:absolute;top:20%;left:50%;transform:translate(-50%,-50%);padding:10px 20px;font-size:24px;background:#007bff;border:none;color:white;cursor:pointer;}

#startButton:hover{background:#0056b3;}

</style>

</head>

<body>

<div id="score">Score: 0</div>

<div id="gameOver">Game Over!<br>Your final score: <span id="finalScore"></span></div>

<button id="startButton">Start Game</button>

const canvas=document.getElementById('gameCanvas'),ctx=canvas.getContext('2d');

let score=0,playerSpeed=5,playerImage=new Image(),asteroidImage=new Image(),potionImages=[new Image(),new Image(),new Image()],letterImage=new Image();

playerImage.src="/content/5ee4905a303b4ff60bca24d8c2ad74151364d12f1c6de9ba5f475ca1bdf77ca3i0";

asteroidImage.src="/content/b39fb550791fa80ee1ab70a097cbe5d458a379c6d4b69361e11cab8d095f5054i1";

potionImages[0].src="/content/d11673e85d06ba8bf6c386119a3a7e320c05c413f21fadc2155e68687ce515f7i0";

potionImages[1].src="/content/2dbc6018dfda1d9dec11dcbff67134492c8a1b2dcecbcd6e9587a96f19f897a0i0";

potionImages[2].src="/content/f22f985713542879156e2d026990e9a56ffbb7f024dfc525ced405c081331dfdi0";

letterImage.src="/content/aa0e5fb4e48797c3422eac91e67bbb81d0993f30da0f51cb62a5108e96a45f09i0";

let player={x:50,y:100,width:50,height:50,speed:playerSpeed},mouseX=player.x,mouseY=player.y,asteroids=[],potions=[],letters=[],speedIncremented=false,initialAsteroidCount=5;

function createAsteroid(){let size=Math.random()<0.33?30:(Math.random()<0.66?50:70);return{x:Math.random()*canvas.width,y:Math.random()*canvas.height,width:size,height:size,speed:1+Math.random()*2,directionX:Math.random()<0.5?1:-1,directionY:Math.random()<0.5?1:-1};}

function createLetter(){return{x:Math.random()*canvas.width,y:Math.random()*canvas.height,width:30,height:30,speed:1+Math.random()*2,directionX:Math.random()<0.5?1:-1,directionY:Math.random()<0.5?1:-1};}

function createPotion(){return{x:Math.random()*canvas.width,y:-30,width:30,height:30};}

function resizeCanvas(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}

function clear(){ctx.clearRect(0,0,canvas.width,canvas.height);}

function drawPlayer(){ctx.drawImage(playerImage,player.x,player.y,player.width,player.height);}

function drawAsteroids(){asteroids.forEach(asteroid=>ctx.drawImage(asteroidImage,asteroid.x,asteroid.y,asteroid.width,asteroid.height));}

function drawPotions(){potions.forEach(potion=>ctx.drawImage(potionImages[Math.floor(Math.random()*3)],potion.x,potion.y,potion.width,potion.height));}

function drawLetters(){letters.forEach(letter=>ctx.drawImage(letterImage,letter.x,letter.y,letter.width,letter.height));}

function updateScore(){document.getElementById('score').textContent=`Score: ${score}`;}

function increaseSpeed(){if(score%10===0&&score>0&&!speedIncremented){player.speed+=1;speedIncremented=true;}else if(score%10!==0)speedIncremented=false;}

function movePlayer(){let dx=mouseX-player.x-player.width/2,dy=mouseY-player.y-player.height/2,distance=Math.sqrt(dx*dx+dy*dy);if(distance>1){player.x+=dx/distance*player.speed;player.y+=dy/distance*player.speed;}if(player.x<0)player.x=0;if(player.y<0)player.y=0;if(player.x+player.width>canvas.width)player.x=canvas.width-player.width;if(player.y+player.height>canvas.height)player.y=canvas.height-player.height;}

function moveAsteroids(){asteroids.forEach(asteroid=>{asteroid.x+=asteroid.speed*asteroid.directionX;asteroid.y+=asteroid.speed*asteroid.directionY;if(asteroid.x<0||asteroid.x+asteroid.width>canvas.width)asteroid.directionX*=-1;if(asteroid.y<0||asteroid.y+asteroid.height>canvas.height)asteroid.directionY*=-1;});}

function movePotions(){potions.forEach(potion=>{potion.y+=1;if(potion.y>canvas.height)potions.splice(potions.indexOf(potion),1);});}

function moveLetters(){letters.forEach(letter=>{letter.x+=letter.speed*letter.directionX;letter.y+=letter.speed*letter.directionY;if(letter.x<0||letter.x+letter.width>canvas.width)letter.directionX*=-1;if(letter.y<0||letter.y+letter.height>canvas.height)letter.directionY*=-1;});}

function endGame(){document.getElementById('gameOver').style.display='block';document.getElementById('finalScore').textContent=score;document.getElementById('startButton').style.display='block';document.getElementById('score').style.display='none';cancelAnimationFrame(animationId);}

function update(){clear();drawPlayer();drawAsteroids();drawPotions();drawLetters();movePlayer();moveAsteroids();movePotions();moveLetters();checkCollisions();updateScore();increaseSpeed();if(score>0&&score%10===0&&asteroids.length<initialAsteroidCount+Math.floor(score/10))asteroids.push(createAsteroid());if(score>0&&score%20===0&&letters.length<Math.floor(score/20)+1)letters.push(createLetter());animationId=requestAnimationFrame(update);}

function init(){resizeCanvas();for(let i=0;i<initialAsteroidCount;i++)asteroids.push(createAsteroid());for(let i=0;i<3;i++)potions.push(createPotion());window.addEventListener('mousemove',e=>{mouseX=e.clientX;mouseY=e.clientY;});update();}

function startGame(){score=0;player.x=50;player.y=100;asteroids=[];potions=[];letters=[];speedIncremented=false;document.getElementById('gameOver').style.display='none';document.getElementById('startButton').style.display='none';document.getElementById('score').style.display='block';init();}

document.getElementById('startButton').addEventListener('click',startGame);

window.addEventListener('resize',resizeCanvas);

window.onload=init;

</script>

</body>

</html>