Dibujar una cuadrícula en javascript ( el juego de la vida, por ejemplo )

Question

Esencialmente, tuve esta idea en mi cabeza de una especie de simulador de evolución, no es exactamente como el Juego de Conway de la Vida, pero la parte en la que coinciden es que ambos se basan en un cuadrado de la cuadrícula.

Ahora, personalmente, me gusta trabajar en HTML+Javascript+ para aplicaciones sencillas, ya que permite una rápida interfaz de usuario de la creación, y si no estás haciendo algo computacionalmente muy pesado, entonces JS en un navegador es un decente de la plataforma.

El problema que estoy tratando de resolver ahora consiste en la extracción y actualización de la red.Yo puede ser que falte algo, pero parece que no es fácil Y computacionalmente luz manera de hacer esto para un 80x40 cuadrícula.La manera más fácil sería la de generar un div con posición absoluta y un determinado color de fondo para cualquier plaza que NO está vacía.Sin embargo, que puede llegar a ser muy lenta, con algo más de 60-70 cuadrados de colores.

Definitivamente estoy dispuesto a cambiar a un idioma diferente si la situación lo requiere, pero primero yo solo quiero saber que no estoy estúpidamente perdiendo una manera fácil de hacer esto con HTML+JS.

La respuesta debe incluir uno de los siguientes:

a) de Una manera razonable para dibujar y actualizar un 80x40 ( grid, donde las plazas cambiar de color y "mover" ) en HTML+JS

b) Otro idioma que puede hacer esta razonablemente rápido.Yo prefiero evitar tener que pasar unos días de aprendizaje de DirectDraw o algo por el estilo.

Answer 1

Por qué no construir la red como una tabla HTML? Después de todo esto es lo que quieres?

Dé a cada célula de un identificador computarizada y crear algunas funciones JavaScript para actualizarlos. Shoudlnt ser un problema en absoluto.

Se podría buscar en la nueva etiqueta canvas en HTML 5 pero a partir de lo que ha dicho No creo que lo necesite.

Answer 2

<canvas> parece ser la forma correcta de hacer esto. Una biblioteca como Raphael le ayudará a evitar problemas de plataforma cruzada. Otra de las opciones es Processing.js , pero no funciona en IE.

Answer 3

Para una pequeña rejilla (<100x100), utilizar una tabla y dar a cada célula un ID para un acceso rápido.

Para redes más grandes, se debe considerar el uso de un objeto de lona o la incrustación de un applet de Java o Flash.