"use strict"; let w, h; let creator; let fpsdisp; let raindrops = []; let xoff = 0; var gravity, wind; let dry, drydisp; let shelter, miss; let time, timed, timedisp; class missPiggy { constructor(x, y) { this.pos = createVector(x, y); this.face = 30; this.dry = 175; // it takes 150 raindrops for miss Piggy to get soaked! } show() { stroke(0); strokeWeight(1); fill(255, 182, 193); // ears ellipse(this.pos.x - 25, this.pos.y - 25, 50, 15); ellipse(this.pos.x + 25, this.pos.y - 25, 50, 15); // face circle(this.pos.x, this.pos.y, this.face * 2); // nose circle(this.pos.x, this.pos.y, 20); // nose holes are a darker pink, without outline fill(255, 20, 147); noStroke(); circle(this.pos.x - 3, this.pos.y - 2, 3); circle(this.pos.x + 3, this.pos.y - 2, 2); // little black eyes fill(0); stroke(0); circle(this.pos.x - 5, this.pos.y - 15, 2); circle(this.pos.x + 5, this.pos.y - 15, 2); // wide mouth and lighter mouth ends noFill(); strokeWeight(2); arc(this.pos.x, this.pos.y + 10, 35, 30, 0, PI, OPEN); strokeWeight(1); arc(this.pos.x + 18, this.pos.y + 7, 5, 5, PI * 0.2, PI, OPEN); arc(this.pos.x - 18, this.pos.y + 7, 5, 5, TWO_PI, PI * 0.8, OPEN); // 2 triangles and 1 circle to make a red bowtie translate(this.pos.x-10, this.pos.y-25); push(); rotate(-PI/12); fill(255, 0, 0); triangle(-20, 10, -20, -10, 0, 0); triangle(20, 10, 20, -10, 0, 0); circle(0, 0, 8); pop(); translate(-this.pos.x+10, -this.pos.y+25); } // miss Piggy jumps to random positions update() { this.pos.x = random(width); this.pos.y = random(this.face+10, height-this.face-10); } getWet(rain, i, sh) { if (abs(rain.pos.y-this.pos.y) <= this.face+rain.radius && abs(rain.pos.x-this.pos.x) <= this.face+rain.radius) { raindrops.splice(i, 1); sh.width -= 0.3; miss.dry--; // if all the raindrops are used before the timer has counted down, miss Piggy is soaked and you loose if (this.dry < 0) { clearInterval(timed); noLoop(); showResult("loose"); } } } } class Shelter { constructor(x, y, w, h) { this.pos = createVector(x, y); this.width = w; this.height = h } show() { fill(100); noStroke(); rect(this.pos.x, this.pos.y, this.width, this.height) } // the shelter follows the mouse position, or just tap to reposition it on screen update() { this.pos.x = mouseX; this.pos.y = mouseY; } // the raindrops bounce off stopRain(rain) { if (rain.pos.y+rain.radius >= this.pos.y && rain.pos.x >= this.pos.x-this.width/2 && rain.pos.x <= this.pos.x + this.width/2 && rain.pos.y <= this.pos.y + this.height) { rain.vel.y *= -0.6; rain.pos.y = this.pos.y-rain.radius; if (rain.pos.x <= this.pos.x) rain.vel.x -= 0.05; else if (rain.pos.x > this.pos.x) rain.vel.x += 0.05 } } } class Raindrop { constructor(x, y) { this.pos = createVector(x, y); this.vel = createVector(0, 0); this.acc = createVector(0, 0); this.radius = random(5); this.mass = this.radius/2; this.r = 0; this.g = noise(xoff+this.radius*10)*200; this.b = 55+noise(xoff+this.radius*30)*200; } show() { noStroke(); fill(this.r, this.g, this.b); ellipse(this.pos.x, this.pos.y, this.radius, this.radius) } update() { this.pos.add(this.vel); this.vel.add(this.acc); this.radius = random(5); this.show(); } edges() { if (this.pos.y+this.radius >= height) { this.vel.y *= -0.6; this.pos.y = height-this.radius; } } applyForce(force) { let f = force.copy(); f.div(this.mass); this.acc.add(f); } } function setup() { if (windowWidth > displayWidth) { w = displayWidth; h = displayHeight*0.8; } else { w = windowWidth; h = windowHeight; } createCanvas(w, h); fpsdisp = createSpan().id("fps"); creator = createSpan().id("creator"); creator.html("created by marjel101"); angleMode(RADIANS); rectMode(CENTER); for (let i=0; i <1000; i++) { raindrops.push(new Raindrop(random(-width, 2*width), random(-height, 0))) }; shelter = new Shelter(100, 250, 150, 10); miss = new missPiggy(width/2, height/2); setTimeout(piggyUpdate, 1000); // timer displays every second, counting down drydisp = createSpan().id("dry"); timedisp = createSpan().id("time"); time = 30; timed = setInterval(timer, 1000); } // miss Piggy moves to a random position at a random interval function piggyUpdate() { miss.update(); setTimeout(piggyUpdate, random(1500, 5000)) } // you win when the timer hits 0 before miss Piggy is soaked function timer() { time--; if (time <= 0) { clearInterval(timed); noLoop(); showResult("win"); } } function draw() { background(200, 50); fpsdisp.html("fps: "+floor(frameRate())); drydisp.html("points: " + miss.dry); timedisp.html(time + " sec"); wind = createVector(0, 0); // if (mouseIsPressed) wind = createVector(0.001, 0); // added wind makes the task too hard, so this line is commented out, for now... shelter.show(); shelter.update(); miss.show(); for (let i=0; i0; i--) { if (raindrops[i].pos.x < -width || raindrops[i].pos.x > 2*width) { raindrops.splice(i, 1); raindrops.push(new Raindrop(random(-width, 2*width), random(-height, 0))); continue; } if (raindrops[i].pos.y < -height || raindrops[i].pos.y > height) { raindrops.splice(i, 1); raindrops.push(new Raindrop(random(-width, 2*width), random(-height, 0))) } } xoff += 0.01; } function showResult(result) { fill(255); rect(width/2, height/2, 200, 100); fill(0, 150, 255); textSize(26); textAlign(CENTER, CENTER); text(result=="win" ? "YOU WIN" : "YOU LOSE", width/2, height/2); //if (result == "win") text("YOU WIN", width/2, height/2) //else text("YOU LOSE", width/2, height/2); }

MissPiggy in the Rain [GAME]