JavaScript生命游戏的概念 逻辑规则及达成是怎样

今天这篇给大家分享的知识是“JavaScript生命游戏的概念、逻辑规则及实现是怎样”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“JavaScript生命游戏的概念、逻辑规则及实现是怎样”文章能帮助大家解决问题。

概念介绍

元胞自动机（Cellular Automata），是 20 世纪 50 年代初由计算机之父冯·诺依曼（John von Neumann）为了模拟生命系统所具有的自复制功能而提出来的。

生命游戏（Game of Life），或者叫它的全称 John Conway's Game of Life，是英国数学家约翰·康威在 1970 年代所发明的一种元胞自动机。

在二维平面方格里，每个细胞有两种状态：存活或死亡，而下一时刻的状态完全受它周围 8 个细胞的状态而定。

这个世界有三条演化规则：

当周围有 2 个存活细胞时，该细胞生命状态保持原样；

当周围有 3 个存活细胞时，该细胞为存活状态（死亡细胞会复活）；

当周围存活细胞低于 2 个时（生命数量稀少）或周围超过 3 个存活细胞时（生命数量过多），该细胞为死亡状态。

完整代码

焚霜 / LifeGame

index.html   // 主页面，初始化系统，控制系统运行等 canvas.js    // 渲染层，创建画布，手动绘制，画布更新方法等 LifeGame.js  // 逻辑层，创建运行系统，系统运行逻辑，数据更新等主要实现

系统配置：定义二维平面方格尺寸，data 中以 key,value 形式存储了所有细胞的生命状态，execute 是 canvas.js 暴露出来的内部方法，挂载到 config 对象上。

?const config = {    width: 100, // 横向细胞数量    height: 100, // 纵向细胞数量    size: 4 + 1, // 细胞大小，细胞间距 1px    speed: 200, // 细胞迭代速度    alive: '#000000' , // 细胞存活颜色    dead: '#FFFFFF' , // 世界颜色（细胞死亡颜色）    data: new Map(), // 系统运行数据    execute, // 更新画布方法 };

规则实现：遍历二维平面里每个细胞，拿到当前的细胞状态，计算其周围存活细胞的数量，判断其下一时刻是存活还是死亡，并将这个状态保存下来，通过调用渲染层的更新画布方法 execute 来更新界面显示。这里在处理 data 数据时没有用二维数组表示二维坐标系，而是将其转换为一维线性表示，将数据保存在 Map 中。

// LifeGame.js   // 二维坐标系一维线性表示 const MakeKey = (x = 0, y = 0) => y * 10000 + x;   function refreshWorld() {    const next = new Map(); // 更新后的系统运行数据    // 迭代二维坐标系所有元素    IterateCells(config, (x, y) => {      const index = MakeKey(x, y); // 计算坐标对应的 key      const current = config.data.get(index); // 当前细胞状态      // 计算当前细胞周围存活细胞的数量      switch (borderSum(x, y)) {        case 2:          // 当周围有 2 个存活细胞时，该细胞保持原样。          next.set(index, current);          break ;        case 3:          // 当周围有 3 个存活细胞时，该细胞为存活状态。          next.set(index, true );          !current && config.execute(x, y, true ); // 状态变化，更新画布          break ;        default :          // 当周围的存活细胞低于 2 个时，该细胞为死亡状态。（生命数量稀少）          // 当周围有超过 3 个存活细胞时，该细胞为死亡状态。（生命数量过多）          next.set(index, false );          current && config.execute(x, y, false ); // 状态变化，更新画布          break ;      }      return true ;    });    return next; }

系统的启动与停止

?// LifeGame.js   // 开启系统 function startWorld() {    stopWorld(); // 停止之前启动的循环    // 根据迭代速度启动系统，循环更新系统    interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500);    starting = true ; // 开启启动标识    return true ; }   // 关闭系统，当前系统运行数据保留 function stopWorld() {    clearInterval(interval); // 停止循环    starting = false ; // 关闭启动标识    return true ; }

计算存活细胞方法

?// LifeGame.js   function borderSum(x = 0, y = 0) {    const { width, height, data } = config;    let sum = 0;    for (let j = y - 1; j <= y + 1; j++) {      for (let i = x - 1; i <= x + 1; i++) {        // 边界判断        if (i < 0 || j < 0 || i >= width || j >= height || (i === x && j === y)) {          continue ;        }        if (data.get(MakeKey(i, j))) {          sum++; // 存活细胞数量累加        }      }    }    return sum; }

迭代二维坐标系方法

?/**   * 迭代二维坐标系所有元素，执行回调函数   * @param config: { width: number, height: number }   * @param callback: (x: number, y: number) => boolean   */ const IterateCells = ({ width, height }, callback) => {    for (let y = 0; y < height; y++) {      for (let x = 0; x < width; x++) {        if (callback && !callback(x, y)) {          return false ;        }      }    }    return true ; };

更新画布方法

?// canvas.js   function execute(x, y, life) {    const { size, alive, dead } = config;    // 设置细胞颜色    context.fillStyle = life ? alive : dead;    // 绘制细胞，细胞间距 1px    context.fillRect(x * size + 1, y * size + 1, size - 1, size - 1);      return true ; }

关于“JavaScript生命游戏的概念、逻辑规则及实现是怎样”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，小编每天都会为大家更新不同的知识。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!