While the game we build will be written in JavaScript, we’ll need to write some basic HTML so that your game can be embedded into a website. JavaScript can be used in many different places, but by far the most common (and accessible) is when it’s embedded into a website. Embedding your game’s code into a web page allows you to load it from a web-browser on any computer, mobile or tablet.

The goal for this stage is to ensure that you have the required HTML to install Phaser into your wepage. However, you’re more than welcome to explore and expand on the task by adding some fancy elements to your webpage if you want to!

If you are completely new to HTML and CSS, you might want to check out the introduction pages below;

Space Avengers HTML

While you can use HMTL to draw image and play sounds on a website, we’re going to focus on using JavaScript to do these things, so the HTML for this project can be relatively simple. We just need to setup an area on the screen that Phaser can take control of to place our game.

The following HTML shows the most simple solution we can use for Phaser;

<html>
<head>
    <title>Space Avengers</title>
</head>
<body>
    <div id="gameContainer"></div>
</body>
</html>

Now, this page is exceptionally basic and has a horrible plain white background that’s very 1990’s. While it’s possible to spruce up this page with some images and a header bar, we’re mostly interested in making the background black and making sure the game appears in the middle of the screen.

The basic HTML can be broken down as follows;

<hmtl> All HTML pages should start with <html> and end with </html>.
<head> HTML pages nearly always contain a <head> section. Everything between these tags tells the web-browser important information about the page, but doesn’t describe anything that’s on the page itself.
<title> In this simple example, the only thing we really need in the <head> section is a . This tells the browser what the title for the page should be on the tab or the browser title bar.
<body> The body section of a page describes everything that makes up the content of the page itself. This section can contain a massive range of tags including <h1> - <h6> for headers, <p> for paragraphs, for images, for links, <table> for tables of data.
<div> A ‘div’ describes a ‘division’ or ‘section’ of an HTML document. In itself, it doesn’t really do much other than group content together - but as you’ll learn later, CSS is a method for applying styles and colours to bits of your page and <div> tags are really useful for decide which bits of a page should look a certain way.

HTML Tag Reference

The following list presents some HTML tags you might want to try to add to the body of your page. Maybe you would like to add the title of the game to the top of the page or your name to the bottom.

Note. You won’t be able to control where anything is positioned on the page just yet (that will come later with CSS), but you can get all of the elements you would like to see on the page in HTML now.

Tag Description
<h1></h1> A top level header tag - used for the title of the page.
<h2></h2> A second level header tag (section header). Headers go right down to h6.
<p></p> Any paragraph of text which makes up the body of your page should go between these.
<b></b> Everything between these tags should appear bold
<i></i> Everything between these tags should be in italics
<div></div> Marks a ‘division’ or ‘section’ of the document. We will use one of these to tell Phaser where it should create the game later.
<a href=”URL”> </a> Creates a link to another page on the web. href is a setting for the tag and the URL points to the page you want to visit. Everything between the two a tags will become the link text.
<img src=”URL” /> An img tag places an image on your page. It doesn’t need a closing tag. The URL in ‘src’ is a link to where we should load the image from.
<script></script> Any JavaScript written between the two script tags will simply run as JavaScript! You can place some script tags in your page and try console.log(“Hello!”); if you like!

However, while HTML is used to say what the structure of a webpage is and what should appear on the page, you need to use another language to describe what the page should actually look like. That language is called CSS…

What is CSS?

CSS stands for Cascading Style Sheet - another mouthful for something that’s simpler than it sounds! Simply put, where HTML describes what appears on a page, CSS describes how it should be laid out and what it should look like.

CSS allows you to define a set of rules that a web browser will use to render your document. For instance, take a look at the following code;

h1 { color: red; }
p { font: "Arial" }

The above rules will make for a pretty horrible website, but they can be broken down as follows;

  • h1 { color: red; }: The first rule tells the web-browser that the content of every <h1> tag should contain red text.
  • p { font: “Arial” }: The second rule tells the browser that every <p>paragraph</p> should use the font ‘Arial’.

CSS can be embedded directly into an HTML page or linked to from many pages as an external file. It’s generally better to use a separate file - that was if you share CSS between multiple pages on your site the user only has to download the data once (instead of making every page bigger). It’s also more convenient for you - as you only have to change a single file and the look of every page on your website could potentially change.

CSS rules have the following format;

selector { effect }

The selector part tells the browser which parts of the document this rule should apply to. The effect part tells the browser what style to apply to that part of the document. For our case, we mostly just want to use the tag name as the selector (h1, h2, p, body, div, etc) and there is a table of basic rules shown in the reference below.

As with HTML, CSS isn’t really a focus of this course - we want to move onto programming games as soon as possible, but if you’re interested in reading more about CSS then you’re more than welcome to.

CSS Reference

THe following table gives some examples of the styles/effects you can apply with CSS. Feel free to experiment with these when building your page.

Tag Description
background-color: [color] Set the background color for this element. [color] is usually defined using a #RRGGBB value like #FF00FF
color: [color] The color of any text that appears in this section.
font-family: “[Font]” Change the font used for all text that matches this selector. Examples are “Arial”, “Verdana” or “Tahoma”.
font-size: [Size] Change the size of the font used for the text matching this selector. Examples are ‘20px’ or ‘20pt’.
margin: [Size] Add a margin around this element. Used if you want to add/remove space around an item. Size is usually ‘4px’.
margin-top: [Size] Apply a margin, but just to the top of this element.
padding: [Size] Padding similar to margin and adds space around an element. An example is ‘2px’.
padding-bottom: [Size] Apply padding to a single side of this element.

Extensions

  • If you already know some HTML / CSS, then feel free to go wild and make your page much more fancy.
  • If you’re interested in making your game look a bit different, now is also a good time to head over to the interent and grab some alternative sprites / artwork for your game!

Solution

As we want to get straight to coding with JavaScript and learning something about game programming, you’re more than welcome to just copy the content of the two requires files for your project below into your Brackets project.

<!DOCTYPE HTML>
<html>
<head>
    <title>Space Avengers</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>Space Avengers</h1>
    <div id="gameContainer"></div>
</body>
</html>

body {
    margin: 0px;
    padding: 0px;
    background: black
}

h1 { 
    color: #dddddd;
    background-color: #333333;
}