5 reasons to learn web dev by writing games

1. Writing games is interdisciplinary.

Writing games involves every field of web development - from backend to frontend. The best part of it is putting everything together. Talking about the backend, depending on your needs for communication, you can choose WebSockets or RestAPI. Inside your game, you will need to handle different code scenarios, parsing server responses into the game's object, etc.

2. There is no doubt that you will get to know Typescript better.

Pixi.js v5 uses types for its codebase, and it's highly recommended to write games in Typescript. Most elements are written in ES6 classes. It is a lot easier to write and maintain code. What is more, as writing games introduce many problems to solve, developers can use tools provided by Typescript - custom typings, type guards, interfaces, generic classes, and so on. Why is it important? Typescript is a great language that is widely used, especially in web development. Learning its secrets surely will enrich the developer's portfolio.

3. Game Development + Design Patterns

Depending on your use case, Pixi.js could be used in various situations. For example, you might need to build a reusable codebase for similar games to speed up the process of delivering products. This is the situation when design patterns come in.

• Inversion of Control

IoC is great when different effects are needed in one scene, such as animating splash effects with other materials (elements with different movement physics). If you would like to test your game, you might consider mocking communication with the server to cover test scenarios.

Just interface simple as that allows a developer to replace objects, which implement given interface. For example, when the user switches from mobile-portrait mode to mobile-landscape, UI should be changed in order to satisfy UX.

The LandscapeButtons object's responsibility is to choose proper graphics and alignment for its children.

• Builder Pattern

when you develop characters’ abilities, a builder pattern makes it easier and cleaner. Reuse code to create amazing game scenes.

• Factory methods

Considering object-oriented programming, some game components will be made using many smaller ones. To ensure code readability, it might become helpful to create objects factories. As a result logic of creating a complex component is moved into a single function.

4. Learn how to handle asynchronous code.

One of the challenges of game web development is Javascript’s one thread. In addition, scene elements often depend on each other. Imagine a situation when you have a set of animations to play, calling for the server response and various timeouts. It might become overwhelming, but I can assure you that if you get to know asynchronicity in games, it will be easy for you to use Promises working on another web project.

Below is a simple mechanism based on Promises + async/await from ES2017. The main component waits for its children to finish some action in order to proceed. The resolver could be invoked from another place inside the children's class. This use case might be particular but shows how one could learn asynchronicity during writing web games.

5. Some features could be implemented with a framework such as React

Since Pixi.Js is made to create digital content rendered by WebGL, it could be a good idea to separate some of the elements of the game, such as the game’s settings. It could be done by integrating React Framework into the project. Creating UX elements e.g. sliders or checkboxes might be easier in HTML+JS+CSS combo. Moreover, many third-party node modules could be used to accomplish some clients’ requirements.