Angular - edytor mapy i gra Mordercze Działka

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3331 razy

Wstępne informacje o programie

Poniżej zamieszczam edytor mapy dla gry Programowanie → Projekty JavaScript → Gra Mordercze Działka napisana w JavaScript, który oczywiście stworzony został w Angularze 8. Program umożliwia rysowanie mapy, umieszczanie na niej obiektów takich jak:

amunicja;
benzyna;
apteczka;
czołg;
działka;
mur

Plik można zapisać lub odczytać klikając na odpowiednie przyciski znajdujące się pod napisem Menu. Plik z mapą można również wczytać poprzez przeciągnięcie i upuszczenie na element canvas, na którym mapa jest rysowana. Prawy przycisk myszy umożliwia przesuwanie mapy. Lewy przycisk umieszcza obiekty na mapie.

Wykorzystane moduły w projekcie

W projekcie użyto:

@angular/animations : ~13.0.1
@angular/cdk : ~13.0.1
@angular/common : ~13.0.1
@angular/compiler : ~13.0.1
@angular/core : ~13.0.1
@angular/forms : ~13.0.1
@angular/material : ^13.0.1
@angular/platform-browser : ~13.0.1
@angular/platform-browser-dynamic : ~13.0.1
@angular/router : ~13.0.1
bootstrap : ^4.0.0-beta.2
font-awesome : ^4.7.0
rxjs : ~6.5.4
tslib : ^2.0.0
zone.js : ~0.11.4

Program obecnie rozszerzony został do postaci umożliwiającej uruchomienie gry np. z domyślną mapą lub z mapą wczytaną z pliku czy też utworzoną w edytorze.

Sterowanie:

w - przesuwa mapę w górę;
s - przesuwa mapę w dół;
d - przesuwa mapę w prawo;
a - przesuwa mapę w lewo

Najechanie kursorem myszki na obiekt i kliknięcie umożliwia strzelanie zaś kliknięcie na pustym polu umożliwia przemieszczenie czołgu z punktu do punktu.

Zadania do zrobienia:

gra nie działa na Edge i (jak podejrzewam) na IE co wynika z tego, że te przeglądarki nie obsługują metod obiektu CanvasRenderingContext2D:
- setTransform - z parametrem przyjmującym obiekt DOMMatrix;
- getTransform - nie obsługiwana w ogóle
niektóre elementy w trybie gry nie wyświetlają się poprawnie na Edge i (jak podejrzewam) na IE;