Создание обработчиков событий мыши для форм холста

Question

Я пишу игру на основе плитки в javascript, используя canvas, и мне было интересно, как я могу создать простой обработчик событий, когда мышь вводит размеры плитки.

Я использовал jquery http://api.jquery.com/mousemove/ в прошлом, но для очень простого приложения, но, похоже, не могу понять, как я это сделаю в этом случае (быстро).

Хм ..

Я начал писать этот пост без понятия о том, как это сделать, но я просто попытался использовать jquery mousemove, как я начал выше. У меня есть рабочая версия, но она кажется «медленной» и очень неуклюжей. Это не кажется гладким или точным.

Я поместил весь код режима в скрипту js, чтобы легко поделиться: http://jsfiddle.net/Robodude/6bS6r/1/

так что происходит:

1) Запускается обработчик события jmery 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;
            }
        };
    }

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})
• Возможно, вы захотите использовать prototype объекты JavaScript вместо использования this.method = function() { ... } для каждого метода. Это может повысить производительность, поскольку необходимо создавать функции только один раз, а не всякий раз, когда создается новый объект этого класса.