Week 5

This week, we extended the Rectangle class to create a Coin class. Because of the way classes work, we were able to reuse most of the code, except for the render function. We grabbed an image of a coin and rendered it. Additionally, we created a new array for coins only and made players (rectangles) able to 'pick up' the coin by removing it from the coin array when colliding. We made the canvas the size of the screen so our game will take up the whole screen, which involved editing the canvas. Let's take a look at the code.

The Coin class and loading our image

var coinImage = new Image();
coinImage.src = "coin.png";

class Coin extends Rectangle {
	constructor(x, y, w, h) {
		super(x, y, w, h);
		this.image = coinImage;
	render() {
		ctx.drawImage(this.image, this.x, this.y, this.width, this.height);

We created an image variable called coinImage. This is how we load images, with coin.png being the file that we load. Our coin class is pretty self-explanatory, the only major difference between it and the Rectangle class is the render function. Here is the appropriate MDN article on drawImage().


We now use a separate array for coins. This allows us to use different collision functions for rectangles and coins. I'll skip the declaration of it and putting things into it to talk about the changes to main() and the Rectangle class.

for (var i = 0; i < coinArray.length; i++) {

This code goes in main() and makes sure we update and draw all the elements in coinArray, similar to how we did with rectArray.

for (var i = 0; i < coinArray.length; i++) {
	if (coinArray[i] != this && checkCollision(this, coinArray[i])) {
		coinArray.splice(i, 1);

The above piece of code goes in our Rectangle update() function, at the end. This code deletes a coin if a rectangle collides with it, splice() being the function that gets rid of the object. You can read more about it here.

Changes to the canvas

We changed our index.html. It now looks like this:

<body style="margin: 0">
	<script src="main.js"></script>
	<canvas id="canvas" width="0" height="0"></canvas>

We now have a body with margins set to 0. This is so that our canvas can take up the entire screen, as each html document by default has a non-zero margin. I also set the canvas width and height to 0 to show that whatever this value is doesn't matter with our addition to main.js.

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

The above code is placed immediately after we declare the canvas variable in our window.onload function. This sets our canvas' height and width to that of the screen. To make this work with the rest of our program, we now need to clear the rest of our screen before we draw. That code will look like this:

//clear screen
ctx.fillStyle = "#FFF";

We now use the width and height of the screen as the width and height of our white rectangle to clear the screen. Now there won't be trails of our player following us when we go outside our 100x100 square that we had before.