GA Logo

Tomagotchi Code Along

Description

Let's use our front-end web development skills to create a "living" pet! We'll use HTML, CSS, and JavaScript to interact with our pet.

Here is a live example of what we are going to build

Fork and Clone

https://git.generalassemb.ly/classwork/tamagotchi-code-along

Learning Objectives

Today's lesson will be focused on building out interactivity in the DOM. This will enable us to take the games we have been building and combine them with user interactivity.

Along the way, we will be learning about some common UI and how to build them. These include:

Guidelines

:pencil: Style the page.

:pencil: Add a Modal to start the game.

:pencil: Add a Carousel of images for user to choose the background.

:pencil: Create a Class ( for your tomagotchi

  • Instatiate your Tomagotchi
  • Display a character of your choice on the screen to represent your pet
  • Increase your pet's age every x minutes
  • Increase your pet's Hunger, Sleepiness, and Bored metrics on an interval of your choosing.
  • You pet should die if Hunger, Boredom, or Sleepiness hits 10.
  • Morph your pet at certain ages.

:pencil: Display the following metrics for your pet:

  • Hunger (1-10 scale)
  • Sleepiness (1-10 scale)
  • Boredom (1-10 scale)
  • Age
  • Name

:pencil: Add buttons to the screen to feed your pet, turn off the lights, and play with your pet.

  • Animate your pet across the screen while it's alive.

Extras

  • Animate your pet across the screen while it's alive.
  • Add anything you can think of... use your imagination!