things to do

thingsToDo.js

// you could change the height and width using something like this in the Box function.
this.width = width;
this.height = height;

// you could even make width and height random by doing something like:
width = Math.random() * 50;
heigh = Math.random() * 50;

// you could do other math things: https://www.w3schools.com/jsref/jsref_obj_math.asp
// ie. a sine wave, the "sin" function makes a wave sin(x) = "a wavy y"
if (event.key == "ArrowRight") {
  if(me.x < 450) {
    me.x = me.x + 5;
    me.y = Math.sin(me.x) * 5
  }
}

// you can change the shapes of things 

// triangle
function drawTriangle(x, y) {
  ctx.fillStyle = "blue"; 
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + 50, y + 50);
  ctx.lineTo(x + 100, y);
  ctx.fill();
}
// this is called with:
drawTriangle(100, 100);

// circle
function drawCircle(x, y) {
  ctx.fillStyle = "blue"; 
  ctx.beginPath();
  ctx.arc(x, y, 25, 0, 2*Math.PI);
  ctx.fill();
}

// this is called with:
drawCircle(100, 100);

// you can use mouse events!
// here is more events if your curious: https://www.w3schools.com/jsref/dom_obj_event.asp
document.addEventListener('click', event => {
   me.x = event.clientX;
   me.y = event.clientY;
});

// you can add a draw image

function drawImage(x, y) {
  image = new Image();
  // this image src can be any link to an image
  image.src = "http://31.media.tumblr.com/63e10630e5216c6af8798ec870acfbbc/tumblr_n4pl0xYGuF1s3bc1no1_400.gif";
  ctx.drawImage(image, x, y, 50, 50); 
}

drawImage(100, 100);

// you can draw a face
function drawFace(x, y) {
		ctx.beginPath();
    ctx.arc(x, y, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(x + 35, y);
    ctx.arc(x, y, 35, 0, Math.PI, false);  // Mouth (clockwise)
    ctx.moveTo(x - 10, y - 10);
    ctx.arc(x - 15, y - 10, 5, 0, Math.PI * 2, true);  // Left eye
    ctx.moveTo(x + 20, y - 10);
    ctx.arc(x + 15, y - 10, 5, 0, Math.PI * 2, true);  // Right eye
    ctx.stroke();
}

drawFace(100, 100);

// you can draw a heart
function drawHeart(x, y) {
	ctx.beginPath();
  ctx.moveTo(x + 55, y + 20);
  ctx.bezierCurveTo(x + 55, y + 17,  x+ 50, y+ 5, x+ 30, y+ 5);
  ctx.bezierCurveTo(x, y+ 5, x, y+ 42.5, x, y+42.5);
  ctx.bezierCurveTo(x, y+60, x+20, y+82, x+55, y+100);
  ctx.bezierCurveTo(x+90, y+82, x+110, y+60, x+110, y+42.5);
  ctx.bezierCurveTo(x+110, y+42.5, x+110, y+5, x+80, y+5);
  ctx.bezierCurveTo(x+65, y+5, x+55, y+17, x+55, y+20);
  ctx.fill();
}

drawHeart(100, 100);

// you can modify the Box object to use this in its draw function by swapping out the rectangle code
this.draw = function() {
  if(this.hidden == false) {
    ctx.fillStyle = color; 
    drawHeart(this.x, this.y);
  }
}

// you can use other keys like "Space" for other events like shooting
document.addEventListener('keydown', (event) => {
  if (event.key == "Space") {
    shoot = true;
  }
});

// to find other key codes you can use:
event.code