悪い女スパイの尋問ゲーム
/\___/\
( o o )
( =^= )
(")_(")
女の子は秘密を持っているけど、嘘をつくかもしれない。どこを調べますか？
<!DOCTYPE html>
<html>
<head>
<title>悪い女スパイの尋問ゲーム</title>
<meta charset="UTF-8">
<style>
body {
background-color: #303030;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 36px;
margin-top: 50px;
}
.art {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1;
margin: 20px auto 30px;
text-align: left;
width: 320px;
}
.choices {
display: inline-block;
margin-bottom: 50px;
text-align: left;
width: 320px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="radio"] {
margin-right: 10px;
}
.btn {
background-color: #d6392e;
border: none;
color: white;
cursor: pointer;
font-size: 18px;
margin-top: 30px;
padding: 10px 20px;
}
.btn:hover {
background-color: #c63b2d;
}
</style>
</head>
<body>
<h1>悪い女スパイの尋問ゲーム</h1>
<div class="art">
<pre>
/\___/\
( o o )
( =^= )
(")_(")
</pre>
</div>
<div class="choices">
<p>女の子は秘密を持っているけど、嘘をつくかもしれない。どこを調べますか？</p>
<form id="form">
<label><input type="radio" name="choice" value="1">顔</label>
<label><input type="radio" name="choice" value="2">胸</label>
<label><input type="radio" name="choice" value="3">腕</label>
<label><input type="radio" name="choice" value="4">お腹</label>
<label><input type="radio" name="choice" value="5">脚</label>
</form>
<button id="submit" class="btn">調べる</button>
</div>
<script>
// 女の子の嘘のパターン
const lies = [
"マイクロフィルムは彼女の敷物の下にある",
"パスワードは彼女の誕生日",
"マイクロフィルムは彼女の髪の下に縛られている",
"パスワードは彼女の妹の名前",
"マイクロフィルムは彼女の右手にある"
];
// ゲームの状態を管理するオブジェクト
let state = {
score: 0, // プレイヤーのスコア
tries: 0, // プレイヤーの試行回数
canPlay: true, // ゲームを続けられるかどうか
girlNumber1: null, // 女の子が持つ数字1
girlNumber2: null, // 女の子が持つ数字2
currentLie: null // 女の子が言っている嘘のパターン
};
// 初期化処理
function init() {
state.canPlay = true;
state.girlNumber1 = getRandomNumber(1, 5);
state.girlNumber2 = getRandomNumber(1, 5, state.girlNumber1);
state.currentLie = getRandomLie();
updateUI();
}
// UIを更新する処理
function updateUI() {
if (state.canPlay) {
document.querySelector(".art").innerHTML = getGirlArt();
document.querySelector("#submit").textContent = "調べる";
document.querySelector("#form").reset();
document.querySelector(".choices").style.display = "block";
} else {
document.querySelector(".art").innerHTML = getGirlSurrenderArt();
document.querySelector("#submit").textContent = "もう一度遊ぶ";
document.querySelector(".choices").style.display = "none";
}
}
// 女の子のアートを取得する処理
function getGirlArt() {
return `
<pre>
/\___/\
(${state.girlNumber1} ${state.girlNumber2})
( =^= )
(")_(")
</pre>
`;
}
// 女の子が降参したアートを取得する処理
function getGirlSurrenderArt() {
return `
<pre>
/\___/\
( x x )
( )
(")_(")
</pre>
`;
}
// ランダムな嘘のパターンを取得する処理
function getRandomLie() {
return lies[getRandomNumber(0, lies.length - 1)];
}
// ランダムな数字を取得する処理
function getRandomNumber(min, max, exclude) {
let num = Math.floor(Math.random() * (max - min + 1)) + min;
if (num === exclude) { // 重複する数字を避ける
return getRandomNumber(min, max, exclude);
} else {
return num;
}
}
// プレイヤーが選択した項目を検証する処理
function validateChoice() {
const choice = document.querySelector("input[name=choice]:checked");
if (!choice) {
alert("どこか調べてください！");
return false;
}
return true;
}
// プレイヤーが選択した項目と女の子が持つ数字を比較する処理
function compareNumbers(choice) {
if (String(state["girlNumber" + choice]) === choice) {
state.score++;
return true;
} else {
return false;
}
}
// プレイヤーがゲームに勝利したかどうかを確認する処理
function checkWin() {
if (state.score >= 3) {
state.canPlay = false;
updateUI();
alert("降参しました！プレイヤーの勝利です！");
} else {
init();
}
}
// 女の子がプレイヤーに挑戦する処理
function challengePlayer() {
state.tries++;
const answer = confirm(`嘘は「${state.currentLie}」です。もう一度遊びますか？`);
if (answer) {
init();
} else {
state.canPlay = false;
updateUI();
alert("私の勝ちね！");
}
}
// 調査ボタンをクリックしたときの処理
document.querySelector("#submit").addEventListener("click", (e) => {
e.preventDefault();
if (state.canPlay) {
if (validateChoice()) {
const choice = document.querySelector("input[name=choice]:checked").value;
if (compareNumbers(choice)) {
alert("女の子は降参します！");
setTimeout(() => {
checkWin();
}, 4000);
} else {
alert("女の子はあなたにベタ惚れです。もう一度チャレンジしてみましょう！");
challengePlayer();
}
}
} else {
init();
}
});
// 初期化処理を呼び出す
init();
</script>
</body>
</html>