🍰: 0
💥: 0
```html
<!DOCTYPE html>
<html>
<head>
<title>🚗✨スペースインベーダーカーレース🚀🍰</title>
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bounce {
animation: bounce 1s infinite;
}
.rotate {
animation: rotate 2s linear infinite;
}
</style>
</head>
<body>
<div style="width:400px; height:400px; position:relative; background-color: #1e1e1e; border: 2px solid #fff; overflow: hidden;">
<canvas id="gameCanvas" width="400" height="400" style="background-color: #1e1e1e;"></canvas>
<div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%);">
<button id="leftBtn" style="font-size:24px; padding:10px; margin-right:10px;">⬅️</button>
<button id="rightBtn" style="font-size:24px; padding:10px;">➡️</button>
</div>
<div id="score" style="position:absolute; top:10px; left:10px; color: #fff; font-size:18px;">🍰: 0</div>
<div id="hits" style="position:absolute; top:10px; right:10px; color: #ff4444; font-size:18px;">💥: 0</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 40,
speed: 4,
moveLeft: false,
moveRight: false,
emoji: '🚗'
};
const airplane = {
x: 0,
y: 40,
speed: 2,
emoji: '✈️'
};
const bombs = [];
const cakes = [];
let bombInterval = 2000;
let cakeInterval = 3000;
let score = 0;
let hits = 0;
let gameOver = false;
document.getElementById('leftBtn').addEventListener('click', () => {
player.moveLeft = true;
document.getElementById('leftBtn').classList.add('bounce');
setTimeout(() => {
player.moveLeft = false;
document.getElementById('leftBtn').classList.remove('bounce');
}, 200);
});
document.getElementById('rightBtn').addEventListener('click', () => {
player.moveRight = true;
document.getElementById('rightBtn').classList.add('bounce');
setTimeout(() => {
player.moveRight = false;
document.getElementById('rightBtn').classList.remove('bounce');
}, 200);
});
document.addEventListener('keydown', (e) => {
if(e.key === 'ArrowLeft') player.moveLeft = true;
if(e.key === 'ArrowRight') player.moveRight = true;
});
document.addEventListener('keyup', (e) => {
if(e.key === 'ArrowLeft') player.moveLeft = false;
if(e.key === 'ArrowRight') player.moveRight = false;
});
function spawnBomb() {
bombs.push({x: airplane.x + 20, y: airplane.y + 20, emoji: '💣'});
bombInterval = Math.max(500, bombInterval - 100);
setTimeout(spawnBomb, bombInterval);
}
function spawnCake() {
cakes.push({x: Math.random() * (canvas.width - 30), y: 0, emoji: '🍰'});
setTimeout(spawnCake, cakeInterval);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw airplane
ctx.font = '24px serif';
ctx.fillText(airplane.emoji, airplane.x, airplane.y);
airplane.x += airplane.speed;
if (airplane.x > canvas.width) airplane.x = -30;
// Draw bombs
bombs.forEach((bomb, index) => {
ctx.fillText(bomb.emoji, bomb.x, bomb.y);
bomb.y += 3;
if(bomb.y > canvas.height){
bombs.splice(index,1);
hits++;
document.getElementById('hits').innerText = `💥: ${hits}`;
if(hits >=3) {
gameOver = true;
}
}
// Collision with player
if(bomb.x < player.x + player.width && bomb.x + 20 > player.x &&
bomb.y < player.y + player.height && bomb.y + 20 > player.y){
bombs.splice(index,1);
hits++;
document.getElementById('hits').innerText = `💥: ${hits}`;
if(hits >=3) {
gameOver = true;
}
}
});
// Draw cakes
cakes.forEach((cake, index) => {
ctx.fillText(cake.emoji, cake.x, cake.y);
cake.y += 2;
if(cake.y > canvas.height){
cakes.splice(index,1);
}
// Collision with player
if(cake.x < player.x + player.width && cake.x + 20 > player.x &&
cake.y < player.y + player.height && cake.y + 20 > player.y){
score++;
cakes.splice(index,1);
document.getElementById('score').innerText = `🍰: ${score}`;
// Reset hits if score reaches 10
if(score >=10){
hits =0;
score =0;
document.getElementById('hits').innerText = `💥: ${hits}`;
document.getElementById('score').innerText = `🍰: ${score}`;
}
}
});
// Draw player
ctx.fillText(player.emoji, player.x, player.y + player.height);
// Game Over
if(gameOver){
ctx.font = '30px serif';
ctx.fillStyle = 'yellow';
ctx.fillText('ゲームオーバー💀', canvas.width /2 - 100, canvas.height /2);
return;
}
requestAnimationFrame(draw);
}
function update() {
if(player.moveLeft){
player.x -= player.speed;
if(player.x <0) player.x =0;
}
if(player.moveRight){
player.x += player.speed;
if(player.x + player.width > canvas.width) player.x = canvas.width - player.width;
}
requestAnimationFrame(update);
}
spawnBomb();
spawnCake();
draw();
update();
</script>
</body>
</html>
```