Първоначално публикувах това на моя уебсайт на 4/7/17. Публикувах това и в Dev.to на 26.11.18.

Ако сте запознати с roguelikes (походови обхождания на подземия) като Nethack, тогава без съмнение сте запознати с идеята елементите на играта да се показват изцяло като ASCII знаци.

Тук ще обясня как използвам подобен подход, за да създам оформлението на стаите в игра, върху която работя, и как използвам Phaser (JS двигател за игри), за да изобразя стаите въз основа на моите оформления.

Следният масив от низове представлява единична стая:

„E“ представлява враг, а „p“ представлява неподвижен блок, който може да се използва като платформа или стена. Тирето представлява празно пространство, просто защото го намирам за по-лесно за четене от празното пространство, въпреки че не броя точно тирета, за да намеря някакво разстояние.

Коментираните числа отгоре и отдясно представляват съответно колони и редове; Разделих платно с ширина 800 пиксела и височина 600 пиксела на квадрати с размери 25 на 19 и 32 пиксела.

Как и кога се изобразява една стая

1. Играчът се сблъсква с ръба на света (платно)

2. X-позицията на играча след това се променя на позицията на ръба, противоположен на сблъсъка (сблъсък на десния ръб, играчът е преместен най-вляво на платното; сблъсък на левия ръб, играчът е преместен най-вдясно на платното); това създава вид на влизане в нова стая

3. След това стаята се изчиства с помощта на метода `sprite.kill()` на Phaser

4. Променливо цяло число след това се увеличава или намалява с 1 в зависимост от ръба на сблъсъка (дясно, +1; ляво, -1) и това цяло число след това се използва като индекс на нашата стая в нашия масив от нива.
— Така че, ако индексът на текущата ни стая е 0 (първата стая в масива от нива) и играчът се сблъска с десния ръб на платното, нашето цяло число се увеличава до 1 и ние изобразяваме стаята, чийто индекс е 1 (втората ни стая в масивът от нива)

5. След като получим стаята, която искаме чрез индекс, проверяваме всеки низ в масива стая; всеки от тези низове може да се разглежда като ред от неща, които могат да бъдат изобразени върху платното, от горната част на платното до дъното.

6. За всеки ред (низ) в масива стая проверяваме всеки знак по неговия индекс, като използваме `String.charAt()`.

7. С помощта на команда switch символът може да бъде съпоставен с регистър; ако и след съпоставяне, ние ще извикаме метода `group.create()` на Phaser, за да изобразим съответстващия спрайт или изображение.

Така че, използвайки оформлението на стаята по-горе, `level1[0][8].charAt(4)` ще съответства на случай на `p` в нашия израз за превключване:
— 0 е индексът на стаята (това е показана е само стая, но обикновено има няколко стаи), 8 е индексът на реда, а 4-тият знак на 8-ия ред е „p“.

Функцията за рендиране на стая (съкратено)

(Да бъде извикан при сблъсък.)

Тази функция за изобразяване на стая в момента работи само с едно ниво, но трябва да се мащабира, за да поеме множество нива и да работи по подобен начин, ако не и идентично.

Стайната система работи, както е описано подробно в псевдокод по-долу, като всяка „колона“ всъщност представлява един знак в низ: