This past weekend was pretty low-key and relaxing for me, but unfortunately, not so much for Tommy due to his terrible anxiety. I think his anxiety is worse than mine. I wish there was something we could do to help the anxiety. There isn’t much to say about last weekend, but we did have some delicious meals. On Friday, we had shrimp stir-fry, which I really enjoyed. We had street tacos on Saturday, and the carne asada was a hit. There was little left for Sunday.
Today, coding went well, although it was sometimes confusing. I encountered a few problems that took me around half an hour to figure out. Still, I managed to get a good amount of studying despite feeling like I hadn’t done anything all day. I couldn’t get my laptop working on Tom’s desk set up this morning. After some tinkering, I finally got it to work. But it did make me start coding a little later than I wanted.
The weather has been lovely today, and Merlin has spent most of his time outside. I feel a little guilty leaving him out there, but whenever I bring him inside, he wants to go back out and play.
My face has been breaking out lately, and it hurts. My face hurts. I’m doing all I can for it. Now, I have to be patient and not touch my face.
JavaScript notes…
———————————————–
FreeCodeCamp Platformer Game steps 56 – 80
Step 56
Below your if statement, use the subtraction assignment operator to subtract the xVelocity from player.velocity.x.
To close out this case, make sure to add a break statement.
switch (key) {
case "ArrowLeft":
keys.leftKey.pressed = isPressed;
if (xVelocity === 0) {
player.velocity.x = xVelocity;
}
player.velocity.x -= xVelocity;
break;
}
Step 57
The player can jump up by using the up arrow key or the spacebar.
Add three new cases for “ArrowUp”, ” “, and “Spacebar”. Remember that you can group cases together when they share the same operation.
Inside those cases, use the subtraction assignment operator to subtract 8 from player.velocity.y.
To close out these cases, make sure to add a break statement.
switch (key) {
case "ArrowLeft":
keys.leftKey.pressed = isPressed;
if (xVelocity === 0) {
player.velocity.x = xVelocity;
}
player.velocity.x -= xVelocity;
break;
case "ArrowUp":
case " ":
case "Spacebar":
player.velocity.y -= 8;
break;
}
Step 58
The last case you will need to add will be for “ArrowRight”.
Inside that case, assign isPressed to keys.rightKey.pressed.
Add an if statement that checks if xVelocity is equal to 0. If so, assign the xVelocity to player.velocity.x.
Below that if statement, use the addition assignment operator to assign the xVelocity to player.velocity.x.
switch (key) {
case “ArrowLeft”:
keys.leftKey.pressed = isPressed;
if (xVelocity === 0) {
player.velocity.x = xVelocity;
}
player.velocity.x -= xVelocity;
break;
case “ArrowUp”:
case ” “:
case “Spacebar”:
player.velocity.y -= 8;
break;
case “ArrowRight”:
keys.rightKey.pressed = isPressed;
if (xVelocity === 0) {
player.velocity.x = xVelocity;
}
player.velocity.x += xVelocity;
break;
}
Step 59
Now it is time to add the event listeners that will be responsible for calling the movePlayer function.
Start by adding an addEventListener to the global window object.
For the arguments, pass in the keydown event and an arrow function that uses the destructuring assignment to get the key property from the event object in the event listener parameter.
window.addEventListener("keydown", ({key}) => {})
Step 60
Inside the arrow function, call the movePlayer function and pass in key, 8, and true as arguments.
window.addEventListener("keydown", ({ key }) => {
movePlayer(key, 8, true);
});
Step 61
Add another addEventListener to the global window object and pass in the keyup event and use destructuring to pass in the key property from the event.
window.addEventListener("keyup", ({key}) => {})
Step 62
Inside the callback function, call the movePlayer function and pass in key, 0, and false as arguments.
window.addEventListener("keyup", ({ key }) => {
movePlayer(key, 0, false);
});
Step 63
Before you can start moving your player across the screen, you will need to use the animate function.
Inside the startGame function, delete player.draw() and call the animate function.
Click the Start Game button and use the left and right arrow keys to move the player across the screen. You can also use the spacebar or the up arrow key to jump up.
animate();
Step 64
The next step is to create the platforms and platform logic.
Start by creating a new Platform class.
class Platform {
}
Step 65
Inside the Platform class, create a constructor that takes in the x and y coordinates.
class Platform {
constructor(x, y) {
}
}
Step 66
When working with objects where the property name and value are the same, you can use the shorthand property name syntax. This syntax allows you to omit the property value if it is the same as the property name.
// using shorthand property name syntax
obj = {
a, b, c
}
The following code is the same as:
obj = {
a: a,
b: b,
c: c
}
Inside the constructor, add this.position and assign it an object with the x and y coordinates. Make sure to use the shorthand property syntax .
class Platform {
constructor(x, y) {
this.position = {x, y}
}
}
Step 67
Next, add a width property to the constructor and assign it the number 200.
Don’t forget to use the this keyword to access the properties.
class Platform {
constructor(x, y) {
this.position = {
x,
y,
};
this.width = 200
}
}
Step 68
Below that, add a height property and assign it the number proportionalSize(40). You need to use the proportionalSize() function to make sure the height is proportional to the screen size.
Remember to use the this keyword to access the properties.
class Platform {
constructor(x, y) {
this.position = {
x,
y,
};
this.width = 200;
this.height = proportionalSize(40);
}
}
Step 69
Next, add a draw method to the Platform class.
class Platform {
constructor(x, y) {
this.position = {
x,
y,
};
this.width = 200;
this.height = proportionalSize(40);
}
draw() {
}
}
Step 70
Inside the draw method, assign “#acd157” to the ctx.fillStyle.
Below that, call the ctx.fillRect method and pass in the x and y coordinates, along with the width and height properties. Remember to include this before each property.
class Platform {
constructor(x, y) {
this.position = {
x,
y,
};
this.width = 200;
this.height = proportionalSize(40);
}
draw() {
ctx.fillStyle = "#acd157";
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
}
}
Step 71
The next step will be to create a list of positions for the platforms.
Start by creating a new const variable called platformPositions and assign it an empty array.
const platformPositions = []
Step 72
Inside the platformPositions, you will need to add the list of positions for the platforms.
Add a new object that has an x property with a value of 500 and a y property with a value of proportionalSize(450).
const platformPositions = [{
x: 500,
y: proportionalSize(450)
}];
Step 73
Below that, add another object with an x property with a value of 700 and a y property with a value of proportionalSize(400).
const platformPositions = [
{ x: 500, y: proportionalSize(450) },
{ x: 700, y: proportionalSize(400) }
];
Step 74
Add the rest of the platform positions to the platformPositions array with the following values:
x=850 y=proportionalSize(350)
x=900 y=proportionalSize(350)
x=1050 y=proportionalSize(150)
x=2500 y=proportionalSize(450)
x=2900 y=proportionalSize(400)
x=3150 y=proportionalSize(350)
x=3900 y=proportionalSize(450)
x=4200 y=proportionalSize(400)
x=4400 y=proportionalSize(200)
x=4700 y=proportionalSize(150)
const platformPositions = [
{ x: 500, y: proportionalSize(450) },
{ x: 700, y: proportionalSize(400) },
{ x: 850, y: proportionalSize(350) },
{ x: 900, y: proportionalSize(350) },
{ x: 1050, y: proportionalSize(150) },
{ x: 2500, y: proportionalSize(450) },
{ x: 2900, y: proportionalSize(400) },
{ x: 3150, y: proportionalSize(350) },
{ x: 3900, y: proportionalSize(450) },
{ x: 4200, y: proportionalSize(400) },
{ x: 4400, y: proportionalSize(200) },
{ x: 4700, y: proportionalSize(150) }
];
Step 75
The next step is to create a list of new platform instances using the Platform class. You will later reference this list to draw the platforms on the canvas.
Start by creating a new const variable called platforms and assign it platformPositions.map().
const platforms = platformPositions.map()
Step 76
In the map callback function, pass in platform for the parameter and implicitly return the creation of a new Platform instance with the platform.x and platform.y values passed in as arguments.
const platforms = platformPositions.map(platform => new Platform(platform.x, platform.y));
Step 77
Inside the animate function, you will need to draw each of the platforms onto the canvas.
Add a forEach loop that iterates through the platforms array.
Inside the callback function, add a platform parameter and for the body of the function call the draw method on each platform.
platforms.forEach(platform => {
platform.draw();
});
Step 78
If you try to start the game, you will notice that the platforms are rendered on the screen. But as the player moves to the right, the platform does not move with it.
To fix this issue, you will need to update the platform’s x position as the player moves across the screen.
Inside the animate function, add a condition to check if the right key was pressed and if the isCheckpointCollisionDetectionActive is true.
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
}
Step 79
Inside your condition, add a forEach loop to iterate through the platforms array.
Inside the loop, use the subtraction assignment operator to subtract 5 from the platform’s x position.
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
platforms.forEach(platform => {
platform.position.x -= 5;
});
}
Step 80
Next, add an else if statement to check if the left key was pressed and if isCheckpointCollisionDetectionActive is true.
Inside that condition, add a forEach loop to iterate through the platforms array.
Inside the loop, use the addition assignment operator to add 5 to the platform’s x position.
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
platforms.forEach((platform) => {
platform.position.x -= 5;
});
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
platforms.forEach(platform => {
platform.position.x += 5;
});
}
