<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bomb Button</title>
</head>
<body>
<h1>Bomb Button</h1>
<button id="bombButton" onclick="handleButtonClick()">Click me if you dare!</button>
<p id="result"></p>
<script>
function handleButtonClick() {
if (Math.random() < 0.1) {
// 10% chance of exploding!
document.body.style.backgroundColor = "red";
document.getElementById("bombButton").disabled = true;
setTimeout(function() {
document.body.style.backgroundColor = "white";
document.getElementById("bombButton").disabled = false;
}, 2000);
} else {
// Strange things happen on failure...
const resultElement = document.getElementById("result");
const messages = [
"The button hissed for a moment, but nothing happened!",
"A small puff of smoke emerged from the button, but that was it.",
"You hear a faint ticking sound... but then it just stops.",
"The button seems to be broken! Try again?",
"You get the feeling that something spooky could happen if you keep trying...",
"Maybe it's time to find a different button.",
"You are filled with a sense of deep disappointment.",
"The button just stares back at you, mocking your attempts to trigger it.",
"Just... walk away.",
"You can't help but feel like you're missing out on something, even though you don't know what that something is."
];
resultElement.textContent = messages[Math.floor(Math.random() * messages.length)];
}
}
</script>
</body>
</html>
※ジョークの文章はありませんが、プログラムに含まれるメッセージや色使い等で雰囲気を出してみました。また、alertではなくtextContentを利用しています。
