HTML5 Game - Walking Boundary Issue

Question

나는 하향식 슈팅 게임을하고 있는데, 기본적으로 캐릭터는 화면 중앙에서 rect (Safe Zone) 내에서 시작됩니다. 캐릭터는 정적이 아니며 장면이 있습니다. 그는 안전 지대 안에서 걸어 다닐 수 있습니다. 캐릭터가이 구역 밖으로 나 오자마자, 스태틱 스위치가 켜집니다 ... 캐릭터는 고정되어 있으며 장면은 그 주위를 움직입니다.

유일한 문제는 안전 영역으로 다시 들어갈 수 없어 내 정적이 다시 전환 될 수 있다는 것입니다.

저는 영원히 구역 밖에서 갇혀 있습니다. 내가하고있는 일은 내 캐릭터의 위치가 특정 값 (rect)인지 '내'인지 여부를 확인하는 것입니다. 내 KeyControls가 캐릭터가 아닌 Map에 영향을 미칩니다.

그래서 이것은 (안전 지대) 검사 내 경계 :

//Walking Window Boundaries 
    var boundarySizeX = 400; 
    var boundarySizeY = 200; 

    ctxWalkBoundary.fillStyle = "grey"; 
    ctxWalkBoundary.fillRect(gameWidth/2 - boundarySizeX/2, gameHeight/2 - boundarySizeY/2, boundarySizeX, boundarySizeY); 
    ctxWalkBoundary.clearRect((gameWidth/2 - boundarySizeX/2) + 2, (gameHeight/2 - boundarySizeY/2) + 2, (boundarySizeX) - 4, (boundarySizeY) -4); 

    var paddingLeft = (gameWidth - boundarySizeX)/2; 
    var paddingRight = gameWidth - ((gameWidth - boundarySizeX)/2) - this.charWidth; 
    var paddingTop = (gameHeight - boundarySizeY)/2; 
    var paddingBottom = gameHeight - ((gameHeight - boundarySizeY)/2) - this.charHeight; 

    var paddingY = (gameHeight - boundarySizeY)/2; 

    if(this.drawX > paddingLeft && this.drawX < paddingRight && this.drawY > paddingTop && this.drawY < paddingBottom){ 
     inBoundary = true; 
    } 
    else{ 
     inBoundary = false; 
     console.debug("Out Of Boundary!"); 
    } 

그리고 이것은 내 KeyChecker입니다 :

