✨ Finish implementing base skeleton for all Rébus minigames

- Create all rebus levels,
- Make a level selector screen for rébus,
- Randomize the order of the option cards.

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Pandora</title>
+    <title>Alfabetiza</title>
 
     <link rel="stylesheet" type="text/css" href="style.css">
 
@@ -18,7 +18,12 @@
 
     <!-- Game -->
     <!-- Rébus -->
-    <script type="text/javascript" src="src/elements/earth/rebus/Levels.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/RebusLevels.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/RebusLevelSelector.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/RebusGameVisualEffects.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/RebusCardVisualEffect.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/RebusOptionCard.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/RebusQuestionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/rebus/RebusGame.js"></script>
   </head>
   

src/elements/earth/rebus/Levels.js

@@ -1,33 +0,0 @@
-const REBUS_LEVELS = {
-    tutorial: {
-        optionCards: [
-            {
-                path: "assets/textures/monke.png",
-                name: "Macaco",
-            },
-            {
-                path: "assets/textures/oca.png",
-                name: "Oca",
-            },
-            {
-                path: "assets/textures/key.png",
-                name: "Chave",
-            },
-        ],
-
-        questionCards: [
-            {
-                path: "assets/textures/glasses.png",
-                name: "Óculos",
-            },
-            {
-                path: "assets/textures/house.png",
-                name: "Casa",
-            },
-        ],
-    },
-
-    level1: {
-
-    },
-}

src/elements/earth/rebus/RebusCardVisualEffect.js

@@ -0,0 +1,28 @@
+class RebusCardVisualEffect extends Object2D
+{
+    glowAmount = 0;
+
+    _draw(delta, db)
+    {
+        db.rectMode(CENTER);
+        if (this.parent.selected)
+        {
+            if (!this.parent.isAnswer)
+            {
+                db.fill(0, 80);
+                db.rect(0, 0, 300, 400, 10, 10);
+            }
+            else
+            {
+                db.noFill();
+                this.glowAmount = min(1.0, this.glowAmount + 0.07);
+                for (let i = 0; i < 100; i++)
+                {
+                    db.stroke(255, 255, 100, this.glowAmount * 200 / (101 - i));
+                    db.strokeWeight((100 - i) / 3);
+                    db.rect(0, 0, 300, 400, 10);
+                }
+            }
+        }
+    }
+}

src/elements/earth/rebus/RebusGame.js

