fixed clouds, updated background, the person runs, gonna add aflower …

…next

background/cloud.js

@@ -0,0 +1,68 @@
+class Cloud {
+    constructor(cloudGif) {
+        this.cloudSpeed = 5; 
+        this.x = random(10, windowWidth);
+        this.y = random(10, windowHeight/2);
+        this.scalefactor = random(0.07, 0.17);
+        this.cloudGif = cloudGif;
+    }
+
+    collidesWith(otherCloud) {
+        return (
+            this.x < otherCloud.x + otherCloud.cloudGif.width &&
+            this.x + this.cloudGif.width > otherCloud.x &&
+            this.y < otherCloud.y + otherCloud.cloudGif.height &&
+            this.y + this.cloudGif.height > otherCloud.y
+        );
+    }
+
+    move(direction) {
+        if (direction < 0) {
+            this.x += this.cloudSpeed;
+        } else {
+            this.x -= this.cloudSpeed;
+        }
+
+        if (this.x > width) this.x = 0;
+        if (this.x < 0) this.x = width;
+    }
+
+    render() {
+        push();
+        imageMode(CENTER);
+        image(this.cloudGif, this.x, this.y, this.cloudGif.width * this.scalefactor, this.cloudGif.height * this.scalefactor);
+        pop();
+        // if (cloudGif) {
+
+        // }
+    }
+}
+
+function updateAndRenderClouds(clouds, moving, direction) {
+    for (let cloud of clouds) {
+        if (moving) {
+            cloud.move(direction);
+        }
+        cloud.render();
+    }
+}
+
+
+function createCloud(clouds, cloudGif) {
+    let newCloud;
+    let attempts = 0;
+    const maxAttempts = 100;  // Prevent infinite loop
+
+    while (attempts < maxAttempts) {
+        newCloud = new Cloud(cloudGif);
+        attempts++;
+
+        // Check collision with existing clouds
+        let collided = clouds.some(cloud => newCloud.collidesWith(cloud));
+
+        if (!collided || attempts >= maxAttempts) {
+            clouds.push(newCloud);
+            break;
+        }
+    }
+}

background/grass.js

@@ -0,0 +1,49 @@
+class GrassPoke {
+    constructor(index) {
+        this.x = map(index, 0, 100 - 1, 0, width)
+        this.y =  random(130, 150);
+        this.controlPointY = random(10, 30);
+        this.speed = 5
+    }
+}
+
+function drawGrass(direction, grassPokes) {
+    push();
+
+    let grassTipColor = color('#9EB287');
+    let grassBaseColor = color('#66816D');
+
+    // Move grass pokes
+    for (let poke of grassPokes) {
+        poke.x -= direction * poke.speed;
+        if (poke.x < 0) poke.x += width;
+        if (poke.x > width) poke.x -= width;
+    }
+
+    // Sort pokes by x
+    grassPokes.sort((a, b) => a.x - b.x);
+
+    // Draw grass pokes
+    noStroke();
+    beginShape();
+
+    // Start at the bottom-left corner
+    vertex(0, height);
+
+    // Draw each poke
+    for (let poke of grassPokes) {
+        let gradient = drawingContext.createLinearGradient(poke.x, height, poke.x, height - poke.y);
+        gradient.addColorStop(0, grassBaseColor.toString());
+        gradient.addColorStop(1, grassTipColor.toString());
+        drawingContext.fillStyle = gradient;
+
+        // Draw the poke
+        curveVertex(poke.x, height - poke.y);
+    }
+
+    // End at the bottom-right corner
+    vertex(width, height);
+
+    endShape(CLOSE);
+
+  }

rain.js → background/rain.js

@@ -2,9 +2,10 @@ class Rain {
     constructor() {
         this.isRaining = false;
         this.timeBetweenRain = random(200, 500);
-        this.rainSpeed = 5; // Adjust this for faster/slower rain movement
-        this.x = windowWidth + 300; // Start off-screen to the right
+        this.rainSpeed = 5; 
+        this.x = windowWidth + 300;
         this.y = 300;
+        this.rainGif;
     }
 
     move(moving, direction) {
@@ -17,19 +18,15 @@ class Rain {
                     this.timeBetweenRain--;
                 }
             } else {
-                // Move rain based on character's direction
                 this.x -= this.rainSpeed * direction;
 
-                // Stop raining when rain moves off screen on either side
                 if (this.x < -300 || this.x > windowWidth + 300) {
                     this.isRaining = false;
                     this.timeBetweenRain = random(200, 500);
                 }
             }
         } else {
-            // If character stops, gradually slow down the rain
             if (this.isRaining) {
-                this.x -= this.rainSpeed * 0.5; // Slow movement
                 if (this.x < -300) {
                     this.isRaining = false;
                     this.timeBetweenRain = random(200, 500);
@@ -39,6 +36,7 @@ class Rain {
     }
 
     render(rainGif) {
+        rain.rainGif = rainGif
         if (this.isRaining && rainGif) {
             push();
             imageMode(CENTER);
@@ -51,4 +49,34 @@ class Rain {
 function updateAndRenderRain(rain, moving, direction, rainGif) {
     rain.move(moving, direction);
     rain.render(rainGif);
+}
+
+let lastScoreDecrease = 0
+scoreDecreaseInterval = 1000
+
+function updateScoreRain(rain, moving, charX, charWidth, showUmbrella, score, currentTime) {
+    // If it is raining in frame
+    if (rain.isRaining && !showUmbrella && currentTime - lastScoreDecrease >= scoreDecreaseInterval) {
+        // Entering Rain
+        if (charX + charWidth / 2 > rain.x && charX < rain.x + rain.rainGif.width * 0.3){
+            lastScoreDecrease = currentTime
+            return score - 1
+        } 
+        // Inside Rain
+        else if (rain.x < charX && rain.x + rain.rainGif.width * 0.3 > charX + charWidth / 2){
+            lastScoreDecrease = currentTime
+            return score - 1
+        }
+        // Exiting Rain
+        else if (rain.x + rain.rainGif.width * 0.3 > charX && charX > rain.x) {
+            lastScoreDecrease = currentTime
+            return score - 1
+        }
+        else {
+            return score
+        }
+    }
+    else {
+        return score
+    }
 }

star.js → background/star.js

@@ -1,20 +1,18 @@
 class Star {
     constructor() {
-        this.x = random(10, width);
-        this.y = random(10, height);
+        this.x = random(10, windowWidth);
+        this.y = random(10, windowHeight/2);
         this.size = random(30, 50);
         this.speed = random(1, 3);
     }
 
     move(direction) {
-        // Move stars in the opposite direction of character movement
         if (direction > 0) {
             this.x += this.speed;
         } else {
             this.x -= this.speed;
         }
-
-        // Wrap around the screen
+
         if (this.x > width) this.x = 0;
         if (this.x < 0) this.x = width;
     } 

index.html

@@ -10,8 +10,10 @@
   <body>
     <main>
     </main>
-    <script src="rain.js"></script>
-    <script src="star.js"></script>
+    <script src="./background/cloud.js"></script>
+    <script src="./background/grass.js"></script>
+    <script src="./background/rain.js"></script>
+    <script src="./background/star.js"></script>
     <script src="sketch.js"></script>
   </body>
 </html>