# How can I limit the player's movement?

**URL:** <https://discourse.processing.org/t/how-can-i-limit-the-players-movement/28760>\
**Category:** Coding Questions\
**Created:** [March 23, 2021, 3:06pm UTC](https://discourse.processing.org/t/how-can-i-limit-the-players-movement/28760 "2021-03-23T15:06:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ValkerieZ](https://avatars.discourse-cdn.com/v4/letter/v/e56c9b/32.png) [@ValkerieZ](https://discourse.processing.org/u/ValkerieZ)\
**Post date:** [March 23, 2021, 3:06pm UTC](https://discourse.processing.org/t/how-can-i-limit-the-players-movement/28760/1 "2021-03-23T15:06:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 24, 2021, 9:46pm UTC](https://discourse.processing.org/t/how-can-i-limit-the-players-movement/28760/2 "2021-03-24T21:46:24Z")

</div>

Hi,

Welcome to the forum! 😉

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 :

```auto
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 😋

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

So it goes :

```auto
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 :

```auto
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 :

> ```auto
> constrain(n, low, high)
> 
> ```
> 
> Constrains a value between a minimum and maximum value.

See the [reference](https://p5js.org/reference/#/p5/constrain)

And here you have it :

```auto
const minY = 67;
const maxY = 535;

playerY = mouseY;

playerY = constrain(playerY, minY, maxY);

```

* * *

Here is a small code showing this principle :

```auto
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