Tamagotchi-style web app

<

>

1 Introduction to web programming

Done some Scratch? Got a lot of useful ideas from that? Let's see how to take similar ideas and create something which runs on the web. We will work towards a Tamagotchi-style game.

In some ways programming on the web is very similar to Scratch — Scratch has sprites with costumes and scripts. The web-app will have parts that describe what the page looks like (like costumes), and parts which say how it behaves (like scripts).

RESULT SOURCE

<

>

2 Build basic structure

Our web app will be made of three pieces, each controlling one aspect of the app:

  • An HTML file — the hyper text markup language gives the content of the page, in terms of what text, sections, headings, areas for graphics, and so on there are.
  • A CSS file — the cascading style sheet describes what we want the content to look like.
  • A JS file — the JavaScript is the programming language understood by web browsers, and lets us describe what behaviour we want the web app to have.

We'll set up a basic web app which does very little, but allows us to make sure these three pieces are working correctly together.

RESULT SOURCE

+

-

code.js

1 
$(document).ready(function()
2 
{
3 
    // Your code JavaScript goes here.
4 
});

page.html

1 
<html><head>
2 
    <title>Tamagotchi</title>
3 
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
4 
    <script src="code.js"></script>
5 
    <link rel="stylesheet" type="text/css" href="style.css"></link>
6 
  </head>
7 

  

    
    8
    
  <body>

  

    
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    
    10
    

  

    
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    
    12
    
  </body>

  

    
    13
    
</html>

  

  

  
  

  
  
style.css

  
  
  

  

    
    1
    
body { background-color: #eee; margin: 24px; }

  

    
    2
    
h1 { color: red; }

  

    
    3
    
#game { background-color: #ffd; }

  

  

  









2.1
    Add bare skeleton of HTML/CSS/JS structure



The web app is made of three parts.  The content here is a bare skeleton
to get things started.  If you're using a web-based system like JSBin,
these three pieces are provided for you.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    
    1
    
$(document).ready(function()

  

    
    2
    
{

  

    
    3
    
    // Your code JavaScript goes here.

  

    
    4
    
});

  

  

  
  

  
  
page.html

  
  
  

  

    
    1
    
<html><head>

  

    
    2
    
    <title>Tamagotchi</title>

  

    
    3
    
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>

  

    
    4
    
    <script src="code.js"></script>

  

    
    5
    
    <link rel="stylesheet" type="text/css" href="style.css"></link>

  

    
    6
    
  </head>

  

    
    7
    

  

    
    8
    
  <body>

  

    
    9
    
    <!-- Your web page HTML goes here. -->

  

    
    10
    
  </body>

  

    
    11
    
</html>

  

  

  
  

  
  
style.css

  
  
  

  

    
    1
    
/* Your web styling CSS goes here. */

  

  

  









2.2
    Add header



Notice how HTML uses 'tags' to draw elements, and how elements have
matching start and end tags.  You could experiment with changing <h1>
to <h2> or <h3> or <h4> and see what happens.  Or try adding some
more text in a paragraph element:



<p>
  ... text goes here ...
</p>







  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    6
    6
    
  </head>

  

    7
    7
    

  

    8
    8
    
  <body>

  

    9
    
    
    <!-- Your web page HTML goes here. -->

  

    
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    10
    10
    
  </body>

  

    11
    11
    
</html>

  

  

  









2.3
    Styling the page



You can change how your page content looks using another web language
called CSS (which is short for Cascading Style Sheets).  It's a series
of rules, and each rule says what parts of the web page it applies to,
and what to do with those parts.  Here, we choose all <h1> pieces, and
make them red.



Other styles to experiment with include:



    

  • font-size
    • 

  • color
    • 

  • min-height
    • 

  • background
    • 

  • border
    • 

  • margin
    • 

  • padding
    • 




You can also style the whole page by selecting the <body> in CSS.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    1
    
    
/* Your web styling CSS goes here. */

  

    
    1
    
h1 { color: red; }

  

  

  









2.4
    Add a canvas to draw the Tamagotchi on



The web also allows you to create pictures and well as text.  This is
done by creating a canvas for the drawing to happen on.  The <canvas>
element here has a predefined, fixed size on the screen.



But so far we're not drawing anything.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    7
    7
    

  

    8
    8
    
  <body>

  

    9
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    
    10
    

  

    
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    10
    12
    
  </body>

  

    11
    13
    
</html>

  

  

  









2.5
    Make overall background light grey



White is a bit harsh for the background to the whole game.  We can add
styling to the whole <body> to soften it slightly.  This way of
describing a colour uses 'Red, Green, Blue' values.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    
    1
    
body { background-color: #eee; }

  

    1
    2
    
h1 { color: red; }

  

  

  









2.6
    Make canvas background champagne



We can style the canvas so we can see it better.  The #game selector
in the CSS lets us talk about the canvas element which has the
id="game" attribute in the HTML.  This 'identifier' ties them
together.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    1
    1
    
body { background-color: #eee; }

  

    2
    2
    
h1 { color: red; }

  

    
    3
    
#game { background-color: #ffd; }

  

  

  









2.7
    Leave a bit more margin round page



Everything is right up against the edge of the browser window.  By
adding a 'margin' to the body, we can leave some room.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    1
    
    
body { background-color: #eee; }

  

    
    1
    
body { background-color: #eee; margin: 24px; }

  

    2
    2
    
h1 { color: red; }

  

    3
    3
    
#game { background-color: #ffd; }

  

  

  















  
<

  
>



3
    Draw the egg and make it hatch



The first step is to show the Tamagotchi's egg when the player loads our
web app.  Then, when the player clicks a button, the egg will hatch into
the actual Tamagotchi.



To do this, we'll need to add the button to the HTML, and then write
some JavaScript code to do the drawing, and connect them together.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    1
    1
    
$(document).ready(function()

  

    2
    2
    
{

  

    3
    
    
    // Your code JavaScript goes here.

  

    
    3
    
    var canvas = document.getElementById('game');

  

    
    4
    
    var ctx = canvas.getContext('2d');

  

    
    5
    

  

    
    6
    
    ctx.fillStyle = 'green';

  

    
    7
    
    ctx.beginPath();

  

    
    8
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

    
    9
    
    ctx.fill();

  

    
    10
    

  

    
    11
    
    function draw_alien()

  

    
    12
    
    {

  

    
    13
    
        ctx.clearRect(0, 0, 480, 480);

  

    
    14
    
        ctx.fillStyle = 'blue';

  

    
    15
    

  

    
    16
    
        ctx.beginPath();

  

    
    17
    
        ctx.arc(240, 110, 80, 0.0, 2.0 * Math.PI, false);

  

    
    18
    
        ctx.fill();

  

    
    19
    

  

    
    20
    
        ctx.beginPath();

  

    
    21
    
        ctx.arc(240, 300, 150, 0.0, 2.0 * Math.PI, false);

  

    
    22
    
        ctx.fill();

  

    
    23
    
    }

  

    
    24
    

  

    
    25
    
    $('#hatch').click(draw_alien);

  

    4
    26
    
});

  

  

  
  

  
  
page.html

  
  
  

  

    9
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    10
    10
    

  

    11
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    
    12
    

  

    
    13
    
    <p>Click here to make it hatch: <button id="hatch">Hatch</button></p>

  

    12
    14
    
  </body>

  

    13
    15
    
</html>

  

  

  









3.1
    Get a '2D drawing context' for the canvas



Our drawing is going to be in 2D.  You can do 3D drawing, but it's quite
a lot more complicated.  We find the canvas using the name (id) we gave
it, and then ask the canvas for its '2D' drawing 'context'.  It's not
hugely important right now exactly what a 'context' is, but it's what
lets us draw on the page.



The document.getElementById() finds the game element, which is the
canvas we created in the HTML earlier.



The dot (.) between the canvas and the getContext is a bit like
choosing the getContext option from a right-click menu of things you
can do with or to canvas.  The () are for making it actually do the
set of instructions (function) getContext.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    1
    1
    
$(document).ready(function()

  

    2
    2
    
{

  

    3
    
    
    // Your code JavaScript goes here.

  

    
    3
    
    var canvas = document.getElementById('game');

  

    
    4
    
    var ctx = canvas.getContext('2d');

  

    4
    5
    
});

  

  

  









3.2
    Draw Tamagotchi 'egg'



The egg is a simple circle, but we need to know about 'paths' to draw
one.  You set up a path that an imaginary pen is going to take round the
canvas, and then, when it's done, say whether to: draw the outline (with
a 'stroke' of the pen) or 'fill' it in.  We want a coloured-in circle so
will 'fill' it; you can choose a colour, or something more
complicated (gradient or pattern) — we'll stick with a plain
colour.



To talk about position on the canvas, everything is done in terms of x
and y coordinates — starting in the top-left corner, how far
across should you go (x), and then how far down (y).  Annoyingly,
this is different to how Scratch does it, where you start in the middle
and then go across and up.  Scratch's way is how mathematicians do
things; most computer graphics is done the way the HTML canvas does it.
This is for 'historical reasons'.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    2
    2
    
{

  

    3
    3
    
    var canvas = document.getElementById('game');

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    
    5
    

  

    
    6
    
    ctx.fillStyle = 'green';

  

    
    7
    
    ctx.beginPath();

  

    
    8
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

    
    9
    
    ctx.fill();

  

    5
    10
    
});

  

  

  









3.3
    Add 'Hatch' button and instructions



We can add a button which will start the game using the HTML <button>
element.  But so far, nothing happens when you click on it, because we
haven't connected it to any JavaScript code.



Add styling to the button if you like by adding #hatch {...} to the
CSS.  The identifier for the button is hatch.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    9
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    10
    10
    

  

    11
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    
    12
    

  

    
    13
    
    <p>Click here to make it hatch: <button id="hatch">Hatch</button></p>

  

    12
    14
    
  </body>

  

    13
    15
    
</html>

  

  

  









3.4
    Say we want to draw the alien when button clicked



We declare that when the button (which we describe by giving its id) is
clicked, we want the function (set of instructions) draw_alien to
happen.  But we haven't yet said what draw_alien means, so it'll look
like nothing happens when we click the button.  If you bring up the
'developer tools' for your browser, you can see an error like: Uncaught
ReferenceError: draw_alien is not defined which means you're trying to
refer to something but you haven't defined it.  We'll do that next.



The current situation is like an imaginary situation in Scratch where
you've got a script which says 'when this sprite clicked,
jump-up-and-down', but you haven't defined the custom 'jump-up-and-down'
block.  (This situation is imaginary because Scratch, sensibly, won't
let you do this.)






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    7
    7
    
    ctx.beginPath();

  

    8
    8
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

    9
    9
    
    ctx.fill();

  

    
    10
    

  

    
    11
    
    $('#hatch').click(draw_alien);

  

    10
    12
    
});

  

  

  









3.5
    draw_alien(): Add



To actually draw the alien, we'll just use two overlapping blue circles.
To say where the circles go, we use coordinates as before.  Now it
should actually draw the Tamagotchi when you click the 'hatch' button.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    8
    8
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

    9
    9
    
    ctx.fill();

  

    10
    10
    

  

    
    11
    
    function draw_alien()

  

    
    12
    
    {

  

    
    13
    
        ctx.clearRect(0, 0, 480, 480);

  

    
    14
    
        ctx.fillStyle = 'blue';

  

    
    15
    

  

    
    16
    
        ctx.beginPath();

  

    
    17
    
        ctx.arc(240, 110, 80, 0.0, 2.0 * Math.PI, false);

  

    
    18
    
        ctx.fill();

  

    
    19
    

  

    
    20
    
        ctx.beginPath();

  

    
    21
    
        ctx.arc(240, 300, 150, 0.0, 2.0 * Math.PI, false);

  

    
    22
    
        ctx.fill();

  

    
    23
    
    }

  

    
    24
    

  

    11
    25
    
    $('#hatch').click(draw_alien);

  

    12
    26
    
});

  

  

  















  
<

  
>



4
    Fade out 'hatch' instructions when game starts



This is fine but the instructions remain once the Tamagotchi has
hatched, and that doesn't make sense because you can't hatch the
Tamagotchi more than once.  To fix this, we want the instructions to go
away at the same time as the alien appears.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    22
    22
    
        ctx.fill();

  

    23
    23
    
    }

  

    24
    24
    

  

    25
    
    
    $('#hatch').click(draw_alien);

  

    
    25
    
    $('#hatch').click(draw_alien_fade_instructions);

  

    
    26
    

  

    
    27
    
    function fade_out_hatch_instructions()

  

    
    28
    
    {

  

    
    29
    
        $('#hatch-instructions').fadeOut();

  

    
    30
    
    }

  

    
    31
    

  

    
    32
    
    function draw_alien_fade_instructions()

  

    
    33
    
    {

  

    
    34
    
        draw_alien();

  

    
    35
    
        fade_out_hatch_instructions();

  

    
    36
    
    }

  

    26
    37
    
});

  

  

  
  

  
  
page.html

  
  
  

  

    10
    10
    

  

    11
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    12
    12
    

  

    13
    
    
    <p>Click here to make it hatch: <button id="hatch">Hatch</button></p>

  

    
    13
    
    <p id="hatch-instructions">Click here to make it hatch:

  

    
    14
    
      <button id="hatch">Hatch</button></p>

  

    14
    15
    
  </body>

  

    15
    16
    
</html>

  

  

  









4.1
    Give an 'id' to the 'Hatch' instructions



To be able to get rid of the instructions paragraph, we need to be able
to identify it, so give it an id.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    10
    10
    

  

    11
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    12
    12
    

  

    13
    
    
    <p>Click here to make it hatch: <button id="hatch">Hatch</button></p>

  

    
    13
    
    <p id="hatch-instructions">Click here to make it hatch: <button id="hatch">Hatch</button></p>

  

    14
    14
    
  </body>

  

    15
    15
    
</html>

  

  

  









4.2
    (Reformat)



It's worth making sure your code is readable, and part of that is not
having lines which are too long.  There isn't a hard and fast rule for
what counts as 'too long', so choose something which works for your
development set-up.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    10
    10
    

  

    11
    11
    
    <canvas id="game" width="480" height="480"></canvas>

  

    12
    12
    

  

    13
    
    
    <p id="hatch-instructions">Click here to make it hatch: <button id="hatch">Hatch</button></p>

  

    
    13
    
    <p id="hatch-instructions">Click here to make it hatch:

  

    
    14
    
      <button id="hatch">Hatch</button></p>

  

    14
    15
    
  </body>

  

    15
    16
    
</html>

  

  

  









4.3
    fade_out_hatch_instructions(): Add



A new function saying how to make the 'instructions' paragraph fade out.
The fadeOut() function is part of the jQuery library we're using and
takes care of the animation, timing, etc.  Again, nothing happens yet
because all we've done is say what fade_out_hatch_instructions means.
So far, we haven't told it to do those instructions.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    23
    23
    
    }

  

    24
    24
    

  

    25
    25
    
    $('#hatch').click(draw_alien);

  

    
    26
    

  

    
    27
    
    function fade_out_hatch_instructions()

  

    
    28
    
    {

  

    
    29
    
        $('#hatch-instructions').fadeOut();

  

    
    30
    
    }

  

    26
    31
    
});

  

  

  









4.4
    drawalienfade_instructions(): Add



We are defining a lot of functions, but it makes your code easier to
read.  It might seem that the only thing that matters is that your
program works, but it's also very important that somebody reading your
code can understand it.  Often this is you, a month later.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    28
    28
    
    {

  

    29
    29
    
        $('#hatch-instructions').fadeOut();

  

    30
    30
    
    }

  

    
    31
    

  

    
    32
    
    function draw_alien_fade_instructions()

  

    
    33
    
    {

  

    
    34
    
        draw_alien();

  

    
    35
    
        fade_out_hatch_instructions();

  

    
    36
    
    }

  

    31
    37
    
});

  

  

  









4.5
    On 'Hatch', fade instructions too



When the button is clicked, we want the new set of instructions to be
done.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    22
    22
    
        ctx.fill();

  

    23
    23
    
    }

  

    24
    24
    

  

    25
    
    
    $('#hatch').click(draw_alien);

  

    
    25
    
    $('#hatch').click(draw_alien_fade_instructions);

  

    26
    26
    

  

    27
    27
    
    function fade_out_hatch_instructions()

  

    28
    28
    
    {

  

  

  















  
<

  
>



5
    Define function to draw a circle



Take a step back and notice that we're drawing circles three times, and
repeating the same slightly fiddly set of instructions each time.  When
you notice this, it's a good idea to collect those instructions together
and give them a name, i.e., define a new function.  We've done this
before, but this function has something new compared to the ones we've
defined before — it's not enough to just say 'draw a circle', you
need to know where and how big. The function has extra information it
needs before it can do its job.  The 'caller' has to supply those extra
pieces of information.



That's why our previous functions have () — there's nothing
between the () because there is no extra information required.



Once we have this handy way of saying 'draw a circle here and make it
this big', we use it to make the rest of our code easier to read.



Note that having made these changes, the app behaves the same, but it is
easier to read and understand.  This is known as code refactoring.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    3
    3
    
    var canvas = document.getElementById('game');

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    5
    5
    

  

    
    6
    
    function draw_circle(x, y, r)

  

    
    7
    
    {

  

    
    8
    
        ctx.beginPath();

  

    
    9
    
        ctx.arc(x, y, r, 0.0, 2.0 * Math.PI, false);

  

    
    10
    
        ctx.fill();

  

    
    11
    
    }

  

    
    12
    

  

    6
    13
    
    ctx.fillStyle = 'green';

  

    7
    
    
    ctx.beginPath();

  

    8
    
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

    9
    
    
    ctx.fill();

  

    
    14
    
    draw_circle(240, 240, 180);

  

    10
    15
    

  

    11
    16
    
    function draw_alien()

  

    12
    17
    
    {

  

    13
    18
    
        ctx.clearRect(0, 0, 480, 480);

  

    14
    19
    
        ctx.fillStyle = 'blue';

  

    15
    20
    

  

    16
    
    
        ctx.beginPath();

  

    17
    
    
        ctx.arc(240, 110, 80, 0.0, 2.0 * Math.PI, false);

  

    18
    
    
        ctx.fill();

  

    19
    
    

  

    20
    
    
        ctx.beginPath();

  

    21
    
    
        ctx.arc(240, 300, 150, 0.0, 2.0 * Math.PI, false);

  

    22
    
    
        ctx.fill();

  

    
    21
    
        draw_circle(240, 110, 80);

  

    
    22
    
        draw_circle(240, 300, 150);

  

    23
    23
    
    }

  

    24
    24
    

  

    25
    25
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  









5.1
    draw_circle(): Add



This function takes three arguments, two to say where the circle should
be, and one to say how big it should be.  So far we aren't using the
function, though, only defining it.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    3
    3
    
    var canvas = document.getElementById('game');

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    5
    5
    

  

    
    6
    
    function draw_circle(x, y, r)

  

    
    7
    
    {

  

    
    8
    
        ctx.beginPath();

  

    
    9
    
        ctx.arc(x, y, r, 0.0, 2.0 * Math.PI, false);

  

    
    10
    
        ctx.fill();

  

    
    11
    
    }

  

    
    12
    

  

    6
    13
    
    ctx.fillStyle = 'green';

  

    7
    14
    
    ctx.beginPath();

  

    8
    15
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

  

  









5.2
    Use draw_circle() to draw the egg



To a human reader, this code now makes it clearer what we're doing.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    11
    11
    
    }

  

    12
    12
    

  

    13
    13
    
    ctx.fillStyle = 'green';

  

    14
    
    
    ctx.beginPath();

  

    15
    
    
    ctx.arc(240, 240, 180, 0.0, 2.0 * Math.PI, false);

  

    16
    
    
    ctx.fill();

  

    
    14
    
    draw_circle(240, 240, 180);

  

    17
    15
    

  

    18
    16
    
    function draw_alien()

  

    19
    17
    
    {

  

  

  









5.3
    Use draw_circle() to draw the hatched Tamagotchi



The gain is bigger when we're drawing the actual alien; it's much
clearer for a human reader to see that it's made up of two circles.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    18
    18
    
        ctx.clearRect(0, 0, 480, 480);

  

    19
    19
    
        ctx.fillStyle = 'blue';

  

    20
    20
    

  

    21
    
    
        ctx.beginPath();

  

    22
    
    
        ctx.arc(240, 110, 80, 0.0, 2.0 * Math.PI, false);

  

    23
    
    
        ctx.fill();

  

    24
    
    

  

    25
    
    
        ctx.beginPath();

  

    26
    
    
        ctx.arc(240, 300, 150, 0.0, 2.0 * Math.PI, false);

  

    27
    
    
        ctx.fill();

  

    
    21
    
        draw_circle(240, 110, 80);

  

    
    22
    
        draw_circle(240, 300, 150);

  

    28
    23
    
    }

  

    29
    24
    

  

    30
    25
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  















  
<

  
>



