Toolbox Aid

September 22nd, 2021 10:54 AM Mr. Q Categories: JavaScript, Learning

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.

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.

• Visual Studio Code
  • (This is what we will be using for our development)
  • Install video with Web Server
• Eclipse
• IntelliJ
• NetBeans
• Visual Studio

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.

HTML

• DOM

CSS

• border
• margin
• padding

JavaScript

• alert
• Console.______
• let
• Understanding Scope of Visibility in JavaScript Programming
• for
• deltaTime
• Array
  • push
  • pop
• Class (Object Oriented Programming OOP) in JavaScript
  • Understanding Classes in JavaScript: Functions, Methods, Access Modifiers, and Lifecycle
  • The power of classes in javascript (Encapsulation, Inheritance, & Polymorphism)
• window.addEventListener
• Canvas object – Context for 2D
  • clearRect
  • fillRect
  • width
  • height
  • font
  • fillStyle
  • textAlign
  • fill
  • fillText
  • requestAnimationFrame
  • beginPath
  • closePath
  • lineWidth
  • stroke
  • arc
  • strokeStyle
  • globalAlpha

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

Methods

• 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.

• Model the Solar System
• Goffer Punch (an original game)
• John Conway’s Game of Life
• Pong
• Snake
• Tic Tac Toe
• Connect 4
• Asteroids
• Tetris
• Space Invaders
• Tanks
• Frogger
• Dig Dug
• Donkey Kong
• Mario
• King of the Ice Berg (an original game)

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 created need to be stored in the root directory/folder. Below is a short list which you can choose from.

• Apache
• Bitnami with WordPress
• IIS Express (included with Visual Studio)
• XAMPP

Reference

• HTML5 – Canvas
• MDN Web Docs
• MDN Games
• W3Schools JavaScript
• https://www.youtube.com/watch?v=5E5bzjcKx5w

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