1

I'm trying to learn crafty by coding a simplistic pacman game but I have had trouble ever since I changed the main player from a square to a sprite. I have the code below and I get a chomping pacman that I can move around the screen that changes directions but when the sprite runs over a dot, nothing happens. Is there something that I am missing that I need to do?

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);
  • oh, wanted to point something out. I've been playing with this and it looks like the problem is with the line "Crafty('PlayerSprite').origin();" – iscariot TF Jun 17 '17 at 22:02
  • 1
    OK. Found the problem. Origin must be set once and with a value or it kills colluision – iscariot TF Jun 17 '17 at 22:20

1 Answers1

-1

Origin must be set once and with a value or it kills collision