Complete Game Development learning using HTML5, CSS & JavaScript
September 22nd, 2021 10:54 AM Mr. Q Categories: JavaScript, Programming
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.
- 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, 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)
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