Chapter I

Fresh start

In this book, we will recreate the mini-game featured at the end of the prologue, step by step. To begin, choose your reader profile, as the content will adapt to suit your chosen profile.

What is this book about?

As a developer, you have the power to bring your ideas to life, just like a painter creates a masterpiece with a brush or a sculptor carves a beautiful statue from stone. But like any artist, it is up to you to develop your own unique style and approach to your craft.

The goal of this first book is to show how to make a game without using any extra libraries or tools. Even though these tools are out there, doing it without them helps us understand what's happening under the hood.

It's not a requirement for becoming a game developer, but it's fun and encourages to think creatively about how to make the most of what we have.

So, we put all the extra tools in a box and get started.

Packing all the extra libraries in a box

What do we need?

We still need a few primary tools to make a game in JavaScript. We need a code editor, a web server and a web browser.

I will use Google Chrome as our web browser and VSCode as our code editor. For the web server, I usually use npm's http-server.

There are numerous alternatives available for quickly creating a local web server. I suggest conducting a search on your preferred search engine.

Once you've installed your chosen tool, you can create a new project folder and add your HTML, CSS, and JavaScript files to it. You can then access your web application by typing localhost in your web browser's address bar.

A GIT repository is available to track the progression of our game throughout its chapters. At the end of each chapter, you will find a link to the project's state at that time.

I have created a starting point for the project, which includes minimalist HTML, CSS, JavaScript files and images.

You may choose to either download the source code or explore it at your convenience.

The 7 labors

Dear reader, You are now prepared for the journey ahead. Let me outline the seven tasks that await us:

  • First, we will learn how to draw on a canvas and create our own tools to make art.
  • Next, we will use our imagination to paint a scene on the canvas.
  • We will master the art of controlling time and make our scene come to life.
  • We will create an infinitely expanding world, where the character is always discovering new terrain and obstacles to overcome.
  • We will then learn to control our character and make them jump.
  • The game can't be complete without some element of danger, so we will add collisions.
  • Finally, we will apply everything we've learned to create the final game.
Source code
Next: Chapter 2
The Canvas