자바 스크립트 타일 맵 충돌 최적화

Question

나는 프로그래밍에 익숙하지 않지만 충돌이있는 타일 맵 시스템을 만들었습니다. 나는 최적화에 대한 조언을 찾고 있는데, 아니면 내가하는 일이 완전히 어리 석다면 더 나은 방법을 알려주 길 바란다.

https://jsfiddle.net/19ed4sm0/

는 기본적으로 나는지도 배열을 통해 루프 기능을 만들고, 이동 키가 다운 될 때마다 호출된다. 이 시스템은 8 방향 이동으로 작동합니다. 즉, 계속 유지하고 싶습니다. 실행 시간을 측정함으로써

//Collision with map tiles 
    function checkMove(px, py, pw, ph, pd) { 
     for(var y=0; y < map.length; y+=1) { 
     for(var x=0; x <map[y].length; x+=1) { 

      var tileX = x * 32; 
      var tileY = y * 32; 

      if (map[y][x] === 1) { 
      if (px < tileX+32 && px + pw > tileX && py < tileY+32 && py + ph > tileY) { 
       if (pd === 'right' && px+pw > tileX) { 
       _player.x = tileX - pw - _player.speed; 
       } 
       if (pd === 'left' && px < tileX+32) { 
       _player.x = tileX+32 + _player.speed; 
       } 
       if (pd === 'up' && py+ph > tileY) { 
       _player.y = tileY + ph + _player.speed; 
       } 
       if (pd === 'down' && py < tileY+32) { 
       _player.y = tileY-32 - _player.speed; 
       } 
      } 

      } 
     } 
     } 
    } 

    function playerInit() { 
    this.width = 32; 
    this.height = 32; 
    this.x = cWidth/2-16; 
    this.y = cHeight-96; 
    this.speed = 4; 
    this.gravity = 6; 
    this.color = '#ffb5e2' 

    this.update = function() { 

     //movement 
     if (keydown.up === true) { 
     checkMove(this.x, this.y - this.speed, tileSize, tileSize, 'up'); 
     this.y -= this.speed; 
     } 
     if (keydown.left === true) { 
     checkMove(this.x-this.speed, this.y, tileSize, tileSize, 'left'); 
     this.x -= this.speed; 
     } 
     if (keydown.right === true) { 
     checkMove(this.x+this.speed, this.y, tileSize, tileSize, 'right'); 
     this.x += this.speed; 
     } 
     if (keydown.down === true) { 
     checkMove(this.x, this.y+this.speed, tileSize, tileSize, 'down'); 
     this.y += this.speed; 
     } 

     //canvas border collision 
     if (this.x < 0) { 
      this.x = 0; 
     } 
     if (this.y < 0) { 
      this.y = 0; 
     } 
     if (this.x > cWidth - this.width) { 
      this.x = cWidth - this.width; 
     } 
     if (this.y > cHeight - this.height) { 
      this.y = cHeight - this.height; 
     } 
    } 

    this.render = function() { 
     c.fillStyle = this.color; 
     c.fillRect(this.x, this.y, this.width, this.height); 
    } 
    } 

Answer 1

는 :

//Collision with map tiles 
function checkMove(px, py, pw, ph, pd) { 
    console.time("checkMove execution") 
    ... // Rest of function 
    console.timeEnd("checkMove execution") 
} 

는 checkMove 만 실행할 수 밀리의 일부분이되는 것을 볼 수있다. 그래서 성능 측면에서

는 당신이 덮여있다. 지도가 작기 때문에 중첩 루프가 있다고 생각하는 경우에도 놀라운 일이 아닙니다. 컴퓨터는 정말 빠르게 계산할 수 있습니다. 아마도 당신이 생각하는 것보다 더 빠를 것입니다. 프로그래밍을 시작했을 때 컴퓨터의 속도가 얼마나 과소 평가되었는지 기억합니다.

Answer 2

사실 현재 위치 주변의 8 개의 타일을 확인하면됩니다. 지금 당신은 그냥 충돌을 8 타일을 확인해야

var deltaX = [-1, -1, -1, 0, 0, 1, 1, 1]; 
var deltaX = [-1, 0, 1, -1, 1, -1, 0, 1]; 
for (var i = 0; i < deltaX.length; i++) { 
    var nextX = tileX + deltaX[i]; 
    var nextY = tileY + deltaY[i]; 
    // check collisions here 
} 

그래서 대신 20 * 20 = 400 타일을 확인 :

다음이 배열에서 자신의 오프셋을 저장할 수있는 위치를 계산합니다.