16マスゲーム
1つだけ「出直してこい！」が入っています。
マスをクリックしてください。
<!DOCTYPE html>
<html>
<head>
<title>16マスゲーム</title>
<style type="text/css">
.square {
display: inline-block;
width: 50px;
height: 50px;
background-color: gray;
margin: 5px;
border-radius: 50%;
text-align: center;
color: white;
font-size: 30px;
line-height: 50px;
cursor: pointer;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<h2>16マスゲーム</h2>
<p>1つだけ「出直してこい！」が入っています。</p>
<p>マスをクリックしてください。</p>
<div id="game">
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
<div class="square" onclick="clickSquare(this)"></div>
</div>
<script type="text/javascript">
function clickSquare(square) {
if (square.innerHTML === "出直してこい！") {
alert("貴方が選んだマスには「出直してこい！」が入っていました。もう一度チャレンジしてください。");
showToast("再読み込みしてください");
} else {
square.classList.add("red");
}
}
</script>
</body>
</html>