生命的游戏-如何用鼠标点击激活细胞？

“生命的游戏”通常指的是康威的生命游戏（Conway's Game of Life），它是一个著名的细胞自动机模拟。在这个游戏中，细胞根据其周围邻居的状态在每一代中更新其状态（存活或死亡）。以下是如何使用鼠标点击来激活细胞的基本概念和相关实现细节：

基础概念

细胞自动机：一个离散模型，在时间和空间上都是离散的，由一组规则控制其状态的变化。
康威的生命游戏规则：
- 孤立无援的细胞死亡（少于两个邻居）。
- 稳定的细胞保持存活（两个或三个邻居）。
- 兴旺的细胞分裂（多于三个邻居）。
- 新生细胞在恰好有三个邻居的地方诞生。

实现鼠标点击激活细胞的优势

交互性：允许用户直接与模拟互动，增加参与感和教育价值。
直观性：通过简单的点击操作即可直观地影响游戏状态。

类型与应用场景

类型：基于网页的交互式应用。
应用场景：教育工具、编程教学示例、娱乐软件。

实现步骤与示例代码

以下是一个简单的HTML5 Canvas和JavaScript示例，展示如何实现鼠标点击激活细胞：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命的游戏</title>
<style>
  canvas { border: 1px solid black; }
</style>
</head>
<body>

<canvas id="gameCanvas" width="500" height="500"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const cellSize = 10;
let grid = createGrid(canvas.width / cellSize, canvas.height / cellSize);

function createGrid(width, height) {
  let grid = [];
  for (let y = 0; y < height; y++) {
    grid[y] = [];
    for (let x = 0; x < width; x++) {
      grid[y][x] = { alive: false };
    }
  }
  return grid;
}

function drawGrid() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let y = 0; y < grid.length; y++) {
    for (let x = 0; x < grid[y].length; x++) {
      if (grid[y][x].alive) {
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
      }
    }
  }
}

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = Math.floor((event.clientX - rect.left) / cellSize);
  const y = Math.floor((event.clientY - rect.top) / cellSize);
  grid[y][x].alive = !grid[y][x].alive;
  drawGrid();
});

// 初始化一些细胞状态
grid[50][50].alive = true;
grid[51][50].alive = true;
grid[52][50].alive = true;

drawGrid();
</script>

</body>
</html>