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.
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.
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.