From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 1.2: Who this is for and what do I need?

The short answer is everyone and just a text editor and browser.

Who should read this book?

One of my biggest problems when writing is that I want everyone to be able to read my work. This was problematic when working towards my master’s degree as technical writing is necessarily targeted at people in the field. Having read too many research papers that overcomplicate simple concepts, I am not convinced that this is the best approach but understand that different audiences have different needs. With that at mind, I am targeting this book at four groups of people. Novices, gamers who want to learn what goes into making a game, existing developers (both web and other developers) wanting to learn about creating games, and readers of my game engine book who want to refresh their knowledge.

This book is designed to start with no knowledge of web development and works towards advanced concepts. This makes it good for the novice reader wanting to learn the material. This would include both novices who want to make games, as well as novices wanting to learn web development in a fun way. My approach is to intermix the three different technologies being used as all three tend to be used together. While it is possible to focus on each of the topics separately, that is not how they are used.

The gamer category could be considered a subset of the novice, with the distinction that the gamer may not necessarily want to make games but want to get a better understanding of what goes into creating a game. As many of the chapters will have game creating projects, and since JavaScript is one of the more accessible programming languages, this book may prove interesting to such a person. Even if they don’t go on to become developers.

Existing developers who want to create games using web technologies may not get as much out of this book as novice developers, they will still be able to fill in any missing pieces in their knowledge as it come to creating games. The later sections of this book are much more focused on the creation of games and is where existing developers will find the most useful material. I would still recommend that existing developers review the earlier chapters and partake in the projects if only to flex their skills.

Image courtesy of K. D. Schroeder (cc) 4 Attribution-Share Alike
(https://commons.wikimedia.org/wiki/File:Crystal_ball_by_Ron_Bodoh.JPG)

Finally, readers of my game engine book can use this as a reference. Some of you may be wondering about the game engine book, while future people will not see this paragraph as the book has been released. I am concurrently working on both this book and a game engine book. This book is being released in weekly installments as I write the book and is for free. The game engine book will be released only after it has been finished.

What tools are needed?

I am going to be assuming you are using a desktop or laptop computer. It is possible to develop web pages on a phone or tablet, but is not a very good experience. If you are going to use a phone or laptop as your development machine, get a keyboard and stand for it.

The nice thing about HTML, CSS, and JavaScript, is that they only require a text editor to create. As most operating systems include a text editor, and there are several free text editors available, there is no cost to start learning web development. When I had taught this topic, we simply went with Notepad++ as that happened to be an editor that was installed on all our lab computers so it was easy for students to use it. This also has the advantage that it has color coding which displays different parts of your code in different colors allowing you to easily spot common typing errors such as not closing a quote.

There are many free text editors available, with some common ones being Notepad++, Atom, Visual Studio Code, Sublime. For more hard-core readers, vim or emacs. Most of the IDEs that can be used are not free but include WebStorm, PHPStorm, Eclipse, Visual Studio, and Adobe Dreamweaver. This is not a full list by any means but just a starting point.

It should be noted that a text editor is not the same thing as a word processor. A common newbie mistake is to attempt to write code using their word processor. This does not work as a word processor does not store information as plain text but instead uses special codes to indicate the different formatting that is used. It’s a bit more complicated than that, but you get the gist.

The other tool that is needed is a browser. These also come with the operating system, though most people just use Microsoft’s Edge browser to download Google’s Chrome browser, or Mozilla’s Firefox browser. My recommendation is to have multiple browsers as there are subtle differences between the different browsers so it is nice to test on multiple browsers to make sure everyone is getting what you are trying to create. Many browsers even include debugging tools which we will be covering in future chapters.

Later in the book, when we get into Ajax, a simple server may be required. Some editors have this feature built in or as an extension. If not, alternatives will be provided in that chapter. There are many more tools that can be used, but are not really necessary. This section’s sidebar discusses some of these.