Skip to main content

​
Overview

Fusion is the mechanic that allows you to combine two cards of the same type and level to create a single, more powerful card of the next level. This is essential for building board advantage and creating cards strong enough to overcome type disadvantages in combat.

​
Fusion Requirements

To successfully fuse two cards, they must meet the following criteria:

Same Type

Both cards must be of the same elemental type (Fire, Water, Plant, Light, Shadow, or Spirit).

Same Level

Both cards must be the exact same level (1+1, or 2+2).

Below Max Level

Level 3 cards cannot be fused further - they are already at maximum power.

Valid Position

Cards must be in valid positions (both on field, or one in hand + one on field).

​
Fusion Types

There are two ways to perform fusion in Elemental Battlecards:

​
1. Field Fusion (Card to Card)

Combine two cards that are both on your field: 
// From Frontend/src/game_objects/player.js

/**
 * Fuses two cards on the field.
 * @param {number} draggedIndex - The index of the dragged card.
 * @param {number} targetIndex - The index of the target card.
 * @returns {{newCard: object, emptiedIndex: number}|null}
 */
fuseCards(draggedIndex, targetIndex) {
    const card1 = this.field[draggedIndex];
    const card2 = this.field[targetIndex];

    // Validate both slots have cards
    if (!card1 || !card2) {
        return null;
    }

    // Validate compatibility
    if (card1.type !== card2.type || card1.level !== card2.level) {
        return null;
    }

    // Prevent fusing max level cards
    if (card1.level >= 3) {
        return null;
    }

    // Create the new fused card
    const newLevel = card1.level + 1;
    const newCardId = `${card1.type}-${newLevel}`;
    const newCardData = CardDefinitions[newCardId];
    const newCardInstance = { ...newCardData, instanceId: Phaser.Math.RND.uuid() };

    // Update field: new card at target, dragged slot becomes empty
    this.field[targetIndex] = newCardInstance;
    this.field[draggedIndex] = null;

    return { newCard: newCardInstance, emptiedIndex: draggedIndex };
}
How it works:
  • Drag one card onto another card of the same type and level
  • The new fused card appears in the target slot
  • The dragged slot becomes empty
  • Original cards are consumed in the fusion

​
2. Hand-to-Field Fusion

Combine a card from your hand with a card on your field: 
/**
 * Fuses a card from hand with a card on the field.
 * @param {string} instanceId - The instanceId of the card in hand.
 * @param {number} targetIndex - The field index of the target card.
 * @returns {object|null} The new fused card data or null.
 */
fuseFromHand(instanceId, targetIndex) {
    const cardFromHandIndex = this.hand.findIndex(c => c.instanceId === instanceId);
    const cardOnField = this.field[targetIndex];

    if (cardFromHandIndex === -1 || !cardOnField) return null;

    const cardFromHand = this.hand[cardFromHandIndex];

    // Validate compatibility
    if (cardFromHand.type !== cardOnField.type || 
        cardFromHand.level !== cardOnField.level) {
        return null;
    }

    // Remove card from hand
    this.hand.splice(cardFromHandIndex, 1);

    // Find the fusion result
    const newLevel = cardOnField.level + 1;
    const newCardId = `${cardOnField.type}-${newLevel}`;
    const newCardData = CardDefinitions[newCardId];

    // Original field card goes to graveyard
    this.addCardDataToGraveyard(cardOnField);

    const newCardInstance = { ...newCardData, instanceId: Phaser.Math.RND.uuid() };

    // Replace field card with fused result
    this.field[targetIndex] = newCardInstance;

    return newCardInstance;
}
How it works:
  • Drag a card from your hand onto a compatible field card
  • The new fused card replaces the field card
  • Both original cards are consumed
  • The field card goes to graveyard before being replaced
In hand-to-field fusion, the original field card is sent to the graveyard and decomposed into base Level 1 cards before the fusion completes.

​
Fusion Outcomes

Fusion creates progressively more powerful cards:
Combine two Level 1 cards to create one Level 2 card:
fuego-1 + fuego-1 → fuego-2
agua-1 + agua-1 → agua-2
planta-1 + planta-1 → planta-2
Result: A Level 2 card with +1 level advantage in combat.

​
Strategic Fusion Guide

​
When to Fuse

Offensive Fusion

Create Level 3 cards to guarantee victory against Level 1 cards, regardless of type advantage (2+ level difference auto-wins).

Defensive Fusion

Fuse to create Level 2 cards that can neutralize enemy type advantages through the +1 level difference mechanic.

Board Management

Free up field space by fusing two cards into one, allowing you to play more cards from your hand.

Resource Building

Stockpile higher-level cards for critical turns, especially before the mandatory attack turn.

​
When NOT to Fuse

Avoid these common fusion mistakes:
  • Don’t fuse prematurely: Keep multiple low-level cards to maintain field presence and flexibility
  • Don’t over-commit: Creating a Level 3 card means losing 4 Level 1 cards if it’s destroyed
  • Don’t fuse without purpose: Consider your opponent’s board state before fusing
  • Don’t ignore type diversity: Sometimes it’s better to keep different types than to fuse for levels

​
Graveyard Mechanics

When high-level cards are destroyed, they decompose: 
// From Frontend/src/game_objects/player.js

addCardDataToGraveyard(cardData) {
    const baseCardsCount = Math.pow(2, cardData.level - 1);
    // Level 1: 2^0 = 1 card
    // Level 2: 2^1 = 2 cards
    // Level 3: 2^2 = 4 cards

    for (let i = 0; i < baseCardsCount; i++) {
        const baseCardId = `${cardData.type}-1`;
        this.graveyard.push({ id: baseCardId, type: cardData.type, level: 1 });
    }
}

Level 1 Card

Returns as 1 Level 1 card to graveyard

Level 2 Card

Decomposes into 2 Level 1 cards in graveyard

Level 3 Card

Decomposes into 4 Level 1 cards in graveyard
When your deck runs out, the graveyard is shuffled back into your deck, giving you more cards to draw.

​
Fusion Examples

​
Example 1: Basic Field Fusion

Field State:
  Slot 0: fuego-1
  Slot 1: fuego-1
  Slot 2: empty

Action: Drag Slot 0 onto Slot 1

Result:
  Slot 0: empty
  Slot 1: fuego-2
  Slot 2: empty

​
Example 2: Hand-to-Field Fusion

Hand: [agua-2, planta-1, luz-1]
Field Slot 3: agua-2

Action: Drag agua-2 from hand onto Field Slot 3

Result:
  Hand: [planta-1, luz-1]
  Field Slot 3: agua-3
  Graveyard: +2 agua-1 cards (from decomposed field card)

​
Example 3: Failed Fusion

Field State:
  Slot 0: fuego-2
  Slot 1: agua-2

Action: Drag Slot 0 onto Slot 1

Result: Failed - different types
  Field unchanged

​
Game Configuration

Fusion is balanced by field and hand size limits: 
// From Frontend/src/helpers/constants.js

export const GAME_CONFIG = {
    MAX_HAND_SIZE: 4,      // Maximum cards in hand
    MAX_FIELD_SIZE: 6,     // Maximum cards on field
    INITIAL_DECK_SIZE: 48, // Starting deck size
};
  • Hand limit: 4 cards maximum encourages fusion to make room
  • Field limit: 6 slots creates strategic positioning decisions
  • Large deck: 48 cards ensures plenty of fusion opportunities

Build docs developers (and LLMs) love

Get started for freeTalk to us