I'm making a card game to get my legs with phaser. I have an row of overlapping, face down cards. I want to detect when any card is covered by another card.

The deck is shuffled before being placed on the board, so the order is known card[1] thru card[54]. It goes card.events.onInputDown.add(tap, this) on each card during setup to detect interaction, and then calls tap(this):

function tap(pointer){
    let zpos = pointer.z
    if (Phaser.Rectangle.intersects(pointer, *abovecard*)) {
    } else {
        pointer.play("front"); // anim to show the card back

(abovecard is asterisked as a placeholder because I'm not sure what to put there)

A simple boundary overlap check seems to be the model to use. But when I go abovecard = card[zpos + 1], it doesn't see a card above it. Even when I do in the console Phaser.Rectangle.intersects(card[37], card[38]), which are visibly overlapping, it says false.

Primary question: What am I missing here?

2ndary question: Is there a better way, than what I've described, to detect if one sprite is overlapping another sprite (whether the other sprite is known or not)?


Well, as it goes, as soon as I posted I figured it out.

Phaser.Rectangle.intersects(pointer, card[zpos + 1] needs an explicit rectangle. I thought I'd read that it automatically took the rectangle of the referred sprites, but it does not.

The solution is Phaser.Rectangle.intersects(pointer.getBounds(), card[zpos + 1].getBounds()


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.