javascript - Crafty.js 无法识别与其他实体的碰撞

Question

我试图通过编写一个简单的吃 bean 人游戏来学习狡猾，但自从我将主要玩家从正方形更改为 Sprite 后，我遇到了麻烦。我有下面的代码，我得到了一个咀嚼的吃 bean 人，我可以在屏幕上移动它来改变方向，但是当 Sprite 跑过一个点时，什么也没有发生。有什么我需要做的事情吗？

var x= 0;
var y= 0;
var w= 50;
var h= 50;
var color= "#F00";
var speed= 500;
var dot=0;
var score=0;
var power=0;
var spriteSheet;
var ent1;

function hitSolid(){
    console.log('hit a solid');
    Crafty('PlayerSprite').x -= Crafty("PlayerSprite").motionDelta().x;
    Crafty('PlayerSprite').y -= Crafty("PlayerSprite").motionDelta().y;
}
function processDot(e){
    console.log('hit a dot');
    console.log(e);
    dot++;
    Crafty(e).destroy();
    score = score + 10;
    scoreBoard.text('Score: '+ score);
}
function animateDirection(e){
    var signY = e.y;
    var signX = e.x;
    Crafty('PlayerSprite').origin();
    if (this.lastSignY !== signY) {
      if (signY === 1) {
        console.log('down');
        Crafty('PlayerSprite').rotation = 90;
      } else if (signY === -1) {
        console.log('up');
        Crafty('PlayerSprite').rotation = 270;
      } else if (signY === 0) {
        Crafty('PlayerSprite').pauseAnimation;
        Crafty('PlayerSprite').resetAnimation;
      }
        this.lastSignY = signY;
    }
    if (this.lastSignX !== signX) {
      Crafty('PlayerSprite').flip('X');
      if (signX === 1) {
        console.log('right');
        Crafty('PlayerSprite').rotation = 0;
      } else if (signX === -1) {
        console.log('left');
        Crafty('PlayerSprite').rotation = 180;
      } else if (signX === 0) {
        Crafty('PlayerSprite').pauseAnimation;
        Crafty('PlayerSprite').resetAnimation;
      }

        this.lastSignY = signY;
        this.lastSignX = signX;
    }   
}
function initLoads(){
    console.log('initLoads called');
    spriteSheet = Crafty.sprite(13,13, "http://i192.photobucket.com/albums/z138/mbafernandez/player_zpsrdewekon.png", {
        player: [0,0]
        },0,0,0);
    ent1 = Crafty.e('2D, DOM, Color, Fourway, SpriteAnimation, Collision, wiredhitbox, player, PlayerSprite').attr({x:100, y: 100, z:1, w:24, h:24}).fourway(speed).collision().onHit('Solid',console.log('hit solid'));
    ent1.reel('chomp', 500, 0, 0, 4);
    ent1.animate('chomp', -1);
    ent1.bind('NewDirection', function(e){animateDirection(e);});
    console.log('load sprites');
    console.log(ent1.getId);
}

function makeDot(xPos, yPos){
    Crafty.e('Dot, 2D, Canvas, Color, Solid, Collision')
        .attr({x: xPos, y: yPos, w:10, h:10})
        .color('white')
        .checkHits('player')
        .bind("HitOn",function(hitData){
            processDot(this.getId);
                });
}

Crafty.init(420,600, document.getElementById('test'));
initLoads;
Crafty.background('#000000');
scoreBoard = Crafty.e('2D, DOM, Text, ScoreBoard').attr({x: 350,y: 12, z:1, w: 100, h:20});
scoreBoard.textColor('white');
scoreBoard.text('Score: '+ score);
powerBoard = Crafty.e('2D, DOM, Text, ScoreBoard').attr({x: 350,y: 25, z:1, w: 100, h:20});
powerBoard.textColor('white');
powerBoard.text('Power: '+ power);
Crafty.e('Solid, 2D, Canvas, Color').attr({x: 0, y: 0, w: 1, h: 600}).color('white');
Crafty.e('Solid, 2D, Canvas, Color').attr({x: 430, y: 0, w: 1, h: 600}).color('white');
Crafty.e('Solid, 2D, Canvas, Color').attr({x: 0, y: 0, w: 430, h: 1}).color('white');
Crafty.e('Solid, 2D, Canvas, Color').attr({x: 0, y: 610, w: 350, h: 1}).color('white');
makeDot(200,200);

Answer 1

原点必须设置一次并带有一个值，否则会消除碰撞