//UP 
    if(this.isUpKey){ 

     //Character movement 
     if(inBoundary){ 
      this.drawX = this.drawX + this.speed * Math.cos((this.characterRotation)); 
      this.drawY = this.drawY + this.speed * Math.sin((this.characterRotation)); 
     } 
     else{ 
      mapPositionX = mapPositionX - this.speed * Math.cos((this.characterRotation)); 
      mapPositionY = mapPositionY - this.speed * Math.sin((this.characterRotation)); 
     } 

내 캐릭터가 항상 내 마우스 (회전)에 직면 해있다. 따라서 사용자가 W 또는 Up을 누를 때마다 문자는 항상 마우스 위치를 향해 걷습니다.

어떻게 영역으로 돌아갈 수있는 아이디어가 있습니까?

----- 업데이트 -----

나는 여전히 안전 지대 바깥에 직면하고있어 경우에 어떻게 든 확인해야합니다 생각 -하지 않을 경우, 그는이 정적 역.

Answer 1

지도와보기의 두 가지 항목 만 별도로 지정하십시오.

지도는 사용자의 좌표이므로 좌표가있는 객체가 유지됩니다. 보기는 화면에 표시되는지도의 일부입니다. 보기에는 x, y, widht 및 height의 4 가지 속성이 있습니다. 여기서 widht 및 height는 캔버스 크기 일 가능성이 큽니다.

화면 중간의지도 지점 (0,0)에서 게임을 시작하면보기 (x, y) 좌표는 (-view.width/2, -view.height/2)가되어야합니다. .

보기에서 캐릭터와 개체를 그리는 방법은 무엇입니까?

처음에는보기 사각형에있는 것만을 그립니다.

object.x >= view.x && object.x <= view.x + view.width && object.y >= view.y && object.y <= view.y + view.height 

가 (당신은 아마 너무 계정 개체의 경계에 소요) 경우 그래서 모든 객체를 반복하고 확인.

개체가 뷰 영역에 있으면 (object.x - view.x, object.y - view.y) 위치에 그립니다. 그게 전부 그림에 관한 것입니다.

이동중인 캐릭터 및보기 영역. 캐릭터가 경계와 충돌 할 때

지금 예에

character.x >= view.x + view.width 

다음 몇 가지 값으로 view.x 증가에 의해 오른쪽으로 볼을 이동 (오른쪽 테두리와 충돌) (즉/character.width 수 있습니다 2).

- UPDATE -

당신이 당신의 게임에서 OOP를 사용하지 않는 것을 내가 볼

이 (JS의 모든 개체이기 때문에 실제로 당신,하지만 당신이 목적에 사용하지 않을).

JS의 OOP에 대해 많은 설명이 있으므로 짧게하려고 노력할 것입니다.

JSON 형식을 사용하여 문자,지도 및보기와 같은 개체를 만들 수 있습니다.

character = { 
    x: 0, 
    y: 0, 
    xspeed: 0, 
    yspeed: 0, 
    speed: 0, 
    radius: 20, 
} 

map = { 
    objects: [ 
     {sprite: 'tree.jpg', x: 100, y: 50}, 
     {sprite: 'stone.jpg', x: 20, y: 30}, 
    ], 
} 

view = { 
    width: canvas.width, 
    height: canvas.height, 
    x: -this.width/2, 
    y: -this.height/2, 
} 

이들은 당신이 그런 식으로 당신의 기능에 같이 사용할 수있는 개체 :

for (var i=0; i++, i<map.objects.length) { 
    if (map_obj.x >= view.x && map_obj.x <= view.x + view.width && map_obj.y >= view.y && map_obj.y <= view.y + view.height) { 
     var map_obj = map.objects[i]; 
     draw_sprite(map_obj.sprite, map_obj.x - view.x, map_obj.y - view.y); 
    } 
} 

그것은 가장 좋은 방법은 아니지만, 지금은 훨씬 여전히 당신보다 낫다. OOP이 무엇인지 이해하면 자신 만의 것이 좋습니다.

Answer 2

여기에서 문제는 캐릭터가 경계 밖으로 나가기를 기다리고 대신지도를 움직이는 것입니다. 그러나 깃발은 이미 트립되어 있으며, 방향이 어떠하든 캐릭터의 움직임은 정적입니다. 왜냐하면 당신은 이미 경계선에 있기 때문입니다.

대신 문자가 경계를 건너 대신지도를 이동하여 그것을 방지하려고 할 때 감지 할 수있다 :

//UP 
if(this.isUpKey){ 

// save the x and y offset to prevent needless recalculation 
var xOffset = this.speed * Math.cos(this.characterRotation), 
    yOffset = this.speed * Math.sin(this.characterRotation); 

    //Character movement 
    if(boundaryCheck(xOffset, yOffset)){ 
     this.drawX = this.drawX + xOffset; 
     this.drawY = this.drawY + yOffset; 
    } 
    else{ 
     mapPositionX = mapPositionX - xOffset 
     mapPositionY = mapPositionY - yOffset; 
    } 

을 다음 boundaryCheck는 x와 y 델타의 소요가 여전히 있다면 파악 범위. 캐릭터가 여전히 경계 안에 있다면, return true과 캐릭터가 움직이게됩니다. 그렇지 않으면 맵이 움직입니다.

function boundaryCheck(xOffset, yOffset){ 
// variables set and other stuff done... 
    if(this.drawX + xOffset > paddingLeft && this.drawX + xOffset < paddingRight && this.drawY + yOffset > paddingTop && this.drawY + yOffset < paddingBottom){ 
     return true; 
    } 
    else{ 
     console.debug("Out Of Boundary!"); 
     return false; 
    } 

}; 

이렇게하면 범위를 벗어나는 문자가 경계쪽으로 이동하는지 여부를 알아낼 필요가 없습니다. 대신, 캐릭터가 어디로 가고 있는지 미리 결정하고 그에 따라 조정하여 항상 경계를 유지하십시오.

전체 코드가 없으면 물론 테스트 할 수 없지만 주어진 것으로 작동해야한다고 생각합니다.