6
    Show how happy, healthy, hungry Tamagotchi is



We can now start adding the features which will make a playable game.
The player will need to make sure the Tamagotchi stays healthy, happy,
and not too hungry.  The first step is to give the player some displays
which show the current state of the Tamagotchi.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    26
    26
    

  

    27
    27
    
    function fade_out_hatch_instructions()

  

    28
    28
    
    {

  

    29
    
    
        $('#hatch-instructions').fadeOut();

  

    
    29
    
        $('#hatch-instructions').fadeOut(400, fade_in_levels_display);

  

    
    30
    
    }

  

    
    31
    

  

    
    32
    
    function fade_in_levels_display()

  

    
    33
    
    {

  

    
    34
    
        $('#levels').fadeIn();

  

    30
    35
    
    }

  

    31
    36
    

  

    32
    37
    
    function draw_alien_fade_instructions()

  

  

  
  

  
  
page.html

  
  
  

  

    12
    12
    

  

    13
    13
    
    <p id="hatch-instructions">Click here to make it hatch:

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    
    15
    

  

    
    16
    
    <div id="levels">

  

    
    17
    
      <p>Health: 100</p>

  

    
    18
    
      <p>Happiness: 100</p>

  

    
    19
    
      <p>Hungriness: 0</p>

  

    
    20
    
    </div>

  

    15
    21
    
  </body>

  

    16
    22
    
</html>

  

  

  
  

  
  
style.css

  
  
  

  

    1
    1
    
body { background-color: #eee; margin: 24px; }

  

    2
    2
    
h1 { color: red; }

  

    3
    3
    
#game { background-color: #ffd; }

  

    
    4
    
#levels { display: none }

  

  

  









6.1
    Add health, happiness, hungriness level displays



Add three <p> elements to the html, to show the Tamagotchi's current
levels of health, happiness, and hungriness.  It starts off fully
healthy and happy, and not at all hungry.



This isn't quite right, because these displays are always visible, even
at the very start when only the egg is on the screen.  The displays
should only appear when the Tamagotchi has hatched; we'll fix that next.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    12
    12
    

  

    13
    13
    
    <p id="hatch-instructions">Click here to make it hatch:

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    
    15
    

  

    
    16
    
    <p>Health: 100</p>

  

    
    17
    
    <p>Happiness: 100</p>

  

    
    18
    
    <p>Hungriness: 0</p>

  

    15
    19
    
  </body>

  

    16
    20
    
</html>

  

  

  









6.2
    Collect the levels displays into one 'div'



To be able to talk about the displays all as one collection, we group
them into a <div> with an id.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    13
    13
    
    <p id="hatch-instructions">Click here to make it hatch:

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    15
    15
    

  

    16
    
    
    <p>Health: 100</p>

  

    17
    
    
    <p>Happiness: 100</p>

  

    18
    
    
    <p>Hungriness: 0</p>

  

    
    16
    
    <div id="levels">

  

    
    17
    
      <p>Health: 100</p>

  

    
    18
    
      <p>Happiness: 100</p>

  

    
    19
    
      <p>Hungriness: 0</p>

  

    
    20
    
    </div>

  

    19
    21
    
  </body>

  

    20
    22
    
</html>

  

  

  









6.3
    Hide the levels displays on start-up



We've been using CSS to control the appearance of various parts of our
web-app.  One way it allows us to do this it to say that some parts
shouldn't appear at all, by saying display: none.  Then, within the
program, we can make them appear at the right time.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    1
    1
    
body { background-color: #eee; margin: 24px; }

  

    2
    2
    
h1 { color: red; }

  

    3
    3
    
#game { background-color: #ffd; }

  

    
    4
    
#levels { display: none }

  

  

  









6.4
    fade_in_levels_display(): Add



In a very similar way to how we defined a function to fade out the hatch
instructions, we can define a function to fade in the displays of
health, etc.  We refer to the group of displays by the id of the
<div>, which is 'levels'.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    29
    29
    
        $('#hatch-instructions').fadeOut();

  

    30
    30
    
    }

  

    31
    31
    

  

    
    32
    
    function fade_in_levels_display()

  

    
    33
    
    {

  

    
    34
    
        $('#levels').fadeIn();

  

    
    35
    
    }

  

    
    36
    

  

    32
    37
    
    function draw_alien_fade_instructions()

  

    33
    38
    
    {

  

    34
    39
    
        draw_alien();

  

  

  









6.5
    Fade in levels display after 'hatch' faded out



The fadeOut function from jQuery can optionally take more
arguments (extra pieces of information).  The first is how long to make
the animation last, and the second is what to do when the animation has
finished.  Here we add arguments to make the animation last 400ms, and
afterwards, call our new fade_in_levels_display function.



Note that we do not put () after fade_in_levels_display.  We want to
tell fadeOut what to do next, not follow the
fade_in_levels_display instructions right away.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    26
    26
    

  

    27
    27
    
    function fade_out_hatch_instructions()

  

    28
    28
    
    {

  

    29
    
    
        $('#hatch-instructions').fadeOut();

  

    
    29
    
        $('#hatch-instructions').fadeOut(400, fade_in_levels_display);

  

    30
    30
    
    }

  

    31
    31
    

  

    32
    32
    
    function fade_in_levels_display()

  

  

  















  
<

  
>



7
    Make Tamagotchi get hungrier (basic idea)



To make a start on the game mechanics, we'll set up the basic idea of
keeping track of the Tamagotchi's changing levels of hunger.  We add a
variable in the JavaScript, to keep track of how hungry it is, and write
a function to update both it and the display.  Temporarily, to make sure
everything is working, we make the Tamagotchi get 5 steps hungrier after
two seconds.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    3
    3
    
    var canvas = document.getElementById('game');

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    5
    5
    

  

    
    6
    
    var hungriness = 0;

  

    
    7
    

  

    
    8
    
    function make_alien_hungrier()

  

    
    9
    
    {

  

    
    10
    
        hungriness += 5;

  

    
    11
    
        $('#hungriness').html(hungriness);

  

    
    12
    
    }

  

    
    13
    

  

    6
    14
    
    function draw_circle(x, y, r)

  

    7
    15
    
    {

  

    8
    16
    
        ctx.beginPath();

  

  
⋮

  

  

    20
    28
    

  

    21
    29
    
        draw_circle(240, 110, 80);

  

    22
    30
    
        draw_circle(240, 300, 150);

  

    
    31
    

  

    
    32
    
        window.setTimeout(make_alien_hungrier, 2000);

  

    23
    33
    
    }

  

    24
    34
    

  

    25
    35
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  
  

  
  
page.html

  
  
  

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    15
    15
    

  

    16
    16
    
    <div id="levels">

  

    17
    
    
      <p>Health: 100</p>

  

    18
    
    
      <p>Happiness: 100</p>

  

    19
    
    
      <p>Hungriness: 0</p>

  

    
    17
    
      <p>Health: <span id="health">100</span></p>

  

    
    18
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    
    19
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    20
    20
    
    </div>

  

    21
    21
    
  </body>

  

    22
    22
    
</html>

  

  

  









7.1
    Add 'id's to individual level displays



To be able to update the displays, we need to be able to refer to the
number part of each one.  For this we use an HTML <span> element.
This is a bit like a <div> except it doesn't cause a break in the
paragraph.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    15
    15
    

  

    16
    16
    
    <div id="levels">

  

    17
    
    
      <p>Health: 100</p>

  

    18
    
    
      <p>Happiness: 100</p>

  

    19
    
    
      <p>Hungriness: 0</p>

  

    
    17
    
      <p>Health: <span id="health">100</span></p>

  

    
    18
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    
    19
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    20
    20
    
    </div>

  

    21
    21
    
  </body>

  

    22
    22
    
</html>

  

  

  









7.2
    Define variable 'hungriness'



To keep track of the Tamagotchi's hunger levels within the program, we
need a variable.  When it first hatches, it starts off not at all
hungry, so the initial value is zero.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    3
    3
    
    var canvas = document.getElementById('game');

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    5
    5
    

  

    
    6
    
    var hungriness = 0;

  

    
    7
    

  

    6
    8
    
    function draw_circle(x, y, r)

  

    7
    9
    
    {

  

    8
    10
    
        ctx.beginPath();

  

  

  









7.3
    make_alien_hungrier(): Add



As time goes by in the game, the Tamagotchi will get hungrier.
We'll create a function which does one this.  There are two things which
we need to do:



    

  • Update the program's idea of how hungry it is — this means
increasing the hungriness variable.
    • 

  • Update the web page to show the player the new value — this
means putting the new number in as the HTML of the <span> called
hungriness.
    • 







  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    

  

    
    8
    
    function make_alien_hungrier()

  

    
    9
    
    {

  

    
    10
    
        hungriness += 5;

  

    
    11
    
        $('#hungriness').html(hungriness);

  

    
    12
    
    }

  

    
    13
    

  

    8
    14
    
    function draw_circle(x, y, r)

  

    9
    15
    
    {

  

    10
    16
    
        ctx.beginPath();

  

  

  









7.4
    Temp: Make alien hungrier 2" after hatching



Just to check that this is all working, we'll set up a timer to make the
Tamagotchi get hungrier two seconds after it hatches.  We'll get rid of
this once we're happy it's all working correctly.  At this point, if you
hatch the Tamagotchi, you should then see the hungriness go up from 0 to
5 after two seconds.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    28
    28
    

  

    29
    29
    
        draw_circle(240, 110, 80);

  

    30
    30
    
        draw_circle(240, 300, 150);

  

    
    31
    

  

    
    32
    
        window.setTimeout(make_alien_hungrier, 2000);

  

    31
    33
    
    }

  

    32
    34
    

  

    33
    35
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  















  
<

  
>



8
    Make Tamagotchi get hungrier (properly)



Now we know the basic idea works, we'll do this properly.  The
Tamagotchi will get hungrier every two seconds, until its hungriness
reaches 100.  At that point, the player has lost the game, and we
display a suitable message.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    

  

    8
    
    
    function make_alien_hungrier()

  

    
    8
    
    function alien_is_alive()

  

    9
    9
    
    {

  

    10
    
    
        hungriness += 5;

  

    11
    
    
        $('#hungriness').html(hungriness);

  

    
    10
    
        return (hungriness < 100);

  

    12
    11
    
    }

  

    13
    12
    

  

    14
    13
    
    function draw_circle(x, y, r)

  

  
⋮

  

  

    28
    27
    

  

    29
    28
    
        draw_circle(240, 110, 80);

  

    30
    29
    
        draw_circle(240, 300, 150);

  

    31
    
    

  

    32
    
    
        window.setTimeout(make_alien_hungrier, 2000);

  

    33
    30
    
    }

  

    34
    31
    

  

    35
    32
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  
⋮

  

  

    48
    45
    
    {

  

    49
    46
    
        draw_alien();

  

    50
    47
    
        fade_out_hatch_instructions();

  

    
    48
    
        window.setTimeout(time_goes_by, 2000);

  

    
    49
    
    }

  

    
    50
    

  

    
    51
    
    function make_alien_hungrier()

  

    
    52
    
    {

  

    
    53
    
        hungriness += 5;

  

    
    54
    
        $('#hungriness').html(hungriness);

  

    
    55
    
    }

  

    
    56
    

  

    
    57
    
    function time_goes_by()

  

    
    58
    
    {

  

    
    59
    
        make_alien_hungrier();

  

    
    60
    

  

    
    61
    
        if (alien_is_alive())

  

    
    62
    
        {

  

    
    63
    
            window.setTimeout(time_goes_by, 2000);

  

    
    64
    
        }

  

    
    65
    
        else

  

    
    66
    
        {

  

    
    67
    
            $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    
    68
    
        }

  

    51
    69
    
    }

  

    52
    70
    
});

  

  

  
  

  
  
page.html

  
  
  

  

    18
    18
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    19
    19
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    20
    20
    
    </div>

  

    
    21
    

  

    
    22
    
    <p id="messages"></p>

  

    21
    23
    
  </body>

  

    22
    24
    
</html>

  

  

  









8.1
    Remove temporary hungriness increase



Now we know the idea works, we will work on making the Tamagotchi get
continually hungrier as time goes on.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    28
    28
    

  

    29
    29
    
        draw_circle(240, 110, 80);

  

    30
    30
    
        draw_circle(240, 300, 150);

  

    31
    
    

  

    32
    
    
        window.setTimeout(make_alien_hungrier, 2000);

  

    33
    31
    
    }

  

    34
    32
    

  

    35
    33
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  









8.2
    make_alien_hungrier(): Move definition lower



We can see we'll need functions dealing with the Tamagotchi's health and
happiness too.  It makes more sense to put functions dealing with the
Tamagotchi's state of being together.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    

  

    8
    
    
    function make_alien_hungrier()

  

    9
    
    
    {

  

    10
    
    
        hungriness += 5;

  

    11
    
    
        $('#hungriness').html(hungriness);

  

    12
    
    
    }

  

    13
    
    

  

    14
    8
    
    function draw_circle(x, y, r)

  

    15
    9
    
    {

  

    16
    10
    
        ctx.beginPath();

  

  
⋮

  

  

    47
    41
    
        draw_alien();

  

    48
    42
    
        fade_out_hatch_instructions();

  

    49
    43
    
    }

  

    
    44
    

  

    
    45
    
    function make_alien_hungrier()

  

    
    46
    
    {

  

    
    47
    
        hungriness += 5;

  

    
    48
    
        $('#hungriness').html(hungriness);

  

    
    49
    
    }

  

    50
    50
    
});

  

  

  









8.3
    time_goes_by(): Add



For now, the only thing that will happen as time goes by is that the
Tamagotchi gets hungrier.  As we develop the game further, it might also
catch a disease (lose health), or become sad (if not played with
enough).



But for now, nothing actually happens, because we haven't said that we
want time_goes_by() to take place; we've only defined it.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    47
    47
    
        hungriness += 5;

  

    48
    48
    
        $('#hungriness').html(hungriness);

  

    49
    49
    
    }

  

    
    50
    

  

    
    51
    
    function time_goes_by()

  

    
    52
    
    {

  

    
    53
    
        make_alien_hungrier();

  

    
    54
    
    }

  

    50
    55
    
});

  

  

  









8.4
    Make Tamagotchi hungrier 2" after hatching



This is a more natural place to set up this timer.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    40
    40
    
    {

  

    41
    41
    
        draw_alien();

  

    42
    42
    
        fade_out_hatch_instructions();

  

    
    43
    
        window.setTimeout(time_goes_by, 2000);

  

    43
    44
    
    }

  

    44
    45
    

  

    45
    46
    
    function make_alien_hungrier()

  

  

  









8.5
    Make time keep going by



The setTimeout function sets up a once-off timer.  We want game time
to keep ticking, so we request a new timer each time.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    52
    52
    
    function time_goes_by()

  

    53
    53
    
    {

  

    54
    54
    
        make_alien_hungrier();

  

    
    55
    

  

    
    56
    
        window.setTimeout(time_goes_by, 2000);

  

    55
    57
    
    }

  

    56
    58
    
});

  

  

  









8.6
    alien_is_alive(): Add



We need to know if the Tamagotchi has got so hungry that it dies of
starvation.  To check this, we define a new function.  This function is
different to the ones we've writtem so far, because it gives back a
piece of information to the caller.  This is known as 'returning' the
information.  Here, the information is whether the Tamagotchi is still
alive, and JavaScript has the idea of a Boolean value for this —
a value which is either true or false.  In our case, whether the
Tamagotchi is alive is worked out by asking 'is its hungriness less than
100?'.



Nothing uses this function yet, though.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    

  

    
    8
    
    function alien_is_alive()

  

    
    9
    
    {

  

    
    10
    
        return (hungriness < 100);

  

    
    11
    
    }

  

    
    12
    

  

    8
    13
    
    function draw_circle(x, y, r)

  

    9
    14
    
    {

  

    10
    15
    
        ctx.beginPath();

  

  

  









8.7
    If the alien is not alive, stop time



To make the game stop once the Tamagotchi has become too hungry, we only
set up another timer if it's still alive.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    58
    58
    
    {

  

    59
    59
    
        make_alien_hungrier();

  

    60
    60
    

  

    61
    
    
        window.setTimeout(time_goes_by, 2000);

  

    
    61
    
        if (alien_is_alive())

  

    
    62
    
        {

  

    
    63
    
            window.setTimeout(time_goes_by, 2000);

  

    
    64
    
        }

  

    62
    65
    
    }

  

    63
    66
    
});

  

  

  









8.8
    Add 'messages' paragraph to HTML



At the start of the game, this <p> is empty.  We will use it to show
messages from the JavaScript code.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    18
    18
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    19
    19
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    20
    20
    
    </div>

  

    
    21
    

  

    
    22
    
    <p id="messages"></p>

  

    21
    23
    
  </body>

  

    22
    24
    
</html>

  

  

  









8.9
    Show sad message if Tamagotchi dies



