Question

我有一个使用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

我已尝试过所有内容，无法在线找到有助于此的示例。请有人帮忙吗？

Answer 1

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

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”并处理一些逻辑。

Answer 2

您应该使用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

Answer 3

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

如何使用Craftyjs通过鼠标交互制作动画精灵？

3 个答案: