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.