Swapping images

[klesken]

Hello

I'm currently working on a simple memory game. I got it working, but I'm not content with how certain things are done in the code.

 

For example, right now I'm using one sprite for the face up and one sprite for the face down of a card. With visible=false / visible=true.

And since these are different sprites which are supposed to be at the same coordinates I have to update 2 things instead of 1.

 

I've also tried using the loadTexture-function. But this removes the old texture and it loads it and reloads it etc, which works for small numbers,

but what if I wanted a memory of the size 10000?

 

In a "regular", language this would be as straight-forward as:

if(faceUp){
  image = face;
}
else
 image = back;

But, since I'm new to Javascript and Phaser I might be missing something easy. So, is there a function within Phaser which does this, or should I try to

look at the sourcecode and "ugly"-program it?

 

Thanks in advance!

[rich]

Put all your card images into a texture atlas or a sprite sheet and then just set the frame (or frameName) property when the card is mid-flip.

[klesken]

Thanks, that works great!

I have another question, again this might be about javascript :|.

I have my code down here, creating a deck of cards basically to be able to flip and such.

	cards.forEach(function(card){		card.flip();		card.reference.input.boundsRect = rectangle;		card.reference.inputEnabled = true;		card.reference.input.enableDrag(true);		card.reference.input.bringToTop = true;		card.reference.input.enableSnap(32, 32, false, true);		card.reference.events.onInputDown.add(cardClicked, this);	});	function cardClicked(){}function Card(ref, suite, value, frame){	this.reference = ref;	this.suite = suite;	this.value = value;	this.frame = frame;	this.showFace = true;	this.flip = function(){		this.showFace = !this.showFace;		if(this.showFace){			this.reference.frame = this.frame;		}		else{			this.reference.frame = 52;			}	}}

cards is an array with Card-objects, in which the references are sprites.

 

And basically I want it so that when I press a card it flips, but to do this I need its place in the array with reference as key(I could do a search, but if there's another way it would be great).

 

I've also been thinking that in Javascript you can just add members to an object on the fly, but that doesn't seem to work for me when handling these sprites, I get members as undefined.

 

So basically I'm wondering if I'm going about this the wrong way, or if there is something I can put inside cardClicked() to make it work.

[XekeDeath]

Your cardClicked function will be passed the sprite that is clicked on, so you can access it in the function:

function cardClicked(sprite){}

So, if you give each of those sprites a member pointing to its parent:

    cards.forEach(function(card){        //existing code here...        card.reference.card = card;    });

You can then call the flip function on the clicked on cards parent in the callback:

function cardClicked(sprite){    sprite.card.flip();}

[rich]

Put them in a Group. Then in your clicked function you can just do:

groupName.getIndex(card);