xxxxxxxxxx385
/* Disclaimer: This work uses part of the character design of Mario and Doraemon. Mario was created by game designer Miyamoto Shigeru and owned by Nintendo. Doraemon was created by artist Fujiko Fujio. This work is for non-commercial and educaitonal purpose. It does not intend to infringe on the copyrights and/or trademarks of any mentioned entities.*/let x = 0; //Translate x-coordinatelet y = 90; //Translate y-coordinatelet leftBoxR = 236; //Left Box's Color - R Valuelet leftBoxG = 64; //Left Box's Color - G Valuelet leftBoxB = 37; //Left Box's Color - B Valuelet rightBoxR = 236; //Right Box's Color - R Valuelet rightBoxG = 64; //Right Box's Color - G Valuelet rightBoxB = 37; //Right Box's Color - B Valuelet arrowColorL = 255; //Left Box's Grayscale Valuelet arrowColorR = 255; //Right Box's Grayscale Valuelet raindrops = []; //Array of Rain Dropslet floodH = 0; //Flood Heightfunction setup() { createCanvas(400, 600); rectMode(CENTER);}class Drop { //Create a class of rain drops //This piece of code comes from p5.js website's examples page https://p5js.org/examples/objects-array-of-objects.html constructor() { this.x = random(width); this.y = 0; this.diameter = random(5, 10); this.speed = random(1, 5); } move() { this.y += this.speed; } display() { push(); //Start No Stroke blendMode(MULTIPLY); noStroke(); fill(77, 166, 255); ellipse(this.x, this.y, (this.diameter/2), this.diameter); pop(); //Stop No Stroke }}function draw() { background(204, 230, 255); /*----------------------------------------------------------------------*/ /* Background */ backGround(); /*----------------------------------------------------------------------*/ /* Character */ push(); //Start Translate translate(x, y); drawHead(); drawBody(); drawFoot(160, 400, 80, 40, 0, 0, 90, 10); drawFoot(260, 400, 80, 40, 0, 0, 10, 90); drawHand(); pop(); //Stop Translate /*----------------------------------------------------------------------*/ /* Rain */ for (let i = 0; i < 1; i++) { //Create rain drops //This piece of code comes from p5.js website's examples page https://p5js.org/examples/objects-array-of-objects.html raindrops.push(new Drop()); } for (let i = 0; i < raindrops.length; i++) { //Make rain drops fall down the frame //This piece of code comes from p5.js website's examples page https://p5js.org/examples/objects-array-of-objects.html raindrops[i].move(); raindrops[i].display(); } /*----------------------------------------------------------------------*/ /* UI */ drawUI(); //Create Buttons //Guidance Text fill(255); textFont('COURIER'); textStyle(BOLD); textAlign(CENTER); textSize(13); text("Try to escape the flood", 200, 545); text("Press left or right arrow to move", 200, 560); /*----------------------------------------------------------------------*/ /* Flood Rising */ push(); //Start Lightest Blend Mode noStroke(); blendMode(MULTIPLY); if (millis() > 4000) { //Start Rising At 4000 Milliseconds fill(77, 166, 255); rect(200, 600, 400, floodH); floodH = floodH + 1; } pop(); //Stop Lightest Blend Mode if (floodH >= 850) { //Ending background(0); fill(255); textFont('COURIER'); textStyle(BOLD); textAlign(CENTER); textSize(13); text("At 1 meter sea level rise, \nmany cities around the world will be inundated. \nAnd not everyone can afford to get out.", 200, 300); }}/*----------------------------------------------------------------------*/function drawBlock(blockX, blockY, blockW, blockH) { //Create Basic Block rect(blockX, blockY, blockW, blockH);}/*----------------------------------------------------------------------*/function keyPressed() { //Make Character Move & Left Key Turn Dark When Pressed if (keyCode === LEFT_ARROW && x>=-70 && keyIsPressed === true) { x = x - 5; arrowColorL = 0; //Make Left Key Turn Dark leftBoxR = 179; //Make Left Key Turn Dark leftBoxG = 0; //Make Left Key Turn Dark leftBoxB = 0; //Make Left Key Turn Dark } else { //Return Left Key to Original Color arrowColorL = 255; leftBoxR = 236; leftBoxG = 64; leftBoxB = 37; } if (keyCode === RIGHT_ARROW && x<60 && keyIsPressed === true) { ////Make Character Move & Right Key Turn Dark When Pressed x = x + 5; arrowColorR = 0; rightBoxR = 179; rightBoxG = 0; rightBoxB = 0; } else { //Return Right Key to Original Color arrowColorR = 255; rightBoxR = 236; rightBoxG = 64; rightBoxB = 37; }} /*----------------------------------------------------------------------*/function drawUI() { //Create Move Buttons fill(0); drawBlock(27, 552, 50, 50); //Left Box Shadow drawBlock(373, 552, 50, 50); //Right Box Shadow fill(leftBoxR, leftBoxG, leftBoxB); drawBlock(25, 550, 50, 50); //Left Box fill(rightBoxR, rightBoxG, rightBoxB); drawBlock(375, 550, 50, 50); //Right Box fill(arrowColorL); triangle(20, 550, 30, 540, 30, 560); //Left Arrow fill(arrowColorR); triangle(380, 550, 370, 540, 370, 560); //Right Arrow}/*----------------------------------------------------------------------*/function drawHead() { /* Head */ fill(255); rect(200, 180, 160, 160, 90, 90, 0, 0); //Head Shape /* Eyes */ fill(0); rect(210, 180, 5, 20, 30, 30, 30, 30); //Left Eye rect(260, 180, 5, 18, 30, 30, 30, 30); //Right Eye /* Dark Circles */ push(); //Start No Fill & Stroke Weight noFill(); strokeWeight(4); stroke(200); arc(210, 195, 12, 5, 2*PI, PI, OPEN); //Left Dark Circle arc(260, 193, 12, 5, 2*PI, PI, OPEN); //Right Dark Circle pop(); //Stop No Fill & Stroke Weight /* Mouth */ rect(240, 190, 12, 5, 10, 10, 10, 10); /* Hair */ drawHair(165, 170, 70, 70); //1 - From Left to Right drawHair(175, 170, 60, 60); //2 - From Left to Right drawHair(190, 175, 70, 70); //3 - From Left to Right drawHair(200, 175, 60, 60); //4 - From Left to Right}/*----------------------------------------------------------------------*/function drawHair(hairX, hairY, hairW, hairH) { //Create Character's Hair push(); //Start No Fill & Stroke Weight strokeWeight(4); noFill(); arc(hairX, hairY, hairW, hairH, PI, PI + QUARTER_PI); pop(); //Stop No Fill }/*----------------------------------------------------------------------*/function drawBody() { //Create Character's Body /* Shirt */ fill(236, 64, 37); //Red drawBlock(130, 250, 20, 20); //First Line drawBlock(150, 250, 20, 20); //First Line drawBlock(170, 250, 20, 20); //First Line drawBlock(210, 250, 20, 20); //First Line drawBlock(230, 250, 20, 20); //First Line drawBlock(250, 250, 20, 20); //First Line drawBlock(270, 250, 20, 20); //First Line drawBlock(110, 270, 20, 20); //Second Line drawBlock(130, 270, 20, 20); //Second Line drawBlock(150, 270, 20, 20); //Second Line drawBlock(170, 270, 20, 20); //Second Line drawBlock(210, 270, 20, 20); //Second Line drawBlock(230, 270, 20, 20); //Second Line drawBlock(270, 270, 20, 20); //Second Line drawBlock(290, 270, 20, 20); //Second Line drawBlock(310, 270, 20, 20); //Second Line drawBlock(90, 290, 20, 20); //Third Line drawBlock(110, 290, 20, 20); //Third Line drawBlock(130, 290, 20, 20); //Third Line drawBlock(150, 290, 20, 20); //Third Line drawBlock(270, 290, 20, 20); //Third Line drawBlock(290, 290, 20, 20); //Third Line drawBlock(310, 290, 20, 20); //Third Line drawBlock(330, 290, 20, 20); //Third Line drawBlock(130, 310, 20, 20); //Fourth Line drawBlock(290, 310, 20, 20); //Fourth Line /* Overalls */ fill(42, 112, 186); //Blue drawBlock(190, 250, 20, 20); //Left Strap drawBlock(190, 270, 20, 20); //Left Strap drawBlock(250, 270, 20, 20); //Right Strap drawBlock(170, 290, 20, 20); //First Line drawBlock(190, 290, 20, 20); //First Line drawBlock(210, 290, 20, 20); //First Line drawBlock(230, 290, 20, 20); //First Line drawBlock(250, 290, 20, 20); //First Line drawBlock(150, 310, 20, 20); //Second Line drawBlock(170, 310, 20, 20); //Second Line drawBlock(210, 310, 20, 20); //Second Line drawBlock(230, 310, 20, 20); //Second Line drawBlock(270, 310, 20, 20); //Second Line drawBlock(150, 330, 20, 20); //Third Line drawBlock(170, 330, 20, 20); //Third Line drawBlock(190, 330, 20, 20); //Third Line drawBlock(210, 330, 20, 20); //Third Line drawBlock(230, 330, 20, 20); //Third Line drawBlock(250, 330, 20, 20); //Third Line drawBlock(270, 330, 20, 20); //Third Line drawBlock(130, 350, 20, 20); //Fourth Line drawBlock(150, 350, 20, 20); //Fourth Line drawBlock(170, 350, 20, 20); //Fourth Line drawBlock(190, 350, 20, 20); //Fourth Line drawBlock(210, 350, 20, 20); //Fourth Line drawBlock(230, 350, 20, 20); //Fourth Line drawBlock(250, 350, 20, 20); //Fourth Line drawBlock(270, 350, 20, 20); //Fourth Line drawBlock(290, 350, 20, 20); //Fourth Line drawBlock(130, 370, 20, 20); //Fifth Line drawBlock(150, 370, 20, 20); //Fifth Line drawBlock(170, 370, 20, 20); //Fifth Line drawBlock(190, 370, 20, 20); //Fifth Line drawBlock(230, 370, 20, 20); //Fifth Line drawBlock(250, 370, 20, 20); //Fifth Line drawBlock(270, 370, 20, 20); //Fifth Line drawBlock(290, 370, 20, 20); //Fifth Line /* Buckle */ fill(255, 250, 84); //Yellow drawBlock(190, 310, 20, 20); drawBlock(250, 310, 20, 20);}/*----------------------------------------------------------------------*/function drawFoot(footX, footY, footW, footH, b1, b2, b3, b4) { //Create Character's Foot fill(255); rect(footX, footY, footW, footH, b1, b2, b3, b4);}/*----------------------------------------------------------------------*/function drawHand() { //Create Character's Hand fill(242, 194, 151); //Beige drawBlock(90, 310, 20, 20); //First Line //Left Hand drawBlock(110, 310, 20, 20); //First Line //Left Hand drawBlock(310, 310, 20, 20); //First Line //Right Hand drawBlock(330, 310, 20, 20); //First Line //Right Hand drawBlock(90, 330, 20, 20); //Second Line //Left Hand drawBlock(110, 330, 20, 20); //Second Line //Left Hand drawBlock(130, 330, 20, 20); //Second Line //Left Hand drawBlock(290, 330, 20, 20); //Second Line //Right Hand drawBlock(310, 330, 20, 20); //Second Line //Right Hand drawBlock(330, 330, 20, 20); //Second Line //Right Hand drawBlock(90, 350, 20, 20); //Third Line //Left Hand drawBlock(110, 350, 20, 20); //Third Line //Left Hand drawBlock(310, 350, 20, 20); //Third Line //Right Hand drawBlock(330, 350, 20, 20); //Third Line //Right Hand }/*----------------------------------------------------------------------*/function backGround() { //Create Background /* Buildings */ push(); //Start Multiply Blend Mode noStroke(); blendMode(MULTIPLY); fill(51, 102, 153); drawBlock(200, 600, 100, 800); fill(255, 204, 255); drawBlock(100, 600, 100, 600); fill(153, 102, 255); drawBlock(400, 600, 100, 1000); fill(76, 0, 230); drawBlock(350, 600, 50, 1300); fill(102, 153, 255); drawBlock(250, 600, 100, 1100); fill(102, 153, 255); drawBlock(50, 600, 50, 900); fill(51, 204, 255); drawBlock(0, 600, 50, 1000); fill(51, 204, 255); drawBlock(160, 600, 100, 1000); fill(51, 204, 255); drawBlock(280, 600, 100, 900); pop(); //Stop Multiply Blend Mode /* Ground */ fill(51, 102, 153); drawBlock(200, 600, 400, 180); }