/
index.html
85 lines (81 loc) · 4.83 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
<!DOCTYPE html>
<html>
<head>
<!-- for iPad, the default initial scale of fit to screen in portrait mode was making shapes too big,
and the zoom in/out, touch-scrollable area is in only the non-canvas part of the page
because paper.js maps touch events to mouse events,
which one would never know,... so we set an initial-scale of 1 so all elements just fit -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Pattern Planets - a free online pattern game for kids that can run on any modern browser, including mobile devices</title>
<script charset="utf-8" src="js/lib/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/PatternPlanets.js"></script>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/lib/paper.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="js/PatternPlanets.pjs" canvas="PatternPlanetsCanvas"></script>
<link rel="stylesheet" href="PatternPlanets.css">
<!-- This is the favicon -->
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29814309-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="handHeld">
<div id="container">
<div id="title">
<span>Pattern Planets</span>
<span class="rightMenu"><a href="javascript:PatternPlanets.toggleAbout()">About</a></span>
<div id="about" style="display: none">
<a href="http://github.com/bsiegal/PatternPlanets"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="title">
<h1>Pattern Planets</h1>
A pattern game for kids - by <a href="http://bsiegal.github.com/">Bess Siegal</a>
</div>
<h2>How to play</h2>
<ul>
<li class="browser">Continue the pattern by dragging a planet from the planet palette to the target marked by the question mark.</li>
<li class="browser">If you miss the target, the planet will get lost in space!</li>
<li class="browser">If the planet you drop onto the target does not match the pattern, it will bounce back to the palette.</li>
<li class="browser">You may also select a planet by typing the initial of its color or by its numerical position in the palette, for example 'r' or '1' for the red planet.</li>
<li class="iPad">Continue the pattern by selecting a planet from the palette.</li>
<li>When you are done, all the planets will orbit around a star!</li>
<li>You may create your own pattern by changing the option in the select box.</li>
</ul>
<h2>Source</h2>
<ul>
<li>This game was created with <a href="http://paperjs.org/">Paper.js</a>.</li>
<li>This <a href="http://github.com/bsiegal/PatternPlanets">code</a> is open-source under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache License, Version 2.0</a>.</li>
<li>Your feedback is welcome. Email me at <a href="mailto:bess.siegal@gmail.com">bess.siegal@gmail.com</a>. Thanks for having a look!</li>
</ul>
</div>
</div>
<div id="instruct">
<select onchange="PatternPlanets.setMode()" id="mode">
<option value="random">Continue the </option>
<option value="custom">Create your own </option>
</select>
pattern of
<select onchange="PatternPlanets.setLevel()" id="level">
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
planets.
</div>
<div id="buttonBar" style="display: none">
<div class="success">You're a star!<br/>Great job!</div>
<button id="again" onclick="PatternPlanets.playAgain();">Play again</button>
</div>
<canvas id="PatternPlanetsCanvas" resize="true"></canvas>
</div>
<audio id="soundHandle" style="display: none;"></audio>
</body>
</html>