-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (118 loc) · 5.21 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>LudumDare 35</title>
<link rel="stylesheet" href="css/game.css">
</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/nb_NO/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="game" v-bind:class="{'game-init': tiles.length === 0}">
<div class="instructions" v-if="instructions">
<div class="instruction-text">
<div class="instruction-col">
<img src="img/logo.svg" alt="quadrisic">
<p>
A puzzle game made by <a href="http://olav.it/" target="_blank">Olav Lindekleiv</a> for the 48 hour game compo LudumDare 35.
<strong>Theme: Shapeshifting</strong>
</p>
<p>
Use the mouse pointer to select a shape. Get as many other shapes of this kind inside your selection,
for more points. On mobile, tap to select, and tap again to confirm move.
</p>
<p class="tile-explanation">
The game has three shapes. Squares turn into triangles, while triangles turn into circles,
and circles turn back into squares.
</p>
<p class="tile-explanation">
<img src="img/tile-0.svg"> » <img src="img/tile-1.svg"> » <img src="img/tile-2.svg"> » <img src="img/tile-0.svg"> » ...
</p>
<p>
See the scoring table for more information on point scoring.
</p>
<a class="btn" @click="restart()" v-if="tiles.length === 0">Start game</a>
<a class="btn" @click="toggleInstructions()" v-if="tiles.length > 0">Back to game</a>
</div>
<div class="instruction-col">
<table>
<thead>
<tr>
<th>Number of same shape</th>
<th>Points scored</th>
</tr>
</thead>
<tbody>
<tr v-for="points in pointScores()">
<td>{{points[0]}}</td>
<td>{{points[1]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="menu-gui" v-if="tiles.length == 0">
<img src="img/logo.svg" alt="quadrisic">
<a class="btn" @click="restart()">Start game</a>
<a class="btn" @click="toggleInstructions()">Instructions</a>
<a class="btn" @click="toggleSound()">
<span v-if="!enableSound">Enable sound</span>
<span v-if="enableSound">Disable sound</span>
</a>
</div>
<div class="game-gui" v-if="tiles.length > 0">
<div class="info">
<div class="points-total">Points: {{points}}</div>
<div class="points-selected">{{activePoints}} points selected</div>
<div class="buttons">
<a class="btn" @click="restart()">Restart</a>
<a class="btn" @click="toggleInstructions()">Instructions</a>
</div>
</div>
<div class="game-over" v-if="gameOver">
<span>
<strong>Game over!</strong>
<small>
You got {{points}} points. <br>
Your highest score: {{highscore}}.
</small>
<a class="btn" @click="restart()">Play again</a>
</span>
</div>
<div class="board">
<div v-for="tile in tiles"
class="tile shape-{{tile.shape}}"
v-bind:class="{'highlight': tile.highlight, 'active': tile.active, 'locked': tile.locked}"
v-bind:style="{flexBasis: 100/levelSize + '%'}"
@mouseover="highlightFrom(tile.index)"
@click="playMove(tile.index)">
<img v-bind:src="'img/tile-'+tile.shape+'.svg'">
</div>
</div>
</div>
</div>
<div class="landscape-warning">
<img src="img/logo.svg" alt="quadrisic">
<p>This game can only be played in landscape mode on mobile.</p>
<p><strong>Please rotate your phone.</strong></p>
</div>
<div class="fb-like" data-href="https://oal.github.io/LudumDare35/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
<script src="js/vue.js"></script>
<script src="js/game.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-272354-19', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>