Boundary for canvas game in Javascript

Question

I have to make a game for school with html5 canvas Javascript. I am new to javascript and still learning but i really need some help with this issue that i have and would appreciate it if someone could help me out. I tried several things but nothing seems to work and im at a loss.

So this is the code for the player object. It can move from left to right. Now the problem is that it leaves the canvas. I want it to stay in the canvas on the x axes.

// Things to do when keys are down
function onKeyDown(event) {

    // prevent arrow keys from scrolling the page
    if (event.keyCode >= 37 && event.keyCode <= 39) event.preventDefault();

    switch (event.keyCode) {
        case 37:
            player.vx = -1;
            player.image = player.imgLeft;
            break; // left key
     // case 38: player.vy = -1; break; // up key
        case 39:
            player.vx = 1;
            player.image = player.imgRight;
            break; // right key
    }
}

// Things to do when keys are up
function onKeyUp(event) {
    switch (event.keyCode) {
        case 37:
        case 39:
            player.vx = 0;
            player.image = player.original;
            break; // left or right key released
     // case 38: player.vy = 0; break; // up or down key released
    }
}

This is what i got so far....

if ((player.x >= 800) && (player.x  <= 0)) {

} else {

}

enhzflep · Answer 1 · 2013-04-04T12:20:49.343

You could consider adding two functions to check that you're within bounds. (Essentially the same as your code, albeit with my true condition returned in what would be your else statement.)

// returns true if param is in range [0..799]
function isInXrange(intPos)
{
  if ((intPos>=0) && (intPos<800))
    return true;
  else
    return false;
}
// returns true if param is in range [0..599]
function isInYrange(intPos)
{
  if ((intPos>=0) && (intPos<600))
    return true;
  else
    return false;
}

You could then add a function to move the player and another to handle colliding with the walls/wandering out of bounds

function movePlayer()
{
    if (isInXRange(player.x))
        player.x += player.vx;
    if (isInXRange(player.y))
        player.y += player.vy;
}

function handleOutOfBounds()
{
    if (isInXRange(player.x) == false)
    {
        // do something;
    }

    if (isInYRange(player.y) == false)
    {
        // do something else
    }
}

thanks for your respond! still not working but im trying to get it done! thanks — Jerrold van den Eeckhout, Apr 04 '13 at 12:34

score 0 · Answer 2 · edited Oct 07 '15 at 07:05

0

Basically just test to see if x + width (optional: + velocity) > canvas.width and the same for height.

edited Oct 07 '15 at 07:05

Anders

8,307
9
56
88

answered Oct 06 '15 at 23:24

DUUUDE123

166
1
10

@sideshowbarker Why is this not an answer? To me it looks very much like an attempt to solve the problem. Could you please elaborate on why it wouldn't be an answer? – Anders Oct 07 '15 at 07:04

Boundary for canvas game in Javascript

2 Answers2