以下が実際のプログラムです。セキュリティ上の問題がある場合は除外しています。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Poop Game</title>
<style>
canvas {
border: 2px solid black;
}
</style>
</head>
<body>
<script>
// 要素を取得
var canvas = document.createElement('canvas');
var body = document.getElementsByTagName('body')[0];
var header = document.createElement('h1');
var paragraph = document.createElement('p');
var scoreParagraph = document.createElement('p');
// ゲーム設定
var poopImage = new Image();
poopImage.src = 'poop.png';
var toiletImage = new Image();
toiletImage.src = 'toilet.png';
var poopWidth = 50;
var poopHeight = 50;
var toiletWidth = 80;
var toiletHeight = 80;
var score = 0;
var timeLimit = 30;
// キャンバス設定
canvas.width = 800;
canvas.height = 500;
var context = canvas.getContext('2d');
// HTML要素を追加
scoreParagraph.innerHTML = 'Score: ' + score;
body.appendChild(header);
body.appendChild(paragraph);
body.appendChild(scoreParagraph);
body.appendChild(canvas);
// キャンバスをクリックした時の処理
canvas.addEventListener('click', function(event) {
var mouseX = event.clientX - canvas.getBoundingClientRect().left;
var mouseY = event.clientY - canvas.getBoundingClientRect().top;
for (var i = 0; i < toiles.length; i++) {
if (mouseX > toiles[i].x && mouseX < toiles[i].x + toiletWidth
&& mouseY > toiles[i].y && mouseY < toiles[i].y + toiletHeight) {
toiles.splice(i, 1);
i--;
score++;
scoreParagraph.innerHTML = 'Score: ' + score;
}
}
});
// ポップを作成する関数
var createPoop = function() {
var poop = {
x: Math.floor(Math.random() * (canvas.width - poopWidth)),
y: -poopHeight,
speed: Math.floor(Math.random() * 5) + 1
};
return poop;
};
// トイレを作成する関数
var createToilet = function() {
var toilet = {
x: Math.floor(Math.random() * (canvas.width - toiletWidth)),
y: Math.floor(Math.random() * (canvas.height - toiletHeight))
};
return toilet;
};
// ポップとトイレの配列を用意
var poops = [];
var toiles = [];
// ポップとトイレを生成
var addPoop = setInterval(function() {
poops.push(createPoop());
}, 500);
var addToile = setInterval(function() {
toiles.push(createToilet());
}, 1000);
// ゲーム開始
var startTime = Date.now();
var gameLoop = setInterval(function() {
// 背景を描画
context.fillStyle = '#fdfd96';
context.fillRect(0, 0, canvas.width, canvas.height);
// ポップを描画
for (var i = 0; i < poops.length; i++) {
context.drawImage(poopImage, poops[i].x, poops[i].y, poopWidth, poopHeight);
poops[i].y += poops[i].speed;
if (poops[i].y > canvas.height) {
poops.splice(i, 1);
i--;
}
}
// トイレを描画
for (var i = 0; i < toiles.length; i++) {
context.drawImage(toiletImage, toiles[i].x, toiles[i].y, toiletWidth, toiletHeight);
}
// 残り時間を計算
var timeLeft = timeLimit - Math.floor((Date.now() - startTime) / 1000);
if (timeLeft <= 0) {
clearInterval(gameLoop);
clearInterval(addPoop);
clearInterval(addToile);
header.innerHTML = 'Game Over';
paragraph.innerHTML = score + ' 💩 をお手洗いに流しました！';
} else {
paragraph.innerHTML = '残り時間: ' + timeLeft + ' 秒';
}
}, 30);
</script>
</body>
</html>
```
以上が💩ゲームのプログラムです。ポップとトイレの画像はそれぞれ`poop.png`と`toilet.png`という画像ファイルがあることを前提としています。また、本アプリケーションは主にキャンバスを使って実装されています。アラートは使用せず、楽しいジョークを追加しました。
