Team P’New Blackjack Game
✨ SUPACHAI KHEAWJUY
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" sizes="32x32" href="https://raw.githubusercontent.com/spicyz/fakrube/main/x32.png"> <title>Blackjack</title> <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" /> </head> <style> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); body{ font-family: 'Press Start 2P', cursive; margin: 0; width: 100%; height: 100%; background-image: url("https://i.redd.it/rrhjaimewzu21.png"); /* background-size: cover; */ background-position: top; } .card{ border: 5px solid black; border-radius: 13px; width: 180px; height: 252px; margin: 0.5em; } #game{ /* background-color: black; */ /* margin: 0 2em 0 2em; */ grid-column: 1 / -1; display: flex; justify-content: space-between; } #dealer{ /* border-left: 0.6em solid red; background: hsla(0, 100%, 50%, 0.2); */ } #player{ text-align: right; /* border-right: 0.6em solid blue; background: hsla(180, 100%, 50%, 0.2); */ } #dealer h1.pos, #dealer h1.score{ margin-left: 0.6em; } #player h1.pos, #player h1.score{ margin-right: 0.6em; } #play{ display: flex; justify-content: center; } .hide{ content: url("https://raw.githubusercontent.com/spicyz/fakrube/main/-1.png"); } .center{ display: flex; justify-content: center; } .nes-dialog{ padding: 3em; } .nes-btn{ margin: 1em; padding: 1.3em; } #gamePlay{ display: flex; flex-direction: column; align-content: space-between; } .title{ text-align: center; font-size: 4em; margin-top: 0.8em; margin-bottom: 5px;; } </style> <body> <div id="container"> <dialog class="nes-dialog is-dark is-rounded" id="startDialog"> <form method="dialog"> <p class="nes-text is-primary" style="font-size: 2.5em;">Hi there!</p> <p class="nes-text">Yes you. Are you a knight that come to help the princess? Okay listen you need more lucky to help her 'cause this demon is a golden hand dealer, No body can defeat him. You must use your skill of blackjack to defeat him. It your times!</p> <div class="dialog-menu center"> <button class="nes-btn is-error" onclick=closeDialog()>Close</button> </div> </form> </dialog> <dialog class="nes-dialog is-dark is-rounded" id="gameOver"> <form method="dialog"> <p class="title nes-text is-error">Game Over</p> <div class="dialog-menu center"> <button class="nes-btn is-error" onclick=gameReset()>Restart</button> </div> </form> </dialog> <dialog class="nes-dialog is-dark is-rounded" id="gameWins"> <form method="dialog"> <p class="title nes-text is-warning">Congratulations!</p> <div class="dialog-menu center"> <button class="nes-btn is-success" onclick=gameReset()>Confirm</button> </div> </form> </dialog> <dialog class="nes-dialog is-dark is-rounded" id="gameDraw"> <form method="dialog"> <p class="title nes-text is-primary">Draw</p> <div class="dialog-menu center"> <button class="nes-btn is-primary" onclick=gameReset()>Play again</button> </div> </form> </dialog> <div id="info"> <h1 class="title" style="text-decoration: underline;">BLACKJACK</h1> </div> <div id="gamePlay"> <div id="game"> <div id="dealer" class="nes-container is-rounded is-dark"> <h1 class="pos nes-text is-error">Dealer</h1> <h1 class="score" id="dscore">0</h1> <div id="dh"></div> </div> <div id="player" class="nes-container is-rounded is-dark"> <h1 class="pos nes-text is-primary">Player</h1> <h1 class="score" id="pscore">0</h1> <div id="ph"></div> </div> </div> <div id="play"> <button class="nes-btn is-success" id="pdeal" onclick=playerDeal()>Hit</button> <button class="nes-btn is-error" id="pstand" onclick=playerStand()>Stand</button> </div> </div> </div> </body> <script> const suit = ["Spade", "Heart", "Diamond", "Club"]; const number = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"]; var deck = []; var playerHand = [], dealerHand = []; var pStand = false, dStand = false; var startContent = false; startDialog = () => { if (!startContent){ document.querySelector("#startDialog").showModal(); } } closeDialog = () => { startContent = true; gameInitialize(); } playerWins = () => { document.querySelector("#gameWins").showModal(); } dealerWins = () => { document.querySelector("#gameOver").showModal(); } draw = () => { document.querySelector("#gameDraw").showModal(); } gameResult = () => { if (pStand && dStand){ var dScore = getDealerScore(); var pScore = getPlayerScore(); if (dScore > pScore){ setTimeout(dealerWins, 500); } else if (pScore > dScore){ setTimeout(playerWins, 500); } else{ setTimeout(draw, 500); } } } checkPlayerHands = () => { if (getPlayerScore() > 21){ playerStand(); dealerStand(); setTimeout(dealerWins, 500); } } checkDealerHands = () => { if (getDealerScore() > 21){ dealerStand(); setTimeout(playerWins, 500); } } dealerBot = () => { document.querySelector(".hide").classList.remove("hide"); document.querySelector("#dscore").innerHTML = getDealerScore(); while (getDealerScore() < 18){ dealerDeal(); } if (getDealerScore() >= 18){ dealerStand(); if (getDealerScore() > 21){ checkDealerHands(); } else{ gameResult(); } } } createDeck = () => { var pictCount = 0; for (let i=0;i<suit.length;i++){ for (let j=0;j<number.length;j++){ if (!(typeof(number[j]) === "number")){ var card = { "Number": number[j], "Suit": suit[i], "Img": "https://raw.githubusercontent.com/spicyz/fakrube/main/" + pictCount + ".gif" }; } else{ var card = { "Number": number[j], "Suit": suit[i], "Img": "https://raw.githubusercontent.com/spicyz/fakrube/main/" + pictCount + ".png" }; } deck.push(card); pictCount++; } } } shuffleDeck = () => { for (let i=deck.length-1;i>0;i--){ var rand = Math.floor(Math.random() * i); var temp = deck[i]; deck[i] = deck[rand]; deck[rand] = temp; } } updatePlayerHand = (card) => { var showHands = document.querySelector("#ph"); var img = document.createElement("img"); img.src = card.Img; img.setAttribute("class", "card"); showHands.appendChild(img); } updateDealerHand = (card) => { var showHands = document.querySelector("#dh"); var img = document.createElement("img"); img.src = card.Img; img.setAttribute("class", "card"); showHands.appendChild(img); } hiddenCard = (card) => { var showHands = document.querySelector("#dh"); var img = document.createElement("img"); img.src = card.Img; img.setAttribute("class", "card hide"); showHands.appendChild(img); } playerDeal = () => { if (!(pStand)){ playerHand.push(deck[deck.length-1]); updatePlayerHand(playerHand[playerHand.length-1]); deck.pop(); document.querySelector("#pscore").innerHTML = getPlayerScore(); checkPlayerHands(); } } dealerDeal = () => { if (!(dStand)){ dealerHand.push(deck[deck.length-1]); if (dealerHand.length == 2 && pStand == false){ hiddenCard(dealerHand[dealerHand.length-1]); var score = getDealerScore(); var x = dealerHand[1].Number; if (x == "A"){ score -= 11; } else if (x == "J" || x == "Q" || x == "K"){ score -= 10; } else { score -= x; } document.querySelector("#dscore").innerHTML = score; } else{ updateDealerHand(dealerHand[dealerHand.length-1]); document.querySelector("#dscore").innerHTML = getDealerScore(); } deck.pop(); } } getPlayerScore = () => { var score = 0; var playerAce = 0; for (let i=0;i<playerHand.length;i++){ var x = playerHand[i].Number; if (x == "A"){ score += 11; playerAce += 1; } else if (x == "J" || x == "Q" || x == "K"){ score += 10; } else { score += x; } } while (score > 21 && playerAce > 0){ playerAce -= 1; score -= 10; } return score; } getDealerScore = () => { var score = 0; var dealerAce = 0; for (let i=0;i<dealerHand.length;i++){ var x = dealerHand[i].Number; if (x == "A"){ score += 11; dealerAce += 1; } else if (x == "J" || x == "Q" || x == "K"){ score += 10; } else { score += x; } } while (score > 21 && dealerAce > 0){ dealerAce -= 1; score -= 10; } return score; } playerStand = () => { pStand = true; if (getPlayerScore() <= 21){ dealerBot(); } } dealerStand = () => { dStand = true; } clearPlayerHand = () => { playerHand = []; document.querySelector("#ph").innerHTML = ""; } clearDealerHand = () => { dealerHand = []; document.querySelector("#dh").innerHTML = ""; } gameInitialize = () => { createDeck(); shuffleDeck(); clearDealerHand(); clearPlayerHand(); playerDeal(); dealerDeal(); playerDeal(); dealerDeal(); } gameReset = () => { deck = []; playerHand = [], dealerHand = []; pStand = false, dStand = false; gameInitialize(); } run = () => { startDialog(); } run(); </script> </html>