Boundaries, imagery and stress

[SealifeFoam]

Hi, idk why I'm doing this.
I don't know if this was ever covered but I can't seem to remember how to keep objects inside the HTML5 canvas and I don't understand how to change the square into an image I'd rather have. I've looked over websites, our moodle pages and different books for help.

I think the real reason I'm typing this is due to the stress and confusion. I can't seem to remember things, even after practice and applying to what we're given. I don't know whats wrong with me. I need to work. I also need help but it feels whatever help I get - they end up doing the work while I learn next to nothing. I learn something but I don't understand how to apply it to what I want to do/accomplish.

This all sucks because with this weeks parameters you can make a really fun 2D pixel game ( like from the old arcades that use to exist) out of what was assigned. Story of my life, I have ideas but I don't have either the skills, or resources to accomplish them.

• Main.js code

var canvas = document.getElementById("myCanvas"); //always have lines one and two for drawing on canvas
var ctx = canvas.getContext("2d");
var x = 50;
var y = 50;
var x2 = 100;
var y2 = 100;
var square1;
var square2;

createSquares();
drawSquare();

setInterval(moveGreenSquare, 700); //Second Square movement

function createSquares() { // function contains squares (classx, classy, height, width, color)
square1 = new Square(x, y, 20, 20, "blue");
square2 = new Square(x2, y2, 50, 50, "red");

}

// function to randomly move the enemy square appear around the canvas
function moveGreenSquare() {

square2.setX(Math.floor(Math.random() * canvas.width));
square2.setY(Math.floor(Math.random() * canvas.height));
drawSquare();

}

// Draws squares at starting locations
function drawSquare() {
ctx.clearRect(0, 0, 800, 600);
ctx.fillStyle = square1.theColor;
ctx.fillRect(square1.theX, square1.theY, square1.theWidth, square1.theHeight);
ctx.fillStyle = square2.theColor;
ctx.fillRect(square2.theX, square2.theY, square2.theWidth, square2.theHeight);

}

$(document).ready(function () {
$(this).keypress(function (event) {
getKey(event); //Sets up getkey events w/out this the collison won't work at all
});
});

function getKey(event) {

// "only checking collision when a key is pressed"- promotes cheating by prompting the player to not play at all, how to fix
var didCollide = hasCollided(square1, square2);
// when a collision happens - also how to produce 'bounce back' effect and 'game over screen after hits? 
if (didCollide) {
    // changes the background color
    canvas.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
    // changes size of the squares, then after fourth size change say game over
    square1.setWidth(square1.theWidth - 1);
    square1.setHeight(square1.theHeight - 1);
    square2.setWidth(square2.theWidth + 1);
    square2.setHeight(square2.theHeight + 1);
}  

// Key controls
var char = event.which || event.keyCode;
var actualLetter = String.fromCharCode(char);
if (actualLetter == "w") {
    moveUp();
} else if (actualLetter == "s") {
    moveDown();
} else if (actualLetter == "d") {
    moveRight();
} else if (actualLetter == "a") {
    moveLeft();
}

drawSquare();

}

// up
function moveUp() {
square1.setY(square1.theY - 10);
}

// down
function moveDown() {
square1.setY(square1.theY + 10);
}

// left - think grid map, to move left you have to go negitive
function moveLeft() {
square1.setX(square1.theX - 10);
}

// right - same concept as left but you add positive numbers to move right
function moveRight() {
square1.setX(square1.theX + 10);
}

// collision function that checks for corners overlapping - except for when its standing still
function hasCollided(object1, object2) {
return !(
((object1.y + object1.height) < (object2.y)) ||
(object1.y > (object2.y + object2.height)) ||
((object1.x + object1.width) < object2.x) ||
(object1.x > (object2.x + object2.width))
);
}

• Class.js for squares

class Square {
constructor(x, y, height, width, color) {
this.x = x;
this.y = y;
this.height = height;
this.width = width;
this.color = color;
}

setX(x) {
    this.x = x;
}
setY(y) {
    this.y = y;
}
setHeight(height) {
    this.height = height;
}
setWidth(width) {
    this.width = width;
}
setColor(color) {
    this.color = color;
}
get theX() {
    return this.x;
}
get theY() {
    return this.y;
}
get theHeight() {
    return this.height;
}
get theWidth() {
    return this.width;
}
get theColor() {
    return this.color;
}

}
//Put boundaries here