@@ -1,120 +1,107 @@
-class RebusQuestionCard extends Object2D
+class RebusGame extends Object2D
 {
-    thumb = null;
-    imgName = "";
+    levelData = null;
+    gameFinished = false;
+    points = 3;
 
-    fillColor = new Color(200, 200, 200);
+    backButton = null;
+    continueButton = null;
+    timer = null;
 
     _setup()
     {
-        var sprite = new Sprite2D("sprite", this.thumb);
-        sprite.width = 250;
-        sprite.height = 250;
-        sprite.setPosition(0, -75);
-        this.addChild(sprite);
+        var arr = [];
+        for (let i = 0; i < this.levelData.optionCards.length; i++)
+            arr.push(i);
+        arr = shuffle(arr);
+
+        for (let i = 0; i < this.levelData.optionCards.length; i++)
+        {
+            var j = arr[i];
+            var newCard = new RebusOptionCard("OptionCard" + j);
+            AssetHandler.loadTexture(this.levelData.optionCards[j].name, this.levelData.optionCards[j].path);
+            newCard.thumb = AssetHandler.getTextureByName(this.levelData.optionCards[j].name);
+            newCard.imgName = this.levelData.optionCards[j].name;
+            newCard.isAnswer = this.levelData.optionCards[j].answer;
+            newCard.setPosition((i + 1) * (1920 / 4), 3 * (1080 / 4));
+            newCard.connect("selected", this, "_onCardSelected");
+            this.addChild(newCard)
+        }
+
+        for (let i = 0; i < this.levelData.questionCards.length; i++)
+        {
+            var newCard = new RebusQuestionCard("OptionCard" + i);
+            AssetHandler.loadTexture(this.levelData.questionCards[i].name, this.levelData.questionCards[i].path);
+            newCard.thumb = AssetHandler.getTextureByName(this.levelData.questionCards[i].name);
+            newCard.imgName = this.levelData.questionCards[i].name;
+            newCard.setPosition((i + 1) * (1920 / (this.levelData.questionCards.length + 1)), 1080 / 4);
+            this.addChild(newCard)
+        }
+
+        this.addChild(new RebusGameVisualEffects("GameVisualEffects"));
+
+        this.backButton = new Button("BackButton");
+        this.backButton.setLabel("Voltar");
+        this.backButton.setFontSize(30);
+        this.backButton.setPosition(20, 20);
+        this.backButton.setSize(110, 75);
+        this.backButton.connect("mouseClicked", this, "_onBackClicked");
+        this.addChild(this.backButton);
+
+        this.continueButton = new Button("ContinueButton");
+        this.continueButton.setLabel("Continuar");
+        this.continueButton.setFontSize(40);
+        this.continueButton.setPosition((1920 - this.continueButton.getSize().x) / 2, 1080 - 450);
+        this.continueButton.hide();
+        this.continueButton.connect("mouseClicked", this, "_onContinueClicked");
+        this.addChild(this.continueButton);
+
+        this.timer = new Timer("Timer", 2, false, true);
+        this.timer.connect("timeout", this, "_onTimerTimeout");
+        this.addChild(this.timer);
     }
 
     _draw(delta, db)
     {
-        db.rectMode(CENTER);
-        db.fill(this.fillColor.getP5Color());
-        db.rect(0, 0, 300, 400, 10, 10);
-        db.textAlign(CENTER, CENTER);
-        db.fill(0);
-        db.textSize(40);
-        db.text(this.imgName, 0, 100);
+        background(52);
     }
-}
-
-class RebusOptionCard extends RebusQuestionCard
-{
-    isAnswer = false;
-
-    mouseOver = false;
-    mousePress = false;
 
-    _setup()
+    returnToMenu()
     {
-        var sprite = new Sprite2D("sprite", this.thumb);
-        sprite.width = 250;
-        sprite.height = 250;
-        sprite.setPosition(0, -75);
-        this.addChild(sprite);
-
-        var area = new Area2D("area", SHAPES.RECT, new Rect(300, 400), true);
-        area.connect("mouseEntered", this, "_onMouseEntered");
-        area.connect("mouseExited", this, "_onMouseExited");
-        this.addChild(area);
+        AssetHandler.clearTextureCache();
+        GameHandler.addRootObject(new RebusLevelSelector("LevelSelector"));
+        this.queueFree();
     }
 
-    _update(delta)
+    _onCardSelected(isAnswer)
     {
-        if (this.mouseOver)
+        if (!isAnswer)
+            this.points--;
+        else
         {
-            if (InputHandler.mouseIsClicked)
+            this.gameFinished = true;
+            this.backButton.hide();
+            this.timer.start();
+            for (let i = 0; i < this.children.length; i++)
             {
-                console.log("selected");
+                if (this.children[i] instanceof RebusOptionCard)
+                    this.children[i].selectable = false;
             }
-
-            if (InputHandler.mouseIsPressed)
-            {
-                this.scale.x = max(this.scale.x - 3.0 * delta, 0.95);
-                this.scale.y = max(this.scale.y - 3.0 * delta, 0.95);
-            }
-            else
-            {
-                this.scale.x = min(this.scale.x + 2.0 * delta, 1.1);
-                this.scale.y = min(this.scale.y + 2.0 * delta, 1.1);
-            }
-        }
-
-        else
-        {
-            this.scale.x = max(this.scale.x - 2.0 * delta, 1);
-            this.scale.y = max(this.scale.y - 2.0 * delta, 1);
         }
     }
 
-    _onMouseEntered()
+    _onBackClicked()
     {
-        this.mouseOver = true;
+        this.returnToMenu();
     }
 
-    _onMouseExited()
+    _onContinueClicked()
     {
-        this.mouseOver = false;
-    }
-}
-
-class RebusGame extends Object2D
-{
-    levelData = null;
-
-    _setup()
-    {
-        for (let i = 0; i < this.levelData.optionCards.length; i++)
-        {
-            var newCard = new RebusOptionCard("OptionCard" + i);
-            AssetHandler.loadTexture(this.levelData.optionCards[i].name, this.levelData.optionCards[i].path);
-            newCard.thumb = AssetHandler.getTextureByName(this.levelData.optionCards[i].name);
-            newCard.imgName = this.levelData.optionCards[i].name;
-            newCard.setPosition((i + 1) * (1920 / 4), 3 * (1080 / 4));
-            this.addChild(newCard)
-        }
-
-        for (let i = 0; i < this.levelData.questionCards.length; i++)
-        {
-            var newCard = new RebusQuestionCard("OptionCard" + i);
-            AssetHandler.loadTexture(this.levelData.questionCards[i].name, this.levelData.questionCards[i].path);
-            newCard.thumb = AssetHandler.getTextureByName(this.levelData.questionCards[i].name);
-            newCard.imgName = this.levelData.questionCards[i].name;
-            newCard.setPosition((i + 1) * (1920 / (this.levelData.questionCards.length + 1)), 1080 / 4);
-            this.addChild(newCard)
-        }
+        this.returnToMenu();
     }
 
-    _draw(delta, db)
+    _onTimerTimeout()
     {
-        background(52);
+        this.continueButton.show();
     }
 }

