Exercise Notes

Learning goals

  • Software design approaches and patterns, to identify reusable solutions to commonly occurring problems
  • Apply an appropriate software development approach according to the relevant paradigm (for example object-oriented, event-driven or procedural)

Programs used

Zooville Saga

Getting started

This exercise is to give you some practice working with [[Prototype]] linking and delegation, where the objects further down the chain have specific methods which call more general methods of the objects further up the chain.

You have been assigned to a team that’s creating the next big thing: Zooville Saga! Your job is to create the basic data structure for the animals. They each have a hunger meter (out of 100), a name, and a species. They will also each need a method that’s called whenever the player feeds them that feeds it and lets the player know which animal was fed and how full it is (just on the console will do).

Once you’ve gotten the basics ready, make some animals! How about a zebra and a lion?

Here’s a starting point:

const animal = {
    init: function (name, species) {
        /* ... */
 
    },
    feed: function () {
        /* ... */
    }
};

Carnivores and herbivores

The team member working on the UI has hooked up your code to their UI and the players are delighted! But a game designer has told you that they need something else to make it an actual game (who’d have thought?).

The zoo starts with £4000, and animal feed costs different amounts depending on what type of food the animal eats! Herbivore feed costs £200 and carnivore feed costs £500.

Create herbivore and carnivore objects and link them to your animal object, then add their own feedHerbivoreFood and feedCarnivoreFood methods. Then, make some more animals in addition to your zebra and lion… how about a chinchilla and a ferret?

Your zoo finances are tracked here:

const zoo = {
    cash: 4000,
    spend: function (amount) {
        if (this.cash < amount) {
            throw "Not enough money!";
        }
        this.cash -= amount;
        console.log(`Remaining funds: ${this.cash}`);
    }
};

Food types

The game producer is here and has asked another thing of you. In order to make the animal animations more appropriate, they need to eat different things depending on the animal, and then the message the player receives should be appropriate to the food too!

Oh dear… that means that the zebra is a herbivore that eats grass, the chinchilla a herbivore that eats fruits and seeds, the lion a carnivore that eats large prey, and the ferret a carnivore that eats small prey.

For some reason, you’ve been told the only difference is the graphic – i.e. the foodType object property that you’ll need to add – even though in reality lion food would probably cost more than ferret food…

You should have everything you need to implement this step of the exercise.

Animal creation

Oh no! A freak thunderstorm blew up exactly the part of the code that wired up animal creation! And the person who originally wrote the code is on holiday! What a disaster. It’s up to you to write it again.

You have an object that creates animals, but not of any particular species:

const animalCreator = {
    createAnimal: function(name, speciesName, animalType) {
        const animal = Object.create(animalType);
        animal.init(name, speciesName);
        return animal;
    },
 
    createZebra: function (name) {
      // Implement me
    },

    ...
};

Add methods onto animalCreator for each of Zebra, Lion, Chinchilla, and Ferret.

Rewiring the buttons

Now that you’ve recreated the animalCreator methods, you’ll need to wire up the buttons in the game again.

Create a function that returns an object with an onClick property that constructs an appropriate animal.

function getButton(index) {
    return /* Gets the button at place `index` */;
}
 
// So that you can use it like:
const zebraButton = getButton(0);
const bobTheZebra = zebraButton.onClick('Bob');
 
bobTheZebra.feedHerbivoreFood();

See if you can multiple ways to do this – one should use explicit binding and one won’t need to.

Stretch

If you have some extra time, go and look up classes in ES6 for more details. Then, have a look at your code for Getting started, Carnivores and herbivores, and Food types and write (in a new file!) a version that makes use of class and its other features.