-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
98 lines (95 loc) · 4.74 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
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Stacks</title>
<style>
</style>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script src="/static/js/Config.js"></script>
<script src="/static/js/DOM.js"></script>
<script src="/static/js/Element.js"></script>
<script src="/static/js/Stack.js"></script>
<script src="/static/js/Motion.js"></script>
<script src="/static/js/game.js"></script>
<script src="/static/js/GameLogic.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88283827-1', 'auto');
ga('send', 'pageview');
</script>
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/css/foundation.min.css"></style>
<link rel="stylesheet" type="text/css" href="/static/css/index.css"></style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=300837460055763";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="game-container">
<div id="explanation">
<h1 id="title">Stacks</h1>
<div id="explanation-left">
<ul>
<li>Use the left and right arrows to move between the stacks. The current stack has a yellow indicator beneath it.
<li>Press the up arrow to launch an item to the right of the current stack.
<li>Press the down arrow to launch an item to the left of the current stack.
<li>Try to make blocks of the same color touch, and don't let any of the stacks reach the top!</li>
</ul>
<ul>
<li class="button-right">
<a href="#" class="begin button secondary">Begin</a>
</li>
<li class="button-right" id="status">
</li>
</ul>
<br/>
</div>
<div id="explanation-right">
<p id="screenshot"><img id="screen" src="/static/img/screen.png"></p>
</div>
</div>
<div class="gameplay">
<div class="game-over-container">
<h4 id="game-over-heading">Game over! You scored
<span class="score-display-big"></span>.</h4>
<h5 id="game-over-text">Press ENTER to play again.</h5>
</div>
<canvas id="gameplay" width="1" height="1"></canvas>
<p id="score-container">Score: <span class="score-display" id="bottom-score">0</span> · Your high score: <span class="highest-score">0</span> · <a href="#" id="trigger-help">Help</a> · <div class="fb-like" id="game-like" data-href="http://stacks.amizrahi.com" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
<span id="share"><a href='https://twitter.com/share' class='twitter-share-button' data-size='large' data-text="" data-url='http://stacks.amizrahi.com' data-show-count='false'>Tweet</a><script async src='//platform.twitter.com/widgets.js' charset='utf-8'></script></span></p>
</div>
</div>
<footer>
<div class="left">
<p>© 2016 Amit Mizrahi. · <a href="http://www.amizrahi.com">amizrahi.com</a>
</div>
<div class="right">
<div class="fb-like" data-href="http://stacks.amizrahi.com" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div><!-- · Source code for Stacks: <a href="http://github.com/amizra/stacks">GitHub</a> -->
</div>
</footer>
<div class="help">
<h3>Instructions</h3>
<ul>
<li>Use the left and right arrows to move between the stacks. The current stack has a yellow indicator beneath it.
<li>Press the up arrow to launch an item to the right of the current stack.
<li>Press the down arrow to launch an item to the left of the current stack.
<li>Try to make blocks of the same color touch, and don't let any of the stacks reach the top!</li>
</ul>
<ul>
<li class="button-right">
<a href="#" class="button secondary" id="trigger-hide">OK</a>
</li>
</ul>
</div>
</body>
</html>