I am contemplating what to write about today. Despite a lingering sense of unease, I completed all my tasks. I’m not sure why I have anxiety. There isn’t much of a reason to have anxiety. I wouldn’t say I like this feeling. Coding was an enjoyable challenge, as I tackled the problems with minimal reliance on external resources. It’s not that I frown upon Googling; I like trying to solve the issues on my own.
I have dinner preparations for tonight. We plan to have salmon burgers, but I’m careful with the pineapple that typically accompanies them. If the pineapple is raw or unprocessed, I must avoid it as it triggers a mild tingling and discomfort in my mouth. It’s a minor inconvenience, but I try to be good and not have pineapples. Remember those Dole whips you can get at Disneyland in the Tiki Room? I love those, and they don’t bother me at all!
Chris will be home tomorrow. He wants street tacos, so we are having them Saturday night. Tomorrow night we are having shrimp stir-fry. Tommy bought stuff so I could make salsa. I enjoy making salsa. Tommy also has a day off tomorrow.
Alexis is considering going through a full year of school next year instead of graduating early. Whichever she likes to do is fine with me as long as she is happy with her decision.
JavaScript notes…
————————————
FreeCodeCamp Platformer Game steps 36 – 55
Step 36
Now it is time to see your new player drawn on the screen.
Start by creating an empty arrow function called startGame.
const startGame = () => {
}
Step 37
Inside your startGame function, you will need to display the canvas element and hide the startScreen container.
Use canvas.style.display to change the display value to “block”.
Below that, use startScreen.style.display to change the display value to “none”.
const startGame = () => {
canvas.style.display = "block";
startScreen.style.display = "none";
}
Step 38
To visualize the player on the screen, you need to draw it on the canvas.
Inside the startGame function, call the .draw() method of your player object.
const startGame = () => {
canvas.style.display = "block";
startScreen.style.display = "none";
player.draw();
}
Step 39
Now it’s time to add the functionality for the start game button.
Add an addEventListener to the startBtn and pass in a click event and a reference to the startGame function.
Click on the start game button, and you should see a light blue square on the screen which represents the main player.
startBtn.addEventListener("click", startGame)
Step 40
Now that you can see the player on the screen, it is time to start adding the functionality for moving the player across the screen.
Create a new empty arrow function called animate.
const animate = () => {
}
Step 41
The requestAnimationFrame() web API, takes in a callback and is used to update the animation on the screen. The animate function will be responsible for updating the player’s position and continually drawing it on the canvas.
Inside the animate function, call the requestAnimationFrame() API and pass animate as the argument.
const animate = () => {
requestAnimationFrame(animate)
}
Step 42
As the player moves through the game, you will need to clear the canvas before rendering the next frame of the animation.
You can use the clearRect() Web API to accomplish this. It takes in an x, y, width, and height arguments.
Below your requestAnimationFrame, call the clearRect() method on the ctx variable and pass in 0, 0, canvas.width, canvas.height as the arguments.
const animate = () => {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
Step 43
The next step is to update the player’s position as it moves throughout the game.
Below your ctx.clearRect(), call the update() method on the player.
const animate = () => {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
player.update();
}
Step 44
To manage the player’s movement in the game, you will need to monitor when the left and right arrow keys are pressed.
Create a new const variable called keys and assign it an empty object.
const keys = {};
Step 45
Inside the keys object, add a new key called rightKey and assign it an object with the key-value pair of pressed: false.
Below the rightKey object, create a leftKey object and assign it an object with the key-value pair of pressed: false.
const keys = {
rightKey: {
pressed: false
},
leftKey: {
pressed: false
}
}
Step 46
The next step is to add the logic for increasing or decreasing a player’s velocity based on if they move to the left or right of the screen.
Inside the animate function, create an if statement where the condition checks if the right key was pressed and the player’s x position is less than proportionalSize(400).
You need to use the proportionalSize function here to make sure the player’s x position is always proportional to the screen size.
const animate = () => {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
player.update();
if (keys.rightKey.pressed && player.position.x < proportionalSize(400)) {
}
}
Step 47
Inside the if statement, assign the number 5 to the player's x velocity.
if (keys.rightKey.pressed && player.position.x < proportionalSize(400)) {
player.velocity.x = 5
}
Step 48
Add an else if statement where the condition checks if the left key was pressed and the player's x position is greater than proportionalSize(100). You need to use the proportionalSize function here to make sure the player's x position is always proportional to the screen size.
Inside the else if statement, assign the number -5 to the player's x velocity.
if (keys.rightKey.pressed && player.position.x < proportionalSize(400)) {
player.velocity.x = 5;
} else if (keys.leftKey.pressed && player.position.x > proportionalSize(100)) {
player.velocity.x = -5;
}
Step 49
Add an else clause that assigns the number 0 to the player's x velocity.
if (keys.rightKey.pressed && player.position.x < proportionalSize(400)) {
player.velocity.x = 5;
} else if (keys.leftKey.pressed && player.position.x > proportionalSize(100)) {
player.velocity.x = -5;
} else {
player.velocity.x = 0;
}
Step 50
The next step is to add the functionality that will be responsible for moving the player across the screen.
Create a new arrow function called movePlayer that has three parameters called key, xVelocity, isPressed.
const movePlayer = (key, xVelocity, isPressed) => {}
Step 51
In the game, the player will interact with different checkpoints. If the isCheckpointCollisionDetectionActive is false, then you will need to stop the player's movements on the x and y axes.
Start by creating an if statement where the condition checks if the isCheckpointCollisionDetectionActive is false.
Remember that you can use the ! operator to check if the variable is false.
const movePlayer = (key, xVelocity, isPressed) => {
if (!isCheckpointCollisionDetectionActive) {
}
}
Step 52
Inside the if statement, set the player's x velocity to 0 and the player's y velocity to 0.
Below that, add a return statement.
const movePlayer = (key, xVelocity, isPressed) => {
if (!isCheckpointCollisionDetectionActive) {
player.velocity.x = 0;
player.velocity.y = 0;
return;
}
}
Step 53
Below the if statement, create a switch statement with a value of key.
switch (key) {
}
Step 54
The first case you will want to add is when the left arrow key is pressed.
Inside the switch statement, add a new case called "ArrowLeft".
switch (key) {
case 'ArrowLeft':
}
Step 55
Inside the case clause, assign isPressed to keys.leftKey.pressed.
Below that, add an if statement that checks if xVelocity is equal to 0. If so, assign the xVelocity to player.velocity.x.
switch (key) {
case "ArrowLeft":
keys.leftKey.pressed = isPressed;
if (xVelocity === 0) {
player.velocity.x = xVelocity;
}
}
