Чтобы узнать количество строк и столбцов, которые вам нужно вывести, вы должны проверить ширину и высоту окна и изменить его соответствующим образом. Не забудьте слушать события onResize и соответственно изменять ширину и высоту.
Когда вы хотите сделать это текстовым способом , вы можете сделать это, используя текст с моноширинным шрифтом и таблицу, где каждая ячейка содержит один символ.
Для адресации отдельных символов вы можете создать <table>с правильным количеством строк и столбцов, где каждый <td>имеет идентификатор, состоящий из его x- и y-координат. Таким образом, вы можете обращаться к отдельным ячейкам по идентификатору и изменять их innerHTML, чтобы изменить букву, и изменить их класс css, чтобы изменить их цвет.
Использование холста , однако, может быть быстрее, потому что вам не нужно манипулировать большим деревом DOM для каждого персонажа, которого вы должны заменить. Кстати, Dwarf Fortress делает то же самое. Символы, которые используются для представления объектов, на самом деле являются растровыми изображениями, а не выводом истинного текста, и они рисуются с использованием 2d графических API. Холст HTML5 хорошо оборудован для этого. Он имеет метод context.fillText, который позволяет рисовать текст на холсте. Это может быть использовано для рисования отдельных персонажей. Вы можете изменить размер и шрифт, управляя переменными context.font и цветом каждой буквы, вызывая context.fillStyle .
Обратите внимание, что вызов fillText сотни раз за кадр может быть медленным, поскольку растеризация шрифтов обходится дорого, и ни один из известных мне браузеров не использует кэширование. Это означает, что когда вы отрисовываете одно и то же письмо с одинаковыми настройками сто раз, оно будет повторно растеризовано сто раз. Чтобы повысить производительность, вы можете кэшировать растеризованный вид каждой буквы с каждым цветом на скрытом холсте, а затем нарисовать эти скрытые холсты, используя context.drawImage. . Копирование с одного холста на другой обычно происходит намного быстрее, чем растеризация шрифта.
В настоящее время я занимаюсь разработкой 2D-игры с использованием canvas и заметил, что самым большим пожирателем FPS был шрифт. Когда я добавил кэш для растеризованного текста, это значительно улучшило производительность.
с движущимися существами, мобами, NPC и ПК. Хотя я и не собираюсь достигать этой шкалы, я бы, вероятно, начал показывать четверть контента или около того в любое время.