berries.js!

(until i set up the resources page this will be in my index deal w it)

a simple script to add little collectibles to your page!

like this one:

download

just download this file and put it on your page

you can put it whenever but if you don't put it in the top folder you might need to change the script src attribute from the example

setup

example setup:

<script src="/berries.js"></script> 
<script> 

// set popup text on collected
Berries.berriesText = "collected!"; 
// or set a count for an automatic counter instead
Berries.totalBerries = 10; 

// show already collected items
// (they have a special .ghost-berry class you can use)
Berries.showGhostBerries = false;

Berries.onBerryCollected = (berryName, collectedAmount, isAllCollected) => {
  console.log("Collected " + berryName);
  if(isAllCollected) {
    alert("you collected them all!");
    Berries.resetBerries();
  }

</script>

From now on, all you need to do to define a collectible item is add: class="berry" data-berry="unique-name-here" to any thing you want to be collectible! Example:

<img src="/assets/berry.png" data-berry="first-well-hidden-berry">

there are also 3 css classes that you can customize yourself:

• .berry - for every collectible
• .berry.ghost-berry - for a thing that already has been collected (if Berries.showGhostBerries is true)
• .berry-message - for the popup text after collecting

example:

.berry-message {
  color: white;
}
.berry {
  cursor: pointer;
  image-rendering: pixelated;
  opacity: 1.0;
}
.berry.ghost-berry {
  opacity: 0.3;
}