We currently check whether the Tamagotchi is still alive, and keep the
game going if so.  Now we add some code to give the behaviour if the
Tamagotchi is not still alive — we show a sad message using our
messages paragraph.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    62
    62
    
        {

  

    63
    63
    
            window.setTimeout(time_goes_by, 2000);

  

    64
    64
    
        }

  

    
    65
    
        else

  

    
    66
    
        {

  

    
    67
    
            $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    
    68
    
        }

  

    65
    69
    
    }

  

    66
    70
    
});

  

  

  















  
<

  
>



9
    Give player a way to feed the Tamagotchi



So far the game is not very fair, because all that happens is the
Tamagotchi gets hungrier and hungrier until it dies.  We'll add a button
the player can click to feed it some bread, which reduces its hungriness
levels.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    33
    33
    

  

    34
    34
    
    function fade_out_hatch_instructions()

  

    35
    35
    
    {

  

    36
    
    
        $('#hatch-instructions').fadeOut(400, fade_in_levels_display);

  

    
    36
    
        $('#hatch-instructions').fadeOut(400, fade_in_playing_sections);

  

    37
    37
    
    }

  

    38
    38
    

  

    39
    
    
    function fade_in_levels_display()

  

    
    39
    
    function fade_in_playing_sections()

  

    40
    40
    
    {

  

    41
    41
    
        $('#levels').fadeIn();

  

    
    42
    
        $('#action-buttons').fadeIn();

  

    42
    43
    
    }

  

    43
    44
    

  

    44
    45
    
    function draw_alien_fade_instructions()

  

  
⋮

  

  

    54
    55
    
        $('#hungriness').html(hungriness);

  

    55
    56
    
    }

  

    56
    57
    

  

    
    58
    
    function feed_alien_some_bread()

  

    
    59
    
    {

  

    
    60
    
        hungriness -= 20;

  

    
    61
    
        if (hungriness < 0)

  

    
    62
    
        {

  

    
    63
    
            hungriness = 0;

  

    
    64
    
        }

  

    
    65
    

  

    
    66
    
        $('#hungriness').html(hungriness);

  

    
    67
    
    }

  

    
    68
    

  

    
    69
    
    $('#feed-bread').click(feed_alien_some_bread);

  

    
    70
    

  

    57
    71
    
    function time_goes_by()

  

    58
    72
    
    {

  

    59
    73
    
        make_alien_hungrier();

  

  

  
  

  
  
page.html

  
  
  

  

    19
    19
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    20
    20
    
    </div>

  

    21
    21
    

  

    
    22
    
    <p id="action-buttons">

  

    
    23
    
      <button id="feed-bread">Bread</button>

  

    
    24
    
    </p>

  

    
    25
    

  

    22
    26
    
    <p id="messages"></p>

  

    23
    27
    
  </body>

  

    24
    28
    
</html>

  

  

  
  

  
  
style.css

  
  
  

  

    2
    2
    
h1 { color: red; }

  

    3
    3
    
#game { background-color: #ffd; }

  

    4
    4
    
#levels { display: none }

  

    
    5
    
#action-buttons { display: none;

  

    
    6
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    
    7
    
#action-buttons button { margin: 24px; }

  

  

  









9.1
    Add button to give bread to Tamagotchi



We'll add a way for the player to feed the Tamagotchi.  Looking ahead a
bit, we'll need to add more than one button, so we'll add a <p> to
hold them all, and add it below the levels displays



Then, we'll use the HTML <button> element to create the actual button.



This doesn't look right yet, because it should be hidden at the start of
the game.  We'll fix that next.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    19
    19
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    20
    20
    
    </div>

  

    21
    21
    

  

    
    22
    
    <p id="action-buttons">

  

    
    23
    
      <button id="feed-bread">Bread</button>

  

    
    24
    
    </p>

  

    
    25
    

  

    22
    26
    
    <p id="messages"></p>

  

    23
    27
    
  </body>

  

    24
    28
    
</html>

  

  

  









9.2
    Hide action-buttons bar at start-up



Using the same idea as for the levels display, we don't want to display
the action buttons at the start of the game.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    2
    2
    
h1 { color: red; }

  

    3
    3
    
#game { background-color: #ffd; }

  

    4
    4
    
#levels { display: none }

  

    
    5
    
#action-buttons { display: none; }

  

  

  









9.3
    Fade in action buttons with levels display



We add a second call to fadeIn, for the action-buttons element.  The
two fade-in animations happen at the same time, which is
appropriate.  (If we wanted one to fade in and then the other, we'd add
extra arguments to the first fadeIn call, like we did to make the
displays fade in after the hatch instructions had finished fading out.)






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    39
    39
    
    function fade_in_levels_display()

  

    40
    40
    
    {

  

    41
    41
    
        $('#levels').fadeIn();

  

    
    42
    
        $('#action-buttons').fadeIn();

  

    42
    43
    
    }

  

    43
    44
    

  

    44
    45
    
    function draw_alien_fade_instructions()

  

  

  









9.4
    Rename fade_in_levels_display()



Another small piece of refactoring: Rename this function to
fade_in_playing_sections().  This is a better summary of what it does,
and makes the code easier to read and understand.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    33
    33
    

  

    34
    34
    
    function fade_out_hatch_instructions()

  

    35
    35
    
    {

  

    36
    
    
        $('#hatch-instructions').fadeOut(400, fade_in_levels_display);

  

    
    36
    
        $('#hatch-instructions').fadeOut(400, fade_in_playing_sections);

  

    37
    37
    
    }

  

    38
    38
    

  

    39
    
    
    function fade_in_levels_display()

  

    
    39
    
    function fade_in_playing_sections()

  

    40
    40
    
    {

  

    41
    41
    
        $('#levels').fadeIn();

  

    42
    42
    
        $('#action-buttons').fadeIn();

  

  

  









9.5
    Style the action-buttons bar



The default appearance of the button is a bit drab, so add a small bit
of styling to fix this.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    2
    2
    
h1 { color: red; }

  

    3
    3
    
#game { background-color: #ffd; }

  

    4
    4
    
#levels { display: none }

  

    5
    
    
#action-buttons { display: none; }

  

    
    5
    
#action-buttons { display: none;

  

    
    6
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

  

  









9.6
    Add some room round the actual action button



The strip of action buttons would look better with some room at the top
and bottom of the actual button.  Add this with a margin.  The CSS
specifier means 'any button within the action-buttons element', to
make sure we don't accidentally affect other buttons.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    4
    4
    
#levels { display: none }

  

    5
    5
    
#action-buttons { display: none;

  

    6
    6
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    
    7
    
#action-buttons button { margin: 24px; }

  

  

  









9.7
    feed_alien_some_bread(): Add



When the player feeds the Tamagotchi some bread, the hungriness should
go down.  Shortly we will connect this function to the 'Bread' button.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    55
    55
    
        $('#hungriness').html(hungriness);

  

    56
    56
    
    }

  

    57
    57
    

  

    
    58
    
    function feed_alien_some_bread()

  

    
    59
    
    {

  

    
    60
    
        hungriness -= 20;

  

    
    61
    
        $('#hungriness').html(hungriness);

  

    
    62
    
    }

  

    
    63
    

  

    58
    64
    
    function time_goes_by()

  

    59
    65
    
    {

  

    60
    66
    
        make_alien_hungrier();

  

  

  









9.8
    Trigger feed_alien_some_bread() on button click



Connect the 'bread' button (identified by its id) to the new function
we just wrote.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    61
    61
    
        $('#hungriness').html(hungriness);

  

    62
    62
    
    }

  

    63
    63
    

  

    
    64
    
    $('#feed-bread').click(feed_alien_some_bread);

  

    
    65
    

  

    64
    66
    
    function time_goes_by()

  

    65
    67
    
    {

  

    66
    68
    
        make_alien_hungrier();

  

  

  









9.9
    Make sure hungriness doesn't become negative



There's a bug!  You can make the Tamagotchi very UN-hungry by repeatedly
feeding it bread.  The hungriness can become very negative, which
doesn't make sense.  We'll fix this now.



After reducing the hungriness, we check whether we've reduced it so far
that it's become less than zero.  If so, change it to be zero.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    58
    58
    
    function feed_alien_some_bread()

  

    59
    59
    
    {

  

    60
    60
    
        hungriness -= 20;

  

    
    61
    
        if (hungriness < 0)

  

    
    62
    
        {

  

    
    63
    
            hungriness = 0;

  

    
    64
    
        }

  

    
    65
    

  

    61
    66
    
        $('#hungriness').html(hungriness);

  

    62
    67
    
    }

  

    63
    68
    

  

  

  















  
<

  
>



10
    Allow choice of feeding bread or sweets



So far the player can only feed bread to the Tamagotchi.  We will give
the player the choice of feeding sweets instead, by adding another
button and writing a new function.  We can then notice that the
bread-feeding function and the sweets-feeding function are very similar,
so we can refactor by writing a general function to feed either food.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    55
    55
    
        $('#hungriness').html(hungriness);

  

    56
    56
    
    }

  

    57
    57
    

  

    58
    
    
    function feed_alien_some_bread()

  

    
    58
    
    function feed_alien(hungriness_reduction)

  

    59
    59
    
    {

  

    60
    
    
        hungriness -= 20;

  

    
    60
    
        hungriness -= hungriness_reduction;

  

    61
    61
    
        if (hungriness < 0)

  

    62
    62
    
        {

  

    63
    63
    
            hungriness = 0;

  

  
⋮

  

  

    66
    66
    
        $('#hungriness').html(hungriness);

  

    67
    67
    
    }

  

    68
    68
    

  

    
    69
    
    function feed_alien_some_bread()

  

    
    70
    
    {

  

    
    71
    
        feed_alien(20);

  

    
    72
    
    }

  

    
    73
    

  

    69
    74
    
    $('#feed-bread').click(feed_alien_some_bread);

  

    70
    75
    

  

    
    76
    
    function feed_alien_sweets()

  

    
    77
    
    {

  

    
    78
    
        feed_alien(10);

  

    
    79
    
    }

  

    
    80
    

  

    
    81
    
    $('#feed-sweets').click(feed_alien_sweets);

  

    
    82
    

  

    71
    83
    
    function time_goes_by()

  

    72
    84
    
    {

  

    73
    85
    
        make_alien_hungrier();

  

  

  
  

  
  
page.html

  
  
  

  

    21
    21
    

  

    22
    22
    
    <p id="action-buttons">

  

    23
    23
    
      <button id="feed-bread">Bread</button>

  

    
    24
    
      <button id="feed-sweets">Sweets</button>

  

    24
    25
    
    </p>

  

    25
    26
    

  

    26
    27
    
    <p id="messages"></p>

  

  

  









10.1
    Add button to give Tamagotchi sweets



Within our paragraph of 'action buttons', add a 'Sweets' button with
its own id.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    21
    21
    

  

    22
    22
    
    <p id="action-buttons">

  

    23
    23
    
      <button id="feed-bread">Bread</button>

  

    
    24
    
      <button id="feed-sweets">Sweets</button>

  

    24
    25
    
    </p>

  

    25
    26
    

  

    26
    27
    
    <p id="messages"></p>

  

  

  









10.2
    feed_alien_sweets(): Add



We can copy-and-paste the code from the feed_alien_some_bread()
function to describe what to do to feed the Tamagotchi sweets.  The only
difference is that sweets only reduce the hungriness by 10, not 20.



This is untidy, though, and makes our code more difficult to maintain
and change, so we will fix this near-repetition shortly.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    68
    68
    

  

    69
    69
    
    $('#feed-bread').click(feed_alien_some_bread);

  

    70
    70
    

  

    
    71
    
    function feed_alien_sweets()

  

    
    72
    
    {

  

    
    73
    
        hungriness -= 10;

  

    
    74
    
        if (hungriness < 0)

  

    
    75
    
        {

  

    
    76
    
            hungriness = 0;

  

    
    77
    
        }

  

    
    78
    

  

    
    79
    
        $('#hungriness').html(hungriness);

  

    
    80
    
    }

  

    71
    81
    
    function time_goes_by()

  

    72
    82
    
    {

  

    73
    83
    
        make_alien_hungrier();

  

  

  









10.3
    Connect 'sweets' button to feedaliensweets()



This is familiar by now — declare that we want the
feed_alien_sweets function to be run when the 'Sweets' button is
clicked.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    78
    78
    

  

    79
    79
    
        $('#hungriness').html(hungriness);

  

    80
    80
    
    }

  

    
    81
    

  

    
    82
    
    $('#feed-sweets').click(feed_alien_sweets);

  

    
    83
    

  

    81
    84
    
    function time_goes_by()

  

    82
    85
    
    {

  

    83
    86
    
        make_alien_hungrier();

  

  

  









10.4
    feed_alien(): Add



We can extract the common behaviour between the very similar functions



    

  • feed_alien_some_bread()
    • 

  • feed_alien_sweets()
    • 




and at the same time notice that the only difference is the reduction in
hungriness that happens.  So we include an argument which will allow the
caller to provide this piece of information.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    55
    55
    
        $('#hungriness').html(hungriness);

  

    56
    56
    
    }

  

    57
    57
    

  

    
    58
    
    function feed_alien(hungriness_reduction)

  

    
    59
    
    {

  

    
    60
    
        hungriness -= hungriness_reduction;

  

    
    61
    
        if (hungriness < 0)

  

    
    62
    
        {

  

    
    63
    
            hungriness = 0;

  

    
    64
    
        }

  

    
    65
    

  

    
    66
    
        $('#hungriness').html(hungriness);

  

    
    67
    
    }

  

    
    68
    

  

    58
    69
    
    function feed_alien_some_bread()

  

    59
    70
    
    {

  

    60
    71
    
        hungriness -= 20;

  

  

  









10.5
    Simplify alien-feeding functions



We can now get rid of the near-duplicated code between the two feeding
functions, and instead just call our new feed_alien() function.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    68
    68
    

  

    69
    69
    
    function feed_alien_some_bread()

  

    70
    70
    
    {

  

    71
    
    
        hungriness -= 20;

  

    72
    
    
        if (hungriness < 0)

  

    73
    
    
        {

  

    74
    
    
            hungriness = 0;

  

    75
    
    
        }

  

    76
    
    

  

    77
    
    
        $('#hungriness').html(hungriness);

  

    
    71
    
        feed_alien(20);

  

    78
    72
    
    }

  

    79
    73
    

  

    80
    74
    
    $('#feed-bread').click(feed_alien_some_bread);

  

    81
    75
    

  

    82
    76
    
    function feed_alien_sweets()

  

    83
    77
    
    {

  

    84
    
    
        hungriness -= 10;

  

    85
    
    
        if (hungriness < 0)

  

    86
    
    
        {

  

    87
    
    
            hungriness = 0;

  

    88
    
    
        }

  

    89
    
    

  

    90
    
    
        $('#hungriness').html(hungriness);

  

    
    78
    
        feed_alien(10);

  

    91
    79
    
    }

  

    92
    80
    

  

    93
    81
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  















  
<

  
>



11
    Stop the player hammering the feeding buttons



At the moment, the player can just keep clicking the Bread
and Sweets buttons as quickly as they like, which makes the game too
easy.  We will make it so the feeding buttons are disabled for a short
while after being clicked.



Because we want this behaviour for both buttons, we'll write a function
for it, and then use it for both the buttons.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    66
    66
    
        $('#hungriness').html(hungriness);

  

    67
    67
    
    }

  

    68
    68
    

  

    
    69
    
    function temporarily_disable(button_id)

  

    
    70
    
    {

  

    
    71
    
        $(button_id).attr('disabled', true);

  

    
    72
    
        window.setTimeout(

  

    
    73
    
            function() { $(button_id).attr('disabled', false); },

  

    
    74
    
            3000);

  

    
    75
    
    }

  

    
    76
    

  

    69
    77
    
    function feed_alien_some_bread()

  

    70
    78
    
    {

  

    71
    79
    
        feed_alien(20);

  

    
    80
    
        temporarily_disable('#feed-bread');

  

    72
    81
    
    }

  

    73
    82
    

  

    74
    83
    
    $('#feed-bread').click(feed_alien_some_bread);

  

  
⋮

  

  

    76
    85
    
    function feed_alien_sweets()

  

    77
    86
    
    {

  

    78
    87
    
        feed_alien(10);

  

    
    88
    
        temporarily_disable('#feed-sweets');

  

    79
    89
    
    }

  

    80
    90
    

  

    81
    91
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  









11.1
    Disable 'bread' button after clicked



As part of what happens when the player clicks the 'Bread' button, we
disable that button.  This is done by setting the disabled attribute
to true.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    69
    69
    
    function feed_alien_some_bread()

  

    70
    70
    
    {

  

    71
    71
    
        feed_alien(20);

  

    
    72
    

  

    
    73
    
        // The player can't immediately give more bread

  

    
    74
    
        $('#feed-bread').attr('disabled', true);

  

    72
    75
    
    }

  

    73
    76
    

  

    74
    77
    
    $('#feed-bread').click(feed_alien_some_bread);

  

  

  









11.2
    enable_bread_button(): Add



Disabling the button is a good start, but we'll need to re-enable it
again after a delay.  Start by creating a function which turns off the
disabled attribute.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    55
    55
    
        $('#hungriness').html(hungriness);

  

    56
    56
    
    }

  

    57
    57
    

  

    
    58
    
    function enable_bread_button()

  

    
    59
    
    {

  

    
    60
    
        $('#feed-bread').attr('disabled', false);

  

    
    61
    
    }

  

    
    62
    

  

    58
    63
    
    function feed_alien(hungriness_reduction)

  

    59
    64
    
    {

  

    60
    65
    
        hungriness -= hungriness_reduction;

  

  

  









11.3
    Re-enable bread button after 3" delay



Immediately after disabling the button, set a timer so that our new
function is called after a 3-second delay.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    77
    77
    

  

    78
    78
    
        // The player can't immediately give more bread

  

    79
    79
    
        $('#feed-bread').attr('disabled', true);

  

    
    80
    
        //

  

    
    81
    
        // but after a few seconds have gone by, they can.

  

    
    82
    
        window.setTimeout(enable_bread_button, 3000);

  

    80
    83
    
    }

  

    81
    84
    

  

    82
    85
    
    $('#feed-bread').click(feed_alien_some_bread);

  

  

  









11.4
    temporarily_disable(): Add



We are going to want to apply the same 'disable then re-enable'
behaviour to the 'feed sweets' button, so make this into a function.
One wrinkle is that we can't (directly) define a general equivalent of
the enable_bread_button() function, so instead we'll use an anonymous
function in the setTimeout() call.



Our new function needs to know which button to work with, so this is the
argument — callers will pass something like '#feed-bread'.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    71
    71
    
        $('#hungriness').html(hungriness);

  

    72
    72
    
    }

  

    73
    73
    

  

    
    74
    
    function temporarily_disable(button_id)

  

    
    75
    
    {

  

    
    76
    
        $(button_id).attr('disabled', true);

  

    
    77
    
        window.setTimeout(

  

    
    78
    
            function() { $(button_id).attr('disabled', false); },

  

    
    79
    
            3000);

  

    
    80
    
    }

  

    
    81
    

  

    74
    82
    
    function feed_alien_some_bread()

  

    75
    83
    
    {

  

    76
    84
    
        feed_alien(20);

  

  

  









11.5
    Simplify feed_alien_some_bread()



We can now replace the disable/enable logic in feed_alien_some_bread()
with a call to our new temporarily_disable() function.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    82
    82
    
    function feed_alien_some_bread()

  

    83
    83
    
    {

  

    84
    84
    
        feed_alien(20);

  

    85
    
    

  

    86
    
    
        // The player can't immediately give more bread

  

    87
    
    
        $('#feed-bread').attr('disabled', true);

  

    88
    
    
        //

  

    89
    
    
        // but after a few seconds have gone by, they can.

  

    90
    
    
        window.setTimeout(enable_bread_button, 3000);

  

    
    85
    
        temporarily_disable('#feed-bread');

  

    91
    86
    
    }

  

    92
    87
    

  

    93
    88
    
    $('#feed-bread').click(feed_alien_some_bread);

  

  

  









11.6
    Remove now-unused enable_bread_button()



We are no longer using the enable_bread_button() function, so remove
it.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    55
    55
    
        $('#hungriness').html(hungriness);

  

    56
    56
    
    }

  

    57
    57
    

  

    58
    
    
    function enable_bread_button()

  

    59
    
    
    {

  

    60
    
    
        $('#feed-bread').attr('disabled', false);

  

    61
    
    
    }

  

    62
    
    

  

    63
    58
    
    function feed_alien(hungriness_reduction)

  

    64
    59
    
    {

  

    65
    60
    
        hungriness -= hungriness_reduction;

  

  

  









11.7
    Temporarily disable sweets button too



It's now easy to use our temporarily_disable() function to give the
behaviour we want to the Sweets button.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    85
    85
    
    function feed_alien_sweets()

  

    86
    86
    
    {

  

    87
    87
    
        feed_alien(10);

  

    
    88
    
        temporarily_disable('#feed-sweets');

  

    88
    89
    
    }

  

    89
    90
    

  

    90
    91
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  















  
<

  
>



12
    Sweets are not healthy



As we all know, it's bad for you to eat too many sweets.  We'll add code
to keep track of how healthy the Tamagotchi is, and make it so that
sweets reduce its health.



If the Tamagotchi becomes too unhealthy, it dies and you lose the game.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    
    7
    
    var health = 100;

  

    7
    8
    

  

    8
    9
    
    function alien_is_alive()

  

    9
    10
    
    {

  

    10
    
    
        return (hungriness < 100);

  

    
    11
    
        return (hungriness < 100) && (health > 0);

  

    11
    12
    
    }

  

    12
    13
    

  

    13
    14
    
    function draw_circle(x, y, r)

  

  
⋮

  

  

    86
    87
    
    {

  

    87
    88
    
        feed_alien(10);

  

    88
    89
    
        temporarily_disable('#feed-sweets');

  

    
    90
    

  

    
    91
    
        // Sweets are not healthy:

  

    
    92
    
        health -= 5;

  

    
    93
    
        $('#health').html(health);

  

    
    94
    

  

    
    95
    
        if ( ! alien_is_alive())

  

    
    96
    
        {

  

    
    97
    
            game_over_lost();

  

    
    98
    
        }

  

    89
    99
    
    }

  

    90
    100
    

  

    91
    101
    
    $('#feed-sweets').click(feed_alien_sweets);

  

    92
    102
    

  

    
    103
    
    function game_over_lost()

  

    
    104
    
    {

  

    
    105
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    
    106
    
    }

  

    
    107
    

  

    93
    108
    
    function time_goes_by()

  

    94
    109
    
    {

  

    95
    110
    
        make_alien_hungrier();

  

  
⋮

  

  

    100
    115
    
        }

  

    101
    116
    
        else

  

    102
    117
    
        {

  

    103
    
    
            $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    
    118
    
            game_over_lost();

  

    104
    119
    
        }

  

    105
    120
    
    }

  

    106
    121
    
});

  

  

  









