使画布对象停在画布区域内？

Question

基本上我做了一个小游戏，但是我想知道如何使我创建的对象不超出画布的界限。 当他到达边界时，我要他停下来。 任何帮助表示赞赏

Answer 1

嗨，我自己做了一个小演示游戏 。 在那个游戏中，您正在寻找什么。 工作演示，您可以在这里找到

所以我要做的是

1）跟踪用户键盘的按下

 document.onkeydown = function(e) {
        e = e || window.event;

        if(e.keyCode == "37") player.move("left");
        else if(e.keyCode == "38") player.move("up");
        else if(e.keyCode == "39") player.move("right");
        else if(e.keyCode == "40") player.move("down");
    };

2）获取玩家位置的基本配置（在我的情况中为中间）

var player = {
        x: Math.round((w/2)/objectSizes),
        y: Math.round((h/2)/objectSizes)
    }

3）然后在功能play.move上我跟踪方向并进行所有限制

player.move = function（direction）{

/**
 * A temporary object to hold the current x, y so if there is a collision with the new coordinates to fallback here
 */
var hold_player = {
    x: player.x,
    y: player.y
};

/**
 * Decide here the direction of the user and do the neccessary changes on the directions
 */
switch(direction) {
    case "left":
        player.x -= speed / modifier;
        if(player.currentDirection == "stand") {
            player.currentDirection = "left-1";
        } else if(player.currentDirection == "left-1") {
            player.currentDirection = "left-2";
        } else if(player.currentDirection == "left-2") {
            player.currentDirection = "left-1";
        } else {
            player.currentDirection = "left-1";
        }
        break;
    case "right":
        player.x += speed / modifier;
        if(player.currentDirection == "stand") {
            player.currentDirection = "right-1";
        } else if(player.currentDirection == "right-1") {
            player.currentDirection = "right-2";
        } else if(player.currentDirection == "right-2") {
            player.currentDirection = "right-1";
        } else {
            player.currentDirection = "right-1";
        }
        break;
    case "up":
        player.y -= speed / modifier;

        if(player.currentDirection == "stand") {
            player.currentDirection = "up-1";
        } else if(player.currentDirection == "up-1") {
            player.currentDirection = "up-2";
        } else if(player.currentDirection == "up-2") {
            player.currentDirection = "up-1";
        } else {
            player.currentDirection = "up-1";
        }

        break;
    case "down":
        player.y += speed / modifier;

        if(player.currentDirection == "stand") {
            player.currentDirection = "down-1";
        } else if(player.currentDirection == "down-1") {
            player.currentDirection = "down-2";
        } else if(player.currentDirection == "down-2") {
            player.currentDirection = "down-1";
        } else {
            player.currentDirection = "down-1";
        }

        break;
}
    /**
     * if there is a collision just fallback to the temp object i build before while not change back the direction so we can have a movement
     */
    if(check_collision(player.x, player.y)) {
        player.x = hold_player.x;
        player.y = hold_player.y;
    }

    /**
     * If player finds the coordinates of pokeball the generate new one, play the sound and update the score
     */
    if(player.x == pokeball.x && player.y == pokeball.y) { // found a pokeball !! create a new one
        console.log("found a pokeball of "+pokeball.spritePosition+"! Bravo! ");
        pokePick.pause();
        pokePick.currentTime = 0;
        pokePick.play();
        score += 1;
        pokeball.generatePosition();
    }

    update();
};

然后最后我有这个功能来检查任何碰撞

 /**
     * Our function that decides if there is a collision on the objects or not
     * @function
     * @name check_collision
     * @param {Integer} x - The x axis
     * @param {Integer} y - The y axis
     */
    function check_collision(x, y) {
        var foundCollision = false;

        if(((x > 3 && x < 9) && y == 6) || ((x > 4 && x < 9) && (y == 5 || y == 4 || y == 3))) { //collision on house
            console.log("on house");
            foundCollision = true;
        }

        if((x<1 || x>20) ||
            (y<2 || y>20) ||
            ((y > 0 && y < 4) && (x == 20 || x == 19)) || //right corner
            ((y > 0 && y < 4) && (x == 2 || x == 3)) || //left corner
            ((y > 18) && (x == 2 || x == 3)) || //left corner
            ((x > 17) && (y == 19 || y == 20)) || //left corner
            ((x > 19) && (y == 17 || y == 18)) //left corner 2
        ) {
            console.log("lost on the woods");
            foundCollision = true
        }

        return foundCollision;
    }