Merge pull request #209 from ratnojitsaha/master

Snake_Ladder Game

Assets/games/Snake_Ladder/game.css

@@ -0,0 +1,153 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+
+.header{
+  display: flex;
+  width: 100%;
+  height: 80px;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.cont {
+  display: grid;
+  width: 600px;
+  grid-template-columns: repeat(10, 1fr);
+  margin: 40px 0 0px 0;
+}
+
+.cont div {
+  width: 60px;
+  height: 60px;
+  border: 0.2px solid black;
+}
+
+#p1,
+#p2 {
+  width: 50px;
+  height: 50px;
+  border-radius: 100px;
+  background-color: rgb(236, 82, 82);
+  position: relative;
+  border: 3px solid black;
+
+  /* position: absolute; */
+}
+
+#p1 {
+  position: relative;
+  top: 0px;
+  transition: all linear 0.5s;
+  /* top: 0; */
+  left: -62px;
+  z-index: 2;
+}
+
+#p2 {
+  z-index: 2;
+  position: relative;
+  top: -55px;
+  left: -62px;
+  transition: all linear 0.5s;
+  background-color: rgb(243, 181, 46);
+}
+
+#photo {
+  position: relative;
+  top: -615px;
+  left: 8px;
+  /* z-index: -1; */
+  margin: 0;
+  width: 635px;
+  height: 615px;
+  border: solid black 3px;
+  box-shadow: 20px 10px 70px gray;
+}
+#diceCont {
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  position: absolute;
+  top: 200px;
+  left: 120px;
+  font-size: 2rem;
+  z-index: 99;
+}
+
+#dice{
+  height: 70px;
+  width: 70px;
+  border: solid rgb(213, 154, 34) 1px;
+  margin: 19px 0px;
+}
+
+#dice img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+#diceBtn {
+  z-index: 99;
+  padding: 5px;
+  cursor: pointer;
+  color: white;
+  font-weight: bold;
+  font-size: large;
+  background-color: rgba(91, 197, 75, 0.803);
+  border-radius: 5px;
+  width: 200px;
+}
+
+#diceBtn:hover{
+  background-color:rgba(49, 107, 41, 0.803);
+  box-shadow: 10px 10px 10px rgba(149, 142, 142, 0.5);
+}
+
+@media (max-width: 1250px) {
+
+  #diceCont {
+    display: flex;
+    place-items: none;
+    top: 92vh;
+    left: 36vw;
+    border: 2px solid red;
+  }
+  #diceBtn {
+    width: 200px;
+    margin-left: 20px;
+  }
+}
+@media (max-width: 1250px) {
+
+  #diceCont {
+    display: flex;
+    place-items: none;
+    top: 99vh;
+    left: 10vw;
+    /* border: 2px solid red; */
+  }
+  #diceBtn {
+    width: 200px;
+    margin-left: 20px;
+  }
+}
+
+.header {
+  text-shadow: 2px 2px 4px rgba(149, 142, 142, 0.5);
+}
+
+#tog {
+  text-shadow: 2px 2px 4px rgba(149, 142, 142, 0.5);
+  box-shadow: 10px 10px 30px rgba(149, 142, 142, 0.5);
+}

Assets/games/Snake_Ladder/game.js

