Step 1

Clone the starter code

git clone -b starter https://github.com/cs280fall20/brick-breaker.git

The starter code contains a minimal scaffolding to get us started.

The entry point for this tutorial is to animate an object (make it move around) in an HTML page. There are several different ways to achieve this. In its simplest form, we can create an HTML element and set its position with absolute values. Then, we can use JavaScript (or even just CSS) to update the position over the time. Therefore, effectively, the element will move around the HTML page and appears as being animated.

A better approach is to use HTML Canvas. You will find the following line in the index.html file (part of the starter package).

<canvas id="myCanvas" width="480" height="320"></canvas>

A <canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). It was first introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Today, all major browsers support it.

We will be using the <canvas> at a rudimentary level. There is a lot that can be done with it. You will find a detailed tutorial and documentation for Canvas API on MDN wed docs.