以下は、ランダムな状態で始まるライフゲームを表示するアプリの例です。このプログラムはセキュリティ上の問題を抱えていませんが、必ずしも最適化されていないため、実際に使用する場合は改善が必要かもしれません。
```
<!DOCTYPE html>
<html>
<head>
<title>Random Conway's Game of Life</title>
<style>
table {
border-collapse: collapse;
}
table td {
width: 20px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Random Conway's Game of Life</h1>
<table id="universe"></table>
<script>
// ユニバースの大きさ
const width = 30;
const height = 30;
// 初期状態をランダムに決定
const universe = [];
for (let y = 0; y < height; y++) {
universe[y] = [];
for (let x = 0; x < width; x++) {
universe[y][x] = Math.random() > 0.5 ? 1 : 0;
}
}
// ユニバースを描画する
const table = document.getElementById("universe");
for (let y = 0; y < height; y++) {
const row = table.insertRow(y);
for (let x = 0; x < width; x++) {
const cell = row.insertCell(x);
cell.className = universe[y][x] ? "alive" : "";
}
}
// 一定時間ごとに状態を更新する
setInterval(() => {
const next = [];
for (let y = 0; y < height; y++) {
next[y] = [];
for (let x = 0; x < width; x++) {
const neighbors = [
universe[y - 1] && universe[y - 1][x - 1] || 0,
universe[y - 1] && universe[y - 1][x] || 0,
universe[y - 1] && universe[y - 1][x + 1] || 0,
universe[y][x - 1] || 0,
universe[y][x + 1] || 0,
universe[y + 1] && universe[y + 1][x - 1] || 0,
universe[y + 1] && universe[y + 1][x] || 0,
universe[y + 1] && universe[y + 1][x + 1] || 0,
];
const sum = neighbors.reduce((a, b) => a + b, 0);
if (universe[y][x]) {
next[y][x] = (sum === 2 || sum === 3) ? 1 : 0;
} else {
next[y][x] = sum === 3 ? 1 : 0;
}
}
}
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const cell = table.rows[y].cells[x];
universe[y][x] = next[y][x];
cell.className = universe[y][x] ? "alive" : "";
}
}
}, 100);
</script>
</body>
</html>
```
