-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (155 loc) · 5.05 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Plant Watering Game</title>
<link rel="stylesheet" href="style.css" />
<script src="sw.js"></script>
<script src="script.js" defer></script>
<meta
name="keywords"
content="game, plant, water, fun, score, points, grow, shrink, water plant, water game, plant game, fun game, web game, html5 games"
/>
<meta
name="description"
content="A simple, fun, and relaxing game, good for curing boredom!"
/>
<meta name="og:title" content="Plant Watering Game" />
<meta
name="og:description"
content="A simple, fun, and relaxing game, good for curing boredom!"
/>
<meta
name="og:image"
content="https://plant-watering-game.vercel.app/desktopscreenshot.png"
/>
<meta name="og:url" content="water-planting-game.vercel.app" />
<meta name="og:site_name" content="🌱Plant Watering Game🌱" />
<meta name="og:type" content="website" />
<meta name="og:locale" content="en_US" />
<meta name="og:locale:alternate" content="en_GB" />
<meta name="og:locale:alternate" content="en_CA" />
<meta name="og:determiner" content="the" />
<meta name="twitter:card" content="summary" />
<meta name="author" content="https://github.com/spetterman66" />
<meta name="robots" content="index, follow" />
<link rel="manifest" href="manifest.webmanifest" />
<meta name="theme-color" content="#32CD32" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"
/>
</head>
<body class="main" id="main" onload="initializeGame()">
<noscript>This application requires JavaScript to be enabled.</noscript>
<div class="tutorial" id="tutorial" aria-hidden="true">
<h1>🌱 Plant Watering Game</h1>
<p style="line-height: 30px">
Welcome to the Plant Watering Game!
<br />
This game is open-source. You can find the source code on
<a href="https://github.com/spetterman66/plant-watering-game">GitHub</a
>.
<br />
<br />
Click on the water droplet button to water the plant.
<br />
The button will be disabled for 5 seconds after clicking it.
<br />
The plant will grow and you will get points.
<br />
The plant will shrink if you don't water it.
<br />
You will lose points if the plant dies.
</p>
<button onclick="startGame()">Start Game</button>
</div>
<div
class="keyboardshortcuts"
id="keyboardshortcuts"
style="display: none"
aria-hidden="true"
>
<h1>🌱 Plant Watering Game</h1>
<p style="line-height: 30px">
Keyboard Shortcuts:
<br />
<br />
Press the space key to water the plant.
<br />
Press <kbd>T</kbd> to open the tutorial.
<br />
Press <kbd>S</kbd> to save your game.
<br />
Press <kbd>L</kbd> to load your game.
<br />
Press <kbd>D</kbd> to toggle the theme.
<br />
Press any other key to close this window.
</p>
<button onclick="closeKeyboardShortcuts()">Close Window</button>
</div>
<div id="game">
<p id="plant" style="font-size: 20px">🌱</p>
<div id="maininfo">
<button
id="waterplant"
title="Press this button to water the plant"
aria-label="Press this button to water the plant"
onclick="waterPlant()"
>
💧
</button>
<button
id="help"
title="Press this button to open the tutorial"
aria-label="Press this button to open the tutorial"
="openTutorial()"
>
❓
</button>
<button
id="save"
title="Press this button to save your game"
aria-label="Press this button to save your game"
onclick="saveGame()"
>
💾
</button>
<button
id="load"
title="Press this button to load your game"
aria-label="Press this button to load your game"
onclick="loadGame()"
>
📂
</button>
<button
id="toggle-theme"
title="Press this button to toggle the theme"
aria-label="Press this button to toggle the theme"
onclick="toggleTheme()"
>
🌙
</button>
<button
id="reset"
title="Press this button to reset the game"
aria-label="Press this button to reset the game"
onclick="resetGame()"
>
🔄
</button>
<div
class="scoreitem"
title="Your score is displayed here"
aria-label="Your score is displayed here"
>
Score: <span id="score">0</span>
</div>
</div>
</div>
</body>
</html>