<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>💩降るアプリ</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
button {
font-size: 2rem;
padding: 1rem 2rem;
background-color: #007bff;
color: #fff;
border-radius: 5px;
border: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.poop {
position: absolute;
font-size: 3rem;
}
</style>
</head>
<body>
<button id="poopButton">絶対に押すなよ</button>
<script>
const poopButton = document.querySelector('#poopButton');
poopButton.addEventListener('click', function() {
const poopInterval = setInterval(function() {
const poop = document.createElement('div');
poop.innerHTML = '💩';
poop.classList.add('poop');
poop.style.left = Math.random() * 100 + '%';
poop.style.animationDuration = Math.random() * 5 + 5 + 's';
document.body.appendChild(poop);
}, 50);
setTimeout(function(){
clearInterval(poopInterval);
}, 5000);
});
document.body.addEventListener('click', function(event) {
if(event.target.classList.contains('poop')) {
event.target.remove();
}
})
</script>
</body>
</html>