12.1
    Add 'health' variable



We need a variable so that the JavaScript code can keep track of the
Tamagotchi's health.  We'll define this near the top, where 'hungriness'
is already defined.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    4
    4
    
    var ctx = canvas.getContext('2d');

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    
    7
    
    var health = 100;

  

    7
    8
    

  

    8
    9
    
    function alien_is_alive()

  

    9
    10
    
    {

  

  

  









12.2
    Make sweets reduce the Tamagotchi's health



As part of what happens when the player feeds the Tamagotchi some
sweets, we want to reduce its health.  In the same way as we handled the
hungriness, there are two parts:



    

  • Update the health variable.
    • 

  • Update the displays in the web page with the new value.
    • 




There is a TODO to remind us to do something: in this case, we want to
check whether the Tamagotchi is so unhealthy that it dies.  We'll fill
this in later.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    87
    87
    
    {

  

    88
    88
    
        feed_alien(10);

  

    89
    89
    
        temporarily_disable('#feed-sweets');

  

    
    90
    

  

    
    91
    
        // Sweets are not healthy:

  

    
    92
    
        health -= 5;

  

    
    93
    
        $('#health').html(health);

  

    
    94
    

  

    
    95
    
        // TODO: Make the alien die if all health gone.

  

    90
    96
    
    }

  

    91
    97
    

  

    92
    98
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  









12.3
    game_over_lost(): Add



There's already one way the player can lose the game: if the Tamagotchi
gets too hungry.  Shortly there's going to be another way: if the
Tamagotchi becomes too unhealthy.  We'll move the 'lose game' behaviour
into its own function, for re-use shortly.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    97
    97
    

  

    98
    98
    
    $('#feed-sweets').click(feed_alien_sweets);

  

    99
    99
    

  

    
    100
    
    function game_over_lost()

  

    
    101
    
    {

  

    
    102
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    
    103
    
    }

  

    
    104
    

  

    100
    105
    
    function time_goes_by()

  

    101
    106
    
    {

  

    102
    107
    
        make_alien_hungrier();

  

  

  









12.4
    Use new game_over_lost() function



In time_goes_by(), use the new function.  This is a refactoring, as no
behaviour is changed.  Instead we're making the code easier to work with
and understand.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    112
    112
    
        }

  

    113
    113
    
        else

  

    114
    114
    
        {

  

    115
    
    
            $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    
    115
    
            game_over_lost();

  

    116
    116
    
        }

  

    117
    117
    
    }

  

    118
    118
    
});

  

  

  









12.5
    Tamagotchi needs positive 'health' to be alive



The && means 'and' — the alien is alive if it's not too hungry
and it's healthy enough.  This sort of works, except the game doesn't
notice the alien is too unhealthy straight away.  We will fix this next.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    8
    8
    

  

    9
    9
    
    function alien_is_alive()

  

    10
    10
    
    {

  

    11
    
    
        return (hungriness < 100);

  

    
    11
    
        return (hungriness < 100) && (health > 0);

  

    12
    12
    
    }

  

    13
    13
    

  

    14
    14
    
    function draw_circle(x, y, r)

  

  

  









12.6
    Lose game if Tamagotchi loses all its health



We can now do our TODO.  If the alien isn't alive, show the game-over
message straight away, without waiting for the next time_goes_by()
call.  The exclamation mark ! means 'not'.  I've put spaces round it
to make sure a human reader notices it.



This isn't perfect, as the hungriness ticks up one more time after the
game-over message appears, but we look at fixing that later.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    92
    92
    
        health -= 5;

  

    93
    93
    
        $('#health').html(health);

  

    94
    94
    

  

    95
    
    
        // TODO: Make the alien die if all health gone.

  

    
    95
    
        if ( ! alien_is_alive())

  

    
    96
    
        {

  

    
    97
    
            game_over_lost();

  

    
    98
    
        }

  

    96
    99
    
    }

  

    97
    100
    

  

    98
    101
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  















  
<

  
>



13
    Improve end-of-game behaviour



To fix the problem noted previously, where the Tamagotchi gets hungrier
after dying through sickness, we need to check whether the game is still
running before doing anything which changes the state of the game.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    11
    11
    
        return (hungriness < 100) && (health > 0);

  

    12
    12
    
    }

  

    13
    13
    

  

    
    14
    
    function game_is_running()

  

    
    15
    
    {

  

    
    16
    
        return alien_is_alive();

  

    
    17
    
    }

  

    
    18
    

  

    14
    19
    
    function draw_circle(x, y, r)

  

    15
    20
    
    {

  

    16
    21
    
        ctx.beginPath();

  

  
⋮

  

  

    77
    82
    

  

    78
    83
    
    function feed_alien_some_bread()

  

    79
    84
    
    {

  

    
    85
    
        if ( ! game_is_running())

  

    
    86
    
            return;

  

    
    87
    

  

    80
    88
    
        feed_alien(20);

  

    81
    89
    
        temporarily_disable('#feed-bread');

  

    82
    90
    
    }

  

  
⋮

  

  

    85
    93
    

  

    86
    94
    
    function feed_alien_sweets()

  

    87
    95
    
    {

  

    
    96
    
        if ( ! game_is_running())

  

    
    97
    
            return;

  

    
    98
    

  

    88
    99
    
        feed_alien(10);

  

    89
    100
    
        temporarily_disable('#feed-sweets');

  

    90
    101
    

  

  
⋮

  

  

    107
    118
    

  

    108
    119
    
    function time_goes_by()

  

    109
    120
    
    {

  

    
    121
    
        if ( ! game_is_running())

  

    
    122
    
            return;

  

    
    123
    

  

    110
    124
    
        make_alien_hungrier();

  

    111
    125
    

  

    112
    126
    
        if (alien_is_alive())

  

  

  









13.1
    game_is_running(): Add



Looking ahead a bit, the player will be able to win the game by
nurturing their Tamagotchi to old age.  We therefore need a function
which tells us whether the game is still running.  (The alternative
being that it has stopped, either through the player losing or through
the player winning.)






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    11
    11
    
        return (hungriness < 100) && (health > 0);

  

    12
    12
    
    }

  

    13
    13
    

  

    
    14
    
    function game_is_running()

  

    
    15
    
    {

  

    
    16
    
        return alien_is_alive();

  

    
    17
    
    }

  

    
    18
    

  

    14
    19
    
    function draw_circle(x, y, r)

  

    15
    20
    
    {

  

    16
    21
    
        ctx.beginPath();

  

  

  









13.2
    Do not update game state if game is not running



Once the game has stopped, clicking on buttons shouldn't do anything,
and the 'time goes by' function shouldn't do anything either.  To
achieve this, we check whether game_is_running() as the first thing we
do on entering these functions:



    

  • feed_alien_some_bread()
    • 

  • feed_alien_sweets()
    • 

  • time_goes_by()
    • 




If the game isn't running, we return straight away, which means we
don't do any more of the instructions in that function.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    82
    82
    

  

    83
    83
    
    function feed_alien_some_bread()

  

    84
    84
    
    {

  

    
    85
    
        if ( ! game_is_running())

  

    
    86
    
            return;

  

    
    87
    

  

    85
    88
    
        feed_alien(20);

  

    86
    89
    
        temporarily_disable('#feed-bread');

  

    87
    90
    
    }

  

  
⋮

  

  

    90
    93
    

  

    91
    94
    
    function feed_alien_sweets()

  

    92
    95
    
    {

  

    
    96
    
        if ( ! game_is_running())

  

    
    97
    
            return;

  

    
    98
    

  

    93
    99
    
        feed_alien(10);

  

    94
    100
    
        temporarily_disable('#feed-sweets');

  

    95
    101
    

  

  
⋮

  

  

    112
    118
    

  

    113
    119
    
    function time_goes_by()

  

    114
    120
    
    {

  

    
    121
    
        if ( ! game_is_running())

  

    
    122
    
            return;

  

    
    123
    

  

    115
    124
    
        make_alien_hungrier();

  

    116
    125
    

  

    117
    126
    
        if (alien_is_alive())

  

  

  















  
<

  
>



14
    Random illnesses



Occasionally, the Tamagotchi gets sick just through bad luck.  We
already have a function to make things happen every 'tick' of the game
clock, so we can add a 'randomly make sicker' feature to it.  The
randomness comes from JavaScript's Math.random() function, and to keep
the code easy to read, we'll put this into a separate new function.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    61
    61
    
        $('#hungriness').html(hungriness);

  

    62
    62
    
    }

  

    63
    63
    

  

    
    64
    
    function maybe_make_alien_sicker()

  

    
    65
    
    {

  

    
    66
    
        if (Math.random() < 0.1)

  

    
    67
    
        {

  

    
    68
    
            health -= 40;

  

    
    69
    
            if (health < 0)

  

    
    70
    
            {

  

    
    71
    
                health = 0;

  

    
    72
    
            }

  

    
    73
    

  

    
    74
    
            $('#health').html(health);

  

    
    75
    

  

    
    76
    
            if ( ! alien_is_alive())

  

    
    77
    
            {

  

    
    78
    
                game_over_lost();

  

    
    79
    
            }

  

    
    80
    
        }

  

    
    81
    
    }

  

    
    82
    

  

    64
    83
    
    function feed_alien(hungriness_reduction)

  

    65
    84
    
    {

  

    66
    85
    
        hungriness -= hungriness_reduction;

  

  
⋮

  

  

    122
    141
    
            return;

  

    123
    142
    

  

    124
    143
    
        make_alien_hungrier();

  

    
    144
    
        maybe_make_alien_sicker();

  

    125
    145
    

  

    126
    146
    
        if (alien_is_alive())

  

    127
    147
    
        {

  

  

  









14.1
    maybe_make_alien_sicker(): Add skeleton



We will fill in the details in a minute, but first we set up the
structure of how to do something randomly.  JavaScript provides a
Math.random() function, which gives you a random number between 0 and
1 each time you call it.  By testing whether this random number is less
than 0.1 (i.e., 1/10), we can make something happen about one time in
ten that we call the function.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    61
    61
    
        $('#hungriness').html(hungriness);

  

    62
    62
    
    }

  

    63
    63
    

  

    
    64
    
    function maybe_make_alien_sicker()

  

    
    65
    
    {

  

    
    66
    
        if (Math.random() < 0.1)

  

    
    67
    
        {

  

    
    68
    
            // TODO: Make alien sicker

  

    
    69
    
        }

  

    
    70
    
    }

  

    
    71
    

  

    64
    72
    
    function feed_alien(hungriness_reduction)

  

    65
    73
    
    {

  

    66
    74
    
        hungriness -= hungriness_reduction;

  

  

  









14.2
    Knock lots of health off if Tamagotchi gets sick



This has the various parts we've dealt with before:



    

  • Adjust the health variable.
    • 

  • Make sure the health is not less than zero.
    • 

  • Update the web page to display the new health.
    • 







  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    65
    65
    
    {

  

    66
    66
    
        if (Math.random() < 0.1)

  

    67
    67
    
        {

  

    68
    
    
            // TODO: Make alien sicker

  

    
    68
    
            health -= 40;

  

    
    69
    
            if (health < 0)

  

    
    70
    
            {

  

    
    71
    
                health = 0;

  

    
    72
    
            }

  

    
    73
    

  

    
    74
    
            $('#health').html(health);

  

    69
    75
    
        }

  

    70
    76
    
    }

  

    71
    77
    

  

  

  









14.3
    Randomly make Tamagotchi sicker as time goes by



To actually make the Tamagotchi occasionally become sick, we just have
to call our new maybe_make_alien_sicker() function from within the
time_goes_by() function.  About every 20 seconds, on average, the
Tamagotchi will get sick.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    136
    136
    
            return;

  

    137
    137
    

  

    138
    138
    
        make_alien_hungrier();

  

    
    139
    
        maybe_make_alien_sicker();

  

    139
    140
    

  

    140
    141
    
        if (alien_is_alive())

  

    141
    142
    
        {

  

  

  









14.4
    Check Tamagotchi not dead after getting sicker



The final piece is to check whether this bout of sickness was fatal for
the Tamagotchi, and display the you lost message if so.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    72
    72
    
            }

  

    73
    73
    

  

    74
    74
    
            $('#health').html(health);

  

    
    75
    

  

    
    76
    
            if ( ! alien_is_alive())

  

    
    77
    
            {

  

    
    78
    
                game_over_lost();

  

    
    79
    
            }

  

    75
    80
    
        }

  

    76
    81
    
    }

  

    77
    82
    

  

  

  















  
<

  
>



15
    Allow player to give medicine to the Tamagotchi



It's a bit unfair on the player if the alien keeps getting sicker but
the player can't do anything about it.  We'll add a Medicine button
which restores some of its health.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    80
    80
    
        }

  

    81
    81
    
    }

  

    82
    82
    

  

    
    83
    
    function make_healthier()

  

    
    84
    
    {

  

    
    85
    
        health += 40;

  

    
    86
    
        if (health > 100)

  

    
    87
    
        {

  

    
    88
    
            health = 100;

  

    
    89
    
        }

  

    
    90
    

  

    
    91
    
        $('#health').html(health);

  

    
    92
    
    }

  

    
    93
    

  

    83
    94
    
    function feed_alien(hungriness_reduction)

  

    84
    95
    
    {

  

    85
    96
    
        hungriness -= hungriness_reduction;

  

  
⋮

  

  

    130
    141
    

  

    131
    142
    
    $('#feed-sweets').click(feed_alien_sweets);

  

    132
    143
    

  

    
    144
    
    function give_alien_medicine()

  

    
    145
    
    {

  

    
    146
    
        if ( ! game_is_running())

  

    
    147
    
            return;

  

    
    148
    

  

    
    149
    
        make_healthier();

  

    
    150
    
        temporarily_disable('#give-medicine');

  

    
    151
    
    }

  

    
    152
    

  

    
    153
    
    $('#give-medicine').click(give_alien_medicine);

  

    
    154
    

  

    133
    155
    
    function game_over_lost()

  

    134
    156
    
    {

  

    135
    157
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  
  

  
  
page.html

  
  
  

  

    22
    22
    
    <p id="action-buttons">

  

    23
    23
    
      <button id="feed-bread">Bread</button>

  

    24
    24
    
      <button id="feed-sweets">Sweets</button>

  

    
    25
    
      <button id="give-medicine">Medicine</button>

  

    25
    26
    
    </p>

  

    26
    27
    

  

    27
    28
    
    <p id="messages"></p>

  

  

  









15.1
    Add 'medicine' button



Add another button to the 'action buttons' bar, giving it a unique id.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    22
    22
    
    <p id="action-buttons">

  

    23
    23
    
      <button id="feed-bread">Bread</button>

  

    24
    24
    
      <button id="feed-sweets">Sweets</button>

  

    
    25
    
      <button id="give-medicine">Medicine</button>

  

    25
    26
    
    </p>

  

    26
    27
    

  

    27
    28
    
    <p id="messages"></p>

  

  

  









15.2
    make_healthier(): Add



This has the same components we've seen a few times in other settings:



    

  • Update the JavaScript variable health.
    • 

  • Check it hasn't gone outside its bounds — we can't have health
more than 100, so set to 100 if it tries to.
    • 

  • Update the web-page display.
    • 




Here, the medicine gives back 40 health points, but you can experiment
with this value and see what makes a good game.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    80
    80
    
        }

  

    81
    81
    
    }

  

    82
    82
    

  

    
    83
    
    function make_healthier()

  

    
    84
    
    {

  

    
    85
    
        health += 40;

  

    
    86
    
        if (health > 100)

  

    
    87
    
        {

  

    
    88
    
            health = 100;

  

    
    89
    
        }

  

    
    90
    

  

    
    91
    
        $('#health').html(health);

  

    
    92
    
    }

  

    
    93
    

  

    83
    94
    
    function feed_alien(hungriness_reduction)

  

    84
    95
    
    {

  

    85
    96
    
        hungriness -= hungriness_reduction;

  

  

  









15.3
    give_alien_medicine(): Add



Create a function which does the two things we need to do when the
player clicks the Medicine button:



    

  • Make the Tamagotchi healthier.
    • 

  • Disable the Medicine button for a few seconds.
    • 







  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    141
    141
    

  

    142
    142
    
    $('#feed-sweets').click(feed_alien_sweets);

  

    143
    143
    

  

    
    144
    
    function give_alien_medicine()

  

    
    145
    
    {

  

    
    146
    
        make_healthier();

  

    
    147
    
        temporarily_disable('#give-medicine');

  

    
    148
    
    }

  

    
    149
    

  

    144
    150
    
    function game_over_lost()

  

    145
    151
    
    {

  

    146
    152
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  









15.4
    Forbid giving medicine if game not running



If the game isn't running, leave give_alien_medicine() immediately.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    143
    143
    

  

    144
    144
    
    function give_alien_medicine()

  

    145
    145
    
    {

  

    
    146
    
        if ( ! game_is_running())

  

    
    147
    
            return;

  

    
    148
    

  

    146
    149
    
        make_healthier();

  

    147
    150
    
        temporarily_disable('#give-medicine');

  

    148
    151
    
    }

  

  

  









15.5
    Connect the 'Medicine' button



Finally we ensure our new function is called when the player clicks the
button.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    150
    150
    
        temporarily_disable('#give-medicine');

  

    151
    151
    
    }

  

    152
    152
    

  

    
    153
    
    $('#give-medicine').click(give_alien_medicine);

  

    
    154
    

  

    153
    155
    
    function game_over_lost()

  

    154
    156
    
    {

  

    155
    157
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  















  
<

  
>



16
    Create one function to make Tamagotchi sicker



There is a large overlap between the code which reduces the Tamagotchi's
health when the player feeds it a sweet, and the code which reduces its
health because of random sickness.  To make the code easier to work
with, we can refactor by pulling that common logic out into a new
function.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    61
    61
    
        $('#hungriness').html(hungriness);

  

    62
    62
    
    }

  

    63
    63
    

  

    
    64
    
    function make_alien_sicker(health_lost)

  

    
    65
    
    {

  

    
    66
    
        health -= health_lost;

  

    
    67
    
        if (health < 0)

  

    
    68
    
        {

  

    
    69
    
            health = 0;

  

    
    70
    
        }

  

    
    71
    

  

    
    72
    
        $('#health').html(health);

  

    
    73
    

  

    
    74
    
        if ( ! alien_is_alive())

  

    
    75
    
        {

  

    
    76
    
            game_over_lost();

  

    
    77
    
        }

  

    
    78
    
    }

  

    
    79
    

  

    64
    80
    
    function maybe_make_alien_sicker()

  

    65
    81
    
    {

  

    66
    82
    
        if (Math.random() < 0.1)

  

    67
    83
    
        {

  

    68
    
    
            health -= 40;

  

    69
    
    
            if (health < 0)

  

    70
    
    
            {

  

    71
    
    
                health = 0;

  

    72
    
    
            }

  

    73
    
    

  

    74
    
    
            $('#health').html(health);

  

    75
    
    

  

    76
    
    
            if ( ! alien_is_alive())

  

    77
    
    
            {

  

    78
    
    
                game_over_lost();

  

    79
    
    
            }

  

    
    84
    
            make_alien_sicker(40);

  

    80
    85
    
        }

  

    81
    86
    
    }

  

    82
    87
    

  

  
⋮

  

  

    130
    135
    
        temporarily_disable('#feed-sweets');

  

    131
    136
    

  

    132
    137
    
        // Sweets are not healthy:

  

    133
    
    
        health -= 5;

  

    134
    
    
        $('#health').html(health);

  

    135
    
    

  

    136
    
    
        if ( ! alien_is_alive())

  

    137
    
    
        {

  

    138
    
    
            game_over_lost();

  

    139
    
    
        }

  

    
    138
    
        make_alien_sicker(5);

  

    140
    139
    
    }

  

    141
    140
    

  

    142
    141
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  









16.1
    make_alien_sicker(): Add



Copying the common behaviour between maybe_make_alien_sicker() and
feed_alien_sweets(), we see that the difference is in how much health
the Tamagotchi loses.  We therefore make this amount be an argument to
our new function.



One other difference is that we never checked for health < 0 in
feed_alien_sweets(), which we got away with because health was
always a multiple of 5.  It's no harm to check, though, and in future we
might not always have health being a multiple of 5.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    61
    61
    
        $('#hungriness').html(hungriness);

  

    62
    62
    
    }

  

    63
    63
    

  

    
    64
    
    function make_alien_sicker(health_lost)

  

    
    65
    
    {

  

    
    66
    
        health -= health_lost;

  

    
    67
    
        if (health < 0)

  

    
    68
    
        {

  

    
    69
    
            health = 0;

  

    
    70
    
        }

  

    
    71
    

  

    
    72
    
        $('#health').html(health);

  

    
    73
    

  

    
    74
    
        if ( ! alien_is_alive())

  

    
    75
    
        {

  

    
    76
    
            game_over_lost();

  

    
    77
    
        }

  

    
    78
    
    }

  

    
    79
    

  

    64
    80
    
    function maybe_make_alien_sicker()

  

    65
    81
    
    {

  

    66
    82
    
        if (Math.random() < 0.1)

  

  

  









16.2
    maybe_make_alien_sicker(): Simplify



All the logic is now inside make_alien_sicker(), so call that (with
argument 40, because that's the amount of health we knock off when the
Tamagotchi gets a random illness).






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    81
    81
    
    {

  

    82
    82
    
        if (Math.random() < 0.1)

  

    83
    83
    
        {

  

    84
    
    
            health -= 40;

  

    85
    
    
            if (health < 0)

  

    86
    
    
            {

  

    87
    
    
                health = 0;

  

    88
    
    
            }

  

    89
    
    

  

    90
    
    
            $('#health').html(health);

  

    91
    
    

  

    92
    
    
            if ( ! alien_is_alive())

  

    93
    
    
            {

  

    94
    
    
                game_over_lost();

  

    95
    
    
            }

  

    
    84
    
            make_alien_sicker(40);

  

    96
    85
    
        }

  

    97
    86
    
    }

  

    98
    87
    

  

  

  









16.3
    feed_alien_sweets(): Simplify



Again, use the new function, passing 5 as the amount of health to lose.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    135
    135
    
        temporarily_disable('#feed-sweets');

  

    136
    136
    

  

    137
    137
    
        // Sweets are not healthy:

  

    138
    
    
        health -= 5;

  

    139
    
    
        $('#health').html(health);

  

    140
    
    

  

    141
    
    
        if ( ! alien_is_alive())

  

    142
    
    
        {

  

    143
    
    
            game_over_lost();

  

    144
    
    
        }

  

    
    138
    
        make_alien_sicker(5);

  

    145
    139
    
    }

  

    146
    140
    

  

    147
    141
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  

  















  
<

  
>



17
    Make player win game if Tamagotchi reaches old age



So far the game only has ways to lose, and not to win.  We'll make it so
that the player wins the game if the Tamagotchi reaches the ripe old age
of 100.  This will involve adding an 'age' display, and keeping track of
the age via a JavaScript variable.  The age needs to increase as time
goes by, and we need to check whether the Tamagotchi becomes old enough
to tell the player they've won.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    
    var health = 100;

  

    
    8
    
    var age = 0;

  

    8
    9
    

  

    9
    10
    
    function alien_is_alive()

  

    10
    11
    
    {

  

    11
    12
    
        return (hungriness < 100) && (health > 0);

  

    12
    13
    
    }

  

    13
    14
    

  

    
    15
    
    function alien_still_growing()

  

    
    16
    
    {

  

    
    17
    
        return (age < 100);

  

    
    18
    
    }

  

    
    19
    

  

    14
    20
    
    function game_is_running()

  

    15
    21
    
    {

  

    16
    
    
        return alien_is_alive();

  

    
    22
    
        return alien_is_alive() && alien_still_growing();

  

    17
    23
    
    }

  

    18
    24
    

  

    19
    25
    
    function draw_circle(x, y, r)

  

  
⋮

  

  

    96
    102
    
        $('#health').html(health);

  

    97
    103
    
    }

  

    98
    104
    

  

    
    105
    
    function make_alien_older()

  

    
    106
    
    {

  

    
    107
    
        age += 1;

  

    
    108
    
        $('#age').html(age);

  

    
    109
    
    }

  

    
    110
    

  

    99
    111
    
    function feed_alien(hungriness_reduction)

  

    100
    112
    
    {

  

    101
    113
    
        hungriness -= hungriness_reduction;

  

  
⋮

  

  

    156
    168
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    157
    169
    
    }

  

    158
    170
    

  

    
    171
    
    function game_over_won()

  

    
    172
    
    {

  

    
    173
    
        $('#messages').html('Well done!  Your Tamagotchi reached old age!');

  

    
    174
    
    }

  

    
    175
    

  

    159
    176
    
    function time_goes_by()

  

    160
    177
    
    {

  

    161
    178
    
        if ( ! game_is_running())

  

  
⋮

  

  

    163
    180
    

  

    164
    181
    
        make_alien_hungrier();

  

    165
    182
    
        maybe_make_alien_sicker();

  

    
    183
    
        make_alien_older();

  

    166
    184
    

  

    167
    
    
        if (alien_is_alive())

  

    
    185
    
        if ( ! alien_still_growing())

  

    168
    186
    
        {

  

    169
    
    
            window.setTimeout(time_goes_by, 2000);

  

    
    187
    
            game_over_won();

  

    170
    188
    
        }

  

    171
    
    
        else

  

    
    189
    
        else if ( ! alien_is_alive())

  

    172
    190
    
        {

  

    173
    191
    
            game_over_lost();

  

    174
    192
    
        }

  

    
    193
    
        else

  

    
    194
    
        {

  

    
    195
    
            window.setTimeout(time_goes_by, 2000);

  

    
    196
    
        }

  

    175
    197
    
    }

  

    176
    198
    
});

  

  

  
  

  
  
