I didn’t journal yesterday. Tommy was home sick, so I spent the day with him. However, I did manage to squeeze in some coding after my therapy session. Speaking of therapy, it went well. We started by discussing my depression and anxiety levels. While I’m currently not feeling depressed, my anxiety is still relatively high. Although not as intense as it has been before. My therapist then asked me what I wanted to discuss, but I found myself struggling to come up with a topic. Eventually, I settled on reminiscing about my college days, where I had to juggle school, work, and being a single parent. It wasn’t easy, especially since my ex wasn’t helpful around the house or with the kids. I had to schedule doing homework around mostly him since he needed so much attention from me. I can’t recall what else I talked about.
I made soup last night. It is called Albondigas soup. It’s a Mexican soup filled with meatballs and vegetables. I was apprehensive about making the meatballs, as I had never attempted to cook them in soup before or ever made meatballs before. I was concerned that they might crumble and fall apart in the soup. However, I am pleased to report that everything turned out perfectly. The meatballs remained perfectly intact, and the soup was delicious. The kids were ok with the soup. Alex said the soup was very “vegetable-y.” I guess there were too many veggies for his liking.
Today has been relatively uneventful. Which is good! Kel had to assist her mother while Karissa spent the day in her room. She is finished with school for the summer. And Karissa passed her Math class. I’m proud of her, I know Math isn’t her favorite subject and she has been working hard this semester. Alexis and Chris are set to finish their studies in May, while Alex is gearing up to graduate high school on Karissa’s birthday.
Coding wasn’t too complex today. I think I’m starting to understand some of this and can figure out most of the problems without much outside help. I completed the platformer game project and am now embarking on the dice game project.
The weather is cooler today than yesterday, but it’s still nice outside, although it is a bit windy. My furry companions, Merlin and Mimi, snoozed in the office while I worked and missed their lunchtime, so I fed them a bit later than usual.
JavaScript notes…
———————————–
FreeCodeCamp Platformer Game steps 96 – 117
Step 96
The next step is to add the width and height to the CheckPoint class.
The width and height should be proportionalSize(40) and proportionalSize(70) respectively.
class CheckPoint {
constructor(x, y, z) {
this.position = {
x,
y,
};
this.width = proportionalSize(40);
this.height = proportionalSize(70);
};
};
Step 97
Below the checkpoint’s width and height properties, use the this keyword to add a new claimed property and assign it the value of false. This property will be used to check if the player has reached the checkpoint.
this.claimed = false
Step 98
Now you need to create a draw method for the CheckPoint class.
Inside the draw method, add a fillStyle property to the ctx object and set it to “#f1be32”.
Below the fillStyle property, use the fillRect method on the ctx object and pass in the x, y, width, and height properties as arguments.
class CheckPoint {
constructor(x, y, z) {
this.position = {
x,
y,
};
this.width = proportionalSize(40);
this.height = proportionalSize(70);
this.claimed = false;
};
draw() {
ctx.fillStyle = "#f1be32";
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
};
};
Step 99
The last method you will need to add to the CheckPoint class is the claim method.
Inside the claim method, assign 0 to the width and height properties of the CheckPoint instance.
Below those properties, assign Infinity to the y position.
Lastly, assign true to the claimed property.
class CheckPoint {
constructor(x, y, z) {
this.position = {
x,
y,
};
this.width = proportionalSize(40);
this.height = proportionalSize(70);
this.claimed = false;
};
draw() {
ctx.fillStyle = "#f1be32";
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
}
claim() {
this.width = 0;
this.height = 0;
this.position.y = Infinity;
this.claimed = true;
};
};
Step 100
Use const to create a new array called checkpointPositions.
Inside that array, add an object for each of the following positions:
x: 1170, y: proportionalSize(80), z: 1
x: 2900, y: proportionalSize(330), z: 2
x: 4800, y: proportionalSize(80), z: 3
const checkpointPositions = [
{ x: 1170, y: proportionalSize(80), z: 1 },
{ x: 2900, y: proportionalSize(330), z: 2 },
{ x: 4800, y: proportionalSize(80), z: 3 },
]
Step 101
The next step is to create a list of new checkpoint instances using the CheckPoint class.
Start by creating a new const variable called checkpoints and assign it checkpointPositions.map().
For the map callback function, pass in checkpoint for the parameter and implicitly return the creation of a new CheckPoint instance with the checkpoint.x, checkpoint.y and checkpoint.z values passed in as arguments.
const checkpoints = checkpointPositions.map((checkpoint) => new CheckPoint(checkpoint.x, checkpoint.y, checkpoint.z));
Step 102
Inside the animate function, you will need to draw each of the checkpoints onto the canvas.
Add a forEach loop that iterates through the checkpoints array.
Inside the callback function, add a checkpoint parameter and for the body of the function call the draw method on each checkpoint.
checkpoints.forEach((checkpoint) => checkpoint.draw());
Step 103
Inside your condition, add a forEach loop to iterate through the checkpoints array. Use checkpoint as the parameter name for the callback function.
Inside the loop, use the subtraction assignment operator to subtract 5 from the checkpoints’s x position.
checkpoints.forEach((checkpoint) => {
checkpoint.position.x -= 5;
})
Step 104
Inside your else if statement, add a forEach loop to iterate through the checkpoints array. Use checkpoint as the parameter name for the callback function.
Inside the loop, use the addition assignment operator to add 5 to the checkpoints’s x position.
checkpoints.forEach((checkpoint) => {
checkpoint.position.x += 5;
})
Step 105
The next step is to create a function that will show the checkpoint message when the player reaches a checkpoint.
Create a new arrow function called showCheckpointScreen that takes in a msg parameter.
const showCheckpointScreen = (msg) => {
};
Step 106
Inside the showCheckpointScreen function, set the checkpointScreen style.display property to “block”.
const showCheckpointScreen = (msg) => {
checkpointScreen.style.display = "block"
};
Step 107
Set the checkpointMessage’s textContent property to the msg parameter.
const showCheckpointScreen = (msg) => {
checkpointScreen.style.display = "block";
checkpointMessage.textContent = msg;
};
Step 108
Create an if statement that checks if isCheckpointCollisionDetectionActive is true.
Inside the if statement, add a setTimeout() that takes in a callback function and a delay of 2000 milliseconds.
For the callback function, it should set the checkpointScreen style.display property to “none”.
const showCheckpointScreen = (msg) => {
checkpointScreen.style.display = "block";
checkpointMessage.textContent = msg;
if (isCheckpointCollisionDetectionActive) {
setTimeout(() => {
checkpointScreen.style.display = "none"
}, 2000)
}
};
Step 109
The last few steps involve updating the animate function to display the checkpoint screen when the player reaches a checkpoint.
Start by adding a forEach to the checkpoints array. For the callback function, use checkpoint, index and checkpoints for the parameters.
checkpoints.forEach((checkpoint, index, checkpoints) => {})
Step 110
Create a new const variable called checkpointDetectionRules and assign it an empty array.
Inside that array, add a boolean expression that checks if the player’s position.x is greater than or equal to the checkpoint’s position.x.
checkpoints.forEach((checkpoint, index, checkpoints) => {
const checkpointDetectionRules = [player.position.x >= checkpoint.position.x]
});
Step 111
Add another boolean expression that checks if the player’s position.y is greater than or equal to the checkpoint’s position.y.
Below that statement, add another boolean expression that checks if the player’s position.y plus the player’s height is less than or equal to the checkpoint’s position.y plus the checkpoint’s height.
Below that statement, add the isCheckpointCollisionDetectionActive variable.
checkpoints.forEach((checkpoint, index, checkpoints) => {
const checkpointDetectionRules =[
player.position.x >= checkpoint.position.x,
player.position.y >= checkpoint.position.y,
player.position.y + player.height <= checkpoint.position.y + checkpoint.height,
isCheckpointCollisionDetectionActive
]
});
Step 112
You will need to add two more checkpoint detection rules to the checkpointDetectionRules array.
The first rule should check if the player's x position minus the player's width is less than or equal to the checkpoint's x position minus the checkpoint's width plus the player's width multiplied by 0.9. This will ensure that the player is close enough to the checkpoint to claim it.
The second rule should check if index is strictly equal to 0 or if the previous checkpoint(checkpoints[index - 1].claimed) is true. This will ensure that the player can only claim the first checkpoint or a checkpoint that has already been claimed.
player.position.x - player.width <= checkpoint.position.x - checkpoint.width + player.width * 0.9, index === 0 || checkpoints[index - 1].claimed === true
Step 113
Next, add an if statement that checks if every rule in the checkpointDetectionRules array is true.
Make sure to use the every method for this.
checkpoints.forEach((checkpoint, index, checkpoints) => {
const checkpointDetectionRules = [
player.position.x >= checkpoint.position.x,
player.position.y >= checkpoint.position.y,
player.position.y + player.height <=
checkpoint.position.y + checkpoint.height,
isCheckpointCollisionDetectionActive,
player.position.x - player.width <=
checkpoint.position.x - checkpoint.width + player.width * 0.9,
index === 0 || checkpoints[index - 1].claimed === true,
];
if (checkpointDetectionRules.every(rule => rule)) {
}
});
Step 114
Inside the if statement, call the claim method on the checkpoint object.
if (checkpointDetectionRules.every((rule) => rule)) {
checkpoint.claim();
};
Step 115
The next step is to write a condition that checks if the player has reached the last checkpoint.
Start by adding an if statement that checks if the index is equal to the length of the checkpoints array minus one.
if (index === checkpoints.length -1) {
}
Step 116
Inside the condition, you want to first set the isCheckpointCollisionDetectionActive to false.
Then you will need to call the showCheckpointScreen function and pass in the string "You reached the final checkpoint!" as an argument.
Lastly, you will need to call the movePlayer function and pass in the string "ArrowRight" as the first argument, the number 0 as the second argument, and the boolean false as the third argument.
if (index === checkpoints.length - 1) {
isCheckpointCollisionDetectionActive = false;
showCheckpointScreen("You reached the final checkpoint!");
movePlayer("ArrowRight", 0, false);
};
Step 117
The last thing you will need to do is add an else if statement.
Your condition should check if the player's x position is greater than or equal to the checkpoint's x position and less than or equal to the checkpoint's x position plus 40.
Inside the body of the else if statement, you will need to call the showCheckpointScreen function and pass in the string "You reached a checkpoint!" as an argument.
Congratulations! You have completed the platformer game project!
if (index === checkpoints.length - 1) {
isCheckpointCollisionDetectionActive = false;
showCheckpointScreen("You reached the final checkpoint!");
movePlayer("ArrowRight", 0, false);
} else if (player.position.x >= checkpoint.position.x && player.position.x <= checkpoint.position.x + 40) {
showCheckpointScreen("You reached a checkpoint!");
}
