chatGPT生成的生命游戏 - W3xue在线HTML/CSS/JS运行工具

<!DOCTYPE html>
<html>
<head>
	<title>生命游戏</title>
	<style>
		#grid {
			display: grid;
			grid-template-columns: repeat(50, 10px);
			grid-template-rows: repeat(50, 10px);
			grid-gap: 1px;
			background-color: #ddd;
		}
		.cell {
			background-color: #fff;
		}
	</style>
</head>
<body>
	<button id="start">开始</button>
	<button id="stop">停止</button>
	<button id="reset">重置</button>
	<div id="grid"></div>
	<script>
	
	var grid = document.getElementById("grid");
var startButton = document.getElementById("start");
var stopButton = document.getElementById("stop");
var resetButton = document.getElementById("reset");
var cells = [];
var timer;
// 初始化网格
function initGrid() {
	for (var i = 0; i < 50; i++) {
		cells[i] = [];
		for (var j = 0; j < 50; j++) {
			var cell = document.createElement("div");
			cell.className = "cell";
			cell.dataset.row = i;
			cell.dataset.col = j;
			cell.addEventListener("click", toggleCell);
			grid.appendChild(cell);
			cells[i][j] = false;
		}
	}
}
// 切换细胞状态
function toggleCell() {
	var row = this.dataset.row;
	var col = this.dataset.col;
	cells[row][col] = !cells[row][col];
	this.style.backgroundColor = cells[row][col] ? "#000" : "#fff";
}
// 开始游戏
function startGame() {
	timer = setInterval(function() {
		var newCells = [];
		for (var i = 0; i < 50; i++) {
			newCells[i] = [];
			for (var j = 0; j < 50; j++) {
				var neighbors = countNeighbors(i, j);
				if (cells[i][j]) {
					newCells[i][j] = (neighbors === 2 || neighbors === 3);
				} else {
					newCells[i][j] = (neighbors === 3);
				}
			}
		}
		cells = newCells;
		updateGrid();
	}, 100);
}
// 停止游戏
function stopGame() {
	clearInterval(timer);
}
// 重置游戏
function resetGame() {
	stopGame();
	cells.forEach(function(row) {
		row.fill(false);
	});
	updateGrid();
}
// 更新网格
function updateGrid() {
	cells.forEach(function(row, i) {
		row.forEach(function(cell, j) {
			grid.children[i * 50 + j].style.backgroundColor = cell ? "#000" : "#fff";
		});
	});
}
// 计算邻居数量
function countNeighbors(row, col) {
	var count = 0;
	for (var i = row - 1; i <= row + 1; i++) {
		for (var j = col - 1; j <= col + 1; j++) {
			if (i === row && j === col) {
				continue;
			}
			if (i < 0 || i >= 50 || j < 0 || j >= 50) {
				continue;
			}
			if (cells[i][j]) {
				count++;
			}
		}
	}
	return count;
}
// 绑定按钮事件
startButton.addEventListener("click", startGame);
stopButton.addEventListener("click", stopGame);
resetButton.addEventListener("click", resetGame);
// 初始化游戏
initGrid();
	</script>
</body>
</html>

AخA
            grid.children[i * 50 + j].style.backgroundColor = cell ? "#000" : "#fff";
 
<!DOCTYPE html>
<html>
<head>
    <title>生命游戏</title>
    <style>
        #grid {
            display: grid;
            grid-template-columns: repeat(50, 10px);
            grid-template-rows: repeat(50, 10px);
            grid-gap: 1px;
            background-color: #ddd;
        }
        .cell {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="reset">重置</button>
    <div id="grid"></div>
    <script>
    
    var grid = document.getElementById("grid");
var startButton = document.getElementById("start");
var stopButton = document.getElementById("stop");
var resetButton = document.getElementById("reset");
var cells = [];
var timer;
// 初始化网格
function initGrid() {
    for (var i = 0; i < 50; i++) {
        cells[i] = [];
        for (var j = 0; j < 50; j++) {
            var cell = document.createElement("div");
            cell.className = "cell";
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener("click", toggleCell);
            grid.appendChild(cell);
            cells[i][j] = false;
        }
    }
}
// 切换细胞状态
function toggleCell() {
    var row = this.dataset.row;