javascript - 在 javascript 中绘制网格(例如生命游戏)

标签 javascript html graphics cellular-automata

从本质上讲,我脑子里有一个关于一种进化模拟器的想法,它与 Conways 生命游戏不完全相同,但它们匹配的部分是它们都将基于方形网格。

现在,就我个人而言,我喜欢使用 HTML+Javascript+ 开发简单的应用程序,因为它允许快速创建 UI,而且如果您不做一些计算量大的事情,那么浏览器中的 JS 是一个不错的平台。

我现在要解决的问题涉及绘制和更新网格。我可能遗漏了一些东西,但对于 80x40 网格,似乎没有简单且计算量少的方法可以做到这一点。简单的方法是为任何不为空的正方形生成一个具有绝对位置和特定背景颜色的 div。然而,对于超过 60-70 个彩色方 block ,这会变得非常慢。

如果情况需要,我绝对愿意切换到另一种语言,但首先我只想知道我并没有愚蠢地错过使用 HTML+JS 执行此操作的简单方法。

答案应包括以下任一内容:

a) 在 HTML+JS 中绘制和更新 80x40 网格(其中方 block 改变颜色和“移动”)的合理方法

b) 另一种可以相当快地做到这一点的语言。我宁愿避免花几天时间学习 DirectDraw 或类似的东西。

最佳答案

为什么不将网格构建为 HTML 表格?毕竟这就是你想要的?

为每个单元格提供一个计算出的 ID 并创建一些 JavaScript 函数来更新它们。根本不成问题。

您可以查看 HTML 5 中的新 Canvas 标签,但根据您所说的,我认为您不需要它。

关于javascript - 在 javascript 中绘制网格(例如生命游戏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1881100/

相关文章:

Java SWT - 从一个图像溶解(淡化)到下一个图像

javascript - 如何从字符串标记创建 svg 形状(模板)

javascript - 视口(viewport)检测如何将平板电脑与手机区分开?

javascript - 可放置的背景颜色为无不工作

java - 随着时间的推移,一个一个地绘制形状,而不是一次性绘制所有形状

c# - 在 C# 中使用 Translate Transform 顺时针和逆时针旋转图像

javascript - 如何使用 ElementRef 关闭外部点击 Angular 4 上的下拉菜单

javascript - Raphael:将 ".data"链接到 raphael.js 元素

javascript - JQUERY scrollTo 执行后不会让我滚动

javascript - 如何使用JavaScript更改元素的类?