Breakout From Scratch - Series Introduction

Jake Klassen / August 19, 2020

3 min read

series

gamedev

javascript

In this tutorial we'll setup a few files we need to get started.

index.html#

Let's start with the index.html file:

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <title>Breakout</title>
8
9    <link rel="stylesheet" href="style.css" />
10  </head>
11
12  <body>
13    <div id="container">
14      <canvas width="640" height="360"></canvas>
15    </div>
16
17    <script src="main.js" type="module"></script>
18  </body>
19</html>

Pretty straightforward. This is a pretty common html5 snippet with some extra content. Things to note are:

the style.css reference
the <canvas> tag we'll use to render our game
the <script> tag referring to our main.js script with a type="module"

The width and height of 640x360 is intentional because it's a 16:9 resolution, a common screen ratio.

style.css#

Next, let's create the style.css file:

style.css

1/* Reset */
2* {
3  padding: 0;
4  margin: 0;
5}
6
7#container {
8  margin: 0;
9  padding: 0;
10  height: 100vh;
11  width: 100vw;
12  display: flex;
13}
14
15canvas {
16  background: #000000;
17  margin: auto;
18  padding: 0;
19  display: block;
20}

If you don't know what this is doing don't worry, this is the only bit of CSS we'll use in this book, and it's main purpose is to center the canvas vertically and horizontally on the page. It also sets the canvas background to black. By default the canvas background is white.

.prettierrc#

Let's create a .prettierrc file:

.prettierrc

1{
2  "semi": true,
3  "trailingComma": "all",
4  "singleQuote": false
5}

This is an optional file, but it's nice to have the auto formatting on save in vscode.

jsconfig.json#

Let's also create a jsconfig.json file to enable some settings and strict typing:

jsconfig.json

1{
2  "compilerOptions": {
3    "target": "ES2019",
4    "checkJs": true,
5    "module": "esnext",
6    "strict": true
7  }
8}

.vscode/settings.json#

We also need to change a setting for vscode to include the .js extension on our JavaScript imports. Otherwise they won't work correctly in the browser.

Create the file .vscode/settings.json:

.vscode/settings.json

1{
2  "javascript.preferences.importModuleSpecifierEnding": "js"
3}

main.js#

And lastly the main.js file:

main.js

1const canvas = /** @type {HTMLCanvasElement} */ (document.querySelector(
2  'canvas',
3));
4const ctx = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));

We start by querying and storing the canvas element. document.querySelector('canvas') would return the type HTMLCanvasElement | null, but we know better in this case and would rather not have the optional chaining. To account for this we use an inline @type of HTMLCanvasElement. Note the extra (). We need to wrap the expression we are applying the inline type too.

Then we obtain a rendering context, specifically the 2d context. There are more contexts, such as webgl, but we won't use those. We need the canvas context to actually draw something. The <canvas> itself does not provide this since it's only a DOM node. We are also typing this statement to avoid the | null return type from getContext().

View the Results#

Open index.html in your browser and you should see a black canvas centered on the screen.