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