```html
<!html>
<html>
<head>
<style>
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
@keyframes pop {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400" style="border:2px solid #000; background-color: #f0f8ff; display:block; margin:0 auto;"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const emojis = {
player: '🚀',
enemy1: '👾',
enemy2: '👹',
enemy3: '🤖',
bullet: '✨',
gun: '🔫',
apple: '🍎'
};
let game = {
player: {x: width/2, y: height/2, hp:5, guns:1, level:1},
enemies: [],
bullets: [],
items: [],
score:0,
stage:1,
enemySpawnInterval: 2000,
lastSpawn: Date.now(),
gameOver: false
};
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
const dist = Math.hypot(clickX - game.player.x, clickY - game.player.y);
if(dist < 30){
shoot();
animateClick(clickX, clickY, '🔫');
} else {
movePlayer(clickX, clickY);
}
});
function movePlayer(x, y){
game.player.x = x;
game.player.y = y;
animateMove(x, y);
}
function shoot(){
for(let i=0; i<game.player.guns; i++){
let angle = (Math.PI * 2 / game.player.guns) * i;
game.bullets.push({x: game.player.x, y: game.player.y, angle: angle, speed:5 + game.player.level});
}
}
function animateClick(x, y, emoji){
const div = document.createElement('div');
div.textContent = emoji;
div.style.position = 'absolute';
div.style.left = (canvas.offsetLeft + x - 10) + 'px';
div.style.top = (canvas.offsetTop + y - 10) + 'px';
div.style.fontSize = '20px';
div.style.pointerEvents = 'none';
div.style.animation = 'explode 0.5s forwards';
document.body.appendChild(div);
setTimeout(() => { document.body.removeChild(div); }, 500);
}
function animateMove(x, y){
const div = document.createElement('div');
div.textContent = '➡️';
div.style.position = 'absolute';
div.style.left = (canvas.offsetLeft + x - 10) + 'px';
div.style.top = (canvas.offsetTop + y - 10) + 'px';
div.style.fontSize = '20px';
div.style.pointerEvents = 'none';
div.style.animation = 'pop 0.5s forwards';
document.body.appendChild(div);
setTimeout(() => { document.body.removeChild(div); }, 500);
}
function spawnEnemy(){
let enemyType;
if(game.stage ===1){ enemyType = 'enemy1';}
else if(game.stage ===2){ enemyType = 'enemy2';}
else { enemyType = 'enemy3';}
let x, y;
if(Math.random() <0.5){
x = Math.random() <0.5 ? 0 : width;
y = Math.random() * height;
}
else {
y = Math.random() <0.5 ? 0 : height;
x = Math.random() * width;
}
game.enemies.push({x:x, y:y, type:enemyType, speed:1 + game.stage, hp:1 + game.stage});
}
function spawnItem(){
let x = Math.random() * width;
let y = Math.random() * height;
game.items.push({x:x, y:y, type:'gun'});
}
function update(){
// Move enemies towards player
game.enemies.forEach(enemy => {
let dx = game.player.x - enemy.x;
let dy = game.player.y - enemy.y;
let dist = Math.hypot(dx, dy);
enemy.x += (dx/dist) * enemy.speed;
enemy.y += (dy/dist) * enemy.speed;
});
// Move bullets
game.bullets.forEach(bullet => {
bullet.x += Math.cos(bullet.angle) * bullet.speed;
bullet.y += Math.sin(bullet.angle) * bullet.speed;
});
// Collision between bullets and enemies
game.bullets.forEach((bullet, bIndex) => {
game.enemies.forEach((enemy, eIndex) => {
let dist = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
if(dist <20){
game.enemies.splice(eIndex,1);
game.bullets.splice(bIndex,1);
game.score +=1;
animateClick(enemy.x, enemy.y, '💥');
if(game.score %10 ===0){
nextStage();
}
}
});
});
// Collision between enemies and player
game.enemies.forEach((enemy, eIndex) => {
let dist = Math.hypot(enemy.x - game.player.x, enemy.y - game.player.y);
if(dist <30){
game.player.hp -=1;
game.enemies.splice(eIndex,1);
animateClick(game.player.x, game.player.y, '❤️');
if(game.player.hp <=0){
gameOver();
}
}
});
// Collision between player and items
game.items.forEach((item, iIndex) => {
let dist = Math.hypot(item.x - game.player.x, item.y - game.player.y);
if(dist <20){
game.player.guns +=3;
game.items.splice(iIndex,1);
animateClick(item.x, item.y, emojis.gun);
}
});
// Remove off-screen bullets
game.bullets = game.bullets.filter(b => b.x >0 && b.x <width && b.y >0 && b.y <height);
// Remove off-screen enemies
game.enemies = game.enemies.filter(e => e.x > -50 && e.x < width +50 && e.y > -50 && e.y < height +50);
// Spawn enemies
if(Date.now() - game.lastSpawn > game.enemySpawnInterval){
spawnEnemy();
game.lastSpawn = Date.now();
}
// Randomly spawn items
if(Math.random() <0.005){
spawnItem();
}
}
function draw(){
ctx.clearRect(0,0,width,height);
// Draw player
ctx.font = '30px Arial';
ctx.textAlign = 'center';
ctx.fillText(emojis.player, game.player.x, game.player.y);
// Draw enemies
game.enemies.forEach(enemy => {
ctx.fillText(emojis[enemy.type], enemy.x, enemy.y);
});
// Draw bullets
ctx.fillText(emojis.bullet, game.bullets.x, game.bullets.y);
// Draw items
game.items.forEach(item => {
ctx.fillText(emojis[item.type], item.x, item.y);
});
// Draw HP and Guns
ctx.fillStyle = 'black';
ctx.font = '16px Arial';
ctx.fillText('HP: ' + game.player.hp, 50, 20);
ctx.fillText('Guns: ' + game.player.guns, 350, 20);
ctx.fillText('Stage: ' + game.stage, 200, 20);
}
function gameLoop(){
if(!game.gameOver){
requestAnimationFrame(gameLoop);
update();
draw();
}
}
function nextStage(){
game.stage +=1;
game.enemySpawnInterval = Math.max(500, game.enemySpawnInterval - 200);
game.player.level +=1;
animateStage();
}
function animateStage(){
const div = document.createElement('div');
div.textContent = `🌟 Stage ${game.stage} 🌟`;
div.style.position = 'absolute';
div.style.left = (canvas.offsetLeft + width/2 -50) + 'px';
div.style.top = (canvas.offsetTop + height/2 -10) + 'px';
div.style.fontSize = '20px';
div.style.pointerEvents = 'none';
div.style.animation = 'pop 1s forwards';
document.body.appendChild(div);
setTimeout(() => { document.body.removeChild(div); }, 1000);
}
function gameOver(){
game.gameOver = true;
const div = document.createElement('div');
div.textContent = '💀 GAME OVER 💀';
div.style.position = 'absolute';
div.style.left = (canvas.offsetLeft + width/2 -60) + 'px';
div.style.top = (canvas.offsetTop + height/2 -10) + 'px';
div.style.fontSize = '24px';
div.style.color = 'red';
div.style.pointerEvents = 'none';
div.style.animation = 'explode 1s forwards';
document.body.appendChild(div);
}
gameLoop();
</script>
</body>
</html>
```
