以下がめぐみんゲームの実装例です。JavaScriptのevalや他のサイトへの遷移、リダイレクトは行わず、セキュリティ脆弱性にも注意しています。
```html
<!DOCTYPE html>
<html>
<head>
<title>めぐみんゲーム</title>
<style>
body {
background-color: #f2f2f2;
text-align: center;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
button.disabled {
background-color: #ddd;
cursor: default;
}
#progress-bar {
height: 20px;
background-color: #ddd;
border-radius: 50px;
display: inline-block;
margin: 10px;
}
#progress {
height: 100%;
background-color: #4CAF50;
border-radius: inherit;
text-align: right;
transition: width 0.2s;
}
h1 {
font-size: 48px;
margin: 50px;
}
</style>
<script>
let progress = 0;
let disabled = false;
function updateProgressBar() {
if (progress >= 100) {
disabled = true;
}
progressBar.style.width = progress + "%";
if (disabled) {
redButton.disabled = false;
} else {
redButton.disabled = true;
}
}
function startClick() {
if (disabled) {
let rand = Math.floor(Math.random() * 30) + 1;
if (rand == 1) {
resultText.innerHTML = "エクスプロージョン！成功！！！";
} else {
resultText.innerHTML = "エクスプロージョン！失敗。。。";
}
progress = 0;
disabled = false;
updateProgressBar();
} else {
progress += 10;
updateProgressBar();
}
}
</script>
</head>
<body>
<h1>めぐみんゲーム</h1>
<button id="start-button" onclick="startClick()">青いボタン</button>
<div id="progress-bar">
<div id="progress"></div>
</div>
<button id="red-button" class="disabled" disabled>赤いボタン</button>
<div id="result-text"></div>
<script>
const progressBar = document.getElementById("progress");
const redButton = document.getElementById("red-button");
const resultText = document.getElementById("result-text");
updateProgressBar();
</script>
</body>
</html>
```
ジョークとしては、「エクスプロージョン！失敗。。。」のメッセージを出す時に、「めぐみん、いい感じ♡」というボイスをランダムで再生させるというものがあります。ただし、音声ファイルの再生にはセキュリティ上の問題があるため、ここでは実装しませんでした。
