Coding: Creating Your Own Digital Pet

About 7 minutes

A digital pet is a small pile of numbers that changes when you do something to it. Feed it and one number goes down. Play with it and another goes down while the first goes up. Everything else is decoration.

The programs below are written in JavaScript, and the first two really run on this page. Read each one and work out what it will print before you press Run. Guessing wrong and finding out why is the fastest way to learn this.

A pet is a number with a name

var makes a box to keep a value in. The + joins pieces of text together so they can be printed as one line. What two lines will this print?

var name = 'Pixel';
var hunger = 5;

console.log(name + ' has hunger ' + hunger);

hunger = hunger - 3;

console.log('Fed ' + name + '. Hunger is now ' + hunger);

The second line printed a different number from the first because hunger changed in between. A variable is not a fact that stays true forever. It is a box, and the last thing you put in it is what is inside.

Actions, so you are not rewriting the same lines

Feeding a pet twice should not mean copying the same three lines twice. A function is a set of instructions with a name, written once and used as often as you like.

This pet has two actions and a rule for its mood. Work out what mood Pixel ends up in before you run it — the order of the actions matters.

var name = 'Pixel';
var hunger = 4;
var energy = 6;

function feed() {
  hunger = hunger - 3;
  if (hunger < 0) { hunger = 0; }
  console.log('Fed. Hunger is now ' + hunger);
}

function play() {
  energy = energy - 2;
  hunger = hunger + 2;
  console.log('Played. Energy ' + energy);
  console.log('Hunger is now ' + hunger);
}

function mood() {
  if (hunger > 6) { return 'grumpy and hungry'; }
  if (energy < 3) { return 'sleepy'; }
  return 'happy';
}

play();
play();
feed();

console.log(name + ' is ' + mood() + '.');

Playing costs energy and makes the pet hungrier, so two games in a row leave Pixel worn out. Feeding fixes the hunger but does nothing for the tiredness, which is why the answer is sleepy rather than happy.

The three ideas you just used

Variables hold a value that can change: hunger, energy.
Functions are named instructions you can run again: feed(), play().
Conditions choose between paths: if (hunger > 6).

Nearly every program you will ever write is these three things stacked up. A game, a calculator and a website are all variables being changed by functions that make choices.

Put it on a real page you can keep

To change the code you need it in a file of your own. This version is the same pet with buttons instead of a printed list, and it runs in any web browser.

Open a plain text editor, type it in, and save it as pet.html. Then open that file in your browser. Typing it out by hand rather than copying is slower and teaches you far more, because every mistake you make is one you then have to find.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Digital Pet</title>
<style>
  body { font-family: sans-serif; text-align: center; }
  #pet {
    width: 140px; height: 140px;
    border-radius: 50%; background: cadetblue;
    margin: 1rem auto;
  }
  button { font-size: 1rem; padding: 0.6rem 1rem; }
</style>
</head>
<body>

<h1>Pixel</h1>
<div id="pet"></div>
<p id="says">Pixel is waiting.</p>

<button id="feed">Feed</button>
<button id="play">Play</button>

<script>
  var hunger = 4;
  var energy = 6;
  var says = document.getElementById('says');

  function report(what) {
    says.textContent =
      what + ' Hunger ' + hunger + ', energy ' + energy;
  }

  var feedButton = document.getElementById('feed');
  var playButton = document.getElementById('play');

  feedButton.addEventListener('click', function () {
    hunger = hunger - 3;
    if (hunger < 0) { hunger = 0; }
    report('You fed Pixel.');
  });

  playButton.addEventListener('click', function () {
    energy = energy - 2;
    hunger = hunger + 2;
    report('You played with Pixel.');
  });
</script>

</body>
</html>

The <style> part decides how it looks. The <script> part is the same JavaScript you have already run, with one change: instead of printing a line, it puts the text into the paragraph on the page and waits for a click.

Things to change

Each of these is a small edit to the file you just saved.

Give the pet your own name, and a different color.
Add a Sleep button that puts energy back up.
Stop energy dropping below zero, the way feed already stops hunger doing it.
Make the pet refuse to play when its energy is under 2, and say so.

The last one is the interesting one. Nothing new is needed for it — just an if in the right place.