Learn Intermediate OOP by Building a Platformer Game - Step 66

JavaScript
1

Tell us what’s happening:

Instruction:
Inside the constructor, add this.position and assign it an object with the x and y coordinates.

Error Message:
The this.position property should be an object with the x and y coordinates.

What is meant by “coordinates” if what I have is incorrect? I’ve tried a number of variations on this solution to no avail

Your code so far (specific to this problem)

class Platform {
constructor(x,y) {
this.position = {
x: x,
y: y,
};
}
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

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;

const proportionalSize = (size) => {
  return innerHeight < 500 ? Math.ceil((size / 500) * innerHeight) : size;
}

class Player {
  constructor() {
    this.position = {
      x: proportionalSize(10),
      y: proportionalSize(400),
    };
    this.velocity = {
      x: 0,
      y: 0,
    };
    this.width = proportionalSize(40);
    this.height = proportionalSize(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;
    }

    if (this.position.x >= canvas.width - 2 * this.width) {
      this.position.x = canvas.width - 2 * this.width;
    }
  }
}


class Platform {
  constructor(x,y) {
    this.position = {
      x: x,
      y: y,
    };
  }
}


const player = new Player();

const animate = () => {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.update();

  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;
  }
}


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();
}

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: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Learn Intermediate OOP by Building a Platformer Game - Step 66

1 Like
2

It wants you to use the shorthand syntax.

3

What you wrote is correct.

It is an issue with the tests expecting the shorthand as mentioned.

I don’t see a reason for the test to force this shorthand.
The test should be updated to accept any valid answer or teach the shorthand

1 Like
4

I have gone ahead and created an issue for it

5

I’m sort of OK with it requiring the shorthand syntax but then it should be made clear that it is the requirement.

But I guess if that isn’t the point, any valid code should pass.

1 Like
6

Looking at the final solution code, it looks like a similar step occurs for the Checkpoint class where they need to use the shorthand syntax.

I’ll update the issue to instead change the directions to teach how to use the shorthand syntax.

2 Likes
7

@gailedit Hopefully, the MDN link explains it well enough.

But here is an example as well.

const name = "CamperCat";

const user = {
  name,
};

console.log(user); // { name: 'CamperCat' }
8

@jwilkins.oboe & @lasjorg - :raised_hands: Thank you! I knew it had to be something tiny like that to drive me so crazy :crazy_face:

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.