Chapter V 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 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
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.
…
Chapter III in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs
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:
Software Engineer with about 15 years of experience in front- and back-end web development, and I know how to cook this dish!