✨ Finish implementing food hunt minigame prototype

index.html

@@ -21,7 +21,9 @@
     <!-- Earth -->
     <script type="text/javascript" src="src/elements/earth/EarthMinigameSelector.js"></script>
     <!-- Food Hunt -->
+    <script type="text/javascript" src="src/elements/earth/foodHunt/FoodHuntDialogue.js"></script>
     <script type="text/javascript" src="src/elements/earth/foodHunt/FoodHuntFruit.js"></script>
+    <script type="text/javascript" src="src/elements/earth/foodHunt/FoodHuntBasket.js"></script>
     <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>

src/elements/earth/foodHunt/FoodHuntBasket.js

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

src/elements/earth/foodHunt/FoodHuntDialogue.js

@@ -0,0 +1,78 @@
+class FoodHuntDialogue extends Object2D
+{
+    /** @type {String} */
+    text1 = "Você conhece alguma árvore que dá tanto frutos diferentes assim?";
+    /** @type {String} */
+    text2 = " Já ouviu falar na grande árvore do Tamoromu? Converse com sua professora."
+
+    /** @type {Number} */
+    bgOpacity = 0;
+    /** @type {Number} */
+    text1Opacity = 0;
+    /** @type {Number} */
+    text2Opacity = 0;
+
+    /** @type {Button} */
+    continueButton = null;
+    /** @type {Tween} */
+    tween = null;
+    /** @type {Timer} */
+    buttonTimer = null;
+
+    _initSignals()
+    {
+        this.addSignal("dialogueFinished");
+    }
+
+    _setup()
+    {
+        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, "text1Opacity", PROPERTY_TYPE.NUMBER, 0, 255, 2, TRANS_TYPE.LINEAR);
+        this.tween.interpolateProperty(this, "text2Opacity", PROPERTY_TYPE.NUMBER, 0, 255, 2, TRANS_TYPE.LINEAR, EASE_TYPE.IN, 3);
+        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.text1Opacity);
+        db.textSize(40);
+        db.text(this.text1, 0, -100);
+        db.fill(255, this.text2Opacity);
+        db.text(this.text2, 0, 0);
+    }
+
+    _initDialogue()
+    {
+        this.tween.startAll();
+        this.buttonTimer.start(5);
+    }
+
+    _onTimerTimeout()
+    {
+        this.continueButton.show();
+    }
+
+    _onContinueClicked()
+    {
+        this.continueButton.hide();
+        this.emitSignal("dialogueFinished");
+    }
+}

src/elements/earth/foodHunt/FoodHuntFruit.js

@@ -1,25 +1,56 @@
 class FoodHuntFruit extends Object2D
 {
     /** @type {Number} */
-    static G = 10;
+    G = 10;
 
+    /** @type {FoodHuntBasket} */
+    basket = null;
     /** @type {Color} */
     color = new Color(0, 0, 0);
     /** @type {Number} */
-    r = 20
+    r = 50;
+    /** @type {Number} */
+    fallVel = 0;
+    /** @type {Boolean} */
+    collected = false;
 
-    _setup()
+    _initSignals()
     {
+        this.addSignal("collected");
+    }
 
+    _setup()
+    {
+        this.color.r = random(0, 255);
+        this.color.g = random(0, 255);
+        this.color.b = random(0, 255);
     }
 
     _update( /** @type {Number} */ delta)
     {
-        
+        this.fallVel += this.G;
+        this.position.y += this.fallVel * delta;
+
+        if (!this.collected && this.globalPosition.y >= 825 && this.globalPosition.y <= 850)
+        {
+            if (this.globalPosition.x <= this.basket.globalPosition.x + 55 && this.globalPosition.x >= this.basket.globalPosition.x - 55)
+                this.collected = true;
+        }
+        else if (this.collected && this.position.y >= 900)
+            this.onFruitCollected();
+        else if (this.position.y >= 1200)
+            this.queueFree();
     }
 
     _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
     {
-        ellipse(0, 0, this.r);
+        db.fill(this.color.getP5Color());
+        db.ellipse(0, 0, this.r);
+    }
+
+    onFruitCollected()
+    {
+        this.queueFree();
+        this.emitSignal("collected");
     }
 }

src/elements/earth/foodHunt/FoodHuntGame.js

@@ -9,6 +9,10 @@ class FoodHuntGame extends Object2D
     tree = null;
     /** @type {Object2D} */
     fruits = null;
+    /** @type {FoodHuntBasket} */
+    basket = null;
+    /** @type {FoodHuntDialogue} */
+    dialogue = null;
 
     /** @type {Timer} */
     initialTimer = null;
@@ -16,14 +20,21 @@ class FoodHuntGame extends Object2D
     gameTimer = null;
     /** @type {Timer} */
     fruitsTimer = null;
+    /** @type {Timer} */
+    endGameTimer = null;
 
     /** @type {Boolean} */
     gameStarted = false;
     /** @type {Boolean} */
     gameEnded = false;
 
