🐱
Score: 0
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>🐱障害物回避ゲーム🎉</title>
<style>
@keyframes moveObstacle {
from { left: 400px; }
to { left: -50px; }
}
@keyframes moveUp {
from { bottom: 50px; }
to { bottom: 150px; }
}
@keyframes moveDown {
from { bottom: 150px; }
to { bottom: 50px; }
}
@keyframes clickReaction {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width:400px; height:400px; border:2px solid #000; position:relative; overflow:hidden; background-color: #e0f7fa; font-size: 40px;">
<div id="cat" style="position:absolute; bottom:50px; left:50px;">
🐱
</div>
<div id="score" style="position:absolute; top:10px; left:10px; font-size:20px;">
Score: 0
</div>
<button id="jumpButton" style="position:absolute; bottom:10px; right:10px; padding:10px; font-size:20px;">🐾</button>
</div>
<script>
const gameArea = document.querySelector('div');
const cat = document.getElementById('cat');
const jumpButton = document.getElementById('jumpButton');
const scoreElement = document.getElementById('score');
let score = 0;
let obstacleSpeed = 5;
let gameInterval;
let obstacleInterval;
function startGame() {
score = 0;
obstacleSpeed = 5;
scoreElement.textContent = 'Score: ' + score;
// Remove existing obstacles
document.querySelectorAll('.obstacle').forEach(ob => ob.remove());
// Start generating obstacles
obstacleInterval = setInterval(createObstacle, 2000);
// Start game loop
gameInterval = setInterval(checkCollision, 50);
}
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
obstacle.textContent = '🌵';
obstacle.style.position = 'absolute';
obstacle.style.bottom = '50px';
obstacle.style.left = '400px';
obstacle.style.fontSize = '40px';
obstacle.style.animation = `moveObstacle ${ (400 / obstacleSpeed) }s linear forwards`;
gameArea.appendChild(obstacle);
// Increase speed based on score
obstacleSpeed = 5 + Math.floor(score / 5);
obstacle.style.animationDuration = `${400 / obstacleSpeed}s`;
// Increment score when obstacle passes the cat
obstacle.addEventListener('animationend', () => {
score++;
scoreElement.textContent = 'Score: ' + score;
obstacle.remove();
});
}
function checkCollision() {
const obstacles = document.querySelectorAll('.obstacle');
obstacles.forEach(obstacle => {
const obRect = obstacle.getBoundingClientRect();
const catRect = cat.getBoundingClientRect();
if (
obRect.left < catRect.right &&
obRect.right > catRect.left &&
obRect.top < catRect.bottom &&
obRect.bottom > catRect.top
) {
// Collision detected
resetGame();
}
});
}
function resetGame() {
clearInterval(obstacleInterval);
clearInterval(gameInterval);
alert('💥ゲームオーバー💥 スコア: ' + score);
startGame();
}
// Jump button pressed
jumpButton.addEventListener('mousedown', () => {
cat.style.animation = 'moveUp 0.3s forwards';
});
document.addEventListener('mouseup', () => {
if (cat.style.animation === 'moveUp 0.3s forwards') {
cat.style.animation = 'moveDown 0.3s forwards';
}
});
// Cat click reaction
cat.addEventListener('click', () => {
cat.style.animation = 'clickReaction 0.5s';
setTimeout(() => {
cat.style.animation = '';
}, 500);
});
// For touch devices
jumpButton.addEventListener('touchstart', (e) => {
e.preventDefault();
cat.style.animation = 'moveUp 0.3s forwards';
});
jumpButton.addEventListener('touchend', (e) => {
e.preventDefault();
if (cat.style.animation === 'moveUp 0.3s forwards') {
cat.style.animation = 'moveDown 0.3s forwards';
}
});
// Initial game start
startGame();
</script>
</body>
</html>
```