page.html

  
  
  

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    15
    15
    

  

    16
    16
    
    <div id="levels">

  

    
    17
    
      <p id="age-para">Age: <span id="age">0</span> hours</p>

  

    17
    18
    
      <p>Health: <span id="health">100</span></p>

  

    18
    19
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    19
    20
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

  

  
  

  
  
style.css

  
  
  

  

    5
    5
    
#action-buttons { display: none;

  

    6
    6
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    7
    7
    
#action-buttons button { margin: 24px; }

  

    
    8
    
#age-para { font-weight: bold; }

  

  

  









17.1
    Add 'age' display



When first hatched, the Tamagotchi is zero hours old.  The whole <p>
has an id, as well as the <span> containing the value, because we'll
want to apply styling to this whole line of the display.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    14
    14
    
      <button id="hatch">Hatch</button></p>

  

    15
    15
    

  

    16
    16
    
    <div id="levels">

  

    
    17
    
      <p id="age-para">Age: <span id="age">0</span> hours</p>

  

    17
    18
    
      <p>Health: <span id="health">100</span></p>

  

    18
    19
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    19
    20
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

  

  









17.2
    Add styling for the age display



The 'age' is a bit like the score for the game, so it should be more
prominent.  Make the text bold.  You could add any other styling here
too (e.g., colours).






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    5
    5
    
#action-buttons { display: none;

  

    6
    6
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    7
    7
    
#action-buttons button { margin: 24px; }

  

    
    8
    
#age-para { font-weight: bold; }

  

  

  









17.3
    Add 'age' JavaScript variable



The program will need to keep track of how old the Tamagotchi is, so add
a variable age.  It starts at zero, matching the display.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    
    var health = 100;

  

    
    8
    
    var age = 0;

  

    8
    9
    

  

    9
    10
    
    function alien_is_alive()

  

    10
    11
    
    {

  

  

  









17.4
    make_alien_older(): Add



Every 'tick' of the game, the Tamagotchi will get 'one hour' older.
Make a function to do this, which needs to update two things:



    

  • The age variable.
    • 

  • The display.
    • 







  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    97
    97
    
        $('#health').html(health);

  

    98
    98
    
    }

  

    99
    99
    

  

    
    100
    
    function make_alien_older()

  

    
    101
    
    {

  

    
    102
    
        age += 1;

  

    
    103
    
        $('#age').html(age);

  

    
    104
    
    }

  

    
    105
    

  

    100
    106
    
    function feed_alien(hungriness_reduction)

  

    101
    107
    
    {

  

    102
    108
    
        hungriness -= hungriness_reduction;

  

  

  









17.5
    Make Tamagotchi get older each 'tick' of the game



To actually make the Tamagotchi get older, we need to call our new
make_alien_older() on each 'tick' of the game, i.e., within
time_goes_by().



(One slightly annoying thing is that it says '1 hours', rather than '1
hour', but we'll ignore that.)






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    170
    170
    

  

    171
    171
    
        make_alien_hungrier();

  

    172
    172
    
        maybe_make_alien_sicker();

  

    
    173
    
        make_alien_older();

  

    173
    174
    

  

    174
    175
    
        if (alien_is_alive())

  

    175
    176
    
        {

  

  

  









17.6
    game_over_won(): Add



Make a function to announce that the player has won, to go along with
the existing game_over_lost() function for when they lose.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    163
    163
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

    164
    164
    
    }

  

    165
    165
    

  

    
    166
    
    function game_over_won()

  

    
    167
    
    {

  

    
    168
    
        $('#messages').html('Well done!  Your Tamagotchi reached old age!');

  

    
    169
    
    }

  

    
    170
    

  

    166
    171
    
    function time_goes_by()

  

    167
    172
    
    {

  

    168
    173
    
        if ( ! game_is_running())

  

  

  









17.7
    Check whether Tamagotchi has reached winning age



After updating the age, we need to check if the player has won.  This
needs to fit in with the 'has the player lost?' check, so we'll
rearrange this part of time_goes_by() a bit.



For testing, it's a good idea to use a smaller number than 100 (maybe
10), otherwise it takes an annoyingly long time to check it's working.



If, by coincidence, the alien reaches old age at the same time as
getting to zero health (say), we give the player the benefit of the
doubt and call it a win.  We do this by checking the age before the
alien_is_alive() check.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    177
    177
    
        maybe_make_alien_sicker();

  

    178
    178
    
        make_alien_older();

  

    179
    179
    

  

    180
    
    
        if (alien_is_alive())

  

    
    180
    
        if (age == 100)

  

    181
    181
    
        {

  

    182
    
    
            window.setTimeout(time_goes_by, 2000);

  

    
    182
    
            game_over_won();

  

    183
    183
    
        }

  

    184
    
    
        else

  

    
    184
    
        else if ( ! alien_is_alive())

  

    185
    185
    
        {

  

    186
    186
    
            game_over_lost();

  

    187
    187
    
        }

  

    
    188
    
        else

  

    
    189
    
        {

  

    
    190
    
            window.setTimeout(time_goes_by, 2000);

  

    
    191
    
        }

  

    188
    192
    
    }

  

    189
    193
    
});

  

  

  









17.8
    alien_still_growing(): Add



