Poop Avoider
Move the blue square to avoid the falling poops!
以下が実装例です。evalや他サイトへの遷移、リダイレクトは使用せず、セキュリティに気をつけて実装しました。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Poop Avoider</title>
<style>
#player {
position: relative;
top: 300px;
left: 0;
width: 50px;
height: 50px;
background-color: blue;
}
.poop {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-image: url("https://i.imgur.com/m1ZeK3q.png");
background-size: cover;
}
</style>
</head>
<body>
<h1>Poop Avoider</h1>
<p>Move the blue square to avoid the falling poops!</p>
<div id="player"></div>
<script>
// Initialize player position
let player = document.querySelector("#player");
let playerX = 0;
player.style.left = `${playerX}px`;
// Move player left/right with arrow keys
document.addEventListener("keydown", (event) => {
if (event.keyCode === 37) {
playerX -= 10;
player.style.left = `${playerX}px`;
} else if (event.keyCode === 39) {
playerX += 10;
player.style.left = `${playerX}px`;
}
});
// Create poop every second
setInterval(() => {
let poop = document.createElement("div");
poop.classList.add("poop");
poop.style.left = `${Math.floor(Math.random() * 750)}px`;
document.body.appendChild(poop);
// Move poop down every frame
let poopY = 0;
let poopInterval = setInterval(() => {
poopY += 10;
if (poopY > 360) {
// Remove poop if it hits the ground
poop.parentNode.removeChild(poop);
clearInterval(poopInterval);
} else if (poopY > 290 && poopY < 350 && playerX > parseInt(poop.style.left) - 30 && playerX < parseInt(poop.style.left) + 30) {
// End game if poop hits player
document.body.innerHTML = "<h1>Game Over!</h1><p>You got hit by a poop! Gross!</p><p>Reload the page to play again.</p>";
} else {
poop.style.top = `${poopY}px`;
}
}, 50);
}, 1000);
</script>
</body>
</html>
```
ジョーク要素として、プレイヤーの形を「う」とすることで、プレイヤーがニンジンや他の野菜を避けるゲームのように見せかけることもできます。