Щоб дізнатись кількість рядків та стовпців, які потрібно вивести, слід перевірити ширину та висоту вікна та відповідно змінити їх. Не забудьте слухати події onResize та відповідно змінюйте ширину та висоту.
Коли ви хочете зробити це текстовим способом , ви можете зробити це за допомогою тексту з односхилим шрифтом та таблиці, де кожна комірка містить один символ.
Для адреси окремих символів ви можете створити a <table>з правильною кількістю рядків і стовпців, де кожен <td>має ідентифікатор, що складається з його x- і y- координат. Таким чином ви можете звертатися до окремих комірок за ідентифікатором та змінювати їх внутрішнійHTML, щоб змінити літеру та змінити їхній клас css, щоб змінити їх колір.
Однак використання полотна може бути швидшим, оскільки вам не доведеться маніпулювати великим деревом DOM для кожного символу, який потрібно замінити. Карликова фортеця робить до речі подібну річ. Символи, які використовуються для представлення об'єктів, насправді є растровими зображеннями, а не вірними текстовими виводами, і вони малюються за допомогою 2d графічних API. Полотно HTML5 добре обладнане для цього. Він має метод context.fillText, який дозволяє малювати текст на полотні. Це можна використовувати для малювання окремих символів. Ви можете змінити розмір і розмір шрифту, маніпулюючи змінними context.font та кольором кожної літери, зателефонувавши на контекст.fillStyle .
Зауважте, що виклик fillText у сотні разів за кадр може бути повільним, тому що растрування шрифтів коштує дорого, і жоден браузер, який я знаю, не використовує кешування. Це означає, що коли ви будете стовідсотково виводити один і той самий лист з тими ж налаштуваннями, він буде сто разів повторно растрований. Щоб збільшити продуктивність, ви можете кешувати растрований вигляд кожної літери з кожним кольором на прихованому полотні, а потім намалювати ці приховані полотна за допомогою контексту.drawImage . Копіювання з одного полотна на інше, як правило, набагато швидше, ніж растерізація шрифту.
Наразі я розробляю 2d гру за допомогою полотна, і помітив, що найбільшим пожирачем FPS був малюнок шрифту. Коли я додав кеш для растрового тексту, це значно покращило продуктивність.
З рухомими істотами, мобами, npcs та ПК. Хоча не те, що я не хочу досягти такої шкали, я, мабуть, почав би показувати чверть цього вмісту чи так у будь-який час.