The weather is lovely today, so I’m letting Merlin enjoy some time outside. I last saw him running around the yard; the wind has calmed down in the past few days.
I had a therapy session today and brought up the Aspie test. While my therapist isn’t sure if I have autism, he suggested that I get tested if I feel the need to do so. He explained that online tests may not always give an accurate result due to the various criteria involved. Additionally, my PTSD, ADHD, and OCD may have impacted the test, and some questions didn’t apply to me due to my severe hearing loss. I’m considering getting tested as it could answer many questions about myself. The therapist mentioned that the testing process lasts all day and consists of different tests.
Coding was okay today, although I did have a few distractions, such as therapy, Merlin, and others. I find it challenging to focus when I’m interrupted, and it takes me a while to get back on track. Sometimes, I feel overwhelmed trying to refocus.
JavaScript notes…
—————————–
FreeCodeCamp Platformer Game: steps 21 – 35
Step 21
The next step is to create an update() method which will be responsible for updating the player’s position and velocity as it moves throughout the game.
Below your draw() method, create an empty update() method.
update() {
}
Step 22
Inside the update() method, call the draw() method to ensure that the player is continually drawn on the screen as the game updates.
Don’t forget to include the this keyword.
update() {
this.draw()
}
Step 23
When the player moves to the right, you will need to adjust its velocity.
Use the addition assignment operator to add the velocity’s x coordinate to the player’s x position.
Don’t forget to include the this keyword for the velocity and position.
update() {
this.draw();
this.position.x += this.velocity.x
}
Step 24
When the player jumps up, you will need to add the logic for adjusting its velocity.
Use the addition assignment operator to add the velocity’s y coordinate to the player’s y position.
Don’t forget to include the this keyword for the velocity and position.
update() {
this.draw();
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
}
Step 25
Right now, when the player jumps up, it is possible for it to move past the height of the canvas.
To fix that, you will need to add a condition to stop the player from falling past the height of the canvas.
Create an empty if statement that checks if the sum of the player’s y position, height, and y velocity is less than or equal to the height of the canvas.
update() {
this.draw();
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
}
}
Step 26
In the if statement, add another if statement to check if the player's y position is less than 0.
if (this.position.y + this.height + this.velocity.y <= canvas.height) { if (this.position.y < 0) { } } Step 27 Inside the inner if statement, assign 0 to the player’s y position.
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
if (this.position.y < 0) {
this.position.y = 0;
}
}
Step 28
Below the this.position.y = 0, assign gravity to the velocity's y position.
if (this.position.y < 0) {
this.position.y = 0;
this.velocity.y = gravity
}
Step 29
Below your inner if statement, use the addition assignment operator to add gravity to the y velocity.
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
if (this.position.y < 0) {
this.position.y = 0;
this.velocity.y = gravity;
}
this.velocity.y += gravity
}
Step 30
Add an else clause that assigns 0 to this.velocity.y.
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
if (this.position.y < 0) {
this.position.y = 0;
this.velocity.y = gravity;
}
this.velocity.y += gravity;
} else {
this.velocity.y = 0
}
Step 31
The final condition you need to add inside the Player class is to ensure that the player stays within the boundaries of the canvas screen and doesn't move too far off to the left.
Create an if statement, to check if the player's x position is less than the width.
if (this.position.x < this.width) {
}
Step 32
Inside the if statement, assign the width to the player's x position.
if (this.position.x < this.width) {
this.position.x = this.width
}
Step 33
For the last condition, you will need to check if the player's x position has exceeded the right edge of the canvas. If it has, you will need to set the player's x position to the maximum value so the player does not accidentally go off screen to the right.
Inside your update method, create an if statement that checks if this.position.x >= canvas.width - 2 * this.width.
if (this.position.x >= canvas.width - 2 * this.width) {
}
Step 34
Inside your if statement, assign canvas.width - 2 * this.width to this.position.x.
This will ensure that the player's x position will never exceed the right edge of the canvas.
this.position.x = canvas.width - 2 * this.width
Step 35
The next step is to use the new keyword to create a new instance of the Player object and assign it to a new const variable called player.
const player = new Player()
