Enhancing Skills

Complete Game Development learning using HTML5, CSS & JavaScript

Game development steps start to finish; layout everything needed to create JavaScript games. Using the three pillars of Object Oriented Programing, (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 include to the supporting game posts,

Click the links below to learn the 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, addition capabilities will be added to the game engine loop. An example of capabilities to add are: sprites, input controls (keyboard & joystick), collision detections, sound, tile map, pan/scroll, parallax scrolling background, and Artificial Intelligence. These will all be turned into re-usable classes or a framework to use.

Game States

  • Initialize
  • Playing
  • Over
  • Pause


  • Input
  • Update
  • Draw

Game Engine Math

Obviously, 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
  • Path finding

Games to develop

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


Visual Studio 19 – C:\Users\davidq\source\repos

Leave a Comment

Category Image
Category Image


Post Calendar
April 2023
Blog categories
Product tags