JavaScript 实现生命游戏

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了JavaScript 实现生命游戏的示例步骤,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下

概念介绍

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

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

逻辑规则

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

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

  1. 当周围有 2 个存活细胞时,该细胞生命状态保持原样;
  2. 当周围有 3 个存活细胞时,该细胞为存活状态(死亡细胞会复活);
  3. 当周围存活细胞低于 2 个时(生命数量稀少)或周围超过 3 个存活细胞时(生命数量过多),该细胞为死亡状态。

完整代码

基本结构

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 实现生命游戏的详细内容,更多关于JavaScript 生命游戏的资料请关注狼蚁SEO其它相关文章!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板