Javascript 为画布形状创建鼠标事件处理程序

我正在使用canvas用javascript编写一个基于tile的游戏，我想知道当鼠标进入tile的维度时，如何创建一个简单的事件处理程序

我在过去使用过jquery，但它是一个非常简单的应用程序，但我似乎不知道在这种情况下如何（快速）实现它

嗯

我开始写这篇文章时并不知道该怎么做，但我只是像上面开始那样尝试使用jquery鼠标移动。我有一个工作版本，但它似乎“缓慢”和非常笨重。它看起来并不平滑或准确

我将所有模式代码放在js小提琴中，以便轻松共享：

所以现在发生的是：

1） jquery的mousemove事件处理程序激发

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;
            }
        };
    }

$（“#画布”）.mousemove（函数（e）{
mouse.X=e.pageX；
mouse.Y=e.pageY；
game.MouseMove（鼠标）；
Draw（）；
});
函数GameBoard（）{
this.Map=newmap（）；
this.Units=新单位（）；
this.MouseMove=函数（鼠标）{
this.Map.MouseMove（鼠标）；
};
}
函数映射（）{
this.LevelData=Level_1（）；//数组
这个。级别=[]；
this.BuildLevel=函数（）{
var t=新的瓷砖（）；
对于（var i=0；i如果（（Mouse.X>=this.X）&&&（Mouse.X=this.Y）&（Mouse.Y如果您有一个瓷砖网格，那么给定一个鼠标位置，您可以通过将鼠标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的
原型
对象，而不是对每个方法都使用
this.method=function（）{…}
。这可能会提高性能，因为它只需创建一次函数，而不必在创建该类的新对象时创建
Wow！我没想到这么快就会有这么好的想法/反应。效果很好。在速度和其他方面仍然存在一些问题。如果你不介意的话，还有其他一般性建议吗？我编辑了我的答案，添加了一些一般性建议。如果你想要更多，你可能想发布你的代码。太棒了！谢谢你的提示：）我也会查看codereview！