以下が提供できるコードです。質問等があれば、お気軽にお問い合わせください。
```
<!DOCTYPE html>
<html>
<head>
<title>Life Game</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Life Game</h1>
<canvas id="canvas" width="500" height="500"></canvas>
<button onclick="retry()">Retry</button>
<button onclick="autoPlay()">Auto Play</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const size = 10;
const rows = canvas.width / size;
const columns = canvas.height / size;
let grid = new Array(rows);
let tempGrid = new Array(rows);
function initializeGrid() {
for (let i = 0; i < rows; i++) {
grid[i] = new Array(columns);
tempGrid[i] = new Array(columns);
}
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
grid[i][j] = Math.floor(Math.random() * 2);
}
}
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
if (grid[i][j] === 1) {
ctx.fillStyle = 'black';
ctx.fillRect(i * size, j * size, size, size);
}
}
}
}
function countNeighbour(i, j) {
let count = 0;
let n, m;
for (let x = -1; x <= 1; x++) {
for (let y = -1; y <= 1; y++) {
n = i + x;
m = j + y;
if (n >= 0 && m >= 0 && n < rows && m < columns) {
if (x !== 0 || y !== 0) {
count += grid[n][m];
}
}
}
}
return count;
}
function updateGrid() {
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
let count = countNeighbour(i, j);
if (grid[i][j] === 0) {
if (count === 3) {
tempGrid[i][j] = 1;
} else {
tempGrid[i][j] = 0;
}
} else {
if (count === 2 || count === 3) {
tempGrid[i][j] = 1;
} else {
tempGrid[i][j] = 0;
}
}
}
}
let temp = grid;
grid = tempGrid;
tempGrid = temp;
}
function retry() {
initializeGrid();
drawGrid();
}
function autoPlay() {
setInterval(() => {
updateGrid();
drawGrid();
}, 100);
}
initializeGrid();
drawGrid();
</script>
</body>
</html>
```