A function which lets us tell whether the alien is still growing.  (The
alternative is that it's reached old age.)






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    12
    12
    
        return (hungriness < 100) && (health > 0);

  

    13
    13
    
    }

  

    14
    14
    

  

    
    15
    
    function alien_still_growing()

  

    
    16
    
    {

  

    
    17
    
        return (age < 100);

  

    
    18
    
    }

  

    
    19
    

  

    15
    20
    
    function game_is_running()

  

    16
    21
    
    {

  

    17
    22
    
        return alien_is_alive();

  

  

  









17.9
    Declare game not running at old age



When the Tamagotchi reaches old age, the game should stop running.  We
add a condition to game_is_running() — for the game to be
running, the alien needs to be alive and still growing.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    19
    19
    

  

    20
    20
    
    function game_is_running()

  

    21
    21
    
    {

  

    22
    
    
        return alien_is_alive();

  

    
    22
    
        return alien_is_alive() && alien_still_growing();

  

    23
    23
    
    }

  

    24
    24
    

  

    25
    25
    
    function draw_circle(x, y, r)

  

  

  









17.10
    Use alien_still_growing() in time_goes_by()



We don't want to have two places in the code where we decide whether the
alien has reached old age.  This kind of thing inevitably leads to
trouble when you change things in one place and not the other.  To avoid
this, use the alien_still_growing() function to decide whether the
player has won — if it's not still growing, the player has won.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    182
    182
    
        maybe_make_alien_sicker();

  

    183
    183
    
        make_alien_older();

  

    184
    184
    

  

    185
    
    
        if (age == 100)

  

    
    185
    
        if ( ! alien_still_growing())

  

    186
    186
    
        {

  

    187
    187
    
            game_over_won();

  

    188
    188
    
        }

  

  

  















  
<

  
>



18
    Move levels display to right of Tamagotchi



On a short screen, things don't quite fit vertically.  The title, the
Tamagotchi canvas, the levels display, the action buttons, and the
messages take up so much room that the player needs to scroll to see it
all, which is annoying.  We'll move the levels display to the right of
the Tamagotchi, giving a more useful layout.






  RESULT
  SOURCE







+


-



  
  

  
  
page.html

  
  
  

  

    8
    8
    
  <body>

  

    9
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    10
    10
    

  

    
    11
    
    <div id="game-container">

  

    11
    12
    
    <canvas id="game" width="480" height="480"></canvas>

  

    12
    13
    

  

    13
    14
    
    <p id="hatch-instructions">Click here to make it hatch:

  

  
⋮

  

  

    19
    20
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    20
    21
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    21
    22
    
    </div>

  

    
    23
    
    </div>

  

    22
    24
    

  

    23
    25
    
    <p id="action-buttons">

  

    24
    26
    
      <button id="feed-bread">Bread</button>

  

  

  
  

  
  
style.css

  
  
  

  

    1
    1
    
body { background-color: #eee; margin: 24px; }

  

    2
    2
    
h1 { color: red; }

  

    
    3
    
#game-container { position: relative; }

  

    3
    4
    
#game { background-color: #ffd; }

  

    4
    
    
#levels { display: none }

  

    
    5
    
#levels { display: none; position: absolute; left: 520px; top: 0px; }

  

    5
    6
    
#action-buttons { display: none;

  

    6
    7
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    7
    8
    
#action-buttons button { margin: 24px; }

  

  

  









18.1
    Wrap Tamagotchi and levels in a <div>



This produces no change yet, but we need the container <div> to make
the positioning work correctly.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    8
    8
    
  <body>

  

    9
    9
    
    <h1>Look after your Tamagotchi!</h1>

  

    10
    10
    

  

    
    11
    
    <div id="game-container">

  

    11
    12
    
    <canvas id="game" width="480" height="480"></canvas>

  

    12
    13
    

  

    13
    14
    
    <p id="hatch-instructions">Click here to make it hatch:

  

  
⋮

  

  

    19
    20
    
      <p>Happiness: <span id="happiness">100</span></p>

  

    20
    21
    
      <p>Hungriness: <span id="hungriness">0</span></p>

  

    21
    22
    
    </div>

  

    
    23
    
    </div>

  

    22
    24
    

  

    23
    25
    
    <p id="action-buttons">

  

    24
    26
    
      <button id="feed-bread">Bread</button>

  

  

  









18.2
    Position levels to right of Tamagotchi



The full rules for positioning using CSS are quite complex, but for this
case, the idea is:



    

  • Make the container have relative position.  By itself this does
nothing, but means that the game-container div is used as a
reference for where any contained absolute-positioned elements go.
    • 

  • Make the levels display be positioned absolutely, with its left edge
just beyond the right edge of the <canvas> (which is 480px wide),
and with its top edge level with the top of the canvas.
    • 




In fact the 'top' of the levels display includes its margin, so the top
of the text doesn't quite line up.  We'll put up with this.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    1
    1
    
body { background-color: #eee; margin: 24px; }

  

    2
    2
    
h1 { color: red; }

  

    
    3
    
#game-container { position: relative; }

  

    3
    4
    
#game { background-color: #ffd; }

  

    4
    
    
#levels { display: none }

  

    
    5
    
#levels { display: none; position: absolute; left: 520px; top: 0px; }

  

    5
    6
    
#action-buttons { display: none;

  

    6
    7
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    7
    8
    
#action-buttons button { margin: 24px; }

  

  

  















  
<

  
>



19
    Implement happiness and boredom



We'll bring in the last part of the display now: happiness.  The idea is
that the Tamagotchi needs to be played with otherwise it gets bored.  If
it gets bored it starts losing happiness.  The player can play a game
with their Tamagotchi by clicking a button.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    
    var health = 100;

  

    
    8
    
    var happiness = 100;

  

    
    9
    
    var bored = false;

  

    
    10
    
    var last_game_age = 0;

  

    8
    11
    
    var age = 0;

  

    9
    12
    

  

    10
    13
    
    function alien_is_alive()

  

    11
    14
    
    {

  

    12
    
    
        return (hungriness < 100) && (health > 0);

  

    
    15
    
        return (hungriness < 100) && (health > 0) && (happiness > 0);

  

    13
    16
    
    }

  

    14
    17
    

  

    15
    18
    
    function alien_still_growing()

  

  
⋮

  

  

    108
    111
    
        $('#age').html(age);

  

    109
    112
    
    }

  

    110
    113
    

  

    
    114
    
    function update_alien_happiness()

  

    
    115
    
    {

  

    
    116
    
        bored = ((age - last_game_age) >= 3);

  

    
    117
    

  

    
    118
    
        if (bored)

  

    
    119
    
        {

  

    
    120
    
            happiness -= 5;

  

    
    121
    
            if (happiness < 0) happiness = 0;

  

    
    122
    
        }

  

    
    123
    
        else

  

    
    124
    
        {

  

    
    125
    
            happiness += 2;

  

    
    126
    
            if (happiness > 100) happiness = 100;

  

    
    127
    
        }

  

    
    128
    

  

    
    129
    
        $('#happiness').html(happiness);

  

    
    130
    
    }

  

    
    131
    

  

    111
    132
    
    function feed_alien(hungriness_reduction)

  

    112
    133
    
    {

  

    113
    134
    
        hungriness -= hungriness_reduction;

  

  
⋮

  

  

    163
    184
    

  

    164
    185
    
    $('#give-medicine').click(give_alien_medicine);

  

    165
    186
    

  

    
    187
    
    function play_game()

  

    
    188
    
    {

  

    
    189
    
        if ( ! game_is_running())

  

    
    190
    
            return;

  

    
    191
    

  

    
    192
    
        last_game_age = age;

  

    
    193
    
        temporarily_disable('#play-game');

  

    
    194
    
    }

  

    
    195
    

  

    
    196
    
    $('#play-game').click(play_game);

  

    
    197
    

  

    166
    198
    
    function game_over_lost()

  

    167
    199
    
    {

  

    168
    200
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  
⋮

  

  

    181
    213
    
        make_alien_hungrier();

  

    182
    214
    
        maybe_make_alien_sicker();

  

    183
    215
    
        make_alien_older();

  

    
    216
    
        update_alien_happiness();

  

    184
    217
    

  

    185
    218
    
        if ( ! alien_still_growing())

  

    186
    219
    
        {

  

  

  
  

  
  
page.html

  
  
  

  

    26
    26
    
      <button id="feed-bread">Bread</button>

  

    27
    27
    
      <button id="feed-sweets">Sweets</button>

  

    28
    28
    
      <button id="give-medicine">Medicine</button>

  

    
    29
    
      <button id="play-game">Game</button>

  

    29
    30
    
    </p>

  

    30
    31
    

  

    31
    32
    
    <p id="messages"></p>

  

  

  









19.1
    Add variable for happiness



The happiness starts off at 100 — the Tamagotchi is perfectly
happy when freshly hatched.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    5
    5
    

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    
    var health = 100;

  

    
    8
    
    var happiness = 100;

  

    8
    9
    
    var age = 0;

  

    9
    10
    

  

    10
    11
    
    function alien_is_alive()

  

  

  









19.2
    Add variable for whether Tamagotchi is bored



The bored variable is a Boolean variable — its value is going
to be either true (if the Tamagotchi is bored) or false (if it's
not).  It starts off not bored.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    6
    6
    
    var hungriness = 0;

  

    7
    7
    
    var health = 100;

  

    8
    8
    
    var happiness = 100;

  

    
    9
    
    var bored = false;

  

    9
    10
    
    var age = 0;

  

    10
    11
    

  

    11
    12
    
    function alien_is_alive()

  

  

  









19.3
    Add variable to track when game last played



The Tamagotchi will get bored if the player hasn't played a game with it
for too long.  To keep track of this, we'll add a variable to remember
how old the Tamagotchi was when the player last played a game with it.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    7
    7
    
    var health = 100;

  

    8
    8
    
    var happiness = 100;

  

    9
    9
    
    var bored = false;

  

    
    10
    
    var last_game_age = 0;

  

    10
    11
    
    var age = 0;

  

    11
    12
    

  

    12
    13
    
    function alien_is_alive()

  

  

  









19.4
    update_alien_happiness(): Add



Being bored makes the Tamagotchi less happy.  If it's not bored, it has
a generally positive outlook on life, so its happiness goes up.  We need
a function to check whether the alien is bored, and then move its
happiness up or down accordingly.  This function has to do quite a lot.



The main bit is the ((age - last_game_age) >= 3) test.  This
subtraction works out how long ago the alien last had a game, and if
that was three or more hours ago, it's bored.  Then we adjust the
happiness variable either down (if bored) or up (if not), and update
the display.  We also check that the happiness doesn't become less
than zero or more than 100.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    111
    111
    
        $('#age').html(age);

  

    112
    112
    
    }

  

    113
    113
    

  

    
    114
    
    function update_alien_happiness()

  

    
    115
    
    {

  

    
    116
    
        bored = ((age - last_game_age) >= 3);

  

    
    117
    

  

    
    118
    
        if (bored)

  

    
    119
    
        {

  

    
    120
    
            happiness -= 5;

  

    
    121
    
            if (happiness < 0) happiness = 0;

  

    
    122
    
        }

  

    
    123
    
        else

  

    
    124
    
        {

  

    
    125
    
            happiness += 2;

  

    
    126
    
            if (happiness > 100) happiness = 100;

  

    
    127
    
        }

  

    
    128
    

  

    
    129
    
        $('#happiness').html(happiness);

  

    
    130
    
    }

  

    
    131
    

  

    114
    132
    
    function feed_alien(hungriness_reduction)

  

    115
    133
    
    {

  

    116
    134
    
        hungriness -= hungriness_reduction;

  

  

  









19.5
    Check boredom and update happiness every tick



To make this actually happen, we must call our new function on every
game tick.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    202
    202
    
        make_alien_hungrier();

  

    203
    203
    
        maybe_make_alien_sicker();

  

    204
    204
    
        make_alien_older();

  

    
    205
    
        update_alien_happiness();

  

    205
    206
    

  

    206
    207
    
        if ( ! alien_still_growing())

  

    207
    208
    
        {

  

  

  









19.6
    Add 'Game' button



It would be unfair if the player had no way of playing a game with the
Tamagotchi, so add an action button for this.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    26
    26
    
      <button id="feed-bread">Bread</button>

  

    27
    27
    
      <button id="feed-sweets">Sweets</button>

  

    28
    28
    
      <button id="give-medicine">Medicine</button>

  

    
    29
    
      <button id="play-game">Game</button>

  

    29
    30
    
    </p>

  

    30
    31
    

  

    31
    32
    
    <p id="messages"></p>

  

  

  









19.7
    play_game(): Add



When the player clicks the Game button, the code needs to record this
fact.  The variable last_game_age needs updating to the Tamagotchi's
current age.  We also include the usual temporary disabling of the
button.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    184
    184
    

  

    185
    185
    
    $('#give-medicine').click(give_alien_medicine);

  

    186
    186
    

  

    
    187
    
    function play_game()

  

    
    188
    
    {

  

    
    189
    
        last_game_age = age;

  

    
    190
    
        temporarily_disable('#play-game');

  

    
    191
    
    }

  

    
    192
    

  

    187
    193
    
    function game_over_lost()

  

    188
    194
    
    {

  

    189
    195
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  









19.8
    Forbid playing a game if game not running



If the game isn't running, leave play_game() immediately.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    186
    186
    

  

    187
    187
    
    function play_game()

  

    188
    188
    
    {

  

    
    189
    
        if ( ! game_is_running())

  

    
    190
    
            return;

  

    
    191
    

  

    189
    192
    
        last_game_age = age;

  

    190
    193
    
        temporarily_disable('#play-game');

  

    191
    194
    
    }

  

  

  









19.9
    Connect play_game() function to button



The last piece is to connect the buttom to the function via a call to
click().






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    193
    193
    
        temporarily_disable('#play-game');

  

    194
    194
    
    }

  

    195
    195
    

  

    
    196
    
    $('#play-game').click(play_game);

  

    
    197
    

  

    196
    198
    
    function game_over_lost()

  

    197
    199
    
    {

  

    198
    200
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  









19.10
    Lose game if Tamagotchi becomes too sad



Finally, the Tamagotchi dies of a broken heart if it becomes too
unhappy, so add another condition to the test in alien_is_alive().






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    12
    12
    

  

    13
    13
    
    function alien_is_alive()

  

    14
    14
    
    {

  

    15
    
    
        return (hungriness < 100) && (health > 0);

  

    
    15
    
        return (hungriness < 100) && (health > 0) && (happiness > 0);

  

    16
    16
    
    }

  

    17
    17
    

  

    18
    18
    
    function alien_still_growing()

  

  

  















  
<

  
>



20
    Give Tamagotchi a face



To make the game look better, we'll give the Tamagotchi two eyes and a
smiling mouth.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    42
    42
    

  

    43
    43
    
        draw_circle(240, 110, 80);

  

    44
    44
    
        draw_circle(240, 300, 150);

  

    
    45
    

  

    
    46
    
        ctx.fillStyle = 'black';

  

    
    47
    
        draw_circle(210, 90, 10);

  

    
    48
    
        draw_circle(270, 90, 10);

  

    
    49
    

  

    
    50
    
        ctx.lineWidth = 5.0;

  

    
    51
    
        ctx.lineCap = 'round';

  

    
    52
    
        ctx.beginPath();

  

    
    53
    
        ctx.moveTo(200, 130);

  

    
    54
    
        ctx.lineTo(220, 150);

  

    
    55
    
        ctx.lineTo(260, 150);

  

    
    56
    
        ctx.lineTo(280, 130);

  

    
    57
    
        ctx.stroke();

  

    45
    58
    
    }

  

    46
    59
    

  

    47
    60
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  









20.1
    Draw eyes



After a bit of experimenting, these look like reasonable places for the
Tamagotchi's eyes.  You can experiment with other colours, or the size,
position or even number of eyes.



We can see how our draw_circle() function is getting more use, keeping
our code easy to write and read.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    42
    42
    

  

    43
    43
    
        draw_circle(240, 110, 80);

  

    44
    44
    
        draw_circle(240, 300, 150);

  

    
    45
    

  

    
    46
    
        ctx.fillStyle = 'black';

  

    
    47
    
        draw_circle(210, 90, 10);

  

    
    48
    
        draw_circle(270, 90, 10);

  

    45
    49
    
    }

  

    46
    50
    

  

    47
    51
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  









20.2
    Draw smiling mouth



To give the Tamagotchi a mouth, we create a path and then stroke()
it.  This just gives the outline, not a filled-in shape.  To build the
path, we move to the starting point, then draw three lines to the other
corners in the shape.  Experiment with the shape, colour, width, etc.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    46
    46
    
        ctx.fillStyle = 'black';

  

    47
    47
    
        draw_circle(210, 90, 10);

  

    48
    48
    
        draw_circle(270, 90, 10);

  

    
    49
    

  

    
    50
    
        ctx.lineWidth = 5.0;

  

    
    51
    
        ctx.beginPath();

  

    
    52
    
        ctx.moveTo(200, 130);

  

    
    53
    
        ctx.lineTo(220, 150);

  

    
    54
    
        ctx.lineTo(260, 150);

  

    
    55
    
        ctx.lineTo(280, 130);

  

    
    56
    
        ctx.stroke();

  

    49
    57
    
    }

  

    50
    58
    

  

    51
    59
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  









20.3
    Make line ends rounded



The mouth looks slightly better if the line-ends are rounded rather than
square.  This is controlled by the lineCap property of the drawing
context.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    48
    48
    
        draw_circle(270, 90, 10);

  

    49
    49
    

  

    50
    50
    
        ctx.lineWidth = 5.0;

  

    
    51
    
        ctx.lineCap = 'round';

  

    51
    52
    
        ctx.beginPath();

  

    52
    53
    
        ctx.moveTo(200, 130);

  

    53
    54
    
        ctx.lineTo(220, 150);

  

  

  















  
<

  
>



21
    Make Tamagotchi's appearance show its state



The game will look more appealing, and also the player will have a
better chance of keeping an eye on what's going on, if we make the
Tamagotchi look different according to how hungry, happy, and healthy it
is.  We change draw_alien() quite a bit, to show:



    

  • A sad, bored, or happy mouth.
    • 

  • A sickly green colour if it's ill.
    • 

  • A hole in its belly as it gets hungrier.
    • 




The code needs updating to call draw_alien() at various places, to
make sure the appearance always matches the variables and levels
display.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    38
    38
    
    function draw_alien()

  

    39
    39
    
    {

  

    40
    40
    
        ctx.clearRect(0, 0, 480, 480);

  

    41
    
    
        ctx.fillStyle = 'blue';

  

    
    41
    
        if (health >= 50)

  

    
    42
    
        {

  

    
    43
    
            ctx.fillStyle = 'blue';

  

    
    44
    
        }

  

    
    45
    
        else

  

    
    46
    
        {

  

    
    47
    
            ctx.fillStyle = 'rgb(0, 255, 200)';

  

    
    48
    
        }

  

    42
    49
    

  

    43
    50
    
        draw_circle(240, 110, 80);

  

    44
    51
    
        draw_circle(240, 300, 150);

  

    45
    52
    

  

    
    53
    
        ctx.fillStyle = 'rgb(255, 255, 221)';

  

    
    54
    
        draw_circle(240, 300, hungriness);

  

    
    55
    

  

    46
    56
    
        ctx.fillStyle = 'black';

  

    47
    57
    
        draw_circle(210, 90, 10);

  

    48
    58
    
        draw_circle(270, 90, 10);

  

  
⋮

  

  

    50
    60
    
        ctx.lineWidth = 5.0;

  

    51
    61
    
        ctx.lineCap = 'round';

  

    52
    62
    
        ctx.beginPath();

  

    53
    
    
        ctx.moveTo(200, 130);

  

    54
    
    
        ctx.lineTo(220, 150);

  

    55
    
    
        ctx.lineTo(260, 150);

  

    56
    
    
        ctx.lineTo(280, 130);

  

    
    63
    
        if (happiness < 50)

  

    
    64
    
        {

  

    
    65
    
            ctx.moveTo(200, 150);

  

    
    66
    
            ctx.lineTo(220, 130);

  

    
    67
    
            ctx.lineTo(260, 130);

  

    
    68
    
            ctx.lineTo(280, 150);

  

    
    69
    
        }

  

    
    70
    
        else if (bored)

  

    
    71
    
        {

  

    
    72
    
            ctx.moveTo(200, 145);

  

    
    73
    
            ctx.lineTo(280, 145);

  

    
    74
    
        }

  

    
    75
    
        else

  

    
    76
    
        {

  

    
    77
    
            ctx.moveTo(200, 130);

  

    
    78
    
            ctx.lineTo(220, 150);

  

    
    79
    
            ctx.lineTo(260, 150);

  

    
    80
    
            ctx.lineTo(280, 130);

  

    
    81
    
        }

  

    57
    82
    
        ctx.stroke();

  

    58
    83
    
    }

  

    59
    84
    

  

  
⋮

  

  

    81
    106
    
    {

  

    82
    107
    
        hungriness += 5;

  

    83
    108
    
        $('#hungriness').html(hungriness);

  

    
    109
    
        draw_alien();

  

    84
    110
    
    }

  

    85
    111
    

  

    86
    112
    
    function make_alien_sicker(health_lost)

  

  
⋮

  

  

    92
    118
    
        }

  

    93
    119
    

  

    94
    120
    
        $('#health').html(health);

  

    
    121
    
        draw_alien();

  

    95
    122
    

  

    96
    123
    
        if ( ! alien_is_alive())

  

    97
    124
    
        {

  

  
⋮

  

  

    116
    143
    
        }

  

    117
    144
    

  

    118
    145
    
        $('#health').html(health);

  

    
    146
    
        draw_alien();

  

    119
    147
    
    }

  

    120
    148
    

  

    121
    149
    
    function make_alien_older()

  

  
⋮

  

  

    140
    168
    
        }

  

    141
    169
    

  

    142
    170
    
        $('#happiness').html(happiness);

  

    
    171
    
        draw_alien();

  

    143
    172
    
    }

  

    144
    173
    

  

    145
    174
    
    function feed_alien(hungriness_reduction)

  

  
