爲畫布形狀創建鼠標事件處理程序

Question

我使用畫布在JavaScript中編寫基於圖塊的遊戲，並想知道如何爲鼠標進入貼圖維度時創建簡單的事件處理程序。

我在過去使用過jquery的http://api.jquery.com/mousemove/，但是對於一個非常簡單的應用程序，但似乎無法將我的頭圍繞在這種情況下（快速地）來完成。

嗯..

我開始寫這篇文章沒有對如何做到這一點線索，但我只是使用jQuery鼠標移動就像我上面開始嘗試。我有一個工作版本，但它似乎「緩慢」，非常笨重。這看起來不順暢或不準確。

我把所有模式的代碼放到一個js小提琴輕鬆分享： http://jsfiddle.net/Robodude/6bS6r/1/

所以發生的事情是：

1）jQuery的鼠標移動事件處理火災

2）發送鼠標對象信息到遊戲鍵盤

3）發送的鼠標對象信息到地圖

4）循環遍歷所有瓦片，並向每個瓦片發送鼠標對象

5）然後單個瓦片確定鼠標座標是否在其邊界內。 （並做了一些事情 - 在這種情況下，我只是將瓷磚屬性更改爲白色）

但這裏是我最關心的部分。

 $("#canvas").mousemove(function (e) { 
      mouse.X = e.pageX; 
      mouse.Y = e.pageY; 
      game.MouseMove(mouse); 
      Draw(); 
     }); 



function GameBoard() { 
    this.Map = new Map(); 
    this.Units = new Units(); 

    this.MouseMove = function (Mouse) { 
     this.Map.MouseMove(Mouse); 
    }; 
} 


function Map() { 
    this.LevelData = Level_1(); // array 
    this.Level = []; 
    this.BuildLevel = function() { 
     var t = new Tile(); 
     for (var i = 0; i < this.LevelData.length; i++) { 
      this.Level.push([]); 
      for (var a = 0; a < this.LevelData[i].length; a++) { 
       var terrain; 
       if (this.LevelData[i][a] == "w") { 
        terrain = new Water({ X: a * t.Width, Y: i * t.Height }); 
       } 
       else if (this.LevelData[i][a] == "g") { 
        terrain = new Grass({ X: a * t.Width, Y: i * t.Height }); 
       } 
       this.Level[i].push(terrain); 
      } 
     } 
    }; 
    this.Draw = function() { 
     for (var i = 0; i < this.Level.length; i++) { 
      for (var a = 0; a < this.Level[i].length; a++) { 
       this.Level[i][a].Draw(); 
      } 
     } 
    }; 

    this.MouseMove = function (Mouse) { 
     for (var i = 0; i < this.Level.length; i++) { 
      for (var a = 0; a < this.Level[i].length; a++) { 
       this.Level[i][a].MouseMove(Mouse); 
      } 
     } 
    }; 

    this.BuildLevel(); 
} 

    function Tile(obj) { 
     //defaults 
     var X = 0; 
     var Y = 0; 
     var Height = 40; 
     var Width = 40; 
     var Image = "Placeholder.png"; 
     var Red = 0; 
     var Green = 0; 
     var Blue = 0; 
     var Opacity = 1; 

// ... 

     this.Draw = function() { 
      ctx.fillStyle = "rgba(" + this.Red + "," + this.Green + "," + this.Blue + "," + this.Opacity + ")"; 
      ctx.fillRect(this.X, this.Y, this.Width, this.Height); 
     }; 
     this.MouseMove = function (Mouse) { 
      if ((Mouse.X >= this.X) && (Mouse.X <= this.Xmax) && (Mouse.Y >= this.Y) && (Mouse.Y <= this.Ymax)) { 

       this.Red = 255; 
       this.Green = 255; 
       this.Blue = 255; 
      } 
     }; 
    } 

Answer 1

如果有瓷磚的網格，然後給出一個鼠標位置，可以通過將X鼠標位置由瓷磚和Y位置與所述高度的寬度檢索瓦片的X和Y索引和地板兩者。

這將使Map的MouseMove：

this.MouseMove = function (Mouse) { 
    var t = new Tile(); 
    var tileX = Math.floor(mouse.X/t.Width); 
    var tileY = Math.floor(mouse.Y/t.Height); 
    this.Level[tileY][tileX].MouseMove(Mouse); 
}; 

編輯：你問了一些一般性建議。這裏你去：

• 這是更常見的使用初始大寫字母僅用於JavaScript中的類。
• Mouse是一個簡單的結構;我不認爲它需要有自己的班級。也許使用對象文字。 （如{x: 1, y: 2}）
• 您可能希望使用JavaScript的prototype對象，而不是對每種方法使用this.method = function() { ... }。這可能會提高性能，因爲它只需要創建一次函數，而不是每當創建該類的新對象時。