-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (68 loc) · 3.04 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
<html>
<head>
<title>connect three - a prototype</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<div id="outer-container">
<div id="header">
<h1>connect three</h1>
<div class="title-subtext">beta prototype</div>
<div id="score-outer-container">
<div class="score-container">
<div class="score-text">score</div>
<div class="score-value">0</div>
</div>
<div class="score-container">
<div class="score-text">best score</div>
<div class="best-score-value">0</div>
</div>
</div>
</div>
<div id="game-board">
<div id="grid-container"></div>
<div id="player-tiles"></div>
<div id="game-over" class="hidden">
<p>Game over</p>
<span id="try-again">Try again</span>
</div>
</div>
<div id="instructions">
<h2>How to play</h2>
<p>Use the arrow keys to slide the tiles. Connect three or more same coloured tiles in a vertical or horizontal line to remove tiles from the board.</p>
<hr>
<p>Works best in Chrome and Safari. Firefox still needs some style wrangling. Not tested in IE.</p>
<hr>
<p>Created by <a href="https://twitter.com/pyko">pyko</a>, with heavy inspiration from <a href="https://github.com/gabrielecirulli/2048">2048</a> which was based off <a href="http://threesgame.com">Threes</a>.</p>
<p>Short <a href="http://dx3.psychopyko.com/2014/03/30/introducing-connect-three/">blog post</a> for some background about Connect Three.</p>
<hr>
<p>If you enjoyed the game, a small donation would be much appreciated :)</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="TMQUWDMFMCDDY">
<input type="image" alt="PayPal — The safer, easier way to pay online." name="submit" src="https://www.paypalobjects.com/en_AU/i/btn/btn_donateCC_LG.gif">
<img alt="" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1" border="0">
</form>
</div>
</div>
<script type="text/javascript" src="js/game-vars.js"></script>
<script type="text/javascript">
var gridContainer = document.getElementById("grid-container");
for (var i=0; i<CONN_3.GRID_SIZE; i++) {
var row = document.createElement("div");
row.className = "background-row";
for (var j=0; j<CONN_3.GRID_SIZE; j++) {
var tile = document.createElement("div");
tile.className = "background-tile";
row.appendChild(tile);
}
gridContainer.appendChild(row);
console.log("added row");
}
</script>
<script type="text/javascript" src="js/tile.js"></script>
<script type="text/javascript" src="js/grid.js"></script>
<script type="text/javascript" src="js/input_listener.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>