Belén Albeza

"JavaScript for game development" guide

I got interested in programming when I was kid: I found in an appendix in my "computing" book a brief introduction to BASIC and I got instantly hooked and went by trying to code a conversational RPG/adventure of sorts. My parents noticed my interested and they wanted to support me, but we all found a barrier: the lack of good materials about programming in Spanish.

Back in those days, I only had a very basic knowledge of English and understanding a technical text was out of the question. There were some programming books in local libraries, but the translations were awful.

Nowadays the problem is not that severe, but it still exists. Which is why it makes me very happy and proud to be able to present something we have been working on at Mozilla:

"JavaScript para el desarrollo de videojuegos".

It's an introductory guide to JavaScript, in Spanish, aimed for people who want to learn to code HTML5 games –although all the people wanting to learn about JavaScript should find it useful as well.

My colleague Salva and I have been working really hard on this. It started as a collaboration with the Complutense University of Madrid, where we presented these materials, and after that we have compiled them with nice formatting, a few things we detected people struggled a bit with, etc. The guide contains theory, guided exercises and assignments. The table of contents is as follows:

  1. Introduction and set up of the workspace: why JavaScript, what tools / software you need to install to follow the guide, etc.
  2. JavaScript: OOP in JavaScript, the data model, etc. If you ever wondered how prototypes really work, this is your chapter. We introduce Node and the guided exercises are to be done in that environment. The assignment consists in coding a text-based RPG battle system.
  3. JavaScript in the browser: how JavaScript, HTML and CSS work in the browser, what specific functionality we have available in the browser, the event system, etc. We also introduce the Canvas API and list some libraries to work with it. This unit also has guided exercises and the assignment consists in coding a web interface to the RPG battle system.

With the existing content, you should be able to take on a game framework or engine, like Phaser and start developing your own games. But the idea is to update this guide further with new content! I have in my agenda an upcoming Phaser workshop, where we will be building a game step by step, and I think it would be great to incorporate that content to this guide.

It's published with a Creative Commons By - Share Alike license, and if you find any errata, want to submit suggestions, etc. please open an issue on Github or send a pull request.

We will translate it to English as well, so we can reach as many people as possible.

PS: I would like to thank professors Carlos León and Ismael Sagredo, and also to the students we got to meet at the Complutense. We had a great time and it was an honor!