💩神経衰弱ゲーム
4枚のカードがあります。2つに💩の絵が描かれています。2つの💩を見つけてください。
?
?
?
?
以下が実装例です。セキュリティ脆弱性を考慮し、evalや他のサイトへの遷移、リダイレクトは使用しておりません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>💩神経衰弱ゲーム</title>
<style>
/* カードのスタイル */
.card {
display: inline-block;
width: 100px;
height: 150px;
background-color: lightblue;
margin: 10px;
border: 1px solid gray;
text-align: center;
font-size: 60px;
line-height: 150px; /* 垂直方向に中央揃えするために必要 */
cursor: pointer;
}
</style>
</head>
<body>
<h1>💩神経衰弱ゲーム</h1>
<p>4枚のカードがあります。2つに💩の絵が描かれています。2つの💩を見つけてください。</p>
<div id="cards">
<div class="card" onclick="flipCard(0)">?</div>
<div class="card" onclick="flipCard(1)">?</div>
<div class="card" onclick="flipCard(2)">?</div>
<div class="card" onclick="flipCard(3)">?</div>
</div>
<script>
let cards = [
{ isPoop: false, isOpened: false },
{ isPoop: true, isOpened: false },
{ isPoop: false, isOpened: false },
{ isPoop: true, isOpened: false }
];
let firstOpenCardIndex = null;
function flipCard(index) {
if (cards[index].isOpened) {
return;
}
if (firstOpenCardIndex === null) {
firstOpenCardIndex = index;
document.getElementById("cards").children[index].textContent = "💩";
} else {
let secondOpenCardIndex = index;
document.getElementById("cards").children[index].textContent = "💩";
if (cards[firstOpenCardIndex].isPoop && cards[secondOpenCardIndex].isPoop) {
alert("🎉 おめでとうございます!2つの💩を見つけられました! 🎉");
} else {
setTimeout(function() {
document.getElementById("cards").children[firstOpenCardIndex].textContent = "?";
document.getElementById("cards").children[secondOpenCardIndex].textContent = "?";
firstOpenCardIndex = null;
}, 1000);
}
cards[firstOpenCardIndex].isOpened = true;
cards[secondOpenCardIndex].isOpened = true;
}
}
</script>
</body>
</html>
```
ジョークとして、ゲームクリア時に「💩の才能があるかもしれません」というメッセージを表示するようにするのも面白いかもしれません。