Build Your First Game in JavaScript
Erik Onarheim




About me
- Software Engineer
- Hobbyist Game Developer
- Open Source
- Runner


erikonarheim.com




Making Games in the Web!?!
HTML5 Canvas
The HTML Canvas Element
// Create canvas
const canvas = document.createElement('canvas');
// Set resolution in pixels
canvas.width = 800;
canvas.height = 600;
<!-- Create canvas and set resolution in pixels -->
<canvas width="800" height="600"></canvas>
Creating a Canvas

<canvas width="100" height="100"></canvas>
<style>
canvas {
width: 100px;
height: 100px;
}
</style>

<canvas width="100" height="100"></canvas>
<style>
canvas {
width: 200px;
height: 100px;
}
</style>
Resolution and Size
Painting that masterpiece
Graphics Context
const canvas = document.getElementById('my-game-id');
const graphicsContext = canvas.getContext('2d');
Rectangles
// Fill
graphicsContext.fillStyle = 'red';
// x, y, width, height
graphicsContext.fillRect(50, 50, 100, 100);
// Lines
graphicsContext.strokeStyle = 'black';
graphicsContext.lineWidth = '3px';
// x, y, width, height
graphicsContext.strokeRect(50, 50, 100, 100);
Circles
// Fill
graphicsContext.fillStyle = "blue";
// Lines
graphicsContext.strokeStyle = "black";
graphicsContext.lineWidth = 3;
// x, y, radius, start angle, end angle
graphicsContext.arc(150, 150, 100, 0, Math.PI * 2);
graphicsContext.fill();
graphicsContext.stroke();
Text
// Fill
graphicsContext.fillStyle = "lime";
// Lines
graphicsContext.strokeStyle = "black";
graphicsContext.lineWidth = 1;
// Text
graphicsContext.font = "80px Consolas";
// text, x, y
graphicsContext.fillText("Hello MDC 2020! ❤", 10, 150);
graphicsContext.strokeText("Hello MDC 2020! ❤", 10, 150);
Images
// Optional
graphicsContext.imageSmoothingEnabled = false;
// Load the image
const image = new Image();
image.src ="path/to/img.png";
image.onload = () => {
// Draw the image
};

graphicsContext.drawImage(image, 0, 0);
graphicsContext.drawImage(image, 0, 0, 50, 50);
graphicsContext.drawImage(image,
// Source
96, 0, 32, 32,
// Destination
0, 0, 32, 32
);
HiDPI Displays
- Logical Pixels
- Device Pixels

const canvas = document.getElementById('hidpi-fix');
const logicalWidth = canvas.width;
const logicalHeight = canvas.height;
// Increase resolution
canvas.width = logicalWidth * window.devicePixelRatio;
canvas.height = logicalHeight * window.devicePixelRatio;
const img = new Image();
img.onload = () => {
// Scale drawing context
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(img, 0, 0, logicalWidth, logicalHeight);
}
HiDPI Correction
#hidpi-fix {
width: 400px;
height: 400px;
}
Affine Transformations

Translate, Rotate, and Scale
// scale(x, y)
graphicsContext.scale(2, 2);
// translate(x, y)
graphicsContext.translate(x, y)
// rotate(radian)
graphicsContext.rotate(Math.PI / 2)
Save and Restore
graphicsContext.save()
graphicsContext.restore()
graphicsContext.translate(x, y);
graphicsContext.rotate(radians);
graphicsContext.scale(sx, sy);
graphicsContext.drawImage(mySprite, 0, 0);
Game Loop
Game Loop
let mainloop = () => {
requestAnimationFrame(mainloop);
// update and draw game
};
mainloop();
Timing & Frames Per Second
let lastTime = performance.now(); // Date.now()
let mainloop = () => {
requestAnimationFrame(mainloop);
const now = performance.now(); // Date.now()
let elapsedMs = now - lastTime;
let fps = 1 / (elapsedMs / 1000);
// update & draw your game
lastTime = now;
};
mainloop();
\frac{16.6ms}{frame} * \frac{1s}{1000ms} = \frac{0.00166s}{frame}
(\frac{0.00166s}{frame})^{-1} = \frac{60 frame}{s}
Time Based Movement
const updateNotTimeBased = (box: Box) => {
box.x += box.v;
};
const updateTimeBased = (box: Box, delta: number) => {
box.x += box.v * (delta / 1000);
};
Input
Keyboard

const keybuffer: string[] = [];
document.body.addEventListener("keydown", e => {
const index = keybuffer.indexOf(e.key);
if (index === -1) {
keybuffer.push(e.key);
}
});
document.body.addEventListener("keyup", e => {
const index = keybuffer.indexOf(e.key);
if (index > -1) {
keybuffer.splice(index, 1);
}
});
Pointer
const pos = {
x: 0,
y: 0
};
canvas.addEventListener("pointermove", e => {
pos.x = e.clientX - canvas.offsetLeft;
pos.y = e.clientY - canvas.offsetTop;
});
Audio
WebAudio API

