如何通過使用Craftyjs的鼠標交互使動畫精靈移動？

Question

我有一個使用Craftyjs編寫的HTML5 canvas遊戲。我使用箭頭鍵可以正常工作，但我在添加鼠標交互時遇到了問題。精靈確實會隨鼠標輕微移動，但與箭頭鍵不同，當它碰到另一個組件時，它似乎會崩潰。我在該組件中添加了一個函數來處理鼠標交互，該交互不起作用，因此被註釋掉了。這是我的精靈組件的代碼;

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

要建立在什麼丹說，在這裏的是，在移動，我的觸摸屏筆記本電腦效果很好例子

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