Learn Intermediate OOP by Building a Platformer Game - Step 31

JavaScript
1

Tell us what’s happening:

I want my position for x to be less than the width

Your code so far

if (this.position.x < canvas.width) {
           
        }





Sorry, your code does not pass. Keep trying.

Your condition should check if the player's x position is less than the width

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Intermediate OOP by Building a Platformer Game - Step 31

2

You want to use this for the width as well.

3 
 if (this.position.x < this.canvas.width) {
           
        }

nope not quite working had to remove canvasThis text will be blurred

4

That is what I meant.

There is no canvas property on this. canvas is a top-level variable.

1 Like
5

But how will the program know it’s referring to the canvas width and not the player width when using this. ?

2 Likes
6

Hopefully somebody will answer this lol, Ive made a couple platformers using python and it makes no sense to use ‘this.width’ here instead of ‘canvas.width’ to me either.

7

Same, this makes no sense to me (hence me having to look up the answer)

8

i think this one is that the postion a of the little player blob cant be smaller than the width of the player rectangle itself ? otherwise half the blob would be off the screen ?

maybe someone can clarify

9

I think you’re correct TheKDog. The next step is to set the boundary so that the player doesn’t exceed the right edge of the canvas using an If statement with this.position.x >= canvas.width - this.width * 2

10

This step is referring to the left edge of the screen. I believe the player class position is the top left corner of the box, the coordinate grid starts at the top left of the canvas, by checking if (this.position.x < this.width), you’re ensuring that the box never approaches closer than one player width of the left edge of the screen. The following step’s limit is if (this.position.x >= canvas.width - this.width * 2), which would put the left edge of the box 2 box width’s away from the right edge of the canvas (so 1 width away from the right edge of the box).

If you wanted to let it get flush with the edges, this step’s condition would be if (this.position.x < 0)

1 Like
11

this.width seems to be a flexible version of canvas.width thanks to proportionalSize() which we created earlier on in this project. We are using an if statement of this.width in order to not allow the player character go beyond canvas width even if we change the window size of the browser.