How to add border collision JavaScript?

Question

I have made a simple canvas with a red square that can be controlled and moved using buttons and translation, however I want to add collision with the border of the canvas so that you cannot move any further when touching the borders.

Is this possible and if so how can it be done in my code I’ve included below?

https://code.sololearn.com/WmHHQeq1wgR5/?ref=app

Thank you

Answer 1

Hi Alex
What you’ll need to do is get the width of half the square and subtract it from the the current position like:
Pseudocode:
If(Xposistion - half_width_square <= 0) {
Don’t move
}

Answer 2

Alex added "border collision" and made changes to make your code responsive, as well as working in any context (sololearn app / website or standalone file):

https://code.sololearn.com/W2FZtC6mVVwf/?ref=app