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

时间:2009-12-10 13:49:38

标签: javascript html graphics cellular-automata

基本上,我脑子里有这种想法用于某种进化模拟器,与Conways Game of Life完全不同,但它们匹配的那一部分是它们都将基于正方形网格。

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

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

如果情况需要,我肯定愿意切换到另一种语言,但首先我只是想知道我并没有愚蠢地错过用HTML + JS做到这一点的简单方法。

答案应包括以下任一项:

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

b)另一种可以快速完成此任务的语言。我宁愿避免花几天时间学习DirectDraw或类似的东西。

3 个答案:

答案 0 :(得分:2)

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

为每个单元格提供一个计算ID,并创建一些javascript函数来更新它们。 Shoudlnt完全是个问题。

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

答案 1 :(得分:1)

<canvas>似乎是正确的方法。像Raphael这样的库可以帮助您避免跨平台问题。另一个选项是Processing.js,但它在IE中不起作用。

答案 2 :(得分:0)

对于小网格(<100x100),请使用表格并为每个单元格提供ID以便快速访问。

对于更大的网格,您应该考虑使用canvas对象或嵌入Java或Flash小程序。