3

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

// 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();
}
});

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

// 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

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

4

3 回答 3

3

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

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;

            });

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

于 2013-07-30T13:18:34.617 回答
1

您应该使用该addEvent方法将回调绑定到Crafty.stage.elem元素上的鼠标事件。

Crafty.addEvent(this, Crafty.stage.elem, 'mousedown', function(e) {
  console.log('mousedown at (' + e.clientX + ', ' + e.clientY + ')');
});

Crafty.addEvent(this, Crafty.stage.elem, 'mousemove', function(e) {
  var relative = Crafty.DOM.translate(e.clientX, e.clientY);
  console.log('mousemove at (' + relative.x + ', ' + relative.y + ')');
  this.player.x = relative.x;
  this.player.y = relative.y;
}.bind(this));

该方法由Mouse组件内部使用，参见https://github.com/craftyjs/Crafty/blob/develop/src/controls.js#L324-329

另请参阅https://groups.google.com/d/msg/craftyjs/6IBnhVe_NIE/hK3vPXP9TxsJ

于 2013-10-24T09:35:26.880 回答
1

以 Dan 所说的为基础，这是一个在移动设备和我的触摸屏笔记本电脑上运行良好的示例

<html>
  <head></head>
  <body>
    <div id="game"></div>
    <script type="text/javascript" src="lib/crafty.js"></script>
    <script>
      // When the DOM has loaded

        // Height and Width
        var WIDTH = 500, HEIGHT = 320;
        // Initialize Crafty
        Crafty.init(WIDTH, HEIGHT);
        // Background
        Crafty.background("black");

        Crafty.e("mouseTracking, 2D, Mouse, Touch, Canvas")
          .attr({ w:500, h:320, x:0, y:0 })
          .bind("MouseMove", function(e) 
          {
                console.log("MouseDown:"+ Crafty.mousePos.x +", "+ Crafty.mousePos.y);
                // when you touch on the canvas redraw the player
                player.x = Crafty.mousePos.x;
                player.y = Crafty.mousePos.y;

            });  

        // Create a player entity
        var player = Crafty.e();
        // Add some components to the entity
        player.addComponent("2D, DOM");
        //set where your player starts
        player.attr({
         x : 10,
         y : 10,
         w : 50,
         h : 50
         });

        player.addComponent("Color").color("red");
        //add mouse component for mouse events
    </script>
  </body>
</html>
于 2014-09-26T03:52:37.947 回答