Spelchan.com Logo

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

Chapter 1.3: Roadmap

As I am writing this book as it is being released, it is impossible to properly say what the ultimate results will be. I have, however, worked out a rough plan which may change as I work through the material. Currently I have planned for 11 chapters.

1. Introduction

This chapter, where I go over the goal of this book and what I am planning. There is no project for this chapter.

2. HTML Basics

HTML stands for Hyper Text Markup Language and is a simple text format used for describing the contents of the web page. This is originally was the only thing defining a web page, but as the web grew, new capabilities were desired so CSS and JavaScript were developed. We will go over a brief history of the language, followed by going over the basics of tags and the more common tags used to describe the contents of a page. This includes links and images. While what you can do with just HTML is very limited, it is still possible to create some games using HTML so for the project we will create a variant of the game NIM.

3. CSS basics

Browser makers added some tags for style, but this was inconsistent. Cascading Style Sheets (CSS) was the standard that came about to resolve style issues. In this chapter we cover the fundamentals of CSS and how to style a web page. As styles are cosmetic in nature, there is still a huge limit to what can be done, but I wanted to do something a bit more complicated so for the project we will create a simplified variation of the classic text game “Hunt the Wumpus” which we will call Hunt the Webbus.

4. JavaScript Basics

One thing that I have to continually repeat to people is that Java is not the same as JavaScript. I am sure there will be a lengthy sidebar on this topic when I get there. JavaScript was designed to add more interactivity to web sites without requiring special plug-ins. It is a programming language which allows you to manipulate the web page. We will look at the basics of programming as it is done in JavaScript. This includes variables, equations, conditions, looping, functions, and using the DOM. This will conclude with the creation of a simple search game “Where’s Wendy” where you must find your friend on a grid being given directional clues after each guess.

5. HTML forms

Forms were around near the beginning but are a bit different than regular HTML in that the form is submitted to the server and it is the server that processes the data. We are not going to be going down that route as we are not covering server side programming in this book. With the advent of JavaScript, this is not necessary as we can manipulate form components using JavaScript. While not used as much for games, they are an important aspect of many web pages so it is good to have in your toolchest. The game we will use will be taking advantage of a variety of form components and was partially inspired by the online quiz components I use at work. The project is Trivia.

6. CSS Layout

Most web pages have very sophisticated layouts compared to what we have done so far. In the old days, tables were used to handle more complicated layouts but that is now frowned upon. The layout of a page is part of the style and is a surprisingly complicated subject worth it’s own chapter. We will look at the different page layout techniques which include floats, flexbox, grids, and multi-column layouts. I may come up with a better project when I get to this chapter, but what I currently am thinking is a Tic Tac Toe game.

7. JavaScript Arrays and Objects

Arrays are an area that students seem to have trouble with, so I am having them covered in their own chapter. JavaScript has a very flexible array object that easily allows it to be used as several different data structures. Objects are related to arrays, and are often treated as associative arrays in JavaScript. Objects are where things start getting powerful as they allow you to combine a data structure with the functions (called methods in object oriented parlance) that work on that data to be combined. Advanced concepts such as inheritance and polymorphism allow for more flexibility in your code. We will be developing a hotseat dice game (network gaming may be a future book) known as threes where players get to shoot for the moon.

8. HTML Multimedia and semantic tags

We finish up our coverage of HTML by looking at the semantic tags that try to make the code more understandable and multimedia tags for advanced audio and visuals. While sound and video tags are useful, the canvas tag is the one that is one of the most important for gaming. We will only be looking at the 2d version of the canvas, with WebGL and WebGPU being left for a future book. This will give us the power to create an arcade game, so the project will be space miner, where players must mine an asteroid field while avoiding hostile competitors.

9. CSS Animation

While creating animation within a canvas is possible, you can also animate the styles and layout of a page by using CSS Animations. We will take a look at the animations and some of the issues there are with using the animation features. This will result in a project where we create the card game Solitaire.

10. JavaScript Asynchronous programming

Today, having web-based software tools is commonplace. This was not always the case. One of the things that allowed for this was the use of Ajax, which revolves around the XMLHttpRequest() function that allows retrieving information from a server in the background. This was a bit complicated so later versions of JavaScript helped synchronize asynchronous calls using promises. The power of asynchronous work is that you can continue working while other work happens in the background. This lead to the WebWorker API allowing you to have threaded JavaScript programs. We will experiment with threading a program by creating a Four in a Row game that will use web workers for the AI.

11. Where to Next

We then conclude the book by taking a look at upcoming material that will be covered in other books.


Why from scratch?

There is a bit of a fringe trend in programming that I hope continues to grow. This is known as from scratch or handmade programming where the idea is that you create a project without using third-party libraries. Some people within this fringe will even re-write the standard library and use only their own code with a minimal amount of system calls. I believe that Jhonathan Blow (developer behind “Braid” and “The Witness” is probably the most extreme where not only is he writing his own standard library, but it is for his own programming language currently being called Jai.

My own projects have tended to be from-scratch projects as I tend to suffer from NIH Syndrome. NIH stands for Not Invented Here and is where a programmer has a strong dislike of using third-party libraries or code. As I have aged, this has relaxed a bit but is still an issue I have. The reason I had such strong NIH tendencies is largely due to one of my earlier consulting jobs where I had to use a third party system without any access to the source code. There was a deadlock bug that was happening, so we had to generate huge log files in order to try to isolate where the bug was occurring. We first narrowed the code down to a single function and then went through the function and found that the deadlock happened with a call to the third-party framework. They would not acknowledge the issue and we needed to get the system working so I ended up having to come with a kludge work-around that would get around the issue.

Another reason for my NIH tendencies is that writing everything means that you understand what is happening with your code. From a teaching perspective, this is probably the best reason to not rely on libraries. Writing your own versions of code lets you understand the underlying concepts that a library would use. While your own code may not be as fast as a heavily optimized library written by experts, not all popular libraries are as optimized and well-written as people think they are. Even if they are, libraries must be general purpose to be useful. The problem is that general purpose code tends to necessarily need to have overhead to cover all the different use cases. This means that a poorly written piece of code that is streamlined to a particular task can be as fast or faster than an optimized piece of general purpose code.

The current problem with libraries is that it is no longer a matter of grabbing a library and being able to use it in your project. Libraries now have their own dependencies. Sometimes the dependency chain can run through several levels. Making this worse is that different versions of a library may be different that a new version of a library may break a dependency. This is so bad that now you need a special tool called a package manager that handles the dependencies for you. The security implications of this have not been thoroughly considered. If you need to use an older version of a library to allow all the libraries to work, then you are using an unpatched version of the library increasing the number of potential security vulnerabilities your code will have. This is a far bigger problem than people want to accept due to the ease of using libraries, but suspect that it will start biting people badly in the future.

I am not sure that AI generated code should be counted as from scratch code. My experience is that often the AI tools simply handle boilerplate. This fits in with the idea behind from scratch. Having the AI write functions for you, unless it is code you could easily have written yourself.

I am a programmer, not an artist or a musician, so while I will still try to create all the art and sound effects myself am not going to be strict about from scratch for game assets.

While from scratch work is good for personal projects, it is not really practical for commercial projects as writing everything adds a substantial amount of time to a project and commercial projects already have unrealistic deadlines that having to write everything from scratch is not realistic. Having a team that scrutinized libraries and limiting the company only to well vetted code would be advantageous but is not done often enough.

← previous section
Who this is for and what do I need?
next Chapter →
Chapter 2: HTML Basics
Table of Contents