Next page | Contents page |

Creating games to run in browsers

This set of notes is designed to guide beginners into simple programming for making games that run in browsers. There are many kinds of games of course but we will focus on graphical ones.

Examples of games created using the techniques to be described in these pages may be found at grelf.itch.io.

Along the way you learn something of HTML and Javascript, both of which are used to make web pages and web applications. They will not be covered exhaustively but from this guide you could always go on to learn more. Links to further information will be provided. Only very plain Javascript will be used here, to be sure that examples will work in all browsers.

First a tiny bit of HTML

Browsers display pages from HTML files. HTML stands for HyperText Mark-up language. It is written as text, so a simple text editor is all you need to get started. An HTML file contains various special "elements" to indicate what each piece of text denotes: a title, a paragraph, an image, a link to another page, or various other possibilities. We will only need a few such elements to make graphical games, so we will not be showing everything that can be done with HTML.

Here is an example of the simplest possible HTML file:


<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <p>A paragraph of text.</p>
  </body>
</html>

The angle brackets, < and >, form "tags" which are the start and end of "elements". Ending tags always begin with </. Notice that there are 2 parts: a head element and a body element. Notice also how complete elements (start and end tags) are nested within other elements. Only two things will be displayed by this page. "My page" will appear in the title bar of the browser's window (or on a tab) and the paragraph of text will appear inside the window.

A simple example like that can be saved as a text file and then opened in a browser. However, because we will be focussing on graphics there are security considerations that mean that your browser may not allow our files to be launched from disc. So after the first exercise we will explain how we get round that.

This introduction includes many hands-on exercises to give real programming experience. Do make time to do the exercises rather than merely reading through this text. Practice is the only way to make it stick. You will also get some satisfaction from creating things and seeing them work.
Answers will be provided at the end.
A simple landscape with sun and trees
Next page | Contents page |