💩
以下が実際のプログラムになります。安全性に注意し、ジョークとして「タップしたところに💩を召喚！あなたには30秒間で🚽を避けてもらいます」というメッセージを入れました。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>💩 and 🚽 Game</title>
<style type="text/css">
#gameContainer {
position: relative;
width: 90vw;
height: 80vh;
background-color: #7FB3D5;
margin: auto auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 5vh;
text-align: center;
}
#gameContainer > div {
position: absolute;
top: 0;
}
#poop {
animation-name: moveRight;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes moveRight {
0% {left: calc(0% + 50px);}
100% {left: calc(90% - 50px);}
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="poop">💩</div>
</div>
<script type="text/javascript">
let container = document.getElementById("gameContainer");
let poop = document.getElementById("poop");
let toiletCount = 0;
let countdown = 30;
container.addEventListener("click", function(event) {
let toilet = document.createElement("div");
toilet.innerHTML = "🚽";
toilet.style.left = Math.floor(Math.random()*(container.offsetWidth - 50)) + "px";
container.appendChild(toilet);
setInterval(function() {
if(checkCollision(toilet, poop)) {
container.removeChild(toilet);
toiletCount++;
}
if(countdown == 0) {
window.clearInterval();
showGameOver();
}
countdown--;
}, 1000);
});
function checkCollision(obj1, obj2) {
let rect1 = obj1.getBoundingClientRect();
let rect2 = obj2.getBoundingClientRect();
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
function showGameOver() {
alert("Time's Up! You missed " + toiletCount + " 🚽! Don't worry, it happens to the best of us.");
showToast("再読み込みしてください");
}
window.onload = function() {
alert("Tap anywhere to summon 💩! You have 30 seconds to avoid the 🚽! Good luck!");
}
</script>
</body>
</html>
```