Building a game with TypeScript. Drawing Grid 2/5

Chapter III in the series of tutorials on how to build a game from scratch with TypeScript and native browser APIs. 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

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:

Introduction
Chapter I. Entity Component System
Chapter II. Game loop (Part 1, Part 2)
Chapter III. Drawing Grid (Part 1, Part 2, Part 3, Part 4, Part 5)
Chapter IV. Drawing ships
Chapter V. Interaction System
Chapter VI. Pathfinding
Chapter VII. Moving ship
Chapter VIII. State Machina
Chapter IX. Attack System: Health and Damage
Chapter X. Winning and Losing the Game
Chapter XI. Enemy AI

In the first part of this chapter, we successfully drew the grid. Canvas API was in great help for us then. However, the solution was rather dirty and not flexible. We simply put all the code into the single place: Game Entity. If we continue going this path, soon enough, our game script becomes enormously large and hard to maintain. Moreover, we wrote no tests last time, leaving ourselves without any insurance. In this post, we are going to improve our code and make it more maintainable and extendable.

There is something else we have to think about, aside from the code quality. At this point, all we did is drew a static image of the Grid. It has no functionality what’s so ever. In fact, the only dynamic part of the grid now is its size and color. But as we’ll see in future Chapters, Grid is much more than just an image. It is a vital part of the gameplay, and we need it to be ready to fulfill our growing needs. The Grid should become an Entity.

Feel free to switch to the `drawing-grid-1_` branch of the [repository_](https://github.com/soloschenko-grigoriy/gamedev-patterns-ts). It contains the working result of the previous posts and is a great starting point for this one.

tutorial typescript javascript testing game-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JavaScript Snake Game Tutorial - Develop a Simple Snake Game

JavaScript Snake Game - Develop simple snake game with javascript and html. In this step by step guide we provided all the instructions to develop the game easily. Snake game is an interesting JavaScript project for beginners. Snake game is a single-player game, which we’ve been playing for a very long time.

JavaScript Game Tutorial | How To Create Snake Game In JavaScript | JavaScript Tutorial

In this Simplilearn's 'JavaScript Game Tutorial' video, we are entirely focusing on the practical application of JavaScript in real-world web applications. We will be building a popular 'Snake' game, that we all have played on our phones, based entirely on JavaScript throughout this video, so brace yourself and start your JavaScript journey!