-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (196 loc) · 6.44 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>PythonicApple | Rules</title>
<style>
.header {
background-color: rgb(0,255,0);
width: 100%;
margin: 0px;
padding: 1px;
font-size: 26px;
}
.right {
background-color: rgb(175, 175, 175);
width: 31%;
height: 82%;
right: 0.5vw;
position: fixed;
z-index: 1;
overflow-x: hidden;
padding: 0 8px;
font-size: 22px;
}
.right h3 p {
display: block;
}
.right h1 {
text-align: center;
}
.left {
background-color: rgb(175, 175, 175);
width: 31%;
height: 82%;
left: 0.5vw;
position: fixed;
z-index: 1;
overflow-x: hidden;
padding: 0 8px;
font-size: 22px;
}
.left h3 p {
display: block;
}
.left h1 {
text-align: center;
}
.center {
background-color: rgb(175, 175, 175);
width: 31%;
height: 82%;
left: 34%;
position: fixed;
z-index: 1;
overflow-x: hidden;
padding: 0 8px;
font-size: 22px;
}
.center h3 p {
display: block;
}
.center h1 {
text-align: center;
}
.spacer {
width: 100%;
}
.spacer p {
font-size: 1.5vh;
}
.main {
position: fixed;
}
</style>
</head>
<body>
<div class="header">
<h1 style="text-align: center">PythonicApple: How To Play</h1>
<button onclick="window.location.href = 'game.html'">Start Game!</button>
</div>
<div class="spacer"><p><p></div>
<div class="main">
<div class="right">
<h1>About</h1>
<h3>PythonicApple</h3>
<p>OnTheWeb PythonicApple (Retro Snake Game) made with Transcrypt-Python</p>
<h3>Origins & Changes</h3>
<p>OTW Pythonic Apple is based on one of my favorite retro games, Snake.
The original game, or the closest to the original game online version,
can be found at <a href="https://snake97.com/">https://snake97.com/</a>. However, this version of the snake game,
Pythonic Apple has many of the same rules, but is different from the
most versions of the game in 3 very different ways:</p>
<ol>
<li>there are obstacles that protect the apple from being eaten,</li>
<li>the canvas randomly changes color after a certain score is
reached.</li>
<li>the canvas where the snake game is played on bounces around
the screen in a predicted way after a certain score is reached, and</li>
</ol>
</div>
<div class="left">
<h1>Controls</h1>
<h3>Desktop/Laptop Computer</h3>
<p>This option to playing the game has the best experience and is most
comfortable to play on. Press the LEFT or RIGHT arrow key to turn the
snake left or right from its perspective. Press 'P' to pause the game.</p>
<h3>All Mobile Devices & Computers</h3>
<p>All devices may tap (mobile devices) or mouse-click (non-mobile
devices) on a side of the screen to change the snake's direction. This
means that if you tap on the left side of the screen, then the snake
will turn left, and if you tap on the right side of the screen, then
the snake will turn right. There is currently no mobile feature to
pause the game. Increased functionality will come in later updates.</p>
<h3>Visual Representation of Controls</h3>
<table>
<tr>
<td><img src="LEFT.png" alt="Left Arrow Key"></img></td>
<td><p>This key turns the snake to ITS left.</p></td>
</tr>
<tr>
<td><img src="RIGHT.png" alt="Right Arrow Key"></img></td>
<td><p>This key turns the snake to ITS right.</p></td>
</tr>
<tr>
<td><img src="P.png" alt="P Key"></img></td>
<td><p>This key pauses the game.</p></td>
</tr>
<tr>
<td><img src="CP_Left.png" alt="P Key"></img></td>
<td><p>Tapping on the left side of the screen turns the snake to ITS left.</p></td>
</tr>
<tr>
<td><img src="CP_Right.png" alt="P Key"></img></td>
<td><p>Tapping on the right side of the screen turns the snake to ITS right.</p></td>
</tr>
</table>
<br>
</div>
<div class="center">
<h1>Tips and Tricks</h1>
<h3>Die at the right time</h3>
<p>You never know when a Mongoose (a yellow block moving in a straight
line) is going to sneak up on you. A Mongoose may spawn and eat
your tail off, effectively diminishing your score.</p>
<h3>Watch these Videos</h3>
<p>If you are stuck, then try watching some of these below videos:</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/-cZdjutzD3s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script type="text/javascript">
var t = null;
var r = Math.round(Math.random()*255); var rt = !!(Math.round(Math.random()));
var g = Math.round(Math.random()*255); var gt = !!(Math.round(Math.random()));
var b = Math.round(Math.random()*255); var bt = !!(Math.round(Math.random()));
function changeBackground() {
if(t != null) {
window.clearTimeout(t);
}
if(r == 255) {
rt = false;
} else if(r == 0) {
rt = true;
}
if(g == 255) {
gt = false;
} else if(g == 0) {
gt = true;
}
if(b == 255) {
bt = false;
} else if(b == 0) {
bt = true;
}
if(rt) {
r += 1;
} else {
r -= 1;
}
if(gt) {
g += 1;
} else {
g -= 1;
}
if(bt) {
b += 1;
} else {
b -= 1;
}
document.body.style.background = "rgb(" + r + "," + g + "," + b + ")";
t = window.setTimeout(changeBackground, 50);
}
changeBackground();
</script>
</body>
</html>