캔버스 객체를 캔버스 영역 내에서 정지 시키시겠습니까?

Question

기본적으로 약간의 게임을 만들었지 만, 내가 만든 오브젝트를 캔버스의 선 밖으로 벗어나지 않게 만드는 방법은 무엇인지 궁금합니다. 그가 국경에 이르렀을 때 나는 그가 멈추길 바란다. 어떤 도움을 주신다면

Answer 1

안녕하세요 저는 작은 데모를 만들었습니다 game 내 자신을. 그 게임에는 당신이 찾고있는 것이 있습니다. 작업은

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) 내 경우에는 기본 플레이어 위치 설정 (가운데를 받고)이었다가 here

그래서 내가 무슨 짓을 찾을 수 있습니다 데모

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

3) 다음 함수 play.move에 전 방향을 추적하고 모든 제한을

01 23,516,

player.move = 함수 (방향) {i가 모든 충돌

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

을 확인하기 위해 기능이 최근에이어서

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