Chapter V in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Welcome back, reader! Last time we configured the Node entity to listen to click events on the body DOM element. While this gave us what we wanted: a way to be notified when the event occurs, it was far from being efficient. Indeed, if we run our code and add debugger or console.log we can notice that we react to the event multiple times:

We capture a click 36 times (the number of Nodes within the game right…

Chapter V in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Hello there! Welcome to Chapter V of a series of tutorials “Building a game with TypeScript”! Here we learn how, using native browser APIs, plain TypeScript, Test Driven Development, and SOLID design patterns, to build a simple turn-based game.

We spent the last chapter talking about Ships: we learned how to draw them utilizing our little Render system, talked about conflicts and teams, introduced a few helpers like Color and Fleet.

But so far, the game was rather… dead…

Chapter IV in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Welcome to the final installment of Chapter IV! Last time we hit the wall with the position of the Ship. We prepared ShipDrawComponent following Test Driven Development mantra and even saw it in action on the screen. However, we hardcoded the position property. We realized that this attribute of the Ship depends on something totally foreign for us yet: the notion of moving the Ship. This time we are going to make things right.

In Chapter IV “Ships”, we…

Chapter IV in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Hello there, reader! Welcome back to this series of tutorials! We are discussing how to build a simple turn-based game from scratch using TypeScript, no external libraries, SOLID architecture, incremental approach and unit testing.

In the previous post, we introduced Ship: the most fundamental piece of the game mechanics of this game. We also talked about Teams and conflict, set up Fleet as a collection of ships.

Today we are up to some visuals. We are going to render…

Chapter IV in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Hello there! Welcome back to the series of tutorials on how to build a simple turn-based game from scratch with TypeScript! In this tutorial, we use only native browser APIs and incrementally add new features thanks to SOLID principles and common patterns.

In the previous post we prepared a stage for the Ships: created Color utility and set up the foreground canvas layer. …

Chapter IV in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Great to see you back, reader! In this series of tutorials, we learn how to build a simple turn-based game from scratch using TypeScript, native browser’s APIs, SOLID architecture, incremental approach and unit testing.

This is the first installment of Chapter IV. This chapter will introduce us to the new element of the game: Ships. These are elements players can move around the board and attack other player’s Ships. The ultimate goal of the game is to destroy all…

Chapter III in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Welcome to the final part of Chapter III, “Drawing Grid”! The previous post was about implementing and testing a humble yet powerful rendering system. In this final article of the chapter, we will tie up all loose ends.

Having the rendering system is great, but how can NodeDrawComponent access it? Do we have to pass the instance of Canvas to the Node? If so, then we have the same problem as before: we couple Node with a drawing context…

Chapter III in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs

Welcome to part 4 of the Chapter III “Drawing Grid”! In previous parts of the chapter, we learned that drawing itself is simply a matter of calling proper canvas APIs of the browser. But the underlying logic of the Grid has to be a bit more sophisticated.

We divided this logic onto separate elements: Grid entity, Node entity and NodeDrawComponent. Each of them has its responsibility. We also presented the very basic Vector2D that helps us operate 2d structure.

…