💩
🥸👉
以下が実装例です。なお、生成される「💩」や「🥸👉」のサイズや速度はランダムに変化します。
```html
<!DOCTYPE html>
<html>
<head>
<title>Poop Game</title>
<meta charset="UTF-8">
<style>
#game-container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
#poop {
position: absolute;
font-size: 30px;
}
#player {
position: absolute;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="game-container">
<div id="poop">💩</div>
<div id="player">🥸👉</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const poopEl = document.getElementById('poop');
const playerEl = document.getElementById('player');
const gameContainerEl = document.getElementById('game-container');
const poopSize = Math.floor(Math.random() * 40 + 20);
const playerSpeed = 10;
let poopX = Math.floor(Math.random() * (gameContainerEl.offsetWidth - poopSize));
let poopY = -poopSize;
let poopSpeed = Math.random() * 10 + 5;
let playerX = gameContainerEl.offsetWidth / 2 - playerEl.offsetWidth / 2;
let playerY = 0;
function movePoop() {
poopY += poopSpeed;
poopEl.style.left = poopX + 'px';
poopEl.style.top = poopY + 'px';
if (poopY >= gameContainerEl.offsetHeight) {
poopX = Math.floor(Math.random() * (gameContainerEl.offsetWidth - poopSize));
poopY = -poopSize;
poopSpeed = Math.random() * 10 + 5;
}
if (checkCollision(poopEl, playerEl)) {
alert('Clear!');
resetGame();
}
requestAnimationFrame(movePoop);
}
function movePlayer(event) {
const keyPressed = event.key;
if (keyPressed === 'ArrowRight') {
playerX += playerSpeed;
if (playerX + playerEl.offsetWidth > gameContainerEl.offsetWidth) {
playerX = 0;
}
}
playerEl.style.left = playerX + 'px';
}
function checkCollision(obj1, obj2) {
const rect1 = obj1.getBoundingClientRect();
const rect2 = obj2.getBoundingClientRect();
return !(
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom ||
rect1.right < rect2.left ||
rect1.left > rect2.right
);
}
function resetGame() {
poopX = Math.floor(Math.random() * (gameContainerEl.offsetWidth - poopSize));
poopY = -poopSize;
poopSpeed = Math.random() * 10 + 5;
playerX = gameContainerEl.offsetWidth / 2 - playerEl.offsetWidth / 2;
}
window.addEventListener('keydown', movePlayer);
movePoop();
});
</script>
</body>
</html>
```