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.
COURSE SYLLABUS
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)
COURSE STRUCTURE
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.
OUTLINE
Introduction
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
Excercises
Game loop
What is a game loop and why do we need it
Implement game loop in js
Move objects around inside the game loop
Excercises
Keyboard interactions
Introduce different ways in which the user can interact with the game
Move objects around on the screen via keyboard/mouse
Excercises
Motion/Trajectory
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
Exercises
Collisions [Todo]
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]
Should this course be done in typescript instead of javascript? Personally, I feel defining types for the objects help me better reason about my code. Also the ability to come back after 2 weeks and just look at my .d.ts files to figure out what property do my object hold is a plus. I realise that benifits of using ts won’t be directly visibe in a (relatively) small project like this but just wanted to get everbody’s opinion on this.
We can add a small sandbox inside the monscool website where the user can excute js (like how we currently have for python in monschool website) which will help in quick prototyping and testing out the concepts just learnt.
But such a sandbox will not be helpful when coding the whole game as it will span over multiple files and the learner will have to code that on their desktop in an ide. So does it make sense to include a lightweight ide within the monschool platform (Something similar to the one p5js has)? Or we expect learners to code it on their desktop?
When I was looking at the outline, I was a bit confused. There are two things you’re including here. One is learning game development through JavaScript. The other is learning JavaScript through game development. I think they’re both heavy topics and mixing them together might probably reduce the completion rate.
It might be easier to follow for a learner with basics of javascript if this was a two part course with the first part focusing on concepts related to javascript code organization, unit tests, typescript, deployment, code execution, etc this covering the pre-requisites.
On the other hand, that part would then be boring for adult learners who might find it more motivating to build something real world, like a ping pong game. So complicated.
If the pre-requisites are eliminated through a web IDE it does make it look like we can have the cake and eat it too. But I am not sure how practical that is. Firstly, the technical complexity of building something like codesandbox.io; secondly does it do justice to the learner who’s looking for a real-world exposure?
If we look at codelabs from official Android or Flutter docs, for example, they quickly cover these pre-requisites like IDE setup in one or two chapters. Because having a full-blown IDE is indeed the right way.
As for typescript, would it be possible to write everything in .ts files, but make types optional and use it only in some core logic part?
When I was looking at the outline, I was a bit confused. There are two things you’re including here. One is learning game development through JavaScript. The other is learning JavaScript through game development. I think they’re both heavy topics and mixing them together might probably reduce the completion rate.
This is not a “game developement course” per se. This course is more along the lines of:
"Hey you just learnt the basics of javascript and are now itching to build something in it but are not sure how to start. Then tag along as this course will teach you that by implementing a ping pong game in javascript. During which you learn how to organise your thoughts and your code as they start growing beyond a single file."
You pick up the concepts of game developement along the way as a side affect (more like how you end up learning networking/webrtc concepts as a side effect when your main motivation is to actually build a chat app) . The main aim of this course is to help learners feel more confident when they start with their next project (in whatever domain may that be).
If the pre-requisites are eliminated through a web IDE it does make it look like we can have the cake and eat it too. But I am not sure how practical that is. Firstly, the technical complexity of building something like codesandbox.io; secondly does it do justice to the learner who’s looking for a real-world exposure?
You are probably right. Its not fair to say this course delivers real life exporsure when I limit them to code in an constrained environment which will probably lack many features compared to what a native ide can provide. I do think we should have a small sandbaox (like the one for python on monschool) where learners can try out exercises and get quick feedback but end up building the main project in their desktop in an ide
If we look at codelabs from official Android or Flutter docs, for example, they quickly cover these pre-requisites like IDE setup in one or two chapters. Because having a full-blown IDE is indeed the right way.
Yup makes sense, will have section dedicated on how to setup the project in their own desktop
As for typescript, would it be possible to write everything in .ts files, but make types optional and use it only in some core logic part?
Ya i think so. We can change the tsconfig to be very lenient. But I just realised introducing typescript would mean introducing npm. Do you think that would increase the complexity?