added sound

background/cloud.js

@@ -32,9 +32,6 @@ class Cloud {
         imageMode(CENTER);
         image(this.cloudGif, this.x, this.y, this.cloudGif.width * this.scalefactor, this.cloudGif.height * this.scalefactor);
         pop();
-        // if (cloudGif) {
-
-        // }
     }
 }
 

background/flower.js

@@ -1,10 +1,11 @@
 class Flower {
-    constructor(flowerGif) {
+    constructor(flowerGif, flowerSounds) {
         this.x = width + 50;
         this.y = windowHeight/2
         this.flowerGif = flowerGif;
         this.collected = false;
         this.speed = 3;
+        this.flowerSounds = flowerSounds;
     }
 
     collidesWith(charX, charWidth) {
@@ -36,13 +37,14 @@ class Flower {
 
 let timeSinceLastFlower = 0;
 let flowerInterval = 450;
+let soundIndex = 0
 
-function updateAndRenderFlowers(rain, flowers, flowerGif, direction) {
+function updateAndRenderFlowers(rain, flowers, flowerGif, direction, flowerSounds) {
     if (!rain.isRaining) {
         timeSinceLastFlower++
 
         if (flowers.length === 0 && timeSinceLastFlower >= flowerInterval) {
-            flowers.push(new Flower(flowerGif));
+            flowers.push(new Flower(flowerGif, flowerSounds));
             timeSinceLastFlower = 0
             flowerInterval = random(100, 240)
         }
@@ -65,6 +67,11 @@ function updateScoreFlower(charX, charWidth) {
         if (flowers[i].collidesWith(charX, charWidth)) {
             flowers.splice(i, 1);
             flowers.collected = true
+            flowerSounds[soundIndex].play()
+            soundIndex += 1
+            if (soundIndex > 3) {
+                soundIndex = 0
+            }
             return score += 1; 
         }
         else {

background/rain.js

@@ -7,6 +7,7 @@ class Rain {
         this.y = 300;
         this.rainGif = rainGif;
         this.rainSound = rainSound;
+        this.isSoundPlaying = false;
     }
 
     move(moving, direction) {
@@ -38,14 +39,18 @@ class Rain {
 
     render() {
         if (this.isRaining && this.rainGif && this.rainSound) {
-            push();
-            // userStartAudio();
-            // this.rainSound.play()
+            if (!this.isSoundPlaying) {
+                push();
+                userStartAudio();
+                this.rainSound.play()
+                this.isSoundPlaying = true
+            }
             imageMode(CENTER);
             image(rain.rainGif, this.x, this.y, rain.rainGif.width * 0.3, rain.rainGif.height * 0.3);
             pop();
         } else {
-            // this.rainSound.stop()
+            this.rainSound.stop()
+            this.isSoundPlaying = false
         }
     }
 }

sketch.js

@@ -25,6 +25,7 @@ let score = 10;
 
 // Flowers
 let flowers = [];
+let flowerSounds = [];
 
 // Gamestate
 let gameState = false;
@@ -45,6 +46,10 @@ function preload() {
     //Sound
     mainTrack = loadSound('./sound/Main_Track.m4a');
     rainSound = loadSound('./sound/rainSound.mp3');
+    flowerSound1 = loadSound('./sound/Eating_Flower/Eating_Flower_1.wav');
+    flowerSound2 = loadSound('./sound/Eating_Flower/Eating_Flower_2.wav');
+    flowerSound3 = loadSound('./sound/Eating_Flower/Eating_Flower_3.wav');
+    flowerSound4 = loadSound('./sound/Eating_Flower/Eating_Flower_4.wav');
 }
 
 function setup() {
@@ -72,15 +77,19 @@ function setup() {
         grassPokes.push(new GrassPoke(i));
     }
 
+    // Create flower sound array
+    flowerSounds = [flowerSound1, flowerSound2, flowerSound3, flowerSound4];
+
     // Start button
-    startButton = createButton('Start Game');
+    startButton = createButton('Start');
     startButton.position(width/2 - 70, height/2 + 200);
     startButton.mousePressed(startGame);
     startButton.size(150, 50);
     startButton.style('background-color', '#6B8778');
     startButton.style('font-size', '16px');
     startButton.style('color', 'white');
     startButton.style('border', 'none');
+    startButton.style('border-radius', '30px');
 }
 
 function draw() {
@@ -212,7 +221,7 @@ function drawgame() {
     updateAndRenderClouds(clouds, direction !== 0, direction)
 
     // Update and display flowers
-    updateAndRenderFlowers(rain, flowers, flowerGif, direction);
+    updateAndRenderFlowers(rain, flowers, flowerGif, direction, flowerSounds);
 
     // Update and display Score
     displayScore()
@@ -261,7 +270,7 @@ function checkDeath() {
         textAlign(CENTER, CENTER);
         text("Game Over", width/2, height/2);
         mainTrack.stop()
-        // rain.rainSound.stop()
+        rain.rainSound.stop()
         pop();
     }
 }