src/elements/earth/rebus/RebusGameVisualEffects.js

@@ -0,0 +1,22 @@
+class RebusGameVisualEffects extends Object2D
+{
+    suffix = "";
+    bgOpacity = 0;
+    textOpacity = 0;
+
+    _draw(delta, db)
+    {
+        if (this.parent.gameFinished)
+        {
+            db.noStroke();
+            db.fill(0, min(this.bgOpacity +=  75 * delta, 200));
+            db.rectMode(CENTER);
+            db.rect(db.width / 2, db.height / 2, 1800, 600, 40, 40);
+            db.textAlign(CENTER, CENTER);
+            db.fill(255, min(this.textOpacity += 80 * delta, 255));
+            db.textSize(40);
+            this.parent.points > 1 ? this.suffix = "S" : this.suffix = "";
+            db.text(`PARABÉNS, NÍVEL CONCLUÍDO\nVOCÊ GANHOU ${this.parent.points} PONTO${this.suffix}!`, db.width / 2, db.height / 2 - 100);
+        }
+    }
+}

src/elements/earth/rebus/RebusLevelSelector.js

@@ -0,0 +1,90 @@
+class RebusLevelButton extends Button
+{
+    levelData = null;
+
+    _initSignals()
+    {
+        this.addSignal("levelSelected");
+    }
+
+    _setup()
+    {
+
+    }
+
+    _onMouseClicked()
+    {
+        this.emitSignal("levelSelected", this.levelData);
+    }
+}
+
+class RebusLevelSelector extends Object2D
+{
+    gridMargins = {
+        left: 0,
+        right: 0,
+        up: 500,
+        down: 0
+    };
+
+    gridCols = 5;
+
+    _setup()
+    {
+        var b = new RebusLevelButton("Tutorial");
+        b.levelData = REBUS_LEVELS.tutorial;
+        b.setLabel("Tutorial");
+        b.setFontSize(40);
+        this.addChild(b);
+        b.setSize(200, 100);
+        b.setPosition((1920 - b.getSize().x) / 2, 300);
+        b.connect("levelSelected", this, "_onLevelSelected");
+
+        var i = 1;
+        while (REBUS_LEVELS[`level${i}`])
+        {
+            var b = new RebusLevelButton(`level${i}`);
+            b.levelData = REBUS_LEVELS[`level${i}`];
+            b.setLabel(`${i}`);
+            b.setFontSize(40);
+            this.addChild(b);
+            b.setSize(100, 100);
+            b.setPosition((((i - 1) % this.gridCols) + 1) * 1920 / (this.gridCols + 1) - b.getSize().x / 2, this.gridMargins.up + 200 * int((i - 1) / this.gridCols));
+            b.connect("levelSelected", this, "_onLevelSelected");
+            i++;
+        }
+
+        this.backButton = new Button("BackButton");
+        this.backButton.setLabel("Voltar");
+        this.backButton.setFontSize(30);
+        this.backButton.setPosition(20, 20);
+        this.backButton.setSize(110, 75);
+        this.backButton.connect("mouseClicked", this, "_onBackClicked");
+        this.addChild(this.backButton);
+    }
+
+    _draw(delta, db)
+    {
+        background(52);
+
+        db.textAlign(CENTER, CENTER);
+        db.fill(255);
+        db.textSize(100);
+        db.text("RÉBUS", 1920 / 2, 125);
+        db.textSize(40);
+        db.text("Escolha o nível", 1920 / 2, 200);
+    }
+
+    _onLevelSelected(levelData)
+    {
+        var rg = new RebusGame("RebusGame");
+        rg.levelData = levelData;
+        GameHandler.addRootObject(rg);
+        this.queueFree();
+    }
+
+    _onBackClicked()
+    {
+
+    }
+}

src/elements/earth/rebus/RebusLevels.js

@@ -0,0 +1,542 @@
+const REBUS_LEVELS = {
+    tutorial:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Óculos",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Casa",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Macaco",
+            answer: false,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Oca",
+            answer: true,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Chave",
+            answer: false,
+        }, ],
+
+    },
+
+    level1:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Relógio",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Dedo",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Rede",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Vaca",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Rato",
+            answer: false,
+        }, ],
+    },
+
+    level2:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Cueca",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Tigre",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Abelha",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Cutia",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Unha",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Juba",
+            answer: false,
+        }, ],
+    },
+
+    level3:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Macaco",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Tomate",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Mato",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Foca",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Mesa",
+            answer: false,
+        }, ],
+    },
+
+    level4:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Unha",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Vaca",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Uva",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Rato",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Cueca",
+            answer: false,
+        }, ],
+    },
+
+    level5:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Foca",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Mesa",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Fome",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Pena",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Chave",
+            answer: false,
+        }, ],
+    },
+
+    level6:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Cavalo",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Juba",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Caju",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Pena",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Tigre",
+            answer: false,
+        }, ],
+    },
+
+    level7:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Pena",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Rato",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Pêra",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Pato",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Carro",
+            answer: false,
+        }, ],
+    },
+
+    level8:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Maça",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Chave",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Dominó",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Machado",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Macaco",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Cavalo",
+            answer: false,
+        }, ],
+    },
+
+    level9:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Toalha",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Mato",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Telefone",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Tomate",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Tomada",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Peteca",
+            answer: false,
+        }, ],
+    },
+
+    level10:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Avião",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Banana",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Cadeira",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Xícara",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Abacaxi",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Abacate",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Salada",
+            answer: false,
+        }, ],
+    },
+
+    level11:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Baleia",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Tatu",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Tapete",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Batata",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Baterraba",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Bolacha",
+            answer: false,
+        }, ],
+    },
+
+    level12:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Anel",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Batata",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Caju",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Tesoura",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Abacate",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Abacaxi",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Abóbora",
+            answer: false,
+        }, ],
+    },
+
+    level13:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Cebola",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Noiva",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Uva",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Raio",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Cenoura",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Cebola",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Banana",
+            answer: false,
+        }, ],
+    },
+
+    level14:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Macaco",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Rato",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Cutia",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Jacaré",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Maracujá",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Manga",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Melancia",
+            answer: false,
+        }, ],
+    },
+
+    level15:
+    {
+        questionCards: [
+        {
+            path: "assets/textures/glasses.png",
+            name: "Janela",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Bule",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Tigre",
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Casa",
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Bala",
+        }, ],
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Jabuticaba",
+            answer: true,
+        },
+        {
+            path: "assets/textures/oca.png",
+            name: "Hipopótamo",
+            answer: false,
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Jabuti",
+            answer: false,
+        }, ],
+    },
+}

src/elements/earth/rebus/RebusOptionCard.js

@@ -0,0 +1,90 @@
+class RebusOptionCard extends Object2D
+{
+    thumb = null;
+    imgName = "";
+    isAnswer = false;
+    selected = false;
+    selectable = true;
+
+    fillColor = new Color(200, 200, 200);
+    mouseOver = false;
+    mousePress = false;
+
+    _initSignals()
+    {
+        this.addSignal("selected");
+    }
+
+    _setup()
+    {
+        var sprite = new Sprite2D("sprite", this.thumb);
+        sprite.width = 250;
+        sprite.height = 250;
+        sprite.setPosition(0, -75);
+        this.addChild(sprite);
+
+        var area = new Area2D("area", SHAPES.RECT, new Rect(300, 400), true);
+        area.connect("mouseEntered", this, "_onMouseEntered");
+        area.connect("mouseExited", this, "_onMouseExited");
+        this.addChild(area);
+
+        this.addChild(new RebusCardVisualEffect("CardVfx"));
+    }
+
+    _update(delta)
+    {
+        if (this.selectable && this.mouseOver)
+        {
+            if (InputHandler.mouseIsClicked)
+            {
+                this.selected = true;
+                this.selectable = false;
+                this.emitSignal("selected", this.isAnswer);
+            }
+
+            if (InputHandler.mouseIsPressed)
+            {
+                this.scale.x = max(this.scale.x - 3.0 * delta, 0.95);
+                this.scale.y = max(this.scale.y - 3.0 * delta, 0.95);
+            }
+            else
+            {
+                this.scale.x = min(this.scale.x + 2.0 * delta, 1.1);
+                this.scale.y = min(this.scale.y + 2.0 * delta, 1.1);
+            }
+        }
+
+        else
+        {
+            this.scale.x = max(this.scale.x - 2.0 * delta, 1);
+            this.scale.y = max(this.scale.y - 2.0 * delta, 1);
+        }
+    }
+
+    _draw(delta, db)
+    {
+        db.rectMode(CENTER);
+        db.fill(this.fillColor.getP5Color());
+        db.rect(0, 0, 300, 400, 10, 10);
+        db.textAlign(CENTER, CENTER);
+        db.fill(0);
+        db.textSize(40);
+        db.text(this.imgName, 0, 100);
+
+        if (this.selected && !this.isAnswer)
+        {
+            db.fill(0, 80);
+            db.rect(0, 0, 300, 400, 10, 10);
+        }
+    }
+
+    _onMouseEntered()
+    {
+        this.mouseOver = true;
+    }
+
+    _onMouseExited()
+    {
+        this.mouseOver = false;
+    }
+}

src/elements/earth/rebus/RebusQuestionCard.js

@@ -0,0 +1,27 @@
+class RebusQuestionCard extends Object2D
+{
+    thumb = null;
+    imgName = "";
+
+    fillColor = new Color(200, 200, 200);
+
+    _setup()
+    {
+        var sprite = new Sprite2D("sprite", this.thumb);
+        sprite.width = 250;
+        sprite.height = 250;
+        sprite.setPosition(0, -75);
+        this.addChild(sprite);
+    }
+
+    _draw(delta, db)
+    {
+        db.rectMode(CENTER);
+        db.fill(this.fillColor.getP5Color());
+        db.rect(0, 0, 300, 400, 10, 10);
+        db.textAlign(CENTER, CENTER);
+        db.fill(0);
+        db.textSize(40);
+        db.text(this.imgName, 0, 100);
+    }
+}

src/elements/earth/rebus/rebusleveldata.txt

@@ -0,0 +1,15 @@
+RELÓGIO, DEDO			            REDE, VACA, RATO
+CUECA, TIGRE, ABELHA 	            CUTIA, UNHA, JUBA
+MACACO, TOMATE 			            MATO, FOCA, MESA
+UNHA, VACA 				            UVA, RATO, CUECA
+FOCA, MESA				            FOME, PENA, CHAVE
+CAVALO, JUBA 			            CAJU, PENA, TIGRE
+PENA, RATO 				            PÊRA, PATO, CARRO
+MAÇÃ, CHAVE, DOMINÓ 	            MACHADO, MACACO, CAVALO
+TOALHA, MATO, TELEFONE	            TOMATE, TOMADA, PETECA
+AVIÃO, BANANA, CADEIRA, XÍCARA      ABACAXI, ABACATE, SALADA
+BALEIA, TATU, TAPETE                BATATA, BETERRABA, BOLACHA
+ANEL, BATATA, CAJU, TESOURA         ABACATE, ABACAXI, ABÓBORA
+CEBOLA, NOIVA, UVA, RAIO            CENOURA, CEBOLA, BANANA
+MACACO, RATO, CUTIA, JACARÉ         MARACUJÁ, MANGA, MELANCIA
+JANELA, BULE, TIGRE, CASA, BALA     JABUTICABA, HIPOPÓTAMO, JABUTI

src/main.js

@@ -5,11 +5,13 @@ GameHandler._preload = function()
 
 GameHandler._setup = function()
 {
-    GameHandler.drawDebugFPS(true);
-    GameHandler.drawDebugBufferBounds(true);
+    // GameHandler.drawDebugFPS(true);
+    // GameHandler.drawDebugBufferBounds(true);
     textFont(AssetHandler.getP5FontByName("Lato"));
 
-    rg = new RebusGame("Rebus game");
-    rg.levelData = REBUS_LEVELS.tutorial;
-    GameHandler.addRootObject(rg);
+    // rg = new RebusGame("Rebus game");
+    // rg.levelData = REBUS_LEVELS.tutorial;
+    // GameHandler.addRootObject(rg);
+    let rls = new RebusLevelSelector("LevelSelector");
+    GameHandler.addRootObject(rls);
 }