AudioContext
const audioCtx = new AudioContext();
const play = document.getElementById('play');
play?.addEventListener('click', () => {
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
// play audio
});
AudioBufferSourceNode
const audioResponse = await fetch('./path/to/my/cool.mp3');
const rawAudioBuffer = await audioResponse.arrayBuffer();
const decodedBuffer = await audioCtx.decodeAudioData(rawAudioBuffer);
const audioSourceNode = audioCtx.createBufferSource();
audioSourceNode.buffer = decodedBuffer;
GainNode
const volumeNode = audioCtx.createGain();
volumeNode.gain.value = 0.5;
// https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/setTargetAtTime
// After each .1 seconds timestep, the target value will ~63.2% closer.
// This exponential ramp provides a more pleasant transition in gain
volumeNode.setTargetAtTime(0.5, audioCtx.currentTime, 0.1);
Connecting and Playing
// Connect the graph
audioSourceNode.connect(volumeNode).connect(audioCtx.destination);
// Play AudioBufferSourceNode.start([when][, offset][, duration]);
audioSourceNode.start(0, 0);
Collisions
Circles

Bounding Box

Tile Based

Grouping

Resolution



Newish and Upcoming Stuff
- GamePad API
- Fullscreen API
- WebGL2
- WebGPU
- WebUSB
Game Engines









Excalibur Start
// index.ts
import { Engine, Loader } from "excalibur";
const game = new Engine({
width: 800,
height: 600
});
game.setAntialiasing(false);
const loader = new Loader();
// Add things to loader
// Make a game!
game.start(loader);
npm install excalibur --save-exact
<script src="https://unpkg.com/excalibur@latest/dist/excalibur.min.js" />
Resources
// index.ts
import { Resources } from "./resources";
// ...
const loader = new Loader();
// Add things to loader
for (let r in Resources) {
loader.addResource(Resources[r]);
}
// Make a game!
game.start(loader);
// resources.ts
import { Texture } from "excalibur";
import botImage from "./img/excalibot.png";
import blockImage from "./img/block.png";
import jumpSound from './snd/jump.wav';
import coinSound from './snd/coin.wav';
export const Resources = {
bot: new Texture(botImage),
block: new Texture(blockImage),
jump: new Sound(jumpSound),
coin: new Sound(coinSound)
};
Scenes & Actors
const game = new Engine(...)
const scene = new Scene(game);
const actor = new Actor({
x: 50,
y: 50,
width: 32,
height: 32
});
scene.add(actor);
// Tranistion to the scene
game.add("level", scene);
game.goToScene("level");
export class Player extends Actor {
constructor(x, y, width, height) {
super({x, y, width, height});
}
onInitialize(engine: Engine) {
// initialize logic
}
onPostUpdate(engine: Engine, delta: number) {
// do stuff every update
}
onPostDraw(ctx: CanvasRenderingContext2D) {
// custom drawing
}
}


Animation
const spriteSheet = new SpriteSheet(Resources.bot, 8, 1, 32, 32);
const idleAnimation = spriteSheet.getAnimationByIndices(
engine,
[2, 3],
800
);
actor.addDrawing("idle", idleAnimation);
actor.setDrawing("idle");

Input
// actor.ts
onPostUpdate(engine: Engine, delta: number) {
// Player input
if(engine.input.keyboard.isHeld(Input.Keys.Left)) {
this.vel.x = -150;
}
if(engine.input.keyboard.isHeld(Input.Keys.Right)) {
this.vel.x = 150;
}
if(engine.input.keyboard.isHeld(Input.Keys.Up) && this.onGround) {
this.vel.y = -400;
this.onGround = false;
}
}
Collision
Prevent | Passive | Active | Fixed | |
---|---|---|---|---|
Prevent | None | None | None | None |
Passive | None | Event Only | Event Only | Event Only |
Active | None | Event Only | Resolution | Resolution |
Fixed | None | Event Only | Resolution | None |



// Default
actor.body.collider.type = CollisionType.PreventCollision;
actor.body.collider.type = CollisionType.Passive;
actor.body.collider.type = CollisionType.Active;
actor.body.collider.type = CollisionType.Prevent;
Audio
import { Resources } from './resources';
// Play the sound
Resources.jump.play();
// Pause the sound do not rewind
Resources.jump.pause();
// Stop the sound and rewind
Resources.jump.stop();
Demo!

Resources



Build Your First Game in JavaScript
By Erik Onarheim
Build Your First Game in JavaScript
- 1,512