以下がJavaScriptで実装されたランダムな状態で始まるライフゲームとマルバツゲームを含んだアプリです。セキュリティ上問題があると判断されるコードは含まれておりません。また、コメントを入れているので、理解しやすいものとなっています。
```html
<!DOCTYPE html>
<html>
<head>
<title>Life and Tic-Tac-Toe Game</title>
<style>
/* スタイル設定 */
.cell {
width: 25px;
height: 25px;
border: 1px solid black;
display: inline-block;
margin: 1px;
}
</style>
</head>
<body>
<h1>Life and Tic-Tac-Toe Game</h1>
<div>
<h2>Life Game</h2>
<div id="life"></div>
</div>
<br />
<div>
<h2>Tic-Tac-Toe Game</h2>
<table id="tic-tac-toe">
<tr>
<td class="cell">-</td>
<td class="cell">-</td>
<td class="cell">-</td>
</tr>
<tr>
<td class="cell">-</td>
<td class="cell">-</td>
<td class="cell">-</td>
</tr>
<tr>
<td class="cell">-</td>
<td class="cell">-</td>
<td class="cell">-</td>
</tr>
</table>
</div>
<!-- ライフゲームのJavaScriptコード -->
<script>
// ランダムな状態で配列を作成
let cells = [];
for (let i = 0; i < 25; i++) {
cells[i] = [];
for (let j = 0; j < 25; j++) {
cells[i][j] = Math.round(Math.random());
}
}
// ライフゲームの処理
function life() {
let new_cells = [];
// 隣接するセルの状態をチェックし、各セルの次の状態を計算する
for (let i = 0; i < 25; i++) {
new_cells[i] = [];
for (let j = 0; j < 25; j++) {
let count = 0;
if (i > 0 && j > 0 && cells[i - 1][j - 1] === 1) count++;
if (i > 0 && cells[i - 1][j] === 1) count++;
if (i > 0 && j < 24 && cells[i - 1][j + 1] === 1) count++;
if (j > 0 && cells[i][j - 1] === 1) count++;
if (j < 24 && cells[i][j + 1] === 1) count++;
if (i < 24 && j > 0 && cells[i + 1][j - 1] === 1) count++;
if (i < 24 && cells[i + 1][j] === 1) count++;
if (i < 24 && j < 24 && cells[i + 1][j + 1] === 1) count++;
if (cells[i][j]) {
// 生きているセル
if (count === 2 || count === 3) {
new_cells[i][j] = 1;
} else {
new_cells[i][j] = 0;
}
} else {
// 死んでいるセル
if (count === 3) {
new_cells[i][j] = 1;
} else {
new_cells[i][j] = 0;
}
}
}
}
// 配列の状態をアップデートし、セルの表示を更新する
cells = new_cells;
let table = '<table>';
for (let i = 0; i < 25; i++) {
table += '<tr>';
for (let j = 0; j < 25; j++) {
if (cells[i][j] === 1) {
table += '<td class="cell" style="background-color: black"></td>';
} else {
table += '<td class="cell" style="background-color: white"></td>';
}
}
table += '</tr>';
}
table += '</table>';
document.getElementById('life').innerHTML = table;
setTimeout(life, 500); // 500ms後に再起呼び出し
}
life(); // ライフゲームを始める
</script>
<!-- マルバツゲームのJavaScriptコード -->
<script>
// ゲームを初期化する
let turn = 'X'; // Xが最初に始まる
let table_cells = document.querySelectorAll('#tic-tac-toe td');
table_cells.forEach(function (cell) {
cell.addEventListener('click', function () {
if (cell.textContent === '-') {
cell.textContent = turn;
if (check_win()) {
alert(`${turn} wins!`);
return;
}
turn = turn === 'X' ? 'O' : 'X'; // ターンを進める
}
});
});
// 勝利条件を確認する関数
function check_win() {
let table_cells = document.querySelectorAll('#tic-tac-toe td');
let cell_values = [];
table_cells.forEach(function (cell) {
cell_values.push(cell.textContent);
});
let win_patterns = [
// 横方向
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
// 縦方向
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
// 斜め方向
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < win_patterns.length; i++) {
let pattern = win_patterns[i];
let filtered_values = cell_values.filter(function (val, idx) {
return pattern.includes(idx) && val === turn;
});
if (filtered_values.length === 3) {
return true; // 勝利を返す
}
}
return false; // 勝利していない場合
}
</script>
</body>
</html>
```
