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

Question

我正在使用畫布使用javascript編寫基於圖塊的游戲，並且想知道如何在鼠標輸入圖塊尺寸時創建一個簡單的事件處理程序。

過去，我曾經使用過jquery的http://api.jquery.com/mousemove/ ，但對於一個非常簡單的應用程序，卻似乎無法迅速解決這種情況。

嗯..

我開始寫這篇文章時卻一無所知，但是我只是像上面一樣嘗試使用jquery mousemove。 我有一個工作版本，但似乎“緩慢”且笨拙。 它似乎不流暢或不准確。

我將所有模式代碼放入js小提琴以輕松共享： http : //jsfiddle.net/Robodude/6bS6r/1/

所以發生的是：

1）jQuery的mousemove事件處理程序觸發

2）將鼠標對象信息發送到GameBoard

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

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

5）然后，單個圖塊確定鼠標坐標是否在其邊界內。 （並執行某些操作-在這種情況下，我只是將tile屬性更改為白色）

但以下是我最關注的部分。

        $("#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鼠標位置除以瓷磚的寬度，再將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() { ... } 。 這可能會提高性能，因為它只需要創建一次函數，而不必在創建該類的新對象時創建。