craftyjs - 如何使用 Craftyjs 使动画 Sprite 通过鼠标交互移动？

Question

我有一个使用 Craftyjs 编写的 HTML5 canvas 游戏。我使用箭头键可以很好地进行键盘交互，但是我在添加鼠标交互时遇到了问题。 Sprite 确实随鼠标轻微移动，但与用箭头键移动的方式不同，当它碰到另一个组件时，它似乎会崩溃。我在组件中添加了一个函数来处理不起作用的鼠标交互，因此它被注释掉了。这是我的 Sprite 组件的代码；

// This is the Angel Character
Crafty.c('Angel', {
    init: function() {
        this.requires('Actor, Fourway, Mouse, Collision, player_sprite, SpriteAnimation')
        .fourway(2)
        .stopOnSolids()
        // This deals with destroying the sins on collision.
        .onHit('Lust', this.killSin)
        .onHit('Greed', this.killSin)
        .onHit('Sloth', this.killSin)
        .onHit('Wrath', this.killSin)
        .onHit('Glutton', this.killSin)
        .onHit('Envy', this.killSin)
        .onHit('Pride', this.killSin)

        // This defines the animations.
        .animate('AngelUp', 0, 0, 2)
        .animate('AngelLeft', 0, 1, 2)
        .animate('AngelRight', 0, 2, 2)
        .animate('AngelDown', 0, 3, 2);

    // This deals with keyboard interaction.
    var animation_speed = 4;
    this.bind('NewDirection', function(data) {
        if (data.x > 0 || data.realX > this._x) {
            this.animate('AngelRight', animation_speed, -1);
        } else if (data.x < 0) {
            this.animate('AngelLeft', animation_speed, -1);
        } else if (data.y > 0) {
            this.animate('AngelDown', animation_speed, -1);
        } else if (data.y < 0) {
            this.animate('AngelUp', animation_speed, -1);
        } else {
            this.stop();
        }
    });

    // This deals with mouse interaction. 
    /*this.bind('NewDirection', function(data) {
        if (data.x > this.x) {
            this.animate('AngelRight', animation_speed, -1);
        } else if (data.x < this.x) {
            this.animate('AngelLeft', animation_speed, -1);
        } else if (data.y > this.y) {
            this.animate('AngelDown', animation_speed, -1);
        } else if (data.y < this.y) {
            this.animate('AngelUp', animation_speed, -1);
        } else {
            this.stop();
        }
    });*/
},

// Registers a stop-movement function to be called when
//  this entity hits an entity with the "Solid" component
stopOnSolids: function() {
    this.onHit('Solid', this.stopMovement);

    return this;
},

// Stops the movement
stopMovement: function() {
    this._speed = 0;
    if (this._movement) {
        this.x -= this._movement.x;
        this.y -= this._movement.y;
    }
},

// Deals with the angel finding a sin.
killSin: function(data) {
    sin = data[0].obj;
    Crafty("Score").each(function () { 
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score),
            this.text("Score: " + ++score) });
    Crafty.audio.play('kill');
    sin.kill();
}
});

这是在场景中实例化天使的代码。我向它添加了一个绑定(bind)函数来尝试使鼠标交互正常工作，但它不能正常工作。

// This places the angel on the grid.
this.player = Crafty.e('2D, Canvas, Angel, Mouse')
                .at(5, 5)
                .bind('MouseMove', function(e) {
                this.x = e.offsetX || e.layerX;
                this.y = e.offsetY || e.layerY;
                })

这是游戏的链接；

http://users.aber.ac.uk/rig6/achievement_unlocked/index.html

我已经尝试了所有方法，但在网上找不到对此有帮助的示例。有人可以帮忙吗？

Answer 1

我发现使用 Crafty 绑定(bind)到鼠标/触摸的最佳方法是创建一个 Canvas 范围的元素，然后绑定(bind)到它。创建一个接受鼠标和触摸事件的 Canvas 范围的实体。请注意，Crafty 通过相同的逻辑路由鼠标和触摸。此示例绑定(bind)到移动/悬停。

Crafty.e("mouseTracking, 2D, Mouse, Touch, Canvas")
          .attr({ w:320, h:480, x:0, y:0 })
          .bind("MouseMove", function(e) 
          {
                console.log("MouseDown:"+ Crafty.mousePos.x +", "+ Crafty.mousePos.y);
                var hero = = Crafty("hero"); //get hero
                hero.x = Crafty.mousePos.x;
                hero.y = Crafty.mousePos.y;

            });                 

现在，实体“英雄”将跟随鼠标悬停和手指在屏幕上的触摸。您可能想改为绑定(bind)到“MouseDown”并处理一些逻辑。