-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
116 lines (111 loc) · 2.54 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
<!DOCTYPE html>
<html>
<head>
<title>jelly no puzzle in html5</title>
<meta charset=utf-8>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
max-width: 674px;
margin: 4ex auto;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: normal;
}
#stage {
position: relative;
user-select: none;
display: inline-block;
border: solid 1px #777;
}
select#level {
position: absolute;
top: 8px;
right: 8px;
font: inherit;
}
#reset {
position: absolute;
bottom: 8px;
right: 8px;
font: inherit;
}
#stage table {
border-spacing: 0;
background: #ccc;
background-size: 36px 36px;
background-image: -webkit-linear-gradient(-45deg,
#ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
background-image: linear-gradient(-45deg,
#ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
}
#stage table td {
padding: 0;
}
.cell {
width: 48px;
height: 48px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.transparent {
background: #eef7ff;
}
.wall {
}
.jellybox {
position: absolute;
-webkit-transition:
/* sliding animation. */
left 200ms,
/* falling animation: roughly x^2. */
top 200ms cubic-bezier(0.5,0, 1,0.5);
transition:
/* sliding animation. */
left 200ms,
/* falling animation: roughly x^2. */
top 200ms cubic-bezier(0.5,0, 1,0.5);
}
.jelly {
position: absolute;
cursor: ew-resize;
}
.red {
background: hsl(0, 100%, 75%);
border: solid 1px hsl(0, 100%, 30%);
}
.blue {
background: hsl(216, 100%, 70%);
border: solid 1px hsl(216, 100%, 30%);
}
.green {
background: hsl(120, 100%, 45%);
border: solid 1px hsl(120, 100%, 30%);
}
</style>
</head>
<body>
<h1>jelly</h1>
<p>This is an HTML5 clone
of <a href='http://qrostar.skr.jp/index.cgi?page=jelly&lang=en'>Jelly
no Puzzle</a>, an excellent puzzle game that was released for Windows
only. The game design and levels are taken directly from that. If you
can run the Windows version I highly recommend it as it has a lot of
great extra details.</p>
<div id='stage'>
<div id='map'></div>
<select id='level'></select>
<button id='reset'>Reset</button>
</div>
<p>How to play: left and right mouse button moves jellies left and
right. When jellies of the same color touch they merge.
Your objective is to unify all jellies of the same color.</p>
<p><a href='https://github.com/martine/jelly'>Here's the source</a>.
To be implemented:
<ol>
<li>Beautiful "you win" screen when you win.</li>
</ol></p>
<script src='jelly.js'></script>
</body>
</html>