Added Mines games

kunjgit · Sep 23, 2024 · cbefea1 · cbefea1
1 parent ac4ce20
commit cbefea1
Show file tree

Hide file tree

Showing 3 changed files with 371 additions and 0 deletions.
diff --git a/Games/MineGamble/index.html b/Games/MineGamble/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mines</title>
+</head>
+<link rel="stylesheet" href="style.css">
+<body>
+    <div class="game">
+        <div class="money">
+            <h4 style="color: white;">Balance : </h4>
+            <div class="display-money">
+                $10000
+            </div>
+        </div>
+        <div class="console-box">
+            <div class="console">
+                <h2>Amount</h2>
+                <input type="number">
+                <h2>Mines</h2>
+                <input class="range" type="range" id="rangeInput" min="1" max="24" value="1" oninput="displayValue(this.value)">
+                <br>
+                <p>Selected value: <span id="rangeValue">12</span></p>
+                <input class="play" type="button" value="Play" id="play">
+                <input type="button" type="button" value="Cashout" id="cashout">
+            </div>
+            <div style="margin-top: 40px;margin-left: 60px;" class="instruction">
+                <p>1.You will be Given $10000 to start with</p>
+                <p>2.You have to set some bet amount</p>
+                <p>3.Click on start game to play to start game</p>
+                <p>4.Now choose tile one by one</p>
+                <p>5.If you dont want to loose money cashout to add profit to balance.</p><br/>
+                <p>6.If balance become zero u loose</p>
+            </div>
+        </div>
+
+        <div class="main-box">
+            <div class="box">
+
+            </div>
+        </div>
+
+    </div>
+</body>
+
+<script>
+    function displayValue(value) {
+        document.getElementById('rangeValue').textContent = value;
+    }
+</script>
+<script src="script.js"></script>
+</html>
diff --git a/Games/MineGamble/script.js b/Games/MineGamble/script.js
@@ -0,0 +1,121 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const boxContainer = document.querySelector(".box");
+    const playButton = document.getElementById("play");
+    const rangeInput = document.getElementById("rangeInput");
+    const amountInput = document.querySelector(".console input[type='number']");
+    const moneyDisplay = document.querySelector(".display-money");
+    const cashoutButton = document.getElementById("cashout");
+
+    let score = 10000;
+    let betAmount = 0;
+    let wonMoney = 0;
+    let gameActive = false;
+
+    function createGrid() {
+        boxContainer.innerHTML = "";
+        for (let i = 0; i < 25; i++) {
+            let box = document.createElement("div");
+            box.classList.add("small-box");
+            // box.textContent = "?"; // Add a placeholder text
+            boxContainer.appendChild(box);
+        }
+    }
+
+    function populateGrid(minesCount) {
+        const boxes = document.querySelectorAll(".small-box");
+        let minePositions = new Set();
+
+        while (minePositions.size < minesCount) {
+            let randomPosition = Math.floor(Math.random() * 25);
+            minePositions.add(randomPosition);
+        }
+
+        boxes.forEach((box, index) => {
+            if (minePositions.has(index)) {
+                box.dataset.type = "bomb";
+            } else {
+                box.dataset.type = "diamond";
+            }
+            box.addEventListener("click", handleBoxClick);
+        });
+    }
+
+    function handleBoxClick(event) {
+        if (!gameActive) return;
+
+        const box = event.target;
+        if (box.dataset.type === "diamond") {
+            box.textContent = "💎";
+            box.classList.add("diamond");
+            wonMoney += betAmount;
+            updateMoneyDisplay();
+        } else {
+            box.textContent = "💣";
+            box.classList.add("bomb");
+            gameOver();
+        }
+        box.removeEventListener("click", handleBoxClick);
+    }
+
+    function updateMoneyDisplay() {
+        moneyDisplay.textContent = `$${score + wonMoney}`;
+    }
+
+    function gameOver() {
+        gameActive = false;
+        score -= betAmount;
+        moneyDisplay.textContent = `$${score}`;
+        revealAllBoxes();
+        alert(`Game Over! Your final money is $${score}`);
+    }
+
+    function revealAllBoxes() {
+        const boxes = document.querySelectorAll(".small-box");
+        boxes.forEach(box => {
+            box.removeEventListener("click", handleBoxClick);
+            if (box.dataset.type === "bomb") {
+                box.textContent = "💣";
+                box.classList.add("bomb");
+            } else {
+                box.textContent = "💎";
+                box.classList.add("diamond");
+            }
+        });
+    }
+
+    function resetGame() {
+        if (gameActive) {
+            alert("Please cash out or finish the current game before starting a new one.");
+            return;
+        }
+
+        betAmount = parseInt(amountInput.value) || 0;
+        if (betAmount > score) {
+            alert("Insufficient funds. Please enter a lower bet amount.");
+            return;
+        }
+
+        wonMoney = 0;
+        gameActive = true;
+        updateMoneyDisplay();
+        createGrid();
+        populateGrid(parseInt(rangeInput.value));
+    }
+
+    function cashoutMoney() {
+        if (!gameActive) return;
+
+        gameActive = false;
+        score += wonMoney;
+        wonMoney = 0;
+        updateMoneyDisplay();
+        revealAllBoxes();
+    }
+
+    cashoutButton.addEventListener("click", cashoutMoney);
+    playButton.addEventListener("click", resetGame);
+
+    // Initial setup
+    createGrid();
+    updateMoneyDisplay();
+});
diff --git a/Games/MineGamble/style.css b/Games/MineGamble/style.css
@@ -0,0 +1,196 @@
+.game {
+    display: flex;
+    /* justify-content: space-between; */
+    height: 103vh;
+    width: 100vw;
+    background-color: #10242c;
+    overflow: hidden;
+}
+
+.main-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70%;
+
+}
+.console-box    {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 30%;
+}
+.box {
+    display: grid;
+    grid-template-columns: repeat(5, 50px);
+    grid-template-rows: repeat(5, 50px);
+    gap: 85px;
+    /* margin-left: 20px; */
+}
+
+.small-box {
+    width:120px;
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2b3a42;
+    color: white;
+    font-size:50px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.small-box:hover {
+    background-color: #3a4b57;
+}
+
+.bomb {
+    color: red;
+}
+
+.diamond {
+    color: green;
+}
+.console{
+    display: flex;
+    flex-direction: column;
+    background-color:  #2b3a42;
+    height: 50%;
+    width:60%;
+    border-radius: 10px;
+}
+.console h2 {
+    color: white;
+    margin-top: 50px;
+    margin-left: 30px;
+    margin-bottom: 10px;
+}
+.console input{
+    margin-top: 10px;
+
+    margin-left: 30px;
+    width: 70%;
+    height: 20px;
+}
+p{
+    margin-top: 10px;
+    color: white;
+    margin-left: 30px;
+    width: 70%;
+    height: 20px;
+}
+#play{
+    width: 100px;
+    margin-top: 20px;
+    height: 30px;
+    background-color: #08ec04;
+    border: none;
+    border-radius: 5px;
+}
+#cashout{
+    width: 100px;
+    margin-top: 20px;
+    height: 30px;
+    background-color: #08ec04;
+    border: none;
+    border-radius: 5px;
+}
+.money{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    width:103vw;
+    height:50px;
+    background-color:#10242c;
+    box-shadow: white 4px -31px 58px 13px;
+    color: white;
+}
+/* .game{
+
+} */
+*{
+    padding: 0px;
+    margin: 0px;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 70%;
+    height: 8px;
+    background: lightgray; 
+    border-radius: 5px;
+    outline: none;
+    opacity: 0.7;
+
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    background: #08ec04; 
+    border-radius: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; 
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #fff; 
+    cursor: pointer;
+    border: 2px solid #08ec04;
+    margin-top: -6px; 
+}
+
+input[type="range"]:hover::-webkit-slider-runnable-track {
+    background: #45a049; 
+}
+
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    background: #08ec04; 
+    border-radius: 5px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #fff; 
+    cursor: pointer;
+    border: 2px solid #08ec04;
+}
+
+input[type="range"]::-ms-track {
+    width: 50%;
+    height: 8px;
+    cursor: pointer;
+    background: transparent; 
+    border-color: transparent;
+    color: transparent;
+}
+
+input[type="range"]::-ms-fill-lower {
+    background: #08ec04; 
+    border-radius: 5px;
+}
+
+input[type="range"]::-ms-fill-upper {
+    background: lightgray; 
+}
+
+input[type="range"]::-ms-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #fff; 
+    cursor: pointer;
+    border: 2px solid #08ec04;
+}