Giter Club home page Giter Club logo

js-oop-exercise's Introduction

Tamagotchi Time

image

In this assignment, you will be constructing interactive Tamagotchis from your very own Tamagotchi Class!

Unless you make the reach goal happen, this will be a console-based exercise, so make sure you have your developers console open and test frequently.

Exercise Objectives

  • Gain deeper experience with writing JavaScript Classes
  • Gain practice creating new objects with the new keyword
  • Use this and pass arguments to a constructor function
  • Gain deeper insight into object-oriented programming

Setup

  1. Fork and clone this repository.
  2. Change into the new directory.
  3. Fulfill the listed requirements.
  • Note that the tamagotchi and player objects are in their own files so they can be more manageable.

Directions:

  • You will be writing and invoking new Tamagotchis in tamagotchi.js. Follow the steps in order below. You can comment out code you're not using so it doesn't clutter your console, but keep the code you do need..!

  • index.html is already loaded with your scripts. Take note of the load order.

  • You'll be making commits after each Part.

RECAP: What is a Constructor Function?

A constructor function is a template for creating objects according to specification.

To build our family of Tamagotchis, we could write out a lot of entirely new tamagotchi objects. OR we could make a template with which to automate the construction of our Tamagotchi objects.

We would need only to write the constructor once, and with it, we could simply construct an indefinite amount of Tamagotchi objects without having to write them out one by one.

A constructor function is a function, not an object. We use it to generate objects.

We do not write key-value pairs inside our constructor like we do with objects, instead, we just assign values to variables.

We refer to the properties that will exist within that generated object by using the keyword this:

Part 1: Create the Constructor Function

  • Write a constructor function for a Tamagotchi
  • Using this.propertyName = value, add foodInTummy, restedness, and health as properties and set each of the values to 10.
  • Add in a method called cry. The cry function should reduce foodInTummy by 1, console.log the new value of foodInTummy, and console.log "WAHH!!!".
  • Make two new tamagotchis
  • Invoke each tamagotchi's cry method
  • ๐ŸŽฏ Git add, and commit -m "part 1: created Tamagotchi constructor"
.. Stuck?
class Tamagotchi{
  constructor(){
    this.foodInTummy = 10;
    this.restedness = 10;
    this.health = 10;
  }

  cry(){
    this.foodInTummy--;
    console.log("The Tamagotchi is crying!!! WAAAH!!!!!!");
    console.log('current food in tummy: ' + this.foodInTummy);
  }
}

//create a new Tamagotchi with `new`
var constructedObject1 = new Tamagotchi();
var constructedObject2 = new Tamagotchi();

//console log the new Objects to check them out
console.log(constructedObject1);
console.log(constructedObject2);

//Invoke methods on the constructed objects:
constructedObject1.cry();
constructedObject2.cry();

Part 2: Add Arguments

We can give our constructed objects unique values by providing arguments to our constructor function. In the same way that regular functions can take input (parameters), so can our constructor functions, and they can put those input values into the constructed object.

  • In tamagotchi.js, add parameters to your constructor function: name and creatureType

  • Make it so that the constructor function will add the values of name and creatureType to the constructed object. variables hint: this.propertyName = parameterValue within the function.

  • Make it so that the cry method will console.log the Tamagotchi's name and the cry.

  • Create new Tamagotchis each with different names and creatureTypes

  • Invoke each Tamagotchi's cry method

  • ๐ŸŽฏ Git add, git commit -m "part 2: added arguments to Tamagotchi"

Part 3: More Methods

  • Add a method called puke. The puke function should:
    • reduce the Tamagotchi's foodInTummy by 1
    • console.log the new value of foodInTummy + a crying sound
  • Add a method called yawn. The yawn function should:
    • reduce the Tamagotchi's restedness by 1
    • console.log the values "[Tamagotchi's name] has current restedness of: [restedness]"
  • Make new Tamagotchis and test the methods work and that they console.log the Tamagotchis' name as well as the altered values.
  • ๐ŸŽฏ Git add, git commit -m "part 3: added new methods"

Part 4: Make it a Game with Player

  • Take a look at player.js. It's already built out. This is a player object, which has a name, and 3 methods feedTamagotchi, medicateTamagotchi, and knockOutTamagotchi where each take in a tamagotchi as an argument.

  • Underneath player, invoke each of player's action separately and pass in a Tamagotchi you made earlier in Part 1.

    • Hint: You can pass a tamagotchi object (ie. tamagotchi1 or tamagotchi2, etc) as an argument to the player's feedTamagotchi function: player.feedTamagotchi(tamagotchi1)
  • ๐ŸŽฏ Git add, git commit -m "part 4 added new methods"

Part 5: Start and Stop

Add in the start and stop methods to your Tamagotchi constructor:

  • The method start will kick off three timers (console.log the Tamagotchi's name):
    • hungerTimer invokes the Tamagotchi's cry method every 6 seconds
    • yawnTimer invokes the Tamagotchi's yawn method every 10 seconds
    • sickTimer invokes the puke method every 20 seconds

Hint: use setInterval

  • The method stop will stop the hungerTimer, yawnTimer, and sickTimer.
  • ๐ŸŽฏ Git add, git commit -m "part 5 added new methods"

Make some new Tamagotchis and try running multiple of them, and turning them on and off.

Reach Goals

We want it so that our player can just click buttons on the page rather than type in the commands to feed the Tamagotchi, etc.

  • Write three buttons into your index.html: 'feed', 'rest', 'medicate'.

  • When the buttons are clicked, they should invoke the respective player object methods to give a tamagotchi what it needs.

  • Write a button that will start the tamagotchi

Super Reach Goals

  • Add a form to index.html so that when it's submitted, it creates a new Tamagotchi and takes the name that was submitted.

  • Dynamically create a div for your new tamagotchi that has its own set of feed, rest, and medicate functions.

  • In addition to console.logs, have the messages appear in the div.

Submitting Your Work

When you're ready to submit your work,

  1. Add, commit and push your code
  2. Submit the link of your repo to GA Grader with a comment of your comfort score for the material.

js-oop-exercise's People

Contributors

tangelia avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.