Tell us what’s happening:
I am on the last step, and I can’t understand what is the issue.
It looks like problem is with else if condition, what do you think?
Here is the text of the challenge:
Step 111
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!
Your code so far
else if((player.position.x >= checkpoints.position.x) && (player.position.x <= checkpoints.position.x + 40)) {
showCheckpointScreen("You reached a checkpoint!")
}
const startBtn = document.getElementById("start-btn");
const canvas = document.getElementById("canvas");
const startScreen = document.querySelector(".start-screen");
const checkpointScreen = document.querySelector(".checkpoint-screen");
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
const gravity = 0.5;
let isCheckpointCollisionDetectionActive = true;
class Player {
constructor() {
this.position = {
x: 10,
y: 400,
};
this.velocity = {
x: 0,
y: 0,
};
this.width = 40;
this.height = 40;
}
draw() {
ctx.fillStyle = "#99c9ff";
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
}
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) {
if (this.position.y < 0) {
this.position.y = 0;
this.velocity.y = gravity;
}
this.velocity.y += gravity;
} else {
this.velocity.y = 0;
}
if (this.position.x < this.width) {
this.position.x = this.width;
}
}
}
class Platform {
constructor(x, y) {
this.position = {
x,
y,
};
this.width = 200;
this.height = 40;
}
draw() {
ctx.fillStyle = "#acd157";
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
}
}
class CheckPoint {
constructor(x, y) {
this.position = {
x,
y,
};
this.width = 40;
this.height = 70;
};
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;
}
};
const player = new Player();
const platformPositions = [
{ x: 500, y: 450 },
{ x: 700, y: 400 },
{ x: 850, y: 350 },
{ x: 900, y: 350 },
{ x: 1050, y: 150 },
{ x: 2500, y: 450 },
{ x: 2900, y: 400 },
{ x: 3150, y: 350 },
{ x: 3900, y: 450 },
{ x: 4200, y: 400 },
{ x: 4400, y: 200 },
{ x: 4700, y: 150 }
];
const platforms = platformPositions.map(
(platform) => new Platform(platform.x, platform.y)
);
const checkpointPositions = [
{ x: 1170, y: 80 },
{ x: 2900, y: 330 },
{ x: 4800, y: 80 },
];
const checkpoints = checkpointPositions.map(
checkpoint => new CheckPoint(checkpoint.x, checkpoint.y)
);
const animate = () => {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
platforms.forEach((platform) => {
platform.draw();
});
checkpoints.forEach(checkpoint => {
checkpoint.draw();
});
player.update();
if (keys.rightKey.pressed && player.position.x < 400) {
player.velocity.x = 5;
} else if (keys.leftKey.pressed && player.position.x > 100) {
player.velocity.x = -5;
} else {
player.velocity.x = 0;
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
platforms.forEach((platform) => {
platform.position.x -= 5;
});
checkpoints.forEach((checkpoint) => {
checkpoint.position.x -= 5;
});
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
platforms.forEach((platform) => {
platform.position.x += 5;
});
checkpoints.forEach((checkpoint) => {
checkpoint.position.x += 5;
});
}
}
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,
];
if (collisionDetectionRules.every((rule) => rule)) {
player.velocity.y = 0;
return;
}
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,
];
if (platformDetectionRules.every(rule => rule)) {
player.position.y = platform.position.y + player.height;
player.velocity.y = gravity;
};
});
checkpoints.forEach((checkpoint, index) => {
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
];
if (checkpointDetectionRules.every((rule) => rule)) {
checkpoint.claim();
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!")
}
};
});
}
const keys = {
rightKey: {
pressed: false
},
leftKey: {
pressed: false
}
};
const movePlayer = (key, xVelocity, isPressed) => {
if (!isCheckpointCollisionDetectionActive) {
player.velocity.x = 0;
player.velocity.y = 0;
return;
}
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;
}
}
const startGame = () => {
canvas.style.display = "block";
startScreen.style.display = "none";
animate();
}
const showCheckpointScreen = (msg) => {
checkpointScreen.style.display = "block";
checkpointMessage.textContent = msg;
if (isCheckpointCollisionDetectionActive) {
setTimeout(() => (checkpointScreen.style.display = "none"), 2000);
}
};
startBtn.addEventListener("click", startGame);
window.addEventListener("keydown", ({ key }) => {
movePlayer(key, 8, true);
});
window.addEventListener("keyup", ({ key }) => {
movePlayer(key, 0, false);
});```
### Your browser information:
User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15</code>
### Challenge Information:
Learn Intermediate OOP by Building a Platformer Game - Step 111
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-intermediate-oop-by-building-a-platformer-game/step-111