⋮

  

  

    151
    180
    
        }

  

    152
    181
    

  

    153
    182
    
        $('#hungriness').html(hungriness);

  

    
    183
    
        draw_alien();

  

    154
    184
    
    }

  

    155
    185
    

  

    156
    186
    
    function temporarily_disable(button_id)

  

  
⋮

  

  

    203
    233
    
            return;

  

    204
    234
    

  

    205
    235
    
        last_game_age = age;

  

    
    236
    
        update_alien_happiness();

  

    206
    237
    
        temporarily_disable('#play-game');

  

    207
    238
    
    }

  

    208
    239
    

  

  

  









21.1
    Draw Tamagotchi sickly green if not very healthy



To make the game look more interesting, and also slightly easier, we'll
draw the Tamagotchi a different colour when it's sick.  The rgb()
notation lets you describe a colour using red, green, and blue parts in
the same way as the #e3f notation in CSS, except here you give three
whole numbers between 0 and 255.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    38
    38
    
    function draw_alien()

  

    39
    39
    
    {

  

    40
    40
    
        ctx.clearRect(0, 0, 480, 480);

  

    41
    
    
        ctx.fillStyle = 'blue';

  

    
    41
    
        if (health >= 50)

  

    
    42
    
        {

  

    
    43
    
            ctx.fillStyle = 'blue';

  

    
    44
    
        }

  

    
    45
    
        else

  

    
    46
    
        {

  

    
    47
    
            ctx.fillStyle = 'rgb(0, 255, 200)';

  

    
    48
    
        }

  

    42
    49
    

  

    43
    50
    
        draw_circle(240, 110, 80);

  

    44
    51
    
        draw_circle(240, 300, 150);

  

  

  









21.2
    Re-draw alien when health changes



Whenever we change the health, we need to re-draw the alien, in case it
now needs to be a different colour.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    99
    99
    
        }

  

    100
    100
    

  

    101
    101
    
        $('#health').html(health);

  

    
    102
    
        draw_alien();

  

    102
    103
    

  

    103
    104
    
        if ( ! alien_is_alive())

  

    104
    105
    
        {

  

  
⋮

  

  

    123
    124
    
        }

  

    124
    125
    

  

    125
    126
    
        $('#health').html(health);

  

    
    127
    
        draw_alien();

  

    126
    128
    
    }

  

    127
    129
    

  

    128
    130
    
    function make_alien_older()

  

  

  









21.3
    Make Tamagotchi look bored if it is



If the Tamagotchi is bored, it shouldn't be smiling.  In draw_alien(),
we can check whether it's bored, and if so, draw a straight mouth rather
than a smiling one.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    57
    57
    
        ctx.lineWidth = 5.0;

  

    58
    58
    
        ctx.lineCap = 'round';

  

    59
    59
    
        ctx.beginPath();

  

    60
    
    
        ctx.moveTo(200, 130);

  

    61
    
    
        ctx.lineTo(220, 150);

  

    62
    
    
        ctx.lineTo(260, 150);

  

    63
    
    
        ctx.lineTo(280, 130);

  

    
    60
    
        if (bored)

  

    
    61
    
        {

  

    
    62
    
            ctx.moveTo(200, 145);

  

    
    63
    
            ctx.lineTo(280, 145);

  

    
    64
    
        }

  

    
    65
    
        else

  

    
    66
    
        {

  

    
    67
    
            ctx.moveTo(200, 130);

  

    
    68
    
            ctx.lineTo(220, 150);

  

    
    69
    
            ctx.lineTo(260, 150);

  

    
    70
    
            ctx.lineTo(280, 130);

  

    
    71
    
        }

  

    64
    72
    
        ctx.stroke();

  

    65
    73
    
    }

  

    66
    74
    

  

  

  









21.4
    Re-draw Tamagotchi when boredom changes



Whenever the bored variable might change, we should re-draw the
alien.  Do so inside update_alien_happiness().






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    157
    157
    
        }

  

    158
    158
    

  

    159
    159
    
        $('#happiness').html(happiness);

  

    
    160
    
        draw_alien();

  

    160
    161
    
    }

  

    161
    162
    

  

    162
    163
    
    function feed_alien(hungriness_reduction)

  

  

  









21.5
    Become un-bored immediately when playing a game



When the player clicks the Game button, the Tamagotchi doesn't
immediately become non-bored, only on the next game tick.  This isn't a
good game experience, so update the happiness (which re-draws the
Tamagotchi) as part of responding to the Game click.  This also gives
an immediate happiness boost, which is probably appropriate.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    221
    221
    
            return;

  

    222
    222
    

  

    223
    223
    
        last_game_age = age;

  

    
    224
    
        update_alien_happiness();

  

    224
    225
    
        temporarily_disable('#play-game');

  

    225
    226
    
    }

  

    226
    227
    

  

  

  









21.6
    Make Tamagotchi look unhappy if too unhappy



We can turn the smile upside down into a sad face if the Tamagotchi is
too unhappy.  We check this first, so if the Tamagotchi is both very
unhappy and bored, it looks sad.



We're already calling draw_alien() when the happiness variable might
change, because this is tied in with the bored variable.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    57
    57
    
        ctx.lineWidth = 5.0;

  

    58
    58
    
        ctx.lineCap = 'round';

  

    59
    59
    
        ctx.beginPath();

  

    60
    
    
        if (bored)

  

    
    60
    
        if (happiness < 50)

  

    
    61
    
        {

  

    
    62
    
            ctx.moveTo(200, 150);

  

    
    63
    
            ctx.lineTo(220, 130);

  

    
    64
    
            ctx.lineTo(260, 130);

  

    
    65
    
            ctx.lineTo(280, 150);

  

    
    66
    
        }

  

    
    67
    
        else if (bored)

  

    61
    68
    
        {

  

    62
    69
    
            ctx.moveTo(200, 145);

  

    63
    70
    
            ctx.lineTo(280, 145);

  

  

  









21.7
    Draw hole in Tamagotchi's belly to show hunger



Draw a circle on top of the main circle, to make the Tamagotchi look
hollow-bellied.  The hungrier it is, the bigger the 'hole'.  The rgb()
values match the background-color: #ffd style for the game element
that we used in the CSS.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    50
    50
    
        draw_circle(240, 110, 80);

  

    51
    51
    
        draw_circle(240, 300, 150);

  

    52
    52
    

  

    
    53
    
        ctx.fillStyle = 'rgb(255, 255, 221)';

  

    
    54
    
        draw_circle(240, 300, hungriness);

  

    
    55
    

  

    53
    56
    
        ctx.fillStyle = 'black';

  

    54
    57
    
        draw_circle(210, 90, 10);

  

    55
    58
    
        draw_circle(270, 90, 10);

  

  

  









21.8
    Re-draw Tamagotchi when hungriness changes



To make sure the Tamagotchi's appearance matches how hungry it is, we
need to re-draw it every time we change the hungriness variable.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    106
    106
    
    {

  

    107
    107
    
        hungriness += 5;

  

    108
    108
    
        $('#hungriness').html(hungriness);

  

    
    109
    
        draw_alien();

  

    109
    110
    
    }

  

    110
    111
    

  

    111
    112
    
    function make_alien_sicker(health_lost)

  

  
⋮

  

  

    179
    180
    
        }

  

    180
    181
    

  

    181
    182
    
        $('#hungriness').html(hungriness);

  

    
    183
    
        draw_alien();

  

    182
    184
    
    }

  

    183
    185
    

  

    184
    186
    
    function temporarily_disable(button_id)

  

  

  















  
<

  
>



22
    Minor gameplay adjustments



After a bit of playing, it seems the game would be better with a few
tweaks:



    

  • The Tamagotchi gets bored too easily, so adjust the value saying how
often it must be played with.
    • 

  • The Sweets button doesn't really add much to gameplay, so make it so
sweets also make the Tamagotchi happier (as well as less hungry and
less healthy).
    • 

  • If the Tamagotchi is sick, it should become less happy.
    • 







  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    154
    154
    

  

    155
    155
    
    function update_alien_happiness()

  

    156
    156
    
    {

  

    157
    
    
        bored = ((age - last_game_age) >= 3);

  

    
    157
    
        bored = ((age - last_game_age) >= 5);

  

    
    158
    

  

    
    159
    
        if (health < 75)

  

    
    160
    
        {

  

    
    161
    
            if (happiness > 40)

  

    
    162
    
            {

  

    
    163
    
                happiness -= 5;

  

    
    164
    
            }

  

    
    165
    
        }

  

    158
    166
    

  

    159
    167
    
        if (bored)

  

    160
    168
    
        {

  

  
⋮

  

  

    210
    218
    
        feed_alien(10);

  

    211
    219
    
        temporarily_disable('#feed-sweets');

  

    212
    220
    

  

    
    221
    
        // Sweets make the Tamagotchi a bit happier:

  

    
    222
    
        happiness += 10;

  

    
    223
    
        if (happiness > 100) happiness = 100;

  

    
    224
    
        $('#happiness').html(happiness);

  

    
    225
    

  

    213
    226
    
        // Sweets are not healthy:

  

    214
    227
    
        make_alien_sicker(5);

  

    215
    228
    
    }

  

  

  









22.1
    Make Tamagotchi get bored less readily



Make it so 5 game ticks can go by before the Tamagotchi gets bored.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    154
    154
    

  

    155
    155
    
    function update_alien_happiness()

  

    156
    156
    
    {

  

    157
    
    
        bored = ((age - last_game_age) >= 3);

  

    
    157
    
        bored = ((age - last_game_age) >= 5);

  

    158
    158
    

  

    159
    159
    
        if (bored)

  

    160
    160
    
        {

  

  

  









22.2
    Sweets make Tamagotchi a bit happier



We can get away without having to call draw_alien(), because we know
that make_alien_sicker() will do that for us.  This is quite a fragile
approach, however.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    210
    210
    
        feed_alien(10);

  

    211
    211
    
        temporarily_disable('#feed-sweets');

  

    212
    212
    

  

    
    213
    
        // Sweets make the Tamagotchi a bit happier:

  

    
    214
    
        happiness += 10;

  

    
    215
    
        if (happiness > 100) happiness = 100;

  

    
    216
    
        $('#happiness').html(happiness);

  

    
    217
    

  

    213
    218
    
        // Sweets are not healthy:

  

    214
    219
    
        make_alien_sicker(5);

  

    215
    220
    
    }

  

  

  









22.3
    Being unhealthy makes the Tamagotchi sadder



If the Tamagotchi is unhealthy, it gets sadder, but only down to a
certain level of happiness.  We don't have to check happiness remains
non-negative, because we only adjust it if it is bigger than 40 to start
with.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    156
    156
    
    {

  

    157
    157
    
        bored = ((age - last_game_age) >= 5);

  

    158
    158
    

  

    
    159
    
        if (health < 75)

  

    
    160
    
        {

  

    
    161
    
            if (happiness > 40)

  

    
    162
    
            {

  

    
    163
    
                happiness -= 5;

  

    
    164
    
            }

  

    
    165
    
        }

  

    
    166
    

  

    159
    167
    
        if (bored)

  

    160
    168
    
        {

  

    161
    169
    
            happiness -= 5;

  

  

  















  
<

  
>



23
    Simplify display-update logic



The current logic for making sure the display is up-to-date is a bit
fragile and scattered.  Every time we change a variable, we update that
part of the display.  Simpler would be to update the whole display after
anything might have changed.



We collect all the display-update code into one new function,
update_display(), and call it whenever things might have changed.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    102
    102
    
        window.setTimeout(time_goes_by, 2000);

  

    103
    103
    
    }

  

    104
    104
    

  

    105
    
    
    function make_alien_hungrier()

  

    
    105
    
    function update_display()

  

    106
    106
    
    {

  

    107
    
    
        hungriness += 5;

  

    108
    107
    
        $('#hungriness').html(hungriness);

  

    
    108
    
        $('#health').html(health);

  

    
    109
    
        $('#happiness').html(happiness);

  

    
    110
    
        $('#age').html(age);

  

    109
    111
    
        draw_alien();

  

    
    112
    
        if ( ! alien_still_growing())

  

    
    113
    
            game_over_won();

  

    
    114
    
        else if ( ! alien_is_alive())

  

    
    115
    
            game_over_lost();

  

    
    116
    
    }

  

    
    117
    

  

    
    118
    
    function make_alien_hungrier()

  

    
    119
    
    {

  

    
    120
    
        hungriness += 5;

  

    110
    121
    
    }

  

    111
    122
    

  

    112
    123
    
    function make_alien_sicker(health_lost)

  

  
⋮

  

  

    116
    127
    
        {

  

    117
    128
    
            health = 0;

  

    118
    129
    
        }

  

    119
    
    

  

    120
    
    
        $('#health').html(health);

  

    121
    
    
        draw_alien();

  

    122
    
    

  

    123
    
    
        if ( ! alien_is_alive())

  

    124
    
    
        {

  

    125
    
    
            game_over_lost();

  

    126
    
    
        }

  

    127
    130
    
    }

  

    128
    131
    

  

    129
    132
    
    function maybe_make_alien_sicker()

  

  
⋮

  

  

    141
    144
    
        {

  

    142
    145
    
            health = 100;

  

    143
    146
    
        }

  

    144
    
    

  

    145
    
    
        $('#health').html(health);

  

    146
    
    
        draw_alien();

  

    147
    147
    
    }

  

    148
    148
    

  

    149
    149
    
    function make_alien_older()

  

    150
    150
    
    {

  

    151
    151
    
        age += 1;

  

    152
    
    
        $('#age').html(age);

  

    153
    152
    
    }

  

    154
    153
    

  

    155
    154
    
    function update_alien_happiness()

  

  
⋮

  

  

    174
    173
    
            happiness += 2;

  

    175
    174
    
            if (happiness > 100) happiness = 100;

  

    176
    175
    
        }

  

    177
    
    

  

    178
    
    
        $('#happiness').html(happiness);

  

    179
    
    
        draw_alien();

  

    180
    176
    
    }

  

    181
    177
    

  

    182
    178
    
    function feed_alien(hungriness_reduction)

  

  
⋮

  

  

    186
    182
    
        {

  

    187
    183
    
            hungriness = 0;

  

    188
    184
    
        }

  

    189
    
    

  

    190
    
    
        $('#hungriness').html(hungriness);

  

    191
    
    
        draw_alien();

  

    192
    185
    
    }

  

    193
    186
    

  

    194
    187
    
    function temporarily_disable(button_id)

  

  
⋮

  

  

    206
    199
    

  

    207
    200
    
        feed_alien(20);

  

    208
    201
    
        temporarily_disable('#feed-bread');

  

    
    202
    

  

    
    203
    
        update_display();

  

    209
    204
    
    }

  

    210
    205
    

  

    211
    206
    
    $('#feed-bread').click(feed_alien_some_bread);

  

  
⋮

  

  

    221
    216
    
        // Sweets make the Tamagotchi a bit happier:

  

    222
    217
    
        happiness += 10;

  

    223
    218
    
        if (happiness > 100) happiness = 100;

  

    224
    
    
        $('#happiness').html(happiness);

  

    225
    219
    

  

    226
    220
    
        // Sweets are not healthy:

  

    227
    221
    
        make_alien_sicker(5);

  

    
    222
    

  

    
    223
    
        update_display();

  

    228
    224
    
    }

  

    229
    225
    

  

    230
    226
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  
⋮

  

  

    236
    232
    

  

    237
    233
    
        make_healthier();

  

    238
    234
    
        temporarily_disable('#give-medicine');

  

    
    235
    

  

    
    236
    
        update_display();

  

    239
    237
    
    }

  

    240
    238
    

  

    241
    239
    
    $('#give-medicine').click(give_alien_medicine);

  

  
⋮

  

  

    248
    246
    
        last_game_age = age;

  

    249
    247
    
        update_alien_happiness();

  

    250
    248
    
        temporarily_disable('#play-game');

  

    
    249
    

  

    
    250
    
        update_display();

  

    251
    251
    
    }

  

    252
    252
    

  

    253
    253
    
    $('#play-game').click(play_game);

  

  
⋮

  

  

    272
    272
    
        make_alien_older();

  

    273
    273
    
        update_alien_happiness();

  

    274
    274
    

  

    275
    
    
        if ( ! alien_still_growing())

  

    276
    
    
        {

  

    277
    
    
            game_over_won();

  

    278
    
    
        }

  

    279
    
    
        else if ( ! alien_is_alive())

  

    280
    
    
        {

  

    281
    
    
            game_over_lost();

  

    282
    
    
        }

  

    283
    
    
        else

  

    284
    
    
        {

  

    285
    
    
            window.setTimeout(time_goes_by, 2000);

  

    286
    
    
        }

  

    
    275
    
        update_display();

  

    
    276
    

  

    
    277
    
        window.setTimeout(time_goes_by, 2000);

  

    287
    278
    
    }

  

    288
    279
    
});

  

  

  









23.1
    update_display(): Add



