?
?
?
?
<!DOCTYPE html>
<html>
<head>
<title>A子の料理</title>
<meta charset="UTF-8">
<style>
.card {
width: 100px;
height: 150px;
background-color: gray;
margin: 10px;
display: inline-block;
text-align: center;
font-size: 26px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cards">
<div class="card" id="card1" onclick="flipCard(this)">?</div>
<div class="card" id="card2" onclick="flipCard(this)">?</div>
<div class="card" id="card3" onclick="flipCard(this)">?</div>
<div class="card" id="card4" onclick="flipCard(this)">?</div>
</div>
<br>
<button onclick="resetGame()">とにかくなんでもさす！</button>
<script>
let cards = ["桃", "アワビ", "キュウリ", "バナナ"];
let flippedCards = [];
function flipCard(card) {
let index = Number(card.id.substring(4)) - 1; // extract the card number
card.innerHTML = cards[index]; // reveal the card
flippedCards.push(index);
if (flippedCards.length === 2) { // check if we have flipped two cards
let result = "";
if ((flippedCards[0] === 0 && flippedCards[1] === 2) || (flippedCards[0] === 2 && flippedCards[1] === 0) ||
(flippedCards[0] === 1 && flippedCards[1] === 3) || (flippedCards[0] === 3 && flippedCards[1] === 1)) {
result = "ニュルニュル～～～。";
} else {
result = "バッカァ～！！";
}
alert(result); // show the result message
flippedCards = []; // reset the flipped cards
}
}
function resetGame() {
flippedCards = [];
for (let i = 1; i <= 4; i++) {
document.getElementById("card" + i).innerHTML = "?";
}
}
</script>
</body>
</html>