<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A子の料理</title>
</head>
<body style="background-color:pink;">
<h1 style="text-align:center; font-size:4em;">A子の料理</h1>
<div style="display:flex; justify-content:center;">
<div style="display:flex; flex-wrap:wrap;">
<div style="width:100px; height:150px; margin:10px; background-color:white; cursor:pointer;" onclick="flipCard(1)">
<img src="card_back.png" alt="カード裏">
</div>
<div style="width:100px; height:150px; margin:10px; background-color:white; cursor:pointer;" onclick="flipCard(2)">
<img src="card_back.png" alt="カード裏">
</div>
<div style="width:100px; height:150px; margin:10px; background-color:white; cursor:pointer;" onclick="flipCard(3)">
<img src="card_back.png" alt="カード裏">
</div>
<div style="width:100px; height:150px; margin:10px; background-color:white; cursor:pointer;" onclick="flipCard(4)">
<img src="card_back.png" alt="カード裏">
</div>
</div>
</div>
<div style="text-align:center; margin-top:20px;">
<button onclick="resetGame()">とにかくなんでもさす！</button>
</div>
<script>
//カードの裏表の状態
var cardState = [0, 0, 0, 0];
//カードに対応する食材の配列
var foods = ["", "桃", "アワビ", "キュウリ", "バナナ"];
//ボタンの表示・非表示を切り替える関数
function toggleButton(isVisible) {
var button = document.querySelector("button");
if (isVisible) {
button.style.display = "block";
} else {
button.style.display = "none";
}
}
//カードをめくる関数
function flipCard(cardNum) {
//既にめくられたカードはめくれないようにする
if (cardState[cardNum] == 1) {
return;
}
//カードの裏表の状態を変える
cardState[cardNum] = 1;
//カードの画像を変える
var cardElem = document.querySelector("div:nth-of-type(" + cardNum + ") img");
cardElem.src = "card_" + foods[cardNum] + ".png";
//めくったカードが2枚目の場合、判定する
if (cardState.indexOf(0) == -1) {
if ((cardState[1] == 1 && cardState[3] == 1) || (cardState[2] == 1 && cardState[4] == 1)) {
//ニュルニュル～～～。
//ビチョォッ～～～～。
//ドキュ～～～～～～～ン！！
var messages = ["ニュルニュル～～～。", "ビチョォッ～～～～。", "ドキュ～～～～～～～ン！！"];
var randomNum = Math.floor(Math.random() * messages.length);
alert(messages[randomNum]);
} else {
//バッカァ～！！
alert("バッカァ～！！");
}
//ボタンを表示
toggleButton(true);
}
}
//ゲームを初期化する関数
function resetGame() {
//カードの裏表の状態を初期化する
cardState = [0, 0, 0, 0];
//カードの画像を初期化する
for (var i = 1; i <= 4; i++) {
var cardElem = document.querySelector("div:nth-of-type(" + i + ") img");
cardElem.src = "card_back.png";
}
//ボタンを非表示
toggleButton(false);
}
</script>
</body>
</html>
