Score: 0
<!DOCTYPE html>
<html>
<head>
<title>💩パニック</title>
<style>
#stage {
width: 350px;
height: 350px;
background-color: white;
position: relative;
}
.poop {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
}
#player {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
bottom: 0;
left: 150px;
}
</style>
</head>
<body>
<div id="stage">
<div id="player"></div>
</div>
<div>
<p id="score">Score: 0</p>
<button id="replayButton" style="display: none;">Replay</button>
</div>
<script>
var score = 0;
var poopSpeed = 2;
var poopInterval;
var gameover = false;
function createPoop() {
if (gameover) return;
var poop = document.createElement("div");
poop.className = "poop";
poop.style.left = Math.floor(Math.random() * 310) + "px";
poop.style.backgroundColor = getRandomColor();
document.getElementById("stage").appendChild(poop);
movePoop(poop);
}
function movePoop(poop) {
var stage = document.getElementById("stage");
var top = 0;
var interval = setInterval(frame, poopSpeed);
function frame() {
if (top >= stage.clientHeight - poop.clientHeight) {
clearInterval(interval);
if (!gameover) {
score++;
document.getElementById("score").innerHTML = "Score: " + score;
}
stage.removeChild(poop);
if (score % 5 === 0) {
poopSpeed -= 0.2;
}
return;
}
top++;
poop.style.top = top + "px";
}
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function checkCollision() {
var player = document.getElementById("player");
var poops = document.getElementsByClassName("poop");
for (var i = 0; i < poops.length; i++) {
var poop = poops[i];
var playerRect = player.getBoundingClientRect();
var poopRect = poop.getBoundingClientRect();
if (
playerRect.left < poopRect.left + poopRect.width &&
playerRect.left + playerRect.width > poopRect.left &&
playerRect.top < poopRect.top + poopRect.height &&
playerRect.top + playerRect.height > poopRect.top
) {
gameOver();
return;
}
if (poopRect.top > window.innerHeight) {
// Poop disappears from the screen
score++;
document.getElementById("score").innerHTML = "Score: " + score;
document.getElementById("stage").removeChild(poop);
}
}
}
function movePlayer(e) {
var player = document.getElementById("player");
var playerRect = player.getBoundingClientRect();
if (e.key === "ArrowLeft" && playerRect.left > 0) {
player.style.left = playerRect.left - 10 + "px";
} else if (
e.key === "ArrowRight" &&
playerRect.left + playerRect.width < window.innerWidth
) {
player.style.left = playerRect.left + 10 + "px";
}
}
function startGame() {
score = 0;
poopSpeed = 2;
gameover = false;
document.getElementById("score").innerHTML = "Score: 0";
var replayButton = document.getElementById("replayButton");
replayButton.style.display = "none";
document.getElementById("stage").innerHTML = '<div id="player"></div>';
poopInterval = setInterval(createPoop, 1000);
}
function gameOver() {
gameover = true;
clearInterval(poopInterval);
var replayButton = document.getElementById("replayButton");
replayButton.style.display = "block";
}
window.addEventListener("keydown", movePlayer);
setInterval(checkCollision, 10);
document.getElementById("replayButton").addEventListener("click", startGame);
startGame();
</script>
</body>
</html>