@@ -0,0 +1,223 @@
+    let tog = 1
+    let rollingSound = new Audio('rpg-dice-rolling-95182.mp3')
+    let winSound = new Audio('winharpsichord-39642.mp3')
+
+    let dice = ['<img src="1.png">','<img src="2.png">','<img src="3.png">','<img src="4.png">','<img src="5.png">','<img src="6.png">'];
+
+    let p1sum = 0
+    let p2sum = 0
+
+
+    function play(player, psum, correction, num) {
+        let sum
+        if (psum == 'p1sum') {
+
+            p1sum = p1sum + num
+
+            if (p1sum > 100) {
+                p1sum = p1sum - num
+                // sum = p1sum
+            }
+
+            if (p1sum == 1) {
+                p1sum = 38
+            }
+            if (p1sum == 4) {
+                p1sum = 14
+            }
+            if (p1sum == 8) {
+                p1sum = 30
+            }
+            if (p1sum == 21) {
+                p1sum = 42
+            }
+            if (p1sum == 28) {
+                p1sum = 76
+            }
+            if (p1sum == 32) {
+                p1sum = 10
+            }
+            if (p1sum == 36) {
+                p1sum = 6
+            }
+            if (p1sum == 48) {
+                p1sum = 26
+            }
+            if (p1sum == 50) {
+                p1sum = 67
+            }
+            if (p1sum == 62) {
+                p1sum = 18
+            }
+            if (p1sum == 71) {
+                p1sum = 92
+            }
+            if (p1sum == 80) {
+                p1sum = 99
+            }
+            if (p1sum == 88) {
+                p1sum = 24
+            }
+            if (p1sum == 95) {
+                p1sum = 56
+            }
+            if (p1sum == 97) {
+                p1sum = 78
+            }
+
+            sum = p1sum
+
+
+
+        }
+
+        if (psum == 'p2sum') {
+
+            p2sum = p2sum + num
+
+            if (p2sum > 100) {
+                p2sum = p2sum - num
+                // sum = p1sum
+            }
+
+
+            if (p2sum == 1) {
+                p2sum = 38
+            }
+            if (p2sum == 4) {
+                p2sum = 14
+            }
+            if (p2sum == 8) {
+                p2sum = 30
+            }
+            if (p2sum == 21) {
+                p2sum = 42
+            }
+            if (p2sum == 28) {
+                p2sum = 76
+            }
+            if (p2sum == 32) {
+                p2sum = 10
+            }
+            if (p2sum == 36) {
+                p2sum = 6
+            }
+            if (p2sum == 48) {
+                p2sum = 26
+            }
+            if (p2sum == 50) {
+                p2sum = 67
+            }
+            if (p2sum == 62) {
+                p2sum = 18
+            }
+            if (p2sum == 71) {
+                p2sum = 92
+            }
+            if (p2sum == 80) {
+                p2sum = 99
+            }
+            if (p2sum == 88) {
+                p2sum = 24
+            }
+            if (p2sum == 95) {
+                p2sum = 56
+            }
+            if (p2sum == 97) {
+                p2sum = 78
+            }
+
+            sum = p2sum
+
+
+
+        }
+
+
+        document.getElementById(`${player}`).style.transition = `linear all .5s`
+
+
+
+
+
+        if (sum < 10) {
+
+            document.getElementById(`${player}`).style.left = `${(sum - 1) * 62}px`
+            document.getElementById(`${player}`).style.top = `${-0 * 62 - correction}px`
+
+
+        }
+
+
+        else if (sum == 100) {
+            winSound.play();
+            if (player == 'p1') {
+                alert("Red Won !!");
+            } else if (player == 'p2') {
+                alert("Yellow Won !!");
+            }
+            setTimeout(function() {
+                location.reload();
+            }, 1000); // Reload after 1 second (adjust the delay as needed)
+        }
+
+        else {
+
+            numarr = Array.from(String(sum))
+            n1 = eval(numarr.shift())
+            n2 = eval(numarr.pop())
+            // console.log(n1, n2)
+
+            if (n1 % 2 != 0) {
+
+                if (n2 == 0) {
+                    document.getElementById(`${player}`).style.left = `${(9) * 62}px`
+                    document.getElementById(`${player}`).style.top = `${(-n1 + 1) * 62 - correction}px`
+                }
+                else {
+                    document.getElementById(`${player}`).style.left = `${(9 - (n2 - 1)) * 62}px`
+                    document.getElementById(`${player}`).style.top = `${-n1 * 62 - correction}px`
+
+                }
+
+            }
+            else if (n1 % 2 == 0) {
+                if (n2 == 0) {
+
+                    document.getElementById(`${player}`).style.left = `${(0) * 62}px`
+                    document.getElementById(`${player}`).style.top = `${(-n1 + 1) * 62 - correction}px`
+                }
+                else {
+
+                    document.getElementById(`${player}`).style.left = `${(n2 - 1) * 62}px`
+                    document.getElementById(`${player}`).style.top = `${-n1 * 62 - correction}px`
+                }
+
+            }
+
+
+
+        }
+    }
+
+    document.getElementById("diceBtn").addEventListener("click", function () {
+        rollingSound.play()
+        num = Math.floor(Math.random() * (6 - 1 + 1) + 1)
+        document.getElementById("dice").innerHTML = dice[num - 1];
+
+
+        if (tog % 2 != 0) {
+            document.getElementById('tog').innerText = "Yellow's Turn : "
+            play('p1', 'p1sum', 0, num)
+
+        }
+
+        else if (tog % 2 == 0) {
+            document.getElementById('tog').innerText = "Red's Turn : "
+
+            play('p2', 'p2sum', 55, num)
+
+        }
+
+        tog = tog + 1
+    })