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

<html>
<head>
<style>
  table {
    border-collapse: collapse;
  }

td {
    width: 10px;
    height: 10px;
    border: 1px solid black;
  }

.alive {
    background-color: green;
  }

.dead {
    background-color: white;
  }
</style>
</head>
<body>
<table id="grid"></table>
<script>
  // 定义网格的大小
  var rows = 50;
  var cols = 50;

// 定义初始状态的概率
  var aliveProbability = 0.3;

// 定义网格数组
  var grid = [];

// 获取网格元素
  var gridElement = document.getElementById("grid");

// 初始化网格
  function initGrid() {
    // 遍历每一行
    for (var i = 0; i < rows; i++) {
      // 创建一个新的行元素
      var rowElement = document.createElement("tr");
      // 添加到网格元素中
      gridElement.appendChild(rowElement);
      // 创建一个新的行数组
      var rowArray = [];
      // 添加到网格数组中
      grid.push(rowArray);
      // 遍历每一列
      for (var j = 0; j < cols; j++) {
        // 创建一个新的单元格元素
        var cellElement = document.createElement("td");
        // 添加到行元素中
        rowElement.appendChild(cellElement);
        // 随机生成一个初始状态，0为死，1为活
        var cellState = Math.random() < aliveProbability ? 1 : 0;
        // 添加到行数组中
        rowArray.push(cellState);
        // 根据状态设置单元格的类名
        cellElement.className = cellState ? "alive" : "dead";
      }
    }
  }

// 更新网格
  function updateGrid() {
    // 创建一个新的网格数组，用于存储下一代的状态
    var newGrid = [];
    // 遍历每一行
    for (var i = 0; i < rows; i++) {
      // 创建一个新的行数组
      var newRow = [];
      // 添加到新的网格数组中
      newGrid.push(newRow);
      // 遍历每一列
      for (var j = 0; j < cols; j++) {
        // 获取当前单元格的状态
        var currentState = grid[i][j];
        // 获取当前单元格周围的活细胞数量
        var aliveNeighbors = countAliveNeighbors(i, j);
        // 定义下一代的状态，默认为死
        var nextState = 0;
        // 根据生命游戏的规则，判断下一代的状态
        if (currentState == 1 && (aliveNeighbors == 2 || aliveNeighbors == 3)) {
          // 如果当前细胞是活的，并且周围有2或3个活细胞，那么保持活的状态
          nextState = 1;
        } else if (currentState == 0 && aliveNeighbors == 3) {
          // 如果当前细胞是死的，并且周围有3个活细胞，那么变成活的状态
          nextState = 1;
        }
        // 添加到新的行数组中
        newRow.push(nextState);
      }
    }
    // 更新网格数组为新的网格数组
    grid = newGrid;
    // 更新网格元素为新的网格数组对应的视图
    renderGrid();
  }

// 计算一个单元格周围的活细胞数量
  function countAliveNeighbors(row, col) {
    // 定义一个计数器，初始为0
    var count = 0;
    // 遍历周围的8个单元格（如果存在）
    for (var i = row - 1; i <= row + 1;i++) {
      for (var j = col - 1; j <= col + 1; j++) {
        // 如果不是自己，并且在网格范围内
        if ((i != row || j != col) && i >= 0 && i < rows && j >= 0 && j < cols) {
          // 如果该单元格是活的，那么计数器加一
          if (grid[i][j] == 1) {
            count++;
          }
        }
      }
    }
    // 返回计数器的值
    return count;
  }

// 根据网格数组更新网格元素的视图
  function renderGrid() {
    // 遍历每一行
    for (var i = 0; i < rows; i++) {
      // 遍历每一列
      for (var j = 0; j < cols; j++) {
        // 获取当前单元格的状态
        var state = grid[i][j];
        // 获取当前单元格对应的元素
        var cell = gridElement.rows[i].cells[j];
        // 根据状态设置单元格的类名
        cell.className = state ? "alive" : "dead";
      }
    }
  }

// 定义一个定时器，每隔一段时间更新一次网格
  var timer = setInterval(updateGrid, 100);

</script>
</body>
</html>

​x
        if ((i != row || j != col) && i >= 0 && i < rows && j >= 0 && j < cols) {
 
<html>
<head>
<style>
  table {
    border-collapse: collapse;
  }
​
  td {
    width: 10px;
    height: 10px;
    border: 1px solid black;
  }
​
  .alive {
    background-color: green;
  }
​
  .dead {
    background-color: white;
  }
</style>
</head>
<body>
<table id="grid"></table>
<script>
  // 定义网格的大小
  var rows = 50;
  var cols = 50;
​
  // 定义初始状态的概率
  var aliveProbability = 0.3;
​
  // 定义网格数组
  var grid = [];
​
  // 获取网格元素
  var gridElement = document.getElementById("grid");
​
  // 初始化网格
  function initGrid() {
    // 遍历每一行
    for (var i = 0; i < rows; i++) {
      // 创建一个新的行元素
      var rowElement = document.createElement("tr");
      // 添加到网格元素中
      gridElement.appendChild(rowElement);
      // 创建一个新的行数组
      var rowArray = [];