Collect the various updates to the different bits of the webpage
together into one function.  When we call this function, many parts will
not have changed, so we will be doing more work than required.  But
computers are fast these days, and making the code simpler to understand
is usually more important than having it run as quickly as possible.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    102
    102
    
        window.setTimeout(time_goes_by, 2000);

  

    103
    103
    
    }

  

    104
    104
    

  

    
    105
    
    function update_display()

  

    
    106
    
    {

  

    
    107
    
        $('#hungriness').html(hungriness);

  

    
    108
    
        $('#health').html(health);

  

    
    109
    
        $('#happiness').html(happiness);

  

    
    110
    
        $('#age').html(age);

  

    
    111
    
        draw_alien();

  

    
    112
    
        if ( ! alien_still_growing())

  

    
    113
    
            game_over_won();

  

    
    114
    
        else if ( ! alien_is_alive())

  

    
    115
    
            game_over_lost();

  

    
    116
    
    }

  

    
    117
    

  

    105
    118
    
    function make_alien_hungrier()

  

    106
    119
    
    {

  

    107
    120
    
        hungriness += 5;

  

  

  









23.2
    make_alien_hungrier(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    118
    118
    
    function make_alien_hungrier()

  

    119
    119
    
    {

  

    120
    120
    
        hungriness += 5;

  

    121
    
    
        $('#hungriness').html(hungriness);

  

    122
    
    
        draw_alien();

  

    123
    121
    
    }

  

    124
    122
    

  

    125
    123
    
    function make_alien_sicker(health_lost)

  

  

  









23.3
    make_alien_sicker(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    127
    127
    
        {

  

    128
    128
    
            health = 0;

  

    129
    129
    
        }

  

    130
    
    

  

    131
    
    
        $('#health').html(health);

  

    132
    
    
        draw_alien();

  

    133
    
    

  

    134
    
    
        if ( ! alien_is_alive())

  

    135
    
    
        {

  

    136
    
    
            game_over_lost();

  

    137
    
    
        }

  

    138
    130
    
    }

  

    139
    131
    

  

    140
    132
    
    function maybe_make_alien_sicker()

  

  

  









23.4
    make_healthier(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    144
    144
    
        {

  

    145
    145
    
            health = 100;

  

    146
    146
    
        }

  

    147
    
    

  

    148
    
    
        $('#health').html(health);

  

    149
    
    
        draw_alien();

  

    150
    147
    
    }

  

    151
    148
    

  

    152
    149
    
    function make_alien_older()

  

  

  









23.5
    make_alien_older(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    149
    149
    
    function make_alien_older()

  

    150
    150
    
    {

  

    151
    151
    
        age += 1;

  

    152
    
    
        $('#age').html(age);

  

    153
    152
    
    }

  

    154
    153
    

  

    155
    154
    
    function update_alien_happiness()

  

  

  









23.6
    update_alien_happiness(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    173
    173
    
            happiness += 2;

  

    174
    174
    
            if (happiness > 100) happiness = 100;

  

    175
    175
    
        }

  

    176
    
    

  

    177
    
    
        $('#happiness').html(happiness);

  

    178
    
    
        draw_alien();

  

    179
    176
    
    }

  

    180
    177
    

  

    181
    178
    
    function feed_alien(hungriness_reduction)

  

  

  









23.7
    feed_alien(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    182
    182
    
        {

  

    183
    183
    
            hungriness = 0;

  

    184
    184
    
        }

  

    185
    
    

  

    186
    
    
        $('#hungriness').html(hungriness);

  

    187
    
    
        draw_alien();

  

    188
    185
    
    }

  

    189
    186
    

  

    190
    187
    
    function temporarily_disable(button_id)

  

  

  









23.8
    feed_alien_sweets(): Simplify



Remove display-update code.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    214
    214
    
        // Sweets make the Tamagotchi a bit happier:

  

    215
    215
    
        happiness += 10;

  

    216
    216
    
        if (happiness > 100) happiness = 100;

  

    217
    
    
        $('#happiness').html(happiness);

  

    218
    217
    

  

    219
    218
    
        // Sweets are not healthy:

  

    220
    219
    
        make_alien_sicker(5);

  

  

  









23.9
    Call update_display() where required



Every part of the code which changes the game's state now needs to call
update_display().  These parts are the 'time goes by' code, and any
user-driven behaviour (button clicks):



    

  • feed_alien_some_bread()
    • 

  • feed_alien_sweets()
    • 

  • give_alien_medicine()
    • 

  • play_game()
    • 

  • time_goes_by()
    • 




We have temporarily broken the timer code, because it was tied up with
the display update for win/lose.  We'll fix that shortly.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    199
    199
    

  

    200
    200
    
        feed_alien(20);

  

    201
    201
    
        temporarily_disable('#feed-bread');

  

    
    202
    

  

    
    203
    
        update_display();

  

    202
    204
    
    }

  

    203
    205
    

  

    204
    206
    
    $('#feed-bread').click(feed_alien_some_bread);

  

  
⋮

  

  

    217
    219
    

  

    218
    220
    
        // Sweets are not healthy:

  

    219
    221
    
        make_alien_sicker(5);

  

    
    222
    

  

    
    223
    
        update_display();

  

    220
    224
    
    }

  

    221
    225
    

  

    222
    226
    
    $('#feed-sweets').click(feed_alien_sweets);

  

  
⋮

  

  

    228
    232
    

  

    229
    233
    
        make_healthier();

  

    230
    234
    
        temporarily_disable('#give-medicine');

  

    
    235
    

  

    
    236
    
        update_display();

  

    231
    237
    
    }

  

    232
    238
    

  

    233
    239
    
    $('#give-medicine').click(give_alien_medicine);

  

  
⋮

  

  

    240
    246
    
        last_game_age = age;

  

    241
    247
    
        update_alien_happiness();

  

    242
    248
    
        temporarily_disable('#play-game');

  

    
    249
    

  

    
    250
    
        update_display();

  

    243
    251
    
    }

  

    244
    252
    

  

    245
    253
    
    $('#play-game').click(play_game);

  

  
⋮

  

  

    264
    272
    
        make_alien_older();

  

    265
    273
    
        update_alien_happiness();

  

    266
    274
    

  

    267
    
    
        if ( ! alien_still_growing())

  

    268
    
    
        {

  

    269
    
    
            game_over_won();

  

    270
    
    
        }

  

    271
    
    
        else if ( ! alien_is_alive())

  

    272
    
    
        {

  

    273
    
    
            game_over_lost();

  

    274
    
    
        }

  

    275
    
    
        else

  

    276
    
    
        {

  

    277
    
    
            window.setTimeout(time_goes_by, 2000);

  

    278
    
    
        }

  

    
    275
    
        update_display();

  

    279
    276
    
    }

  

    280
    277
    
});

  

  

  









23.10
    Re-call time_goes_by() while game still running



The first thing we do in time_goes_by() is to leave the function if
the game has stopped (through win or loss), so we should always
re-schedule a timer if we reach the end of this function.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    273
    273
    
        update_alien_happiness();

  

    274
    274
    

  

    275
    275
    
        update_display();

  

    
    276
    

  

    
    277
    
        window.setTimeout(time_goes_by, 2000);

  

    276
    278
    
    }

  

    277
    279
    
});

  

  

  















  
<

  
>



24
    Add 'sweet wrappers' features



When the Tamagotchi eats sweets, it drops the wrappers on the floor of
its room.  The untidiness makes it unhappy, and it gets unhappier more
quickly the more wrappers are littering its room.  To allow the player
to fix this, we add a Sweep button, which clears up all the wrappers.






  RESULT
  SOURCE







+


-



  
  

  
  
code.js

  
  
  

  

    9
    9
    
    var bored = false;

  

    10
    10
    
    var last_game_age = 0;

  

    11
    11
    
    var age = 0;

  

    
    12
    
    var sweet_wrappers = [];

  

    12
    13
    

  

    13
    14
    
    function alien_is_alive()

  

    14
    15
    
    {

  

  
⋮

  

  

    80
    81
    
            ctx.lineTo(280, 130);

  

    81
    82
    
        }

  

    82
    83
    
        ctx.stroke();

  

    
    84
    

  

    
    85
    
        ctx.fillStyle = 'red';

  

    
    86
    
        sweet_wrappers.forEach(function(w) {

  

    
    87
    
            ctx.fillRect(w[0], w[1], 50, 20);

  

    
    88
    
        });

  

    83
    89
    
    }

  

    84
    90
    

  

    85
    91
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  
⋮

  

  

    153
    159
    

  

    154
    160
    
    function update_alien_happiness()

  

    155
    161
    
    {

  

    
    162
    
        happiness -= sweet_wrappers.length;

  

    
    163
    
        if (happiness < 0)

  

    
    164
    
        {

  

    
    165
    
            happiness = 0;

  

    
    166
    
        }

  

    
    167
    

  

    156
    168
    
        bored = ((age - last_game_age) >= 5);

  

    157
    169
    

  

    158
    170
    
        if (health < 75)

  

  
⋮

  

  

    220
    232
    
        // Sweets are not healthy:

  

    221
    233
    
        make_alien_sicker(5);

  

    222
    234
    

  

    
    235
    
        add_sweet_wrapper();

  

    
    236
    

  

    223
    237
    
        update_display();

  

    224
    238
    
    }

  

    225
    239
    

  

  
⋮

  

  

    252
    266
    

  

    253
    267
    
    $('#play-game').click(play_game);

  

    254
    268
    

  

    
    269
    
    function sweep_up_wrappers()

  

    
    270
    
    {

  

    
    271
    
        sweet_wrappers = [];

  

    
    272
    
        temporarily_disable('#sweep-up');

  

    
    273
    

  

    
    274
    
        update_display();

  

    
    275
    
    }

  

    
    276
    

  

    
    277
    
    $('#sweep-up').click(sweep_up_wrappers);

  

    
    278
    

  

    
    279
    
    function add_sweet_wrapper()

  

    
    280
    
    {

  

    
    281
    
        var wrapper_x = 10 + Math.random() * 420;

  

    
    282
    
        var wrapper_y = 240 + Math.random() * 200;

  

    
    283
    

  

    
    284
    
        var wrapper = [wrapper_x, wrapper_y];

  

    
    285
    

  

    
    286
    
        sweet_wrappers.push(wrapper);

  

    
    287
    
    }

  

    
    288
    

  

    255
    289
    
    function game_over_lost()

  

    256
    290
    
    {

  

    257
    291
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  
  

  
  
page.html

  
  
  

  

    27
    27
    
      <button id="feed-sweets">Sweets</button>

  

    28
    28
    
      <button id="give-medicine">Medicine</button>

  

    29
    29
    
      <button id="play-game">Game</button>

  

    
    30
    
      <button id="sweep-up">Sweep</button>

  

    30
    31
    
    </p>

  

    31
    32
    

  

    32
    33
    
    <p id="messages"></p>

  

  

  
  

  
  
style.css

  
  
  

  

    5
    5
    
#levels { display: none; position: absolute; left: 520px; top: 0px; }

  

    6
    6
    
#action-buttons { display: none;

  

    7
    7
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    8
    
    
#action-buttons button { margin: 24px; }

  

    
    8
    
#action-buttons button { margin: 16px; }

  

    9
    9
    
#age-para { font-weight: bold; }

  

  

  









24.1
    Add variable to remember where wrappers are



JavaScript variables can be lists, properly known in JavaScript
as arrays, which means they can hold more than one object.  Scratch
has the same idea.  At the start of the game, there are no wrappers, so
we have a list with nothing in it.  This is known as an empty list.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    9
    9
    
    var bored = false;

  

    10
    10
    
    var last_game_age = 0;

  

    11
    11
    
    var age = 0;

  

    
    12
    
    var sweet_wrappers = [];

  

    12
    13
    

  

    13
    14
    
    function alien_is_alive()

  

    14
    15
    
    {

  

  

  









24.2
    Temporarily add some wrappers for testing



But!  For testing how we draw the wrappers, we want to start off by
putting some wrappers in the list.  How are we going to say where the
wrappers are?  To say where one wrapper is, we need its x and y
coordinates, so we'll represent each wrapper as a two-entry list.  We'll
make up places for two test wrappers.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    9
    9
    
    var bored = false;

  

    10
    10
    
    var last_game_age = 0;

  

    11
    11
    
    var age = 0;

  

    12
    
    
    var sweet_wrappers = [];

  

    
    12
    
    var sweet_wrappers = [ [280, 300], [140, 320] ];

  

    13
    13
    

  

    14
    14
    
    function alien_is_alive()

  

    15
    15
    
    {

  

  

  









24.3
    Draw the wrappers



We have a draw_alien() function, which we'll give the job of drawing
the wrappers, even though they're not really part of the alien.



We want to draw each wrapper, and one way to do this in JavaScript is to
use the forEach() method on the list of things.



In this code, the w variable is set (by JavaScript) to be equal to
each of the things in sweet_wrappers in turn, and the fillRect() is
done for each one.  Remember that each thing in the list is itself a
list, with the x and y coordinates as its two entries.  You get
things out of this list with w[0] to get the first, and w[1] for the
second.  JavaScript counts list entries starting from zero.  Here I've
just drawn a red rectangular sweet wrapper but you can do something more
complicated if you like.



If you try the game now, you should see the two test sweet-wrappers we
set up.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    81
    81
    
            ctx.lineTo(280, 130);

  

    82
    82
    
        }

  

    83
    83
    
        ctx.stroke();

  

    
    84
    

  

    
    85
    
        ctx.fillStyle = 'red';

  

    
    86
    
        sweet_wrappers.forEach(function(w) {

  

    
    87
    
            ctx.fillRect(w[0], w[1], 50, 20);

  

    
    88
    
        });

  

    84
    89
    
    }

  

    85
    90
    

  

    86
    91
    
    $('#hatch').click(draw_alien_fade_instructions);

  

  

  









24.4
    Remove temporary testing sweet-wrappers



Now we've got the drawing code working, we can remove the temporary
sweet-wrappers, and start off with an empty sweet_wrappers list.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    9
    9
    
    var bored = false;

  

    10
    10
    
    var last_game_age = 0;

  

    11
    11
    
    var age = 0;

  

    12
    
    
    var sweet_wrappers = [ [280, 300], [140, 320] ];

  

    
    12
    
    var sweet_wrappers = [];

  

    13
    13
    

  

    14
    14
    
    function alien_is_alive()

  

    15
    15
    
    {

  

  

  









24.5
    Make up random position for a new wrapper



When the Tamagotchi gets a sweet, we'll need to make up a random
position for it to drop the wrapper.  We'll use the same Math.random()
function as we've done before (when we were randomly making it sick).
But this time we need to turn our random number between 0 and 1 into a
sensible position on the canvas, which we do by multiplying by the range
of possible values, then adding the smallest desired value.



Here's I've made it so the wrappers will only appear in the bottom half
of the screen, by making wrapper_y be at least 240.



So far this function makes up the x and y coordinates of the
wrapper's position, but doesn't yet add the new wrapper to the list.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    258
    258
    

  

    259
    259
    
    $('#play-game').click(play_game);

  

    260
    260
    

  

    
    261
    
    function add_sweet_wrapper()

  

    
    262
    
    {

  

    
    263
    
        var wrapper_x = 10 + Math.random() * 420;

  

    
    264
    
        var wrapper_y = 240 + Math.random() * 200;

  

    
    265
    

  

    
    266
    
        // TODO: Add the new wrapper to the list.

  

    
    267
    
    }

  

    
    268
    

  

    261
    269
    
    function game_over_lost()

  

    262
    270
    
    {

  

    263
    271
    
        $('#messages').html('Oh no!  Your Tamagotchi died!');

  

  

  









24.6
    Combine x- and y-coordinates into two-element list



Our sweet_wrappers variable is a list, where each thing on that list
is itself a two-element list, for the x and y coordinates of the
wrapper.  We'll create that two-element list now, using the [...]
notation to make a new list with the required two elements.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    263
    263
    
        var wrapper_x = 10 + Math.random() * 420;

  

    264
    264
    
        var wrapper_y = 240 + Math.random() * 200;

  

    265
    265
    

  

    
    266
    
        var wrapper = [wrapper_x, wrapper_y];

  

    
    267
    

  

    266
    268
    
        // TODO: Add the new wrapper to the list.

  

    267
    269
    
    }

  

    268
    270
    

  

  

  









24.7
    Add new sweet-wrapper location to list



Finally, we use the push() method to add a new item to the end of our
sweet_wrappers array.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    265
    265
    

  

    266
    266
    
        var wrapper = [wrapper_x, wrapper_y];

  

    267
    267
    

  

    268
    
    
        // TODO: Add the new wrapper to the list.

  

    
    268
    
        sweet_wrappers.push(wrapper);

  

    269
    269
    
    }

  

    270
    270
    

  

    271
    271
    
    function game_over_lost()

  

  

  









24.8
    Add a sweet-wrapper when feeding sweets



To actually add a wrapper, we need to call our new add_sweet_wrapper()
function as part of feed_alien_sweets().



Because we recently re-organised the code to do all display updates
inside update_display(), the wrappers get drawn automatically.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    226
    226
    
        // Sweets are not healthy:

  

    227
    227
    
        make_alien_sicker(5);

  

    228
    228
    

  

    
    229
    
        add_sweet_wrapper();

  

    
    230
    

  

    229
    231
    
        update_display();

  

    230
    232
    
    }

  

    231
    233
    

  

  

  









24.9
    Wrappers make the Tamagotchi unhappy



The messier its home is, the quicker it becomes unhappy.  We'll subtract
happiness points equal to the number of wrappers littering the place.
To do this, we use the length property of sweet_wrappers, which
tells us how many things are in the array.



As usual, we have to make sure that we don't leave the happiness
negative.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    159
    159
    

  

    160
    160
    
    function update_alien_happiness()

  

    161
    161
    
    {

  

    
    162
    
        happiness -= sweet_wrappers.length;

  

    
    163
    
        if (happiness < 0)

  

    
    164
    
        {

  

    
    165
    
            happiness = 0;

  

    
    166
    
        }

  

    
    167
    

  

    162
    168
    
        bored = ((age - last_game_age) >= 5);

  

    163
    169
    

  

    164
    170
    
        if (health < 75)

  

  

  









24.10
    Add button to sweep up



The player needs a way to tidy up the sweet wrappers, so add a Sweep
button.






  RESULT
  SOURCE







  
  

  
  
page.html

  
  
  

  

    27
    27
    
      <button id="feed-sweets">Sweets</button>

  

    28
    28
    
      <button id="give-medicine">Medicine</button>

  

    29
    29
    
      <button id="play-game">Game</button>

  

    
    30
    
      <button id="sweep-up">Sweep</button>

  

    30
    31
    
    </p>

  

    31
    32
    

  

    32
    33
    
    <p id="messages"></p>

  

  

  









24.11
    Tighten spacing of action buttons



Depending on your browser zoom and other styling you've chosen for the
buttons, there might now be too many buttons to fit on one row.  Adjust
the styling to put less space by the buttons, allowing them to fit.






  RESULT
  SOURCE







  
  

  
  
style.css

  
  
  

  

    5
    5
    
#levels { display: none; position: absolute; left: 520px; top: 0px; }

  

    6
    6
    
#action-buttons { display: none;

  

    7
    7
    
                  width: 480px; background-color: #ddf; text-align: center; }

  

    8
    
    
#action-buttons button { margin: 24px; }

  

    
    8
    
#action-buttons button { margin: 16px; }

  

    9
    9
    
#age-para { font-weight: bold; }

  

  

  









24.12
    sweep_up_wrappers(): Add



When the player clicks the button, we're going to want to remove all the
sweet wrappers.  The easiest way to do this is just to make
sweet_wrappers be a fresh empty array.



We also need to temporarily disable the Sweep button, and also update
the display, to make sure the clean room is immediately shown.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    266
    266
    

  

    267
    267
    
    $('#play-game').click(play_game);

  

    268
    268
    

  

    
    269
    
    function sweep_up_wrappers()

  

    
    270
    
    {

  

    
    271
    
        sweet_wrappers = [];

  

    
    272
    
        temporarily_disable('#sweep-up');

  

    
    273
    

  

    
    274
    
        update_display();

  

    
    275
    
    }

  

    
    276
    

  

    269
    277
    
    function add_sweet_wrapper()

  

    270
    278
    
    {

  

    271
    279
    
        var wrapper_x = 10 + Math.random() * 420;

  

  

  









24.13
    Connect sweep_up_wrappers() to button



Finally, say that we want our new sweep_up_wrappers() function to be
run when the player clicks the Sweep button.






  RESULT
  SOURCE







  
  

  
  
code.js

  
  
  

  

    274
    274
    
        update_display();

  

    275
    275
    
    }

  

    276
    276
    

  

    
    277
    
    $('#sweep-up').click(sweep_up_wrappers);

  

    
    278
    

  

    277
    279
    
    function add_sweet_wrapper()

  

    278
    280
    
    {

  

    279
    281
    
        var wrapper_x = 10 + Math.random() * 420;

  

  

  

















  
This is a
    ‘literate git’
    interactive document.