💩 VS 🚽
Score: 0
Time: 30
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>💩 VS 🚽</title>
<style>
body {
font-size: 20px;
text-align: center;
}
canvas {
border: 2px solid black;
}
</style>
</head>
<body>
<header>
<h1>💩 VS 🚽</h1>
</header>
<canvas id="canvas" width="600" height="400"></canvas>
<p id="score">Score: 0</p>
<p id="time">Time: 30</p>
<script>
// Canvasの準備
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// ゲームの設定
const poopSize = 30;
const toiletSize = 50;
let poopX = 0;
let poopY = 0;
let toiletX = 0;
let toiletY = 0;
let score = 0;
let time = 30;
// ゲーム開始
const intervalId = setInterval(() => {
// プレイヤーが新しい💩を召喚する
canvas.addEventListener('click', (e) => {
poopX = e.clientX - canvas.getBoundingClientRect().left - (poopSize / 2);
poopY = e.clientY - canvas.getBoundingClientRect().top - (poopSize / 2);
});
// 🚽をランダムな位置に召喚する
toiletX = Math.floor(Math.random() * (canvas.width - toiletSize));
toiletY = Math.floor(Math.random() * (canvas.height - toiletSize));
// 描画の初期化
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 💩の描画
if (poopX > 0 && poopY > 0) {
ctx.beginPath();
ctx.fillStyle = '#8B4513';
ctx.arc(poopX + (poopSize / 2), poopY + (poopSize / 2), poopSize / 2, 0, 2 * Math.PI);
ctx.fill();
}
// 🚽の描画
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.fillRect(toiletX, toiletY, toiletSize, toiletSize);
// 衝突判定
if (poopX > toiletX - poopSize && poopX < toiletX + toiletSize && poopY > toiletY - poopSize && poopY < toiletY + toiletSize) {
score++;
poopX = 0;
poopY = 0;
}
// スコアと時間の表示
document.getElementById('score').innerHTML = `Score: ${score}`;
document.getElementById('time').innerHTML = `Time: ${time}`;
// 制限時間のカウントダウン
time--;
// 制限時間が終了した場合の処理
if (time < 0) {
clearInterval(intervalId);
alert('Time\'s Up! Your Score: ' + score);
}
}, 1000);
</script>
</body>
</html>