2009-12-10 1 views
4

По существу, у меня была эта идея в моей голове для своего рода симулятора эволюции, не совсем как Conways Game of Life, но та часть, в которой они совпадают, они оба будут основаны на квадратной сетке.Рисование сетки в javascript (например, игра жизни)

Теперь, мне нравится работать в HTML + Javascript + для простых приложений, так как это позволяет быстро создавать пользовательские интерфейсы, а если вы не делаете что-то сильно вычислительное, то JS в браузере - достойная платформа.

Проблема, которую я пытаюсь решить прямо сейчас, включает в себя рисование и обновление сетки. Возможно, я что-то пропустил, но похоже, что нет простой и простой в вычислении способ сделать это для сетки 80x40. Легким способом было бы создать div с абсолютной позицией и конкретным цветом фона для любого квадрата, который НЕ пуст. Однако это может стать очень медленным с чем-либо более чем 60-70 цветными квадратами.

Я определенно готов переключиться на другой язык, если ситуация требует его, но сначала я просто хочу знать, что я не глупо упускаю легкий способ сделать это с помощью HTML + JS.

Ответ должен включать либо один из следующих действий:

а) разумный способ привлечь и обновить 80x40 сетку (где квадраты менять цвет и «движение») в HTML + JS

б) Другой язык, который может сделать это достаточно быстро. Я бы предпочел не тратить несколько дней на изучение DirectDraw или что-то в этом роде.

+0

Вы пробовали использовать стол? – Breton

ответ

2

Почему бы не построить сетку в виде таблицы HTML? После всего этого вы хотите?

Дайте каждой ячейке вычислительный идентификатор и создайте некоторые функции javascript для их обновления. Shoudlnt - проблема вообще.

Вы можете посмотреть новый тег canvas в HTML 5, но из того, что вы сказали, я не думаю, что вам это нужно.

+0

Я еще не пробовал вычислить таблицу, но я решил, что для обработки 80x40 будет больше работы, чем обработка divs только для цветных квадратов. Мой браузер замедлился при создании моей тестовой сетки только в половине квадратов, которые были окрашены, поэтому я не знаю, может ли она обрабатывать многие ячейки таблицы. –

+0

Ничего. Пробовал использовать таблицу и по какой-то причине, даже несмотря на то, что генерируется больше HTML, она работала быстрее. Weird. –

0

Для небольшой сетки (< 100x100) используйте таблицу и дайте каждой ячейке идентификатор для быстрого доступа.

Для больших сеток вы должны рассмотреть возможность использования объекта canvas или встраивания Java или Flash-апплета.

1

<canvas> представляется правильным способом для этого. Библиотека, подобная Raphael, поможет избежать межплатформенных проблем. Другие варианты: Processing.js, но он не работает в IE.