html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id = "game">
<div id = "menu">
<div id = "menu-heading">WATER SORT PUZZLE</div>
<div class = "lvl" id = "easy" onclick = "OpenLevel(0);">EASY</div>
<div class = "lvl" id = "medium" onclick = "OpenLevel(1);">MEDIUM</div>
<div class = "lvl" id = "hard" onclick = "OpenLevel(2);">HARD</div>
<div class = "lvl" id = "very-hard" onclick = "OpenLevel(3)">VERY HARD</div>
<div class = "lvl" id = "impossible" onclick = "OpenLevel(7);">IMPOSSIBLE</div>
<br><br><br>
<div id = "rules-btn" onclick = "ShowRules();">RULES</div>
</div>
<div id = "level"></div>
<div id = "rules-page">
<div id = "rules">
<div id = "rules-heading">RULES</div>
<div id = "rules-text">There will be some glasses (or test tubes to be exact xD), your task is to put the liquids with same color together! You can transfer different colored water from one glass to another only if the other glass is empty or its top most layer of water is of the same color as that of the one from which water is to be taken. The glass you have selected will be highlighted to prevent confusion. Restart button will take you back to the beginning of the level, also every time you open the same level the water will be shuffled. Check out the real game 'Water sort puzzle' on playstore, I have cloned it.</div>
<div id = "back" onclick = "HideRules();">BACK</div>
</div>
</div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
@import url('https://fonts.googleapis.com/css2?family=Sriracha&family=Raleway&display=swap');
body {
font-family: Raleway;
user-select: none;
}
#game {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: white;
}
#menu {
position: absolute;
margin-top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: purple;
overflow-y:scroll;
overflow-x: hidden;
/*display: none;*/
}
Enter to Rename, Shift+Enter to Preview
js
js
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
/*
TO DO:
A bug with water transfer done
Add "You Won" done
Add animations (while holding glass and while transferring water) done
Add restart button done
*/
var game,level,color=["red","blue","yellow","green","purple","lightgreen","lightblue","orange","brown","pink"],water=[],w=[],currentLevel,clicked=[],transferring=false,t=false,size=1,sizechange=0.05,won=false,moves=0;
var testTubePosition = {
0: [[-110,130], [-20, 130], [70, 130], [-65,320], [15, 320]],
1: [[-110,130], [-20, 130], [70, 130],[-110,320], [-20, 320], [70, 320]],
2: [[-140,130],[-60,130],[20,130],[100,130],[-110,320], [-20, 320], [70, 320]],
3: [[-140,130],[-60,130],[20,130],[100,130],[-140,320],[-60,320],[20,320],[100,320]],
7: [[-140,100],[-60,100],[20,100],[100,100],[-140,275],[-60,275],[20,275],[100,275],[-140,450],[-60,450],[20,450],[100,450]],
}
window.onload = function() {
game = document.getElementById("game");
level = document.getElementById("level");
}
window.OpenLevel = function(x) {
moves = 0;
currentLevel=x;
won=false;
level.style.display = "block";
level.innerHTML = "";
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Laufen