diff --git a/Games/MineGamble/index.html b/Games/MineGamble/index.html new file mode 100644 index 000000000..13d01d8a3 --- /dev/null +++ b/Games/MineGamble/index.html @@ -0,0 +1,54 @@ + + + + + + + Mines + + + +
+
+

Balance :

+
+ $10000 +
+
+
+
+

Amount

+ +

Mines

+ +
+

Selected value: 12

+ + +
+
+

1.You will be Given $10000 to start with

+

2.You have to set some bet amount

+

3.Click on start game to play to start game

+

4.Now choose tile one by one

+

5.If you dont want to loose money cashout to add profit to balance.


+

6.If balance become zero u loose

+
+
+ +
+
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/Games/MineGamble/script.js b/Games/MineGamble/script.js new file mode 100644 index 000000000..4811d4cb8 --- /dev/null +++ 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(); +}); \ No newline at end of file diff --git a/Games/MineGamble/style.css b/Games/MineGamble/style.css new file mode 100644 index 000000000..7b2558b9b --- /dev/null +++ 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; +} \ No newline at end of file