There are a lot of courses online that teach the basics of programming very well but they do so in a confined environment and its very hard/confusing for the learner to take this knowlege that he just learned and apply it to build something practical.
This course aims to fill this gap by helping students build a browser based game (pong) by expanding on the previous basic knowlegde of js programming.
Choosing a game as a project here as I believe this would keep things interesting and feel less of a chore while learning.
The course will try to replicate the classic pong game as seen here
At the end of the course the learner would have learnt the following:
- Basics of graphics (html canvas) in browser
- Important concepts related to game programming (game loop, collisions, etc)
- Organise/refactor your code as it grows beyond a single file
- Introduction to unit tests so they can make changes a lot more confidently without spending a lot of time manually testing.
- Introduction to basic AI techniques to add multiplayer functionality
- Quick guide to deploy their game so its accessble over the web. (using services netflify/github)
Every module (listed in the next section) will follow more or less the same pattern
- Go through the pong game and pick a feature that we are building in this module.
- Have a video guide that walks us through the implementation
- Have a article/doc that more or less explains the same things as in the video but in more detail.
- Have them solve toy examples in the sandbox that we provide for quick prototyping and learning
- Implement this feature in the main project.
- (Optional) Suggest further enhancements/improvements that could be done and give links to additional resources that the leaner can refer to if they want to implement it on their own.
- What are we building. Define/Explaing the scope of the project
- Differnent platforms where we can build games (mobile/desktop/web) and why are we building it in js?
- A quick intro of various game related terminology, graphics and the role of maths/physics in building a game
- Quick math/physics refresher
- Simple excerices
Pong - Geometry
- Introduction to cordinate geometry in games
- Walk through the various objects (ball/paddle/wall) present in the game
- Introduction to canvas and how is it different from the DOM and why are we using canvas to build our graphics and not DOM
- Draw shapes on the canvas using js
- What is a game loop and why do we need it
- Implement game loop in js
- Move objects around inside the game loop
- Introduce different ways in which the user can interact with the game
- Move objects around on the screen via keyboard/mouse
- We have now enabled the player to move objects around using their keyboard. But how fast must the objects move? Should the object keep moving faster (i.e accelerate) while the player holds down his key?
- Introduce the concept of velocity and acceleartion
- Implement the concept of velocity into the pong game
Unit Testing [Todo]
Multiplayer (same PC) [Todo]
Multiplater (Basic AI) [Todo]
Add scoring and a game menu (start/pause/exit) [Todo]
Deploy the code for the world to see [Todo]
Few ideas on how to improve / add more features to the game that the learners can try on their own. [Todo]