It is so warm outside today! I put a bowl of water outside with Merlin in case he needs it. Kel stopped by to give me a ride to pick up the mail since I was the only one with the key. I didn’t realize she was coming because I missed her text, so I had to take a few minutes to put on my shoes. That was the highlight of my day.
The coding process proceeded without major issues. However, the most challenging aspect remains the memorization of the various variables, objects, and their respective wordings. Even though I expect to become more familiar with them over time, I still find myself revisiting the entire code to remember the structure of a variable.
Tommy wasn’t feeling well, so he had to come home early. Kel says she isn’t feeling well either. Let’s hope I don’t catch whatever they have.
Javascript notes…
——————————-
FreeCodeCamp Platformer Game steps 81 – 95
Step 81
When you start the game, you will notice that the position of the platforms is animating alongside the player. But if you try to jump below one of the platforms, then you will jump right through it.
To fix this issue, you will need to add collision detection logic to the game.
Start by calling the forEach method on the platforms array. For the callback function pass in platform as the parameter.
platforms.forEach(platform => {})
Step 82
Inside the callback function, create a new const variable called collisionDetectionRules and assign it an empty array.
Inside that array, add a boolean expression that checks whether the player’s y position plus the player’s height is less than or equal to the platform’s y position.
platforms.forEach((platform) => {
const collisionDetectionRules = [player.position.y + player.height <= platform.position.y];
});
Step 83
Add another boolean expression that checks if the sum of the player's y position, height, and y velocity is greater than or equal to the platform's y position.
platforms.forEach((platform) => {
const collisionDetectionRules = [
player.position.y + player.height <= platform.position.y,
player.position.y + player.height + player.velocity.y >= platform.position.y
];
});
Step 84
Below that boolean expression, add another boolean expression that checks if the player's x position is greater than or equal to the platform's x position minus half of the player's width.
platforms.forEach((platform) => {
const collisionDetectionRules = [
player.position.y + player.height <= platform.position.y,
player.position.y + player.height + player.velocity.y >= platform.position.y,
player.position.x >= platform.position.x - player.width / 2
];
});
Step 85
Add one last boolean expression that checks if the player's x position is less than or equal to the sum of the platform's x position plus the platform's width minus one-third of the player's width.
platforms.forEach((platform) => {
const collisionDetectionRules = [
player.position.y + player.height <= platform.position.y,
player.position.y + player.height + player.velocity.y >= platform.position.y,
player.position.x >= platform.position.x - player.width / 2,
player.position.x <= platform.position.x + platform.width - player.width / 3
];
});
Step 86
Next, add an if statement that checks if every rule in the collisionDetectionRules array is true. Make sure to use the every method for this.
Inside the body of the if statement, assign the number 0 to the player's y velocity followed by a return statement.
if (collisionDetectionRules.every((rule) => rule)) {
player.velocity.y = 0;
return;
}
Step 87
Create a new const variable called platformDetectionRules and assign it an empty array.
const platformDetectionRules = []
Step 88
Inside that array, add a boolean expression that checks if the player's x position is greater than or equal to the platform's x position minus half of the player's width.
const platformDetectionRules = [
player.position.x >= platform.position.x - player.width / 2
];
Step 89
Below that boolean expression, add another boolean expression that checks if the player's x position is less than or equal to the sum of the platform's x position plus the platform's width minus one-third of the player's width.
const platformDetectionRules = [
player.position.x >= platform.position.x - player.width / 2,
player.position.x <= platform.position.x + platform.width - player.width / 3
];
Step 90
Add another boolean expression that checks if the player's y position plus the player's height is greater than or equal to the platform's y position.
Below that, add another boolean expression that checks if the player's y position is less than or equal to the sum of the platform's y position plus the platform's height.
const platformDetectionRules = [
player.position.x >= platform.position.x - player.width / 2,
player.position.x <=
platform.position.x + platform.width - player.width / 3,
player.position.y + player.height >= platform.position.y,
player.position.y <= platform.position.y + platform.height
];
Step 91
Add an if statement that checks if every platform detection rule is true. Make sure to use the every method for this.
if (platformDetectionRules.every(rule => rule)) {
};
Step 92
Inside the body of the if statement, assign platform.position.y + player.height to the player's y position.
Then, assign gravity to the player's y velocity.
Now, when you start the game, you will be able to jump underneath the platform and collide with it.
if (platformDetectionRules.every(rule => rule)) {
player.position.y = platform.position.y + player.height;
player.velocity.y = gravity;
};
Step 93
The last portion of the project is to add the logic for the checkpoints. When a player collides with a checkpoint, the checkpoint screen should appear.
Start by creating a new class called CheckPoint.
class CheckPoint {}
Step 94
Inside that CheckPoint class, add a constructor with x, y and z parameters.
class CheckPoint {
constructor(x, y, z) {
}
};
Step 95
Inside the constructor, create an object with x and y parameters and assign it to the position.
Remember to use the this keyword to access the properties.
class CheckPoint {
constructor(x, y, z) {
this.position = { x, y };
}
};
