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


1 Answer 1


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


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .