✨ Make initial prototype for FoodHunt minigame

index.html

@@ -27,6 +27,10 @@
     <script type="text/javascript" src="src/elements/earth/foodHunt/FoodHuntPlayer.js"></script>
     <script type="text/javascript" src="src/elements/earth/foodHunt/FoodHuntTree.js"></script>
     <script type="text/javascript" src="src/elements/earth/foodHunt/FoodHuntGame.js"></script>
+    <!-- Letter Hunt -->
+    <script type="text/javascript" src="src/elements/earth/letterHunt/LetterHuntDialogue.js"></script>
+    <script type="text/javascript" src="src/elements/earth/letterHunt/LetterHuntPlant.js"></script>
+    <script type="text/javascript" src="src/elements/earth/letterHunt/LetterHuntGame.js"></script>
     <!-- Rébus -->
     <script type="text/javascript" src="src/elements/earth/rebus/RebusLevels.js"></script>
     <script type="text/javascript" src="src/elements/earth/rebus/level_selector/RebusLevelButton.js"></script>

src/elements/earth/EarthMinigameSelector.js

@@ -129,7 +129,9 @@ class EarthMinigameSelector extends Object2D
 
     _onLetterHuntSelected()
     {
-        console.log("Letter hunt has been selected");
+        var lh = new LetterHuntGame("LetterHunt");
+        GameHandler.addRootObject(lh);
+        this.queueFree();
     }
 
     _onAcrofonySelected()

src/elements/earth/foodHunt/FoodHuntBasket.js

@@ -3,12 +3,12 @@ class FoodHuntBasket extends Object2D
     /** @type {FoodHuntPlayer} */
     player = null;
 
-    _update()
+    _update( /** @type {Number} */ delta)
     {
         this.position = this.player.position;
     }
 
-    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    _draw( /** @type {Number} */ delta, /** @type {p5.Graphics} */ db)
     {
         db.rectMode(CENTER);
         db.fill(200);

src/elements/earth/foodHunt/FoodHuntDialogue.js

@@ -1,7 +1,7 @@
 class FoodHuntDialogue extends Object2D
 {
     /** @type {String} */
-    text1 = "Você conhece alguma árvore que dá tanto frutos diferentes assim?";
+    text1 = "Você conhece alguma árvore que dá tantos frutos diferentes assim?";
     /** @type {String} */
     text2 = " Já ouviu falar na grande árvore do Tamoromu? Converse com sua professora."
 

src/elements/earth/foodHunt/FoodHuntGame.js

@@ -67,7 +67,7 @@ class FoodHuntGame extends Object2D
         this.initialTimer.connect("timeout", this, "_onInitialTimerTimeout");
         this.addChild(this.initialTimer);
 
-        this.gameTimer = new Timer("GameTimer", 10, false, true);
+        this.gameTimer = new Timer("GameTimer", 60, false, true);
         this.gameTimer.connect("timeout", this, "_onGameTimerTimeout");
         this.addChild(this.gameTimer);
 

src/elements/earth/letterHunt/LetterHuntDialogue.js

@@ -0,0 +1,73 @@
+class LetterHuntDialogue extends Object2D
+{
+    /** @type {String} */
+    text = ``;
+
+    /** @type {Number} */
+    bgOpacity = 0;
+    /** @type {Number} */
+    textOpacity = 0;
+
+    /** @type {Button} */
+    continueButton = null;
+    /** @type {Tween} */
+    tween = null;
+    /** @type {Timer} */
+    buttonTimer = null;
+
+    _initSignals()
+    {
+        this.addSignal("dialogueFinished");
+    }
+
+    _setup()
+    {
+        this.text = `ACABOU O JOGO!\nVOCÊ GANHOU ${this.parent.points} PONTOS!`;
+
+        this.setPosition(1920 / 2, 1080 - 300);
+        this.continueButton = new Button("Continue", "Continuar")
+        this.continueButton.setFontSize(40)
+        this.continueButton.setPosition(-this.continueButton.getSize().x / 2, -this.continueButton.getSize().y / 2 + 100);
+        this.continueButton.connect("mouseClicked", this, "_onContinueClicked");
+        this.continueButton.hide();
+        this.addChild(this.continueButton);
+
+        this.tween = new Tween("Tween");
+        this.tween.interpolateProperty(this, "bgOpacity", PROPERTY_TYPE.NUMBER, 0, 200, 2, TRANS_TYPE.LINEAR);
+        this.tween.interpolateProperty(this, "textOpacity", PROPERTY_TYPE.NUMBER, 0, 255, 2, TRANS_TYPE.LINEAR);
+        this.addChild(this.tween);
+
+        this.buttonTimer = new Timer("ButtonTimer");
+        this.buttonTimer.connect("timeout", this, "_onTimerTimeout");
+        this.addChild(this.buttonTimer);
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        db.noStroke();
+        db.fill(0, this.bgOpacity);
+        db.rectMode(CENTER);
+        db.rect(0, 0, 1800, 400, 40, 40);
+        db.textAlign(CENTER, CENTER);
+        db.fill(255, this.textOpacity);
+        db.textSize(40);
+        db.text(this.text, 0, -100);
+    }
+
+    _initDialogue()
+    {
+        this.tween.startAll();
+        this.buttonTimer.start(3);
+    }
+
+    _onTimerTimeout()
+    {
+        this.continueButton.show();
+    }
+
+    _onContinueClicked()
+    {
+        this.continueButton.hide();
+        this.emitSignal("dialogueFinished");
+    }
+}

src/elements/earth/letterHunt/LetterHuntGame.js

@@ -0,0 +1,181 @@
+class LetterHuntGame extends Object2D
+{
+    /** @type {Button} */
+    backButton = null;
+    /** @type {Object2D} */
+    plants = null;
+    /** @type {LetterHuntDialogue} */
+    dialogue = null;
+    /** @type {Timer} */
+    initialTimer = null;
+    /** @type {Timer} */
+    roundTimer = null;
+    /** @type {Timer} */
+    gameTimer = null;
+
+    /** @type {Boolean} */
+    gameStarted = false;
+    /** @type {Boolean} */
+    gameEnded = false;
+    /** @type {Number} */
+    points = 0;
+    /** @type {String} */
+    answerLetter = "";
+
+    _setup()
+    {
+        // this.drawOnTopOfChildren = true;
+
+        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.initialTimer = new Timer("InitialTimer", 4, true, true);
+        this.initialTimer.connect("timeout", this, "_onInitialTimerTimeout");
+        this.addChild(this.initialTimer);
+
+        this.roundTimer = new Timer("RoundTimer", 10, false, true);
+        this.roundTimer.connect("timeout", this, "_onRoundTimerTimeout");
+        this.addChild(this.roundTimer);
+
+        this.gameTimer = new Timer("GameTimer", 60, false, true);
+        this.gameTimer.connect("timeout", this, "_onGameTimerTimeout");
+        this.addChild(this.gameTimer);
+
+        this.plants = new Object2D("Plants");
+        this.addChild(this.plants);
+        // this.startNewRound();
+
+        this.dialogue = new LetterHuntDialogue("Dialogue");
+        this.dialogue.connect("dialogueFinished", this, "_onDialogueEnded");
+        this.addChild(this.dialogue);
+    }
+
+    _update( /** @type {Number} */ delta)
+    {
+
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        background("#657518");
+
+        db.fill(0);
+        if (!this.gameStarted)
+        {
+            db.textAlign(CENTER, CENTER);
+            db.textSize(200);
+            var tl = int(this.initialTimer.timeLeft - 0.00001);
+            if (tl >= 1)
+                db.text(`${tl}`, 1920 / 2, 300);
+            else
+            {
+                db.textSize(100);
+                db.text(`Começar!`, 1920 / 2, 300);
+            }
+
+        }
+        db.textAlign(RIGHT, TOP);
+        db.textSize(50);
+
+        if (this.gameStarted && !this.gameEnded)
+        {
+            db.text(`t: ${int(this.gameTimer.timeLeft - 0.0001 + 1)}`, 1920 - 10, 10);
+            db.text(`t2: ${int(this.roundTimer.timeLeft - 0.0001 + 1)}`, 1920 - 10, 60);
+            db.push();
+            db.textAlign(CENTER, CENTER);
+            db.textSize(80);
+            db.text(`Onde está a letra ${this.answerLetter}?`, 1920 / 2, 100);
+            db.pop();
+        }
+        else
+        {
+            db.text(`t: 0`, 1920 - 10, 10);
+            db.text(`t2: 0`, 1920 - 10, 60);
+        }
+        db.text(`p: ${this.points}`, 1920 - 10, 110);
+
+    }
+
+    startNewRound()
+    {
+        var l = [];
+        this.answerLetter = String.fromCharCode(random(65, 90));
+        var n = random(2, 4);
+        for (let i = 0; i < n; i++)
+            l.push(this.answerLetter);
+        for (let i = 0; i < 20 - n; i++)
+            l.push(String.fromCharCode(random(65, 90)));
+        this.l = shuffle(l);
+
+        if (this.plants.children.length > 0)
+            for (let i = 0; i < 20; i++)
+                this.plants.children[i].queueFree();
+
+        for (let i = 0; i < 5; i++)
+        {
+            for (let j = 0; j < 4; j++)
+            {
+                var newPlant = new LetterHuntPlant(`Plant${i}_${j}`);
+                newPlant.setPosition((i * 1920 / 5) + random(50, 1920 / 5 - 50), (200 + j * (1080 - 200) / 4) + random(50, (1080 - 200) / 4 - 50));
+                newPlant.letter = this.l[i * 4 + j];
+                newPlant.connect("selected", this, "_onPlantSelected");
+                this.plants.addChild(newPlant);
+            }
+        }
+
+        this.roundTimer.reset();
+    }
+
+    _onPlantSelected( /** @type {LetterHuntPlant} */ plant)
+    {
+        if (plant.letter === this.answerLetter)
+        {
+            this.points += 3;
+            this.startNewRound();
+        }
+        else
+            plant.selectable = false;
+    }
+
+    _onBackClicked()
+    {
+        var ems = new EarthMinigameSelector("EarthMinigameSelector");
+        GameHandler.addRootObject(ems);
+        this.queueFree();
+    }
+
+    _onInitialTimerTimeout()
+    {
+        // for (let i = 0; i < 20; i++)
+        //     this.plants.children[i].selectable = true;
+        this.gameStarted = true;
+        this.gameTimer.start();
+        this.roundTimer.start();
+        this.startNewRound();
+    }
+
+    _onRoundTimerTimeout()
+    {
+        this.startNewRound();
+        this.roundTimer.start();
+    }
+
+    _onGameTimerTimeout()
+    {
+        this.gameEnded = true;
+        this.roundTimer.stop();
+        for (let i = 0; i < 20; i++)
+            this.plants.children[i].selectable = false;
+        this.dialogue._initDialogue();
+    }
+
+    _onDialogueEnded()
+    {
+        this._onBackClicked();
+    }
+}

src/elements/earth/letterHunt/LetterHuntPlant.js

@@ -0,0 +1,103 @@
+class LetterHuntPlant extends Object2D
+{
+    /** @type {String} */
+    letter = "";
+
+    /** @type {Area2D} */
+    area = null;
+    /** @type {Boolean} */
+    mouseOver = false;
+    /** @type {Boolean} */
+    mosueIsDown = false;
+    /** @type {Boolean} */
+    selected = false;
+    /** @type {Boolean} */
+    selectable = true;
+
+    /** @type {Number} */
+    growSpeed = 2;
+
+    _initSignals()
+    {
+        this.addSignal("selected");
+    }
+
+    _setup()
+    {
+        this.area = new Area2D("Area2D", SHAPES.ELLIPSE, new Ellipse(40), true, false);
+        this.area.connect("mouseEntered", this, "_onAreaMouseEntered");
+        this.area.connect("mouseExited", this, "_onAreaMouseExited");
+        this.addChild(this.area);
+
+        this.setScale(0, 0);
+    }
+
+    _update( /** @type {Number} */ delta)
+    {
+        if (this.selectable && this.mouseOver)
+        {
+            if (InputHandler.mouseIsPressed)
+                this.mosueIsDown = true;
+
+            if (this.mosueIsDown)
+            {
+                this.scale.x = max(this.scale.x -= this.growSpeed * delta, 0.95);
+                this.scale.y = max(this.scale.y -= this.growSpeed * delta, 0.95);
+
+                if (InputHandler.mouseIsClicked)
+                {
+                    this.selected = true;
+                    this.emitSignal("selected", this);
+                }
+            }
+            else
+            {
+                this.scale.x = min(this.scale.x += this.growSpeed * delta, 1.3);
+                this.scale.y = min(this.scale.y += this.growSpeed * delta, 1.3);
+            }
+        }
+        else
+        {
+            if (this.scale.x >= 1)
+            {
+                this.scale.x = max(this.scale.x -= this.growSpeed * delta, 1);
+                this.scale.y = max(this.scale.y -= this.growSpeed * delta, 1);
+            }
+            else
+            {
+                this.scale.x = min(this.scale.x += 2 * this.growSpeed * delta, 1);
+                this.scale.y = min(this.scale.y += 2 * this.growSpeed * delta, 1);
+            }
+            this.mosueIsDown = false;
+        }
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        db.fill(255);
+        db.ellipse(0, 0, 80);
+
+        if (this.selectable)
+        {
+            db.fill(0);
+            db.textAlign(CENTER, CENTER);
+            db.textSize(40);
+            db.text(this.letter, 0, 0);
+        }
+        else
+        {
+            db.fill(0, 200);
+            db.ellipse(0, 0, 80);
+        }
+    }
+
+    _onAreaMouseEntered()
+    {
+        this.mouseOver = true;
+    }
+
+    _onAreaMouseExited()
+    {
+        this.mouseOver = false;
+    }
+}

src/main.js

@@ -30,6 +30,8 @@ GameHandler._setup = function()
     GameHandler.drawDebugBufferBounds(true);
     // textFont(AssetHandler.getP5FontByName("Lato"));
 
+    // var lh = new LetterHuntGame("LetterHunt");
+    // GameHandler.addRootObject(lh);
     var menu = new EelementSelector("ElementSelector");
     GameHandler.addRootObject(menu);
 }