How can I limit the player's movement?

p5.js Coding Questions
1

I am not sure why my code is not working. Specifically the section where i am trying to limit the players movements so he does not go out of bounds. This is an incomplete project that I’m trying to nail but i just can’t seem to get it right. Can anyone help?
This is a snippet of my code. My code is very hard to read without seeing the end result so I’ll just send the part that has the problem:

playerX = mouseX
playerY = mouseY
//sets the top border so that the character cannot exit the play area
//doesn’t work when i try it as when i move the mouse out of the boundaries the character still follows
if (mouseY < 67){
playerY = 67
} else {
playerY = mouseY
}
//sets the bottom border so that the character cannot exit the play area
if (mouseY > 535){
playerY = 535
} else {
playerY = mouseY
}
.
.
.
circle(playerX,playerY,40)

I have checked my code multiple times in case i accidentally set anything before these lines of code (or after) but I have not found any mistake. Please help?

2

Hi,

Welcome to the forum! :wink:

First of all, make sure to format your code by using the </> button in the message editor or using three backticks like ``` code ```.

In this condition :

playerY = mouseY;

if (mouseY < 67) {
  playerY = 67;
} else {
  playerY = mouseY;
}

If the mouse is not less than 67, then playerY = mouseY but this is already the case from previous lines. So the else condition is useless here :yum:

Instead of checking mouseY < 67, you can directly check with playerY < 67 since playerY = mouseY.

So it goes :

playerY = mouseY;

if (playerY < 67) {
  playerY = 67;
}

But you notice that there’s 67 two times in this piece of code. As programmers hate repetition, they use variables to solve that :

const minY = 67;

playerY = mouseY;

if (playerY < minY) {
  playerY = minY;
}

So now if you change the minY variable (supposed to be defined globally outside setup() or draw()), then it changes the value everywhere in the code.

Same for the maximum Y.

Last thing is that Processing provides a utility function to do that :

constrain(n, low, high)

Constrains a value between a minimum and maximum value.

See the reference

And here you have it :

const minY = 67;
const maxY = 535;

playerY = mouseY;

playerY = constrain(playerY, minY, maxY);

Here is a small code showing this principle :

let minX, maxX, minY, maxY;

// margin to limit the player movement
const margin = 100;

function setup() {
  createCanvas(500, 500);
  
  minX = margin;
  maxX = width - margin;
  
  minY = margin;
  maxY = height - margin;
}

function draw() {
  background(255);
  
  // Dislpay the limit
  noFill();
  stroke(255, 0, 0);
  rectMode(CENTER);
  rect(width / 2, height / 2, width - 2 * margin, height - 2 * margin);
  
  let playerX = mouseX;
  let playerY = mouseY;
  
  // Constrain the movements of the player
  playerX = constrain(playerX, minX, maxX);
  playerY = constrain(playerY, minY, maxY);
  
  // Display the player
  fill(0);
  noStroke();
  circle(playerX, playerY, 50);
}

Let me know if it works