diff --git a/Games/aqua_sort/aboutus.css b/Games/aqua_sort/aboutus.css new file mode 100644 index 0000000000..57b58d09fa --- /dev/null +++ b/Games/aqua_sort/aboutus.css @@ -0,0 +1,93 @@ +body { + font-family: 'Helvetica Neue', sans-serif; + background: linear-gradient(to bottom, #e0f7fa, #fff); + color: #333; + margin: 0; + padding: 0; +} + +.container { + width: 90%; + max-width: 800px; + margin: 50px auto; + padding: 20px; + background-color: #ffffffd9; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 10px; + text-align: center; +} + +header h1 { + font-size: 2.5em; + color: #00796b; + margin: 0; + padding-bottom: 20px; + border-bottom: 2px solid #00796b; +} + +.content { + line-height: 1.6; + text-align: left; + margin: 20px 0; +} + +.content h2 { + font-size: 2em; + color: #00796b; + margin-top: 20px; +} + +.content p, .content ul { + font-size: 1.2em; +} + +.content ul { + list-style-type: disc; + padding-left: 20px; +} + +.content ul li { + margin: 10px 0; +} + +.content ul li strong { + color: #004d40; +} + +.back-button { + display: inline-block; + margin-top: 20px; + padding: 10px 20px; + font-size: 1em; + color: #fff; + background-color: #00796b; + border: none; + border-radius: 5px; + cursor: pointer; + text-decoration: none; + transition: background-color 0.3s ease; +} + +.back-button:hover { + background-color: #004d40; +} + +@media (max-width: 768px) { + .container { + width: 95%; + margin: 20px auto; + padding: 15px; + } + + header h1 { + font-size: 2em; + } + + .content h2 { + font-size: 1.5em; + } + + .content p, .content ul { + font-size: 1em; + } +} diff --git a/Games/aqua_sort/aboutus.html b/Games/aqua_sort/aboutus.html new file mode 100644 index 0000000000..d8e289c281 --- /dev/null +++ b/Games/aqua_sort/aboutus.html @@ -0,0 +1,40 @@ + + + + + + About Us - Water Sort Game + + + +
+
+

About Water Sort Wizard

+
+
+
+

Welcome to Water Sort Wizard!

+

Water Sort Wizard is the ultimate puzzle game that challenges your logical thinking and problem-solving skills. Dive into a world of colorful liquids and enjoy hours of fun and brain-teasing puzzles!

+
+
+

Why Play Water Sort Wizard?

+
    +
  • Engaging Puzzles: Hundreds of unique and challenging levels.
    • +
  • Beautiful Graphics: Enjoy visually stunning and colorful graphics.
    • +
  • Relaxing Experience: Calming music and smooth gameplay.
    • +
  • Achievements: Unlock achievements and track your progress.
    • +
+
+
+

Meet Our Team

+

Our team of dedicated developers and designers work tirelessly to bring you the best puzzle gaming experience. We are passionate about creating games that are both fun and mentally stimulating.

+
+
+

Contact Us

+

Have any questions or feedback? We'd love to hear from you! Contact us at support@watersortwizard.com.

+
+
+ +
+ + diff --git a/Games/aqua_sort/bg1.jpg b/Games/aqua_sort/bg1.jpg new file mode 100644 index 0000000000..19a604708c Binary files /dev/null and b/Games/aqua_sort/bg1.jpg differ diff --git a/Games/aqua_sort/index.html b/Games/aqua_sort/index.html new file mode 100644 index 0000000000..c05c869209 --- /dev/null +++ b/Games/aqua_sort/index.html @@ -0,0 +1,33 @@ + + + + + + Water Sort Puzzle + + + +
+ +
+
+
+
RULES
+
There will be some glasses (or test tubes to be exact xD), your task is to put the liquids with the same color together! You can transfer different colored water from one glass to another only if the other glass is empty or its topmost 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.
+
BACK
+
+
+
+ + + diff --git a/Games/aqua_sort/readme.md b/Games/aqua_sort/readme.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/Games/aqua_sort/script.js b/Games/aqua_sort/script.js new file mode 100644 index 0000000000..bc66c2e467 --- /dev/null +++ b/Games/aqua_sort/script.js @@ -0,0 +1,294 @@ +document.addEventListener("DOMContentLoaded", function() { + document.getElementById("easy").addEventListener("click", function() { + OpenLevel(0); + }); + document.getElementById("medium").addEventListener("click", function() { + OpenLevel(1); + }); + document.getElementById("hard").addEventListener("click", function() { + OpenLevel(2); + }); + document.getElementById("very-hard").addEventListener("click", function() { + OpenLevel(3); + }); + document.getElementById('about-btn').addEventListener('click', function() { + window.location.href = 'aboutus.html'; // Replace 'about.html' with the actual path to your About Us page + }); + + document.getElementById("impossible").addEventListener("click", function() { + OpenLevel(7); + }); + document.getElementById("rules-btn").addEventListener("click", function() { + ShowRules(); + }); + document.getElementById("back").addEventListener("click", function() { + HideRules(); + }); +}); + + +var game,level,color=["#fb3649","#099ffc","#ffe047","rgb(178, 255, 83)","#ca64fb","#83f28f","#add8e6","#ffa500","#b7410e","#f39ec7"],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 = ""; + water=[]; + let a = [],c=0; + for (let i = 0; i < x+3; i++) { + for (let j = 0; j < 4; j++) { + a.push(color[i]); + } + } + a=shuffle(a); + for (let i = 0; i < x+3; i++) { + water[i]=[]; + for (let j = 0; j < 4; j++) { + water[i].push(a[c]); + c++; + } + } + water.push(["transparent","transparent","transparent","transparent"],["transparent","transparent","transparent","transparent"]); + w = water.map((a)=>[...a]); + //console.log(water[0]); + ApplyInfo(); +} + +function ApplyInfo(a = water) { + if (!won) { + let d = 0; + let heading = ["EASY", "MEDIUM", "HARD", "VERY HARD", "", "", "", "IMPOSSIBLE"][currentLevel]; + level.innerHTML = `
${heading}
`; + + for (let i of testTubePosition[currentLevel]) { + level.innerHTML += ` +
+
+
+
+
+
`; + d++; + } + + level.innerHTML += ` +
RESTART
+
HOME
+
Moves: ${moves}
`; + + // Adding event listeners after elements have been added to the DOM + for (let i = 0; i < d; i++) { + document.getElementById(`test-tube-${i}`).addEventListener('click', function() { + Clicked(i); + }); + } + + document.getElementById('restart').addEventListener('click', Restart); + document.getElementById('home').addEventListener('click', ShowMenu); + } +} + + + +window.Clicked = function(x) { + //console.log(x); + if (!transferring) { + if (clicked.length == 0) { + clicked.push(x); + document.getElementsByClassName("test-tube")[x].style.transition = "0.2s linear"; + document.getElementsByClassName("test-tube")[x].style.transform = "scale(1.08)"; + } + else { + clicked.push(x); + let el = document.getElementsByClassName("test-tube")[clicked[0]]; + el.style.transform = "scale(1) rotate(0deg)"; + if (clicked[0]!=clicked[1]) { + el.style.transition = "1s linear"; + moves++; + document.getElementById("moves").innerHTML = "Moves: "+moves; + Transfer(...clicked); + } + clicked = []; + } + } +} + +function TransferAnim(a,b) { + let el = document.getElementsByClassName("test-tube")[a]; + transferring = true; + el.style.zIndex = "100"; + el.style.top = `calc(${testTubePosition[currentLevel][b][1]}px - 90px)`; + el.style.left = `calc(50vw + ${testTubePosition[currentLevel][b][0]}px - 70px)`; + el.style.transform = "rotate(75deg)"; + setTimeout(function() { + el.style.transform = "rotate(90deg)"; + },1000) + setTimeout(function() { + el.style.left = `calc(50vw + ${testTubePosition[currentLevel][a][0]}px)`; + el.style.top = `calc(${testTubePosition[currentLevel][a][1]}px)`; + el.style.transform = "rotate(0deg)"; + },2000); + setTimeout(function() { + el.style.zIndex = "0"; + transferring=false; + },3000) +} + +function Transfer(a,b) { + /* + a represents the index of the glass from which water is to ne taken + b represents the index of the glass to which water is to be transferred + constraints: + b should have white + last element of a = last non-white element in b + */ + if (!water[b].includes("transparent") || water[a] == ["transparent","transparent","transparent","transparent"]) { + moves-=1; + document.getElementById("moves").innerHTML = "Moves: "+moves; + return; + } + let p,q,r=false,s=false,count=0,c=0; + for (let i = 0; i < 4; i++) { + if (((water[a][i]!="transparent" && water[a][i+1]=="transparent") || i === 3) && !r) { + r=true; + p=[water[a][i],i]; + if (water[a].map(function(x) { + if (x=="transparent" || x==p[0]) {return 1;} else {return 0;} + }).reduce((x,y)=>x+y) === 4) { + p.push(i+1) + } + else { + for (let j = 1; j < 4; j++) { + if (i-j>=0 && water[a][i-j]!=p[0]) { + p.push(j); + break; + } + } + } + } + if (((water[b][i]!="transparent" && water[b][i+1]=="transparent") || water[b][0]=="transparent") && !s) { + s=true; + q=[water[b][i],i,water[b].map((x)=>x= (x=="transparent") ? 1 : 0).reduce((x,y)=>x+y)]; + } + } + //console.log(p); + if (q[0]!="transparent" && p[0]!=q[0]) { + moves-=1; + document.getElementById("moves").innerHTML = "Moves: "+moves; + return; + } + for (let i = 3; i >= 0; i--) { + if ((water[a][i]==p[0] || water[a][i]=="transparent") && count0) { + count--; + water[b][i]=p[0]; + } + } + setTimeout(function() {ApplyInfo();},3020); + setTimeout(function() {TransferAnim(a,b);},10); + setTimeout(Won,3000); +} + +function WaterDec(p,a,count) { + p[1] = 3-p[1]; + //console.log(count*30); + document.getElementsByClassName("test-tube")[a].innerHTML += `
`; + setTimeout(function() {document.getElementById("white-bg").style.height = count*30+1 + "px";},50); + setTimeout(function() { + document.getElementsByClassName("test-tube")[a].innerHTML = ` +
+
+
+
`; + },1050); +} + +function WaterInc(p,q,b,count) { + q[1] = 4-q[1]; + q[1]-= (q[0]!="transparent" ? 1: 0); + document.getElementsByClassName("test-tube")[b].innerHTML += `
`; + setTimeout(function() { + document.getElementById("colorful-bg").style.height = count*30+1 + "px"; + document.getElementById("colorful-bg").style.top = `calc(10px + ${q[1]*30}px - ${count*30}px)`; + },50); +} + +window.Restart = function() { + moves = 0; + water = w.map((a)=>[...a]); + won=false; + ApplyInfo(w); + + window.location.href = 'index.html'; // Replace 'index.html' with the URL of your main page + +} + +window.ShowMenu = function() { + document.getElementById("level").style.display = "none"; +} + +function Won() { + for (let i of water) { + if (i[0]!=i[1]||i[1]!=i[2]||i[2]!=i[3]) { + return; + } + } + won=true; + //console.log("hello"); + level.innerHTML = `
YOU WON
RESTART
HOME
`; +} + +function shuffle(x) { + let a=[],len=x.length; + for (let i = 0; i < len; i++) { + let n = Math.floor(Math.random()*x.length); + a.push(x[n]); + x.splice(n,1); + } + return a; +} + +window.ShowRules = function() { + document.getElementById("rules-page").style.display = "block"; + setTimeout(function() { + document.getElementById("rules-page").style.opacity = "1"; + },50); +} + +window.HideRules = function() { + setTimeout(function() { + document.getElementById("rules-page").style.display = "none"; + },500); + document.getElementById("rules-page").style.opacity = "0"; +} + + diff --git a/Games/aqua_sort/style.css b/Games/aqua_sort/style.css new file mode 100644 index 0000000000..c222af23de --- /dev/null +++ b/Games/aqua_sort/style.css @@ -0,0 +1,310 @@ +@import url('https://fonts.googleapis.com/css2?family=Sriracha&family=Raleway&display=swap'); + +body { + font-family: Raleway; + user-select: none; + z-index: 100000; + width: 100vh; + height: 100vh; + overflow: hidden; + overflow-y: hidden; + overflow-x: hidden; +} + + +#game { + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + /* background: url(bg.jpg); */ + background-color: white; +} + +#menu { + /* position: absolute; */ + /* margin-top: 0; */ + /* left: 50%; */ + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + /* justify-content: center; */ + /* width: 100vw; */ + background: url(bg1.jpg); + overflow-y:scroll; + overflow-x: hidden; + /*display: none;*/ +} + +#menu-heading { + position: relative; + margin-top: 0; + left: 0; + height: 60px; + width: 100vw; + color:#fff; + background-color: #110a28; + font-size: 30px; + line-height: 60px; + text-align: center; + font-weight: 900; +} + + + +#level { + z-index: 100; + height: 100vh; + width: 100vw; + position: absolute; + top: 0; + left: 0; + background:white; + background-size: cover; + /* background-color: white; */ + overflow-y: scroll; + overflow-x: hidden; + display: none; +} + +/* .lvl:hover { + background-color: #be32e5; + transform: scale(1.1); +} */ + +.test-tube { + position: absolute; + height: 130px; + width: 40px; + border: 2.2px solid rgb(0, 0, 0); + border-radius: 2px 2px 20px 20px; + background-position: 0 10px; + overflow: hidden; + transition: 1s linear; + transform: rotate(0deg); +} + +@keyframes glassAnim { + 0%,100% {transform: scale(1);} + 50% {transform: scale(1.05);} +} + +.colors { + position: absolute; + left: 0; + height: 30px; + width: 40px; +} + +#won { + position: absolute; + top: 100px; + left: 0; + width: 100vw; + text-align: center; + font-size: 60px; + font-weight: 900; +} + +#white-bg { + position: absolute; + left: 0; + top: 10px; + width: 40px; + height: 10px; + color: transparent; + /* background-color: white; */ + z-index: 1000; + transition: 1s; +} + +#colorful-bg { + position: absolute; + width: 100%; + height: 0; + z-index: 1000; + transition: 1s; +} + +#restart { + left: 5vw; + bottom: 5vh; + cursor: pointer; +} + +#home { + right: 5vw; + bottom: 5vh; +} + +.game-buttons { + position: fixed; + bottom: 5vh; + /* top: calc(100vh - 50px); */ + height: 50px; + width: 12vw; + font-size: 25px; + font-weight: 600; + text-align: center; + line-height: 50px; + background-color: #886af5; + border-radius: 10px; +} + +#lvl-heading { + position: absolute; + top: 0; + left: 0; + height: 10vh; + width: 100vw; + background-color: #50b4f2; + /* border-radius: 0 0 25px 25px; */ + font-size: 40px; + font-weight: 800; + line-height: 10vh; + text-align: center; + letter-spacing: 5px; +} + +#moves { + position: fixed; + bottom: 12vh; + /* top: calc(100vh - 80px); */ + width: 150px; + height: 30px; + left: 5vw; + font-weight: 800; + /* bottom: 5vh; */ + font-size: 20px; +} + +#rules-btn { + height: 50px; + width: 200px; + border-radius:10px; + background-color: #fff; + color: #000000; + /* border-radius: 20px 20px 0 0; */ + text-align: center; + font-size: 25px; + line-height: 50px; + font-weight: 700; +} + +#rules-page { + display: none; + z-index: 1000; + position: absolute; + transition: opacity 1s ease; /* Smooth transition for opacity */ + opacity: 1; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: rgba(0,0,0,0.5); + opacity: 0; + transition: 0.5s linear; +} + +#rules { + position: absolute; + top: 100px; + left: 50px; + height: calc(100vh - 200px); + width: calc(100vw - 100px); + background-color: white; + border-radius: 10px; +} + +#rules-heading { + position: absolute; + top: 10px; + font-weight: 700; + left: 0; + height: 30px; + width: 100%; + font-size: 30px; + font-weight: 800; + text-align: center; +} + +#rules-text { + position: absolute; + top: 70px; + left: 5%; + width: 90%; + font-size: 20px; + height: calc(100vh - 200px - 150px); + overflow-x: hidden; +} + +#back { + position: absolute; + top: calc(100% - 120px + 65px + 10px); + height: 40px; + width: 100px; + left: calc(100% - 100px); + background-color: rgb(100, 255, 100); + font-size: 20px; + line-height: 40px; + text-align: center; + border-radius: 10px 0 0 10px; +} + +#alert-button:hover { + background-color: rgb(150,255,150); +} + + +button { + width: 10em; + position: relative; + height: 3.5em; + border: 3px ridge #149CEA; + outline: none; + background-color: transparent; + color: white; + transition: 1s; + border-radius: 0.3em; + font-size: 16px; + font-weight: bold; + cursor: pointer; + } + + button::after { + content: ""; + position: absolute; + top: -10px; + left: 3%; + width: 95%; + height: 40%; + /* background-color: #212121; */ + transition: 0.5s; + transform-origin: center; + } + + button::before { + content: ""; + transform-origin: center; + position: absolute; + top: 80%; + left: 3%; + width: 95%; + height: 40%; + /* background-color: #212121; */ + transition: 0.5s; + } + + button:hover::before, button:hover::after { + transform: scale(0) + } + + button:hover { + box-shadow: inset 0px 0px 25px #1479EA; + } + + + +