在 javascript 中绘制网格（例如生命游戏）
本质上，我脑子里有一种进化模拟器的想法，不完全像康威生命游戏，但它们确实匹配的部分是它们都基于方形网格。
现在，就我个人而言，我喜欢使用 HTML+Javascript+ 来创建简单的应用程序，因为它允许快速创建 UI，如果您不做计算量大的事情，那么浏览器中的 JS 是一个不错的平台。
我现在试图解决的问题涉及绘制和更新网格。我可能遗漏了一些东西，但似乎没有简单且计算量小的方法可以对 80x40 网格执行此操作。最简单的方法是为任何非空的方块生成一个具有绝对位置和特定背景颜色的 div。然而，对于超过 60-70 个彩色方块，这可能会变得非常慢。
如果情况需要，我绝对愿意切换到其他语言，但首先我只想知道我是否愚蠢地错过了使用 HTML+JS 实现此目的的简单方法。
答案应包括以下任一内容：
a) 在 HTML+JS 中绘制和更新 80x40 网格（其中方块改变颜色并“移动”）的合理方法
b) 另一种可以相当快地完成此操作的语言。我宁愿避免花几天时间学习 DirectDraw 或类似的东西。
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为什么不将网格构建为 HTML 表格？毕竟这就是你想要的吗？
为每个单元格提供一个计算出的 ID，并创建一些 JavaScript 函数来更新它们。根本不应该是一个问题。
您可以查看 HTML 5 中的新 canvas 标签，但从您所说的情况来看，我认为您不需要它。
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
似乎是执行此操作的正确方法。像 Raphael 这样的库将帮助您避免跨平台问题。另一个选项是 Processing.js，但它在 IE 中不起作用。<canvas>seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.对于小网格 (< 100x100)，请使用表格并为每个单元格指定一个 ID，以便快速访问。
对于更大的网格，您应该考虑使用画布对象或嵌入 Java 或 Flash 小程序。
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.