1 | $(document).ready(function() | |
2 | { | |
3 | // Your code JavaScript goes here. | |
4 | }); |
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> |
1 | body { background-color: #eee; margin: 24px; } | |
2 | h1 { color: red; } | |
3 | #game { background-color: #ffd; } |
1 | $(document).ready(function() | |
2 | { | |
3 | // Your code JavaScript goes here. | |
4 | }); |
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> |
1 | /* Your web styling CSS goes here. */ |
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> |
1 | /* Your web styling CSS goes here. */ | |
1 | h1 { color: red; } |
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> |
1 | body { background-color: #eee; } | |
1 | 2 | h1 { color: red; } |
1 | 1 | body { background-color: #eee; } |
2 | 2 | h1 { color: red; } |
3 | #game { background-color: #ffd; } |
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 | }); |
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> |
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 | }); |
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 | }); |
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> |
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 | }); |
draw_alien()
: Add8 | 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 | }); |
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 | }); |
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> |
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> |
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> |
fade_out_hatch_instructions()
: Add23 | 23 | } |
24 | 24 | |
25 | 25 | $('#hatch').click(draw_alien); |
26 | ||
27 | function fade_out_hatch_instructions() | |
28 | { | |
29 | $('#hatch-instructions').fadeOut(); | |
30 | } | |
26 | 31 | }); |
draw_alien_fade_instructions()
: Add28 | 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 | }); |
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); |
draw_circle()
: Add3 | 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); |
draw_circle()
to draw the egg11 | 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 | { |
draw_circle()
to draw the hatched Tamagotchi18 | 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); |
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() |
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> |
1 | 1 | body { background-color: #eee; margin: 24px; } |
2 | 2 | h1 { color: red; } |
3 | 3 | #game { background-color: #ffd; } |
4 | #levels { display: none } |
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> |
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> |
1 | 1 | body { background-color: #eee; margin: 24px; } |
2 | 2 | h1 { color: red; } |
3 | 3 | #game { background-color: #ffd; } |
4 | #levels { display: none } |
fade_in_levels_display()
: Add29 | 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(); |
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); |
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> |
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> |
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(); |
make_alien_hungrier()
: Add5 | 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(); |
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 | }); |
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> |
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); |
make_alien_hungrier()
: Move definition lower5 | 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 | }); |
time_goes_by()
: Add47 | 47 | hungriness += 5; |
48 | 48 | $('#hungriness').html(hungriness); |
49 | 49 | } |
50 | ||
51 | function time_goes_by() | |
52 | { | |
53 | make_alien_hungrier(); | |
54 | } | |
50 | 55 | }); |
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() |
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 | }); |
alien_is_alive()
: Add5 | 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(); |
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 | }); |
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> |
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(); |
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> |
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; } |
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> |
2 | 2 | h1 { color: red; } |
3 | 3 | #game { background-color: #ffd; } |
4 | 4 | #levels { display: none } |
5 | #action-buttons { display: none; } |
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() |
fade_in_levels_display()
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(); |
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; } |
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; } |
feed_alien_some_bread()
: Add55 | 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(); |
feed_alien_some_bread()
on button click61 | 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(); |
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(); |
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> |
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> |
feed_alien_sweets()
: Add68 | 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 | } | |
81 | ||
71 | 82 | function time_goes_by() |
72 | 83 | { |
73 | 84 | make_alien_hungrier(); |
feed_alien_sweets()
79 | 79 | $('#hungriness').html(hungriness); |
80 | 80 | } |
81 | 81 | |
82 | $('#feed-sweets').click(feed_alien_sweets); | |
83 | ||
82 | 84 | function time_goes_by() |
83 | 85 | { |
84 | 86 | make_alien_hungrier(); |
feed_alien()
: Add55 | 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; |
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); |
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); |
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); |
enable_bread_button()
: Add55 | 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; |
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); |
temporarily_disable()
: Add71 | 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); |
feed_alien_some_bread()
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); |
enable_bread_button()
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; |
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 | }); |
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 | { |
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); |
game_over_lost()
: Add97 | 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(); |
game_over_lost()
function112 | 112 | } |
113 | 113 | else |
114 | 114 | { |
115 | $('#messages').html('Oh no! Your Tamagotchi died!'); | |
115 | game_over_lost(); | |
116 | 116 | } |
117 | 117 | } |
118 | 118 | }); |
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) |
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); |
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()) |
game_is_running()
: Add11 | 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(); |
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()) |
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 | { |
maybe_make_alien_sicker()
: Add skeleton61 | 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; |
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 |
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 | { |
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!'); |
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> |
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> |
make_healthier()
: Add80 | 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; |
give_alien_medicine()
: Add141 | 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!'); |
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 | } |
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); |
make_alien_sicker()
: Add61 | 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) |
maybe_make_alien_sicker()
: Simplify81 | 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 |
feed_alien_sweets()
: Simplify135 | 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); |
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 | }); |
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> |
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; } |
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> |
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; } |
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 | { |
make_alien_older()
: Add97 | 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; |
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 | { |
game_over_won()
: Add163 | 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()) |
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 | }); |
alien_still_growing()
: Add12 | 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(); |
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) |
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> |
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; } |
<div>
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> |
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; } |
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 | { |
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> |
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() |
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() |
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() |
update_alien_happiness()
: Add111 | 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; |
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 | { |
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> |
play_game()
: Add184 | 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!'); |
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 | } |
play_game()
function to button193 | 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!'); |
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); |
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); |
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); |
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 |
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); |
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() |
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 |
157 | 157 | } |
158 | 158 | |
159 | 159 | $('#happiness').html(happiness); |
160 | draw_alien(); | |
160 | 161 | } |
161 | 162 | |
162 | 163 | function feed_alien(hungriness_reduction) |
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 |
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); |
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); |
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) |
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 | } |
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 | { |
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 | } |
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 | }); |
update_display()
: Add102 | 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; |
make_alien_hungrier()
: Simplify118 | 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) |
make_alien_sicker()
: Simplify127 | 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() |
make_healthier()
: Simplify144 | 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() |
make_alien_older()
: Simplify149 | 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() |
update_alien_happiness()
: Simplify173 | 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) |
feed_alien()
: Simplify182 | 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) |
feed_alien_sweets()
: Simplify214 | 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); |
update_display()
where required199 | 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 | }); |
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!'); |
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> |
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; } |
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 | { |
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 | { |
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); |
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 | { |
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!'); |
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 |
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() |
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 |
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) |
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> |
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; } |
sweep_up_wrappers()
: Add266 | 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; |