Canvas TypeScript Games

Paratrooper

Albert Skibinski
Paratrooper

Paratrooper is een van de eerste videogames die ik ooit speelde, ergens eind jaren '80 op mijn eerste computer (een 8086). Het werd gemaakt in 1982 en is vrij eenvoudig: je bent een geschutskoepel op een vaste positie en je moet helikopters en parachutisten neerhalen. Als aan beide kanten vier soldaten weten te landen, is het spel afgelopen, omdat ze dan de geschutskoepel kunnen beklimmen en opblazen. Dingen neerhalen levert punten op, maar elke kogel kost een punt. Simpel! H 

Ik werd aan dit spel herinnerd omdat ik een klein side-project nodig had om meer vertrouwd te raken met TypeScript en ik wilde ook een keer iets doen met HTML Canvas. Ik herinnerde me Paratrooper, want rond 2000, toen Flash het populairste en coolste ding op het web was, heb ik dit spel al eens opnieuw gemaakt in Flash. Helaas was dat voordat Github bestond en die code is verloren gegaan. Ik heb oude harde schijven en back-ups doorzocht, maar kon het niet vinden. Dus besloot ik een nieuwe versie te bouwen in Javascript / HTML5. 

De code staat op Github en het spel is speelbaar op Netlify. Let op: het is alleen voor desktop en je hebt een ES6-compatibele browser nodig. TypeScript Ik heb alleen Vanilla JS + TypeScript gebruikt, geen frameworks of helperbibliotheken. De enige runtime-afhankelijkheid is Firebase, die ik heb gebruikt om de highscores op te slaan in een NoSQL-database (ja, ik weet dat deze implementatie vatbaar is voor misbruik, maar het maakt me niet uit, het is maar een spel ;). TypeScript zorgt ervoor dat je meer betrouwbare, voorspelbare en robuuste JavaScript-code schrijft en ik ben blij om te zien dat het door steeds meer projecten wordt geadopteerd. 

Dit was mijn eerste TypeScript-project, dus ik ben er zeker van dat ik slechts het oppervlak heb aangeraakt. Voor nu heb ik het alleen gebruikt voor typedefinities, returntypes en parameter properties om mijn klassen te vereenvoudigen. Maar ik wil echt TypeScript decorators bekijken en meer specifiek, ze gebruiken voor Dependency Injection. Voor nu heb ik mijn eigen eenvoudige DI-container gemaakt die behoorlijk goed werkt. Ik had wel wat problemen met het importeren van andere modules met TypeScript, totdat ik begreep dat niet alle modules compatibel zijn met TypeScript (en hoe je dat kunt omzeilen).  Overigens is er in de code een (heel) kleine kans dat een soldaat zijn parachute helemaal niet opent... 

Fun project
Hoewel het nog steeds enkele elementen van het origineel mist (zie de README), is het spel in deze fase prima speelbaar. Het coderen van de helikopter "explosie" was erg leuk, wat in feite elk element pakt waaruit de helikopter is gemaakt en het roterend laat laat vallen. Wat randomness zorgt ervoor dat elke explosie uniek is. Ik moet hetzelfde nog doen voor een soldaat, maar op dit punt heb ik waarschijnlijk al veel te veel tijd aan dit project besteed. 

Het maakt niet uit, want het was leuk. Overigens zijn er geen SVG-elementen of andere elementen gebruikt, alles is in code getekend op canvas. Hoe dan ook, probeer het eens en zet een highscore!

Albert Skibinski

Over de auteur

  • Albert Skibinski is een zelfstandig ontwikkelaar en co-founder van Jafix
  • Ik schrijf over web development, lange fietstochten en lekker eten!
Terug naar overzicht