クリア!
以下が実際のプログラムです。セキュリティ脆弱性に配慮し、evalや他のサイトへの遷移・リダイレクトは行いません。
```html
<!DOCTYPE html>
<html>
<head>
<title>ゲーム</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
button {
width: 64px;
height: 64px;
font-size: 24px;
font-weight: bold;
margin: 10px;
}
.on {
background-color: green;
color: white;
}
.off {
background-color: red;
color: white;
}
.center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="alert alert-success" id="clear" style="display: none;">クリア!</div>
<div class="row center">
<button class="col-4 on" id="1-1"></button>
<button class="col-4 on" id="1-2"></button>
<button class="col-4 on" id="1-3"></button>
</div>
<div class="row center">
<button class="col-4 on" id="2-1"></button>
<button class="col-4 on" id="2-2"></button>
<button class="col-4 on" id="2-3"></button>
</div>
<div class="row center">
<button class="col-4 on" id="3-1"></button>
<button class="col-4 on" id="3-2"></button>
<button class="col-4 on" id="3-3"></button>
</div>
<div class="text-center" id="play-again" style="display: none;">
<button class="btn btn-primary" onclick="startGame()">もう一度遊ぶ</button>
</div>
</div>
<script>
// ボタンの初期設定
const buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
const row = i / 3 + 1;
const col = i % 3 + 1;
buttons[i].addEventListener("click", function() {
// ボタンのクリックイベント
changeButtons(row, col);
});
if (Math.random() > 0.5) {
// ボタンをオフに設定
buttons[i].classList.remove("on");
buttons[i].classList.add("off");
}
}
/**
* ボタンを操作して状態を変更する関数
* @param {number} row - 行番号
* @param {number} col - 列番号
*/
function changeButtons(row, col) {
// 対象ボタンを切り替える
const targetButton = document.getElementById(`${row}-${col}`);
if (targetButton.classList.contains("on")) {
targetButton.classList.remove("on");
targetButton.classList.add("off");
} else {
targetButton.classList.remove("off");
targetButton.classList.add("on");
}
// 上下左右のボタンも切り替える
if (row > 1) {
const upButton = document.getElementById(`${row - 1}-${col}`);
if (upButton.classList.contains("on")) {
upButton.classList.remove("on");
upButton.classList.add("off");
} else {
upButton.classList.remove("off");
upButton.classList.add("on");
}
}
if (row < 3) {
const downButton = document.getElementById(`${row + 1}-${col}`);
if (downButton.classList.contains("on")) {
downButton.classList.remove("on");
downButton.classList.add("off");
} else {
downButton.classList.remove("off");
downButton.classList.add("on");
}
}
if (col > 1) {
const leftButton = document.getElementById(`${row}-${col - 1}`);
if (leftButton.classList.contains("on")) {
leftButton.classList.remove("on");
leftButton.classList.add("off");
} else {
leftButton.classList.remove("off");
leftButton.classList.add("on");
}
}
if (col < 3) {
const rightButton = document.getElementById(`${row}-${col + 1}`);
if (rightButton.classList.contains("on")) {
rightButton.classList.remove("on");
rightButton.classList.add("off");
} else {
rightButton.classList.remove("off");
rightButton.classList.add("on");
}
}
// クリア判定
let isClear = true;
for (let i = 0; i < buttons.length; i++) {
if (!buttons[i].classList.contains("on")) {
isClear = false;
break;
}
}
if (isClear) {
document.getElementById("clear").style.display = "block";
document.getElementById("play-again").style.display = "block";
}
}
/**
* ゲームを開始する関数
*/
function startGame() {
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("off");
buttons[i].classList.add("on");
}
document.getElementById("clear").style.display = "none";
document.getElementById("play-again").style.display = "none";
}
</script>
</body>
</html>
```