Bug&Carrot Game

Simple click-based web game with JS

---

Summary

Randomly displays bug and carrots in the field and if we click bug, game is over. If we click all the carrots in the field, we win.

• Work with Web API (setInterval,scroll)
• Try refactoring and practice JS modules
• Project based on Frontend 101 Online COurse from Dream Coding

from 2021.08.21 - 31.

---

Tech

I used..

• HTML
• CSS
• Javascript
• Replit

with Github.

Key Features

• Ramdom display

  • get coordinates of field element with getBoundingCLientRect method.
  • getRandomArbitrary function for generating random number.

  

• Timer

  • setInterval for displaying decreasing number with every seconds.
  • clearInterval for resetting timer in following cases.
    1. number reaches to 0
    2. user clicks bug element
    3. user clicks all of the carrot elements

• Pop-up

  • create FinishGameBanner instance of PopUp class in popup.js
  • show method to show pop-up in following cases

    1. YOU LOST!

       • number reaches to 0

         

       • user clicks bug element

         

    2. YOU WIN!

       • user clicks all of the carrot elements

         

Refactoring

• Before

  • 1 js file (main.js)
  • functions unsorted
  • no use of class & instances

• After

  • 3 js file (main.js,field.js,popup.js)
  • methods and properties are sorted in each modules
  • instances are made from field and popup classes