diff --git a/index.html b/index.html new file mode 100644 index 0000000..6cdf437 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + Slot Machine + + + + + + + +

+ Welcome to the Sand Dollar Casino's Mermaid + Slots + +

+ +
+
+
+
+
+
+ Catch all 3 mermaids for a special bonus! +
+
Starting Credit: $1000
+
Current Bet: $0
+
+ + + + +
+
+ +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9746117 --- /dev/null +++ b/script.js @@ -0,0 +1,144 @@ +/* +REEL ACTION +1. create an array of icons +2. randomize selection from array once for each reel +3. Insert emoji into DOM +4. Create CSS animation to imitate spinning reel + +BETTING +1. Add event listeners to betting btns +2. Have +/- buttons increment/decrement respectively +3. Set max bet to 100 +4. Add event listener to spin btn, give condition if bet > 0 +5. Give player 1000 starting earnings +6. Calculate earnings based on reel result + no match = lose bet, 2 match = return bet + 10, 3 match = double bet, 3 mermaids bonus = 5x bet +7. disable bet and spin button if out of money and alert +8. After all money lost, populate "Play again button" to reset the game +*/ + +const icons = ["🧜🏽‍♀️", "🦑", "🦭", "🐚", "🐬", "🐡", "🦈", "🦀"]; + +const reel1 = document.getElementById("reel1"); +const reel2 = document.getElementById("reel2"); +const reel3 = document.getElementById("reel3"); + +let betAmt = 0; +let currentEarnings = 1000; +const earnings = document.querySelector(".currentEarnings"); +const totalBet = document.querySelector(".totalBet"); +const add10 = document.querySelector(".betUp"); +const minus10 = document.querySelector(".betDown"); +const yolo = document.querySelector(".maxBet"); +const betBtn = document.querySelector(".startBet"); +const payMsg = document.querySelector(".payoutMessage"); +const reels = document.querySelector(".reels"); + +add10.addEventListener("click", () => { + if (currentEarnings - betAmt - 10 < 0) { + alert("Slow down there, big spender! You ran out of sand dollars!"); + } else { + setBet(10); + } +}); +minus10.addEventListener("click", () => { + if (betAmt <= 0) { + alert("You can't bet less than zero!"); + } else { + setBet(-10); + } +}); +betBtn.addEventListener("click", () => { + if (currentEarnings - betAmt - 100 < 0) { + alert( + "Come back when ya got more sand dollars, old chum! (refresh to play again)" + ); + } else { + setBet(100); + } +}); +yolo.addEventListener("click", () => { + if (currentEarnings === 0) { + alert( + "Come back when ya got more sand dollars, old chum! (refresh to play again)" + ); + } + setBet(currentEarnings - betAmt); +}); + +function randomIcon() { + return Math.floor(Math.random() * icons.length); +} + +document.querySelector(".spinBtn").addEventListener("click", runGame); + +function runGame() { + const spins = spinReels(); + const winnings = calcWinnings(spins); + console.log(winnings); + setEarnings(betAmt + winnings); + setBet(-betAmt); +} + +function spinReels() { + if (betAmt === 0) { + alert("Place your bets before spinning!"); + } else { + reel1.innerHTML = ""; + reel2.innerHTML = ""; + reel3.innerHTML = ""; + const spins = [ + icons[randomIcon()], + icons[randomIcon()], + icons[randomIcon()] + ]; + setTimeout(function () { + reel1.innerHTML = spins[0]; + }, 500); + setTimeout(function () { + reel2.innerHTML = spins[1]; + }, 800); + setTimeout(function () { + reel3.innerHTML = spins[2]; + }, 1100); + return spins; + } +} + +function calcWinnings(spins) { + /* no match = lose bet, 2 match = return bet + 10, 3 match = double bet, 3 mermaids bonus = 5x bet*/ + + if (spins[0] === icons[0] && spins[1] === icons[0] && spins[2] === icons[0]) { + payMsg.innerHTML = `Congratulations, you got the 5X mermaid bonus! $${ + betAmt * 5 + } awarded!`; + return betAmt * 4; + } else if (spins[0] === spins[1] && spins[0] === spins[2]) { + payMsg.innerHTML = `Congrats, you won a 2X bonus! $${ + betAmt * 2 + } awarded!`; + return betAmt; + } else if ( + spins[0] === spins[1] || + spins[0] === spins[2] || + spins[2] === spins[1] + ) { + payMsg.innerHTML = `Not bad, you got the 1.2X bonus! $${Math.round( + betAmt * 1.2 + )} awarded!`; + return Math.round(betAmt * 0.2); + } else { + payMsg.innerHTML = `Better luck next time!`; + return -betAmt * 2; + } +} + +function setEarnings(value) { + currentEarnings += value; + earnings.innerHTML = `Current Earnings: $${currentEarnings}`; +} + +function setBet(value) { + betAmt += value; + totalBet.innerHTML = `Current Bet: $${betAmt}`; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..a0735cc --- /dev/null +++ b/style.css @@ -0,0 +1,132 @@ +* { + box-sizing: border-box; + outline: 0; +} + +body { + font-family: "Lobster", cursive; + margin: 0; + text-align: center; + background-color: #4cc3c7; + background-image: url("https://www.transparenttextures.com/patterns/silver-scales.png"); + background-color: #4cc3c7; + background-image: url("https://www.transparenttextures.com/patterns/black-scales.png"); +} +h1 { + font-size: clamp(1.8rem, 1.3333rem + 2.0741vw, 3.2rem); + width: 100%; + color: rgb(243, 223, 108); + text-shadow: 1px 2px 2px rgb(190, 53, 73); +} + +.reelContainer { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + width: 100%; + background-image: url("https://images.unsplash.com/photo-1586794793342-cae7afff0309?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8b2NlYW4lMjBmaXNofGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"); + background-position: center bottom; + border: 2px solid gold; +} + +.reel { + width: 20vw; + background-color: rgba(194, 212, 250, 0.646); + height: 18vw; + border: 4px solid rgb(121, 198, 243); + font-size: clamp(2.5rem, 1.3333rem + 7.4074vw, 8rem); + margin: 2rem 1rem; + padding: clamp(0.5rem, -0.1667rem + 2.963vw, 2.5rem); + /* padding: 2.5rem 1.5rem; */ + border-radius: 50%; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 2px 3px 4px rgba(0, 0, 0, 0.541); +} + +.btnWrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.spin { + display: block; + width: 100%; + margin: 0.5em; +} + +.bet { + margin: 0.5em 1.3em; + padding: 0.5em 0.9em; + font-size: 1.2em; +} + +button { + background-color: rgb(245, 227, 129); + color: rgb(214, 141, 152); + text-shadow: 1px 1px 2px rgb(138, 63, 74), 2px 2px 2px rgba(0, 0, 0, 0.4); + border: 1px solid rgb(72, 162, 165); + border-radius: 25px; + font-family: "Sriracha", cursive; + box-shadow: 2px 2px 3px teal, 2px 2px 5px rgb(1, 75, 75); +} + +.spinBtn { + padding: 0.7em 1.1em; + font-size: 2em; + border-radius: 50%; +} + +/* .startBet, +.maxBet { + font-size: 1.5rem; + width: 12vw; +} */ + +.fas { + margin: 0 0.5em; + color: rgb(201, 138, 147); + text-shadow: 2px 2px 3px teal, 2px 2px 5px rgb(1, 75, 75); +} + +.currentEarnings, +.totalBet { + font-size: 2rem; + color: white; + text-shadow: 2px 2px 3px teal, 2px 2px 5px rgb(1, 75, 75); +} + +.payoutMessage { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 0.3rem; + margin-bottom: 1.5rem; + font-family: inherit; + font-size: clamp(0.9rem, 0.6rem + 1.3333vw, 1.8rem); + color: rgb(201, 96, 111); + text-shadow: 1px 1px 2px teal, 2px 2px 3px rgb(1, 75, 75); + background-color: rgba(245, 227, 129, 0.7); + overflow: hidden; +} + +.payoutMessage span { + /* scrolling text effects update with each spin */ + animation: marquee 7s linear infinite; + padding-left: 40%; + display: inline-block; + font-family: "Sriracha", cursive; + text-transform: uppercase; + background-color: transparent; +} + +@keyframes marquee { + 0% { + transform: translate(50%, 0); + } + + 100% { + transform: translate(-100%, 0); + } +}