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.
- Apache
- Bitnami with WordPress
- IIS Express (included with Visual Studio)
- XAMPP
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.
HTML
- DOM
- HTML canvas tag
CSS
- border
- margin
- padding
JavaScript
- 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
Methods
- 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.
- 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)
Reference
- HTML5 – Canvas
- MDN Web Docs
- MDN Games
- W3Schools JavaScript
- https://www.youtube.com/watch?v=5E5bzjcKx5w
