A collection of web games I made and host.

• Game Website
  • Platform Party - A real-time multiplayer 2D platformer.
  • Snake - The classic snake game with a high-score board.
• Source code

These games were made primarily using TypeScript and the HTML5 canvas API.

Image processing

The first API I leveraged was the canvas scripting API, which offered useful image processing functions. To start using this feature, I added a canvas element in my main HTML template file

1

 <canvas id="game"></canvas>

Then, I get the CanvasRenderingContext2D interface from this element in a separate script.

1

 const ctx = document.getElementById("game").getContext("2d")

This interface contains useful methods, such as

1

 drawImage(bitmap, x, y, width, height)

which I use to draw sprites on the screen. This method requires the image in the form of a image bitmap and to do that, we can use createImageBitmap, which returns a Promise<ImageBitmap>.

1
2
3
4

createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)