+    /** @type {Number} */
+    points = 0;
+
     _setup()
     {
+        this.drawOnTopOfChildren = true;
+
         // Create back button
         this.backButton = new Button("BackButton");
         this.backButton.setLabel("Voltar");
@@ -36,24 +47,37 @@ class FoodHuntGame extends Object2D
         this.tree = new FoodHuntTree("Tree");
         this.addChild(this.tree);
 
-        this.fruits = new Object2D("Fruits");
-        this.addChild(this.fruits);
-
         this.player = new FoodHuntPlayer("Player");
         this.player.updatePaused = true;
         this.addChild(this.player);
 
+        this.fruits = new Object2D("Fruits");
+        this.fruits.setPosition(1920 / 2, -100);
+        this.addChild(this.fruits);
+
+        this.basket = new FoodHuntBasket("Basket");
+        this.basket.player = this.player;
+        this.addChild(this.basket);
+
+        this.dialogue = new FoodHuntDialogue("Dialogue");
+        this.dialogue.connect("dialogueFinished", this, "_onDialogueFinished");
+        this.addChild(this.dialogue);
+
         this.initialTimer = new Timer("InitialTimer", 4, true, true);
         this.initialTimer.connect("timeout", this, "_onInitialTimerTimeout");
         this.addChild(this.initialTimer);
 
-        this.gameTimer = new Timer("GameTimer", 60, false, true);
+        this.gameTimer = new Timer("GameTimer", 10, false, true);
         this.gameTimer.connect("timeout", this, "_onGameTimerTimeout");
         this.addChild(this.gameTimer);
 
         this.fruitsTimer = new Timer("FruitsTimer", 1, false, true);
         this.fruitsTimer.connect("timeout", this, "_onFruitsTimerTimeout");
         this.addChild(this.fruitsTimer);
+
+        this.endGameTimer = new Timer("EndGametimer", 1, false, true);
+        this.endGameTimer.connect("timeout", this, "_onEndGameTimerTimeout");
+        this.addChild(this.endGameTimer);
     }
 
     _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
@@ -75,13 +99,15 @@ class FoodHuntGame extends Object2D
             }
 
         }
-        else if (!this.gameEnded)
-        {
-            db.textAlign(RIGHT, TOP);
-            db.fill(255);
-            db.textSize(75);
-            db.text(`${int(this.gameTimer.timeLeft - 0.0001 + 1)}`, 1920 - 10, 0 + 10);
-        }
+        db.textAlign(RIGHT, TOP);
+        db.fill(255);
+        db.textSize(50);
+
+        if (!this.gameEnded)
+            db.text(`t: ${int(this.gameTimer.timeLeft - 0.0001 + 1)}`, 1920 - 10, 10);
+        else
+            db.text(`t: 0`, 1920 - 10, 10);
+        db.text(`p: ${this.points}`, 1920 - 10, 60);
     }
 
     _onBackClicked()
@@ -97,18 +123,41 @@ class FoodHuntGame extends Object2D
         this.player.updatePaused = false;
         this.gameTimer.start();
         this.fruitsTimer.start();
-        console.log("start");
     }
 
     _onFruitsTimerTimeout()
     {
-        console.log("fruit fell");
+        var newFruit = new FoodHuntFruit("Fruit");
+        newFruit.position.x = random(-550, 550);
+        newFruit.basket = this.basket;
+        newFruit.connect("collected", this, "_onFruitCollected");
+        this.fruits.addChild(newFruit);
         this.fruitsTimer.start(random(3, 4));
     }
 
+    _onFruitCollected()
+    {
+        this.points += 3;
+    }
+
     _onGameTimerTimeout()
     {
         this.gameEnded = true;
-        console.log("game ended");
+        this.fruitsTimer.stop();
+        this.endGameTimer.start(2);
+    }
+
+    _onEndGameTimerTimeout()
+    {
+        this.player.updatePaused = true;
+        this.player.direction = 0;
+        this.dialogue._initDialogue();
+    }
+
+    _onDialogueFinished()
+    {
+        var ems = new EarthMinigameSelector("EarthMinigameSelector");
+        GameHandler.addRootObject(ems);
+        this.queueFree();
     }
 }

src/elements/earth/foodHunt/FoodHuntPlayer.js

@@ -5,7 +5,7 @@ class FoodHuntPlayer extends Object2D
 
     _setup()
     {
-        this.setPosition(1920 / 2, 1080 - 300);
+        this.setPosition(1920 / 2, 1080 - 200);
     }
 
     _update( /** @type {Number} */ delta)
@@ -19,8 +19,6 @@ class FoodHuntPlayer extends Object2D
     {
         db.rectMode(CENTER);
         db.rect(0, 0, 100, 200);
-        db.fill(200);
-        db.rect(0, 0, 110, 110);
 
         this.position.x += 400 * this.direction * delta;
         if (this.position.x >= 1920 - 50) this.position.x = 1920 - 55;

src/main.js

@@ -30,9 +30,6 @@ GameHandler._setup = function()
     GameHandler.drawDebugBufferBounds(true);
     // textFont(AssetHandler.getP5FontByName("Lato"));
 
-    var fh = new FoodHuntGame("FoodHunGame");
-    GameHandler.addRootObject(fh);
-
-    // var menu = new EelementSelector("ElementSelector");
-    // GameHandler.addRootObject(menu);
+    var menu = new EelementSelector("ElementSelector");
+    GameHandler.addRootObject(menu);
 }