Brick Breaker

We are going to develop a Game called Brick Breaker based on a tutorial on MDN website. Unlike the original tutorial, we will take an Object-Oriented approach to the design and implementation of the game.

You will find a demo of the original tutorial here. Feel free to play the game and inspect the source code.

This module serves as an exposition to OOP in JavaScript. It also introduces you to the HTML Canvas element which is the backbone of Web-based (JavaScript based) Animations and Games.

We will not be able to finish this module in one lecture. We'll cover the initial steps and the remaining ones will be left to you as an exercise.

A Logistical Issue!

In this tutorial, we will link our JavaScript classes using the syntax of ES6 modules. Linking to ES6 modules in the browser, while you open the we app locally, is blocked by CORS policy. There are several ways to get around this issue. The one which I recommend, for now, is running your web app in a "local host".

If you are using VSCode, please install live server plugin and open your index.html file using the live server.

Almost every editor and IDE has a similar plugin, and in some cases like JetBrain's Webstorm IDE, the feature is built into the application