This mini farming simulator showcases P5.js particle systems as well as state managment in a fun and interactive way.

How to Play

Select any tool with your cursor.

Tools

• Seed Bag- Allows user to plant seeds Click the mouse button to drop a seed.
• Shovel- Allows user to delete a plant Click on a plant to remove it.
• Watering Can- Allows user to water plant Hold down the mouse button to begin watering.

Gameplay

Players can plant seeds anywhere on the ground. Once the seeds have been they can water the seed in order for it to grow. After a certain size it will begin to grow a stem and then, after the stem reaches its maximum height, the flower will begin to bloom.

Programming

Resources

• P5.js- for manipulating and drawing everything on to the HTML5 canvas.

Files

• assets
• images- holds all images for our game
• css
• index.css- holds some basic styling rules for our canvas.
• js
  • game.js- holds the game logic.
• index.html- holds the html code for the project.

Functionality

First our game.js runs through the function preload() which loads all the media resources we need. Next it calls setup() which will initatate all our game instances such as a seeds array, water array, and toolbar. Finally, game.js will call draw() which is called 60 times per second by P5, causing the game elements to look like they are moving, but in actuality they are just changing each frame. Draw will first draw the game objects, such as the plants, toolbar, and any water particles, and then it will check which mode we are in (either planting, shoveling, or watering) and will draw the appropriate cursor.

 
  function draw(){
    counter += 1;
    background(3,202,255);
    fill(0,255,0);
    rect(0, groundY, canvasWidth, canvasHeight); //ground
    toolbar.draw();
    drawSeeds();
    drawWater();

    //draw our own cursor
    if(mode === 0){
      image(seedArtwork, mouseX-35, mouseY-30, 70, 70);
    }
    else if(mode === 1){
      image(shovelArtwork, mouseX-35, mouseY-42, 70, 70);
    }
    else if(mode === 2){
      image(canArtwork, mouseX-45, mouseY-40, 70, 70);
      if(mouseIsPressed && (counter >= dropDelay) && !iconClicked){
        waterArr.push(new Water(mouseX-45, mouseY-10));
        counter = 0;
      }
    }
  }

Game.js keeps track of states with the global mode variable, which holds the mode the player is in (0 for planting seeds, 1 for shoveling, and 2 for watering). The class Seed keeps track of state through its state property. If the state property for a plant is at 0, then the plant is just a seed. If the state property is at 1, we draw the seed growing (until it reaches its unique max growth). If the state property is at 2, then we draw the plant as a seed with a stem (until stem reaches its unique height). Next, if the state is at 3, we draw the plant as a seed with a stem and a pistil (until the pistil reaches its unique size). Finally, if the state is at 4, we draw the plant as a seed with a stem, pistil, and petals, which will be a complete flower. As you can see, the state variable increments and goes through the plant life cycle for each plant. Particle systems also play a crucial part on the code. If we are in mode 2, which is the watering mode, we constantly check if the mouse is being pressed and if so, we initiate new water particles defined in our Water class. These water particles will be saved into an array, which is later looped through to draw each water particle. Inside each particle's draw function, we assign it a random x, and a set y direction. We then increment their coordinates by their random x direction and set y direction, causing each water particle to slowly fall. Finally, we evaporate each water particle by decrementing its alpha value. Once their alpha values reach 0 then the water particle is popped off our array.

Post Tags gaming programming simulation javascript