Spelchan.com Logo

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.

crystal ball
Image courtesy of K. D. Schroeder (cc) 4 Attribution-Share Alike

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.

Sidebar - What tools I use.

When I am working on my own projects, I tend to use PHPStorm, as I need both JavaScript and PHP support. I prefer using IDEs since I also do development in other languages where using an IDE is more convenient. This leads to the question, “What is an IDE, and should I use one?” IDE stands for Integrated Development Environment. The idea is simply that your tools are all in one place so instead of having an editor, a compiler, a profiler, and a debugger as separate programs, they are all in a single program. This is not necessary for browser-based projects as the browser has the “compiler”, as well as a debugger and profiler. Languages can be compiled or interpreted. JavaScript was originally interpreted but now uses something called Just-In-Time compilation. This is a very complicated topic which I will cover when I get to JavaScript.

As most of the tools you need for JavaScript development are built into the browser, a text editor is often more than adequate for web development. One could argue that IDEs are not needed for any language as it is easy to do everything from a command line so any editor that supports command-line commands can effectively be used as an IDE.

For browsers I use Chrome, Firefox, and Edge.

My IDE provides me with a simple server, but as I use PHP, I could also just use the one included with PHP. Python and Node.js also have simple servers available to them.

It is also possible to test on a different operating system by using a tool like Virtual Box which lets you create a virtual machine. I use this to create a Linux server which I then install Apache, MySQL, and PHP on. This is known as the LAMP stack and is an older combination of tools used for full-stack development. We will not be getting into this in this book.

Another tool that I find indispensable is git. This is not an English insult but is instead a code repository. A code repository is simply a way of storing different versions of your code. This can be handy as if you make changes that break things, you can simply revert to a clean version of the software. The real power comes when you have multiple people working on the same project as then you can have different branches of the project and merge those branches together once the branch is working properly.

When it comes to games, you may want to create your own artwork. There are professional tools such as Photoshop, Coral draw, and Fireworks but these are not free. Alternatives to these are GIMP, Inkscape, and Krita. I have found that the free tools are very good and may be all that is needed, but I am not an artist. It is a good idea to have at least one of these tools on your system eve if you want to avoid artwork, as you will probably need to touch up any art you acquire through other means. Legally acquiring and using art is something that will be discussed later in the book.

Sound is another area that you may want to manipulate, and is sadly one where I lack knowledge of. The tool I use for editing sound is Audacity. There ia a lot of royalty free songs and sound effects that can be acquired but we won’t be getting into sound effects until fairly late in the book.

← previous section
Why this book?
next section →
Table of Contents