-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (97 loc) · 4.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head id='heading'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creature!</title>
<link rel="stylesheet" href="ui.css" />
<!--
creature.js creates the creature!
animations.js tells the program how to draw and animate the creature.
render.js draws the creature! You'll need to be good at math to edit this code.
init.js starts the program. You'll need to be good at JavaScript to edit this code.
-->
<script src="creature.js"></script>
<script src="animations.js"></script>
<script src="render.js"></script>
<script src="init.js"></script>
</head>
<!-- What you see starts here. -->
<body>
<!-- Here's where the creature moves around -->
<h1>This is <span id="creature-name"></span> <span id="creature-pronouns"></span>.</h1>
<div id='play-pen'>
<canvas id='play-pen-canvas' width='500' height='500'>
</canvas>
</div>
<!-- Here's where the creature's energy and stomach are displayed. -->
<div id='indicators'>
<div>
<label for="energy">Energy: </label>
<div><meter id="energy"></meter></div>
</div>
<div>
<label for="stomach">Stomach:</label>
<div><meter id="stomach"></meter></div>
</div>
</div>
<!--
Buttons are how you interact with the creature. When a button is clicked,
it crea
To add a new action, add a button between <div id='actions'> and </div>
and give it a name. Here's an empty button:
<button type="button"></button>
-->
<div id='actions'>
<button type="button">Pet</button>
<button type="button">Go To Left Corner</button>
<button type="button">Feed</button>
</div>
<!-- Here's the part where you change the creature! -->
<script>
// You can create a player action by creating a function named after the button.
// For example, the Pet button calls this function:
function Pet(creature) {
creature.cheer(4);
}
// This function causes the creature to cheer for 4 turns when you click the 'Pet' button.
// If your button has spaces, just remove them. So if your button is named "Go To Left Corner",
// then you can create a function like this:
function GoToLeftCorner(creature) {
creature.goto(0, 0);
}
// There are a bunch of things you can ask the creature to do:
//
// creature.sim(true) - Start the creature simulator.
// creature.sim(false) - Pause the creature simulator.
// creature.name("Dakota") - sets the creature's name to 'Dakota'.
// creature.name() - gets the creature's name.
// creature.reset() - reset's the creature's position, stomach
// and energy to how they started.
// creature.stop() - ask the creature to stop what they're doing
// creature.sleep(4) - ask the creature to go to sleep for 4 turns
// sleeping gives the creature energy.
// creature.rest(5) - ask the creature to rest for 5 turns
// creature.wander(20) - ask the creature to walk around for 20 turns
// creature.teleport(20, 21) - ask the creature to teleport to coordinates
// X = 20, Y = 21. The creature has to rest
// after teleporting.
// creature.goto(20, 21) - ask the creature to walk to coordinates
// X = 20, Y = 21.
// creature.eat("carrot") - ask the creature to eat a carrot. This
// fills the creature's stomach. The creature
// can eat any word. The creature doesn't
// like 4-letter words, such as 'dirt'.
// creature.digest(4) - ask the creature to digest its food for
// 4 turns. Digesting food gives the creature
// energy.
// creature.cry(2) - ask the creature to cry for 2 turns.
// creature.cheer(4) - ask the creature to cheer for 4 turns.
// Try writing a function that prompts the player for a word and feeds it
// to the creature when they click the Feed button!
</script>
<script>
// this line starts the program. Don't change it. 🙂
init();
</script>
</body>
</html>