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

Computer vector created by catalyststuff — www.freepik.com

Welcome to the final installment of this Chapter! In the last article, we introduced OnclickComponent, an abstract class that serves as a “bridge” between notifier (GameInputComponent) and actual receivers. Today we are going to add one such receiver to our happy family and, of course, cover GameInputComponent with unit tests.

In Chapter V “Input system”, we are going to build a simple system that will give the Player an opportunity to communicate with the game. …


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

Cloud vector created by vectorjuice — www.freepik.com

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

Design vector created by freepik — www.freepik.com

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

Water vector created by dgim-studio — www.freepik.com

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

Travel vector created by vectorpouch

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

Background vector created by freepik

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

Design vector created by freepik

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

People vector created by freepik

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

Watercolor vector created by brgfx

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.


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

Background vector created by freepik

Welcome back! This is the series of articles where we discuss how to build a simple turn-based game with TypeScript and native browser APIs! Chapter III, “Drawing Grid,” is dedicated to building a crucial part of the gameplay: the Grid. Other Chapters are available here:

Greg Solo

Software Engineer with about 15 years of experience in front- and back-end web development, and I know how to cook this dish!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store