javascriptタイルマップの衝突の最適化

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つのタイルを確認するだけです。

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タイルをチェックする今、あなただけの衝突のためにタイルをチェックする必要があります：あなたは配列にそのオフセットを格納することができ、次の位置を計算する

。