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

Image for post
Image for post
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 are implementing the most important token of our turn-based game: we are drawing the Ships. Players will use them to attack other players. Losing all ships means losing the game. You can find other Chapters of this series here (note that you have to have an active Medium account to open these…


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

Image for post
Image for post
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 Ship on the screen and mess up a bit with its position. …


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

Image for post
Image for post
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

Image for post
Image for post
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 enemy ships. …


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

Image for post
Image for post
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. The only difference being that we would have to pass a reference to Canvas rather than native context, which doesn’t minimize the problem. …


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

Image for post
Image for post
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.

In this article, we are looking to make a few more tweaks. …


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

Image for post
Image for post
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:


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

Image for post
Image for post
Background photo created by freepik

Hello there, and 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 is dedicated to building a grid for this game, other Chapters are available here:


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

Image for post
Image for post
Background vector created by kjpargeter — www.freepik.com

Welcome back, reader! This is the first part of Chapter III of the series of articles where we discuss how to build a simple turn-based game with TypeScript and native browser APIs. Other Chapters are available here:


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

Image for post
Image for post
Logo 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 II is dedicated to building a game loop for this game, other Chapters are available here:

About

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