Lassen Sie ein Canvas-Objekt im Canvas-Bereich stoppen?

Question

Im Grunde habe ich ein kleines Spiel gemacht, aber was ich mich wundere, ist, wie ich mein erstelltes Objekt nicht außerhalb der Linien der Leinwand gehen lasse. Als er eine Grenze erreicht, möchte ich, dass er aufhört. Jede Hilfe wird geschätzt

Answer 1

Hallo dort, ich machte eine kleine Demo game mein Selbst. In diesem Spiel gibt es das, wonach du suchst. Arbeits Demo Sie es here

finden

So was habe ich

1) Spur Benutzer Tastatur drücken

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) bekommen eine grundlegende Konfiguration der Spielerposition (Mitte in meinem Fall

war)

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

3) dann auf die Funktion play.move verfolgen i die Richtung und alles tun, die Einschränkungen

player.move = function (Richtung) {

/** 
* 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(); 
}; 

Dann endlich i diese Funktion haben keine Kollision

/** 
    * 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; 
    } 

zu überprüfen