Project 1: Basic Drawing and Interaction

Switching away from the server-side stuff after getting the stack setup, I've opted to the basic game 'drawn', and 'playable', if you can call it those.

Drawing

Since I'm using JS and HTML canvas I need to draw each shape onto the canvas setting each individual shapes co-ordinates and size. This sounds simple, but the more shapes you draw, and the more you don't want them to overlap, or to add zoomed in/out shapes it gets much more complicated than you'd think. This is a prime example of why a solid grasp on basic mathematics is good for developers.

Shape class

Repeating the setting of context data, and the drawing of each shape became tedious and took a big chunk of my code-base after not long, so I decided to simplify by creating a Path2D extended class.

class Shape extends Path2D{
	constructor(params){
		super();
		this.shape = params.shape || 'rectangle';
		this.name = params.name;
		this.x = params.x || 0;
		this.y = params.y || 0;
		this.width = params.width || 0;
		this.height = params.height || 0;
		this.fillStyle = params.fillStyle || "#FFFFFF";
	}
	draw(){
		context.fillStyle = this.fillStyle;
		if(this.shape == 'circle'){
			context.beginPath();
			context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
			context.fill();
			context.closePath();
		}else if(this.shape == 'semi'){
			context.beginPath();
			context.arc(this.x, this.y, this.width/2, Math.PI, 0);
			context.fill();
			context.closePath();
		}else if (this.shape == 'rectangle'){
			context.fillRect(this.x, this.y, this.width, this.height);
		}
		context.fillStyle = defaultFillStyle; // Reset back to default
	}
}

Pretty simple, I pass the shape I want to draw, x,y co-ordinates, width and height, and the fill. Not included above, but the class also accepts, and draws the shape stroke.

I then call the draw method of the new Shape, and it sorts everything for me.

Interaction with Event Handlers

Next up, for the game to be a game and not just some visual media, we need to be able to interact with it.

Basic interaction is simple enough, I threw in a 'click' EventListener, then take the event/click's X/Y position and subtract the canvas's offset from the HTML body (to have 0,0 set to the top-left of the canvas, and not the HTML page).

This new X/Y, which I will just call X/Y is then compared to the X/Y locations of each shape. If the event X/Y occurs in a location greater (or equal) than the shape X/Y, and less than (or equal) Shape X/Y plus the shape Width/Height I then do whatever action I require.

This is another thing I've simplified by creating a function:

function clickableCheck(x,y,shape){
	if(
		y > shape.y && y < shape.y + shape.height
		&& x > shape.x && x < shape.x + shape.width)
	{
		return true;
	}
	return false;
}

The function above is even simpler too, as all you need to do to check for a click, is pass a Shape object, created by the Shape class earlier in this post!

Fun Fact! Shape here, is actually called clickable in my code-base, but I've changed it to make more sense without context.