Enhancing Skills

Complete Game Development learning using HTML5, CSS & JavaScript

Game development steps start to finish; layout of everything needed to create JavaScript games. Using the three pillars of Object Oriented Programming, (Encapsulation, Inheritance, & Polymorphism) to keep our code clean and easy to maintain. Why use JavaScript for game programming: #1 answer is, it will run on any device that supports a modern browser. Source control is in scope for this article, but not the focus. Supporting links will be included for the supporting game posts,

Click the links below to learn how to install the required tools: (at the moment, I only have a Windows box. If you have a Mac or Unix, would you be nice enough to share the steps?)

This is a WIP (work in progress), this comment will be removed when complete.

Application Server

For your games to work, you need to host them on an application server. Any application server will work. The files that we will create need to be stored in the root directory/folder. Below is a short list which you can choose from.

Integrated Development Environment (IDE)

An IDE is used to help develop your code. A feature that you should consider is IntelliSense which will help with your code completion.

Required JavaScript commands, HTML5 and CSS to learn

This will not be a JavaScript in-depth. We will focus only on the commands needed to write games. In addition, we will use a basic HTML5 DOM and little to no CSS.


  • DOM
  • HTML canvas tag


  • border
  • margin
  • padding


  • Console.______
  • Canvas object
  • Context for 2D
    • width
    • height
    • font
    • fillStyle
    • textAlign
    • fill
    • fillText
    • clearRect
    • fillRect
    • requestAnimationFrame
    • beginPath
    • closePath
    • lineWidth
    • stroke
    • arc
    • strokeStyle
    • globalAlpha
  • Class
    • new
    • constructor
  • function/method
  • window.addEventListener
  • alert
  • let
  • Canvas
  • for
  • deltaTime
  • Array
    • push
    • pop

Object Oriented Programming

  • Encapsulation
  • Inheritance
  • Polymorphism

Game Engine Loop

As needed, additional capabilities will be added to the game engine loop. An example of capabilities to add are sprites, input controls (keyboard & joystick), collision detections, sound, tilemap, pan/scroll, parallax scrolling background, and Artificial Intelligence. These will all be turned into reusable classes or a framework to use.

Game States

  • Initialize
  • Playing
  • Over
  • Pause


  • Input
  • Update
  • Draw

Game Engine Math

Supporting classes will be needed, these topics will be covered as they are needed and then extended to add capabilities.

  • Math
    • Random
    • PI
    • SQRT
    • sin
    • cos
  • Physics
  • Gravity
  • Collision detections
  • Pathfinding

Games to develop

Where available, the original artwork will be downloaded and used as sprites.


Visual Studio 19 – C:\Users\{user}\source\repos

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.