window.onload = ()=>{ window.addEventListener("orientationchange", (e)=>{ initCanvas(); draw(); ph.innerHTML = ""; addPot(pot); }); var sb = document.getElementsByClassName("scoreboard")[0]; var cardSlots = document.getElementsByClassName("card"); var slotNames = ["card-one", "card-two", "card-three"]; var slotDrawNames = ["card-draw-one", "card-draw-two", "card-draw-three"]; var deckRanks = ["A","K","Q","J","10","9","8","7","6","5","4","3","2"]; var deckSuits = ["Spades", "Clubs", "Hearts", "Diamonds"]; var playerDisplays = document.getElementsByClassName("player"); var ph = document.getElementById("pot-holder"); var mc = document.getElementById("mainCanv"); var ctx = mc.getContext("2d"); var w, h, l, r, t, b, displayTimer; initCanvas(); var lb = document.getElementsByClassName("left-button")[0]; var rb = document.getElementsByClassName("right-button")[0]; lb.addEventListener("touchend", (e)=>{ e.preventDefault(); leftButton(); }); rb.addEventListener("touchend", (e)=>{ e.preventDefault(); rightButton(); }); lb.addEventListener("click", (e)=>{ e.preventDefault(); leftButton(); }); rb.addEventListener("click", (e)=>{ e.preventDefault(); rightButton(); }); var eb = document.getElementsByClassName("end-banner")[0]; eb.addEventListener("click", (e)=>{ eb.style.display = "none"; }); eb.addEventListener("touchend", (e)=>{ e.preventDefault(); eb.style.display = "none"; }); var bdt = document.getElementsByClassName("buck-display-text")[0]; var deck; var numberOfPlayers; var hands; var stage; var multWinners; var winners = []; var players = [{name: 1, bucks: 50},{name: 2, bucks: 50},{name: 3, bucks: 50},{name: 4, bucks: 50},{name: 5, bucks: 50},{name: 6, bucks: 50},{name: 7, bucks: 50},{name: 8, bucks: 50}]; var pot = 0; function addPot(num, lpos, tpos){ var newChildren = []; lpos = lpos || 0.3*w; tpos = tpos || 0.6*h; for(var i = 0; i{ for(var i = 0; i{ pot += 1; p.bucks -= 1; }); } addPot(pot); sb.style.border = "8px solid yellow"; sb.style.borderRight = "15px solid rgba(13,59,2,0.75)"; sb.style.borderLeft = "15px solid rgba(13,59,2,0.75)"; for(var i = 0;i= 3){ hands.push({player: i, cards: []}); hands[i-1].cards.push(deck.shift()); hands[i-1].cards.push(deck.shift()); hands[i-1].cards.push(deck.shift()); }else{ alert("The deck has run out"); break; } } } function calculateScore(cards){ var totalCombinations = 1; var columnRepeat = []; var allCombinations = []; var bestScore = 100; var allScores = []; cards.forEach((card)=>{ columnRepeat.push(card.value.length); }); columnRepeat.forEach((n)=>{ totalCombinations = totalCombinations*n; }); columnRepeat.forEach((n,i)=>{ var tempMult = 1; for(var j = i+1; j= cardsRemoved.length){ cardsRemoved.forEach((card)=>{ hands[player-1].cards[card] = deck.shift(); }); }else{ alert("The deck has run out"); } } } function bestTwoCardScore(hand){ var bestTwoCardScore = {score: 100}; var allTwoCardScores = []; hand.cards.forEach((c,i)=>{ var tempHand = []; hand.cards.forEach((card,j)=>{ if(j!=i){ tempHand.push(card); } }); allTwoCardScores.push({score: 18-calculateScore(tempHand), remove: [i]}); }); for(var i = 0; i=16){ hand.playing = true; return true; }else{ if(bestTwoCardScore(hand).score <= 4){ hand.playing = true; return true; }else{ if(Math.random()>0.85){ hand.playing = true; return true; }else{ hand.playing = false; hand.message = " folded."; return false; } } } } function decideToDraw(hand){ var bTCS = bestTwoCardScore(hand); var message; if(calculateScore(hand.cards) >= (18-bTCS.score)){ message = " stays."; hand.message = message; hand.drew = false; return false; }else{ message = " draws a card."; hand.message = message; hand.drew = true; return bTCS.remove; } } function play(){ if(stage == 1){ hands[0].playing = true; hands.forEach((hand)=>{ if(hand.playing && hand.player != 1){ drawCards(hand.player, decideToDraw(hand)); } if(hand.drew){ pot += 1; players[hand.player-1].bucks -= 1; } addPot(pot-ph.childNodes.length); }); } stage = 2; display(); } function fold(){ if(stage == 1){ sb.style.borderRight = "15px solid rgba(192,192,192,0.75)"; sb.style.borderLeft = "15px solid rgba(192,192,192,0.75)"; hands[0].playing = false; hands[0].drew = false; displayPlayerFoldCards(); hands.forEach((hand)=>{ if(hand.playing && hand.player != 1){ drawCards(hand.player, decideToDraw(hand)); } if(hand.drew){ pot += 1; players[hand.player-1].bucks -= 1; } addPot(pot-ph.childNodes.length); }); } stage = 2; stay(); } function drawPlayer(){ if(stage == 2){ var cTD = document.getElementsByClassName("card-select"); var cardsToRemove = []; for(var i = 0; i= 1){ drawCards(1, cardsToRemove); hands[0].drew = true; players[0].bucks -= 1; addPot(1); pot += 1; bdt.innerHTML = players[0].bucks; stage = 3; endGame(); }else{ } } } function stay(){ hands[0].drew = false; stage = 3; endGame(); } function endGame(){ winners = findWinner(); if(winners.length > 1){ multWinners = true; cardaroni(winners); endGame(); }else{ display(); } } function cardaroni(cands){ cands.forEach((p)=>{ if(p !== 1){ playerDisplays[p-2].style.border = "2px solid silver"; }else{ sb.style.border = "8px solid silver"; } hands[p-1].cards.push(deck.shift()); }); } function findWinner(){ var highestScore = -100; var cands = []; if(!multWinners){ hands.forEach((hand) => { var score = calculateScore(hand.cards); if(score > highestScore && hand.playing){ highestScore = score; } }); hands.forEach((hand) => { var score = calculateScore(hand.cards); if(score == highestScore && hand.playing){ cands.push(hand.player); } }); }else{ winners.forEach((p) => { var score = calculateScore(hands[p-1].cards); if(score > highestScore && hands[p-1].playing){ highestScore = score; } }); winners.forEach((p) => { var score = calculateScore(hands[p-1].cards); if(score == highestScore && hands[p-1].playing){ cands.push(p); } }); } return cands; } function restart(){ if(winners.length != 0){ players[winners[0]-1].bucks += pot; pot = 0; players.forEach((p, i)=>{ if(i !== (winners[0]-1) && hands[i].playing){ p.bucks -= 3; pot += 3; } }); } init(); assembleDeck(); shuffleDeck(); deal(); displayTimer = setTimeout(()=>{ displayPlayerCards(); },500); display(); } function leftButton(){ if(stage == 1){ play(); }else if(stage == 2){ drawPlayer(); }else{ displayPlayerFoldCards(); restart(); } } function rightButton(){ if(stage == 1){ fold(); }else if(stage == 2){ stay(); }else{ displayPlayerFoldCards(); restart(); } } function display(){ if(stage == 1){ hands.forEach(function(hand){ if(hand.player !== 1){ var playMessage = decideToPlay(hand)?"will play.":"folds."; if(!hand.playing){ playerDisplays[hand.player-2].style.background = "rgba(192,192,192,0.75)"; } displayPlayerMessage(hand.player, playMessage); } }); }else if(stage == 2){ lb.innerHTML = "Draw"; rb.innerHTML = "Stay"; hands.forEach((hand)=>{ if(hand.player === 1){ displayPlayerDrawCards(); }else{ displayPlayerMessage(hand.player, hand.message); } }); }else if(stage == 3){ if(hands[winners[0]-1].drew){ players.forEach((p, i)=>{ if(i !== (winners[0]-1)){ p.bucks -= 1; pot += 1; } }); } addPot(pot-ph.childNodes.length); bdt.innerHTML = players[0].bucks; lb.innerHTML = "Play Again"; rb.innerHTML = "Play Again"; hands.forEach((hand)=>{ if(hand.player === 1){ if(hand.playing){ displayPlayerCards(); } if(hand.playing && (hand.player !== winners[0])){ sb.style.borderRight = "15px solid rgba(200,0,0,0.75)"; sb.style.borderLeft = "15px solid rgba(200,0,0,0.75)"; } }else{ if(hand.playing && (hand.player !== winners[0])){ playerDisplays[hand.player-2].style.background = "rgba(200,0,0,0.75)"; } displayPlayerMessage(hand.player, "has " + calculateScore(hand.cards)); } }); eb.style.display = "flex"; if(winners[0] !== 1){ playerDisplays[winners[0]-2].style.border = "2px solid gold"; }else{ sb.style.borderRight = "15px solid gold"; sb.style.borderLeft = "15px solid gold"; } if(multWinners){ if(hands[winners[0]-1].drew){ eb.innerHTML = "Player "+ winners[0]+" wins by card-a-roni and drew a card for a buck!"; }else{ eb.innerHTML = "Player "+ winners[0]+" wins by card-a-roni!"; } }else{ if(hands[winners[0]-1].drew){ eb.innerHTML = "Player "+ winners[0]+" wins and drew a card for a buck!"; }else{ eb.innerHTML = "Player "+ winners[0]+" wins!"; } } } } function displayPlayerDrawCards(){ clearInterval(displayTimer); for(var i = 0; i<3; i++){ cardSlots[i].innerHTML = ""; var className = "card " +" "+ slotDrawNames[i]; cardSlots[i].className = className; } } function displayPlayerFoldCards(){ clearInterval(displayTimer); for(var i = 0; i<3; i++){ var className = "card card-folded"; cardSlots[i].className = className; } } function initCanvas(){ var rect = mc.getBoundingClientRect(); w = window.innerWidth; h = window.innerHeight; mc.width = w; mc.height = h; l = rect.left; r = rect.right; t = rect.top; b = rect.bottom; } function draw(){ ctx.clearRect(0,0,w,h); drawMain(); drawPlayers(); } function displayPlayerMessage(player, message){ playerDisplays[player-2].children[1].innerHTML = message; } function drawPlayers(){ var boxW = 114; var boxH = 36; var bottomSpacer = 10; var sideSpacer = 1; if(h>w){ bottomSpacer = -50; sideSpacer = 0.5; } for(var i = 0; i<3; i++){ var sideMult = 1; if(i !== 0){sideMult = sideSpacer} playerDisplays[i].style.top = parseFloat(h-(1+i)*(boxH+18)+bottomSpacer+t)+"px"; playerDisplays[i].style.left = parseFloat((i+1)*(0.08)*sideMult*w-25+l)+"px"; } playerDisplays[3].style.top = parseFloat((0.60*h)-(boxH+10)+t)+"px"; playerDisplays[3].style.left = parseFloat((0.5*w)-(boxW/2))+"px"; for(var i = 4; i<7; i++){ var sideMult = 1; if(i !== 4){sideMult = sideSpacer} playerDisplays[i].style.top = parseFloat(h-((i-3)*(boxH+18))+bottomSpacer+t)+"px"; playerDisplays[i].style.left = parseFloat(w-((i-3)*(0.08)*sideMult*w)-boxW+25+l)+"px"; } } function drawMain(){ ctx.beginPath(); ctx.moveTo(0.1*w,h); ctx.lineTo(0.35*w, 0.6*h); ctx.lineTo(w-(0.35*w), 0.6*h); ctx.lineTo(w-(0.1*w),h); ctx.lineTo(0.1*w,h); var pat = ctx.createPattern(woodImg, "repeat"); ctx.strokeStyle = "white"; ctx.lineWidth = 1.5; ctx.fillStyle = pat; ctx.fill(); ctx.stroke(); } function assembleDeck(){ var multiplier = 1; var value = []; for(var i = 0; i < deckSuits.length; i++){ for(var j = 0; j< deckRanks.length; j++){ if(deckSuits[i] == "Spades"){ multiplier = 2; }else if(deckSuits[i] == "Hearts"){ multiplier = -1; }else{ multiplier = 1; } if(deckRanks[j] == "A"){ value = [multiplier*1, multiplier*11]; }else if(isNaN(deckRanks[j])){ value = [multiplier*0.5]; }else{ value = [parseInt(deckRanks[j])*multiplier]; } deck.push({rank: deckRanks[j], suit: deckSuits[i], value: value}); } } } function shuffleDeck(){ var temp; var first; var second; for(var i = 0; i < 500; i++){ first = Math.round(Math.random()*(deck.length-1)); second = Math.round(Math.random()*(deck.length-1)); temp = deck[first]; deck[first] = deck[second]; deck[second] = temp; } } function getSuitPos(suit){ switch (suit){ case "Clubs": return -1; break; case "Hearts": return -99; break; case "Spades": return -197; break; case "Diamonds": return -295; break; } } function getRankPos(rank){ switch (rank){ case "A": return -2; break; case "2": return -75; break; case "3": return -148; break; case "4": return -220; break; case "5": return -294; break; case "6": return -366; break; case "7": return -440; break; case "8": return -512; break; case "9": return -586; break; case "10": return -658 break; case "J": return -732; break; case "Q": return -804; break; case "K": return -878; break; } } function displayPlayerCards(){ sb.innerHTML = calculateScore(hands[0].cards); bdt.innerHTML = players[0].bucks; for(var i = 0; i<3; i++){ cardSlots[i].style.background = "url(https://www.dropbox.com/s/ogwts0dgtgpxlge/20190111222720.png?dl=1)" +getRankPos(hands[0].cards[i].rank)+ "px "+getSuitPos(hands[0].cards[i].suit)+"px"; cardSlots[i].innerHTML = ""; var className = "card " +slotNames[i]; cardSlots[i].className = className; } } document.getElementsByClassName("loader")[0].style.display = "none"; draw(); restart(); showRules(); } var woodImg = new Image(); woodImg.src = "https://www.dropbox.com/s/iuebfuqbl39m9wt/20190112130443.png?dl=1"; function showRules(){ alert("18 Rules\n\nGeneral Explanation:\n\nAll players ante a buck to start. Each player is dealt three cards. Each card has a value according to it’s rank and suit. The goal is to win the round by holding the hand that adds up to 18 or closest to it. Every round, each player will have the chance to decide whether they’ll play or fold. Then, the players that decided to play will have a chance to draw up to three cards, but drawing costs a buck. If a player decides not to draw a card or “stay”, they are not required to pay a buck. A player will discard their choice of up to three cards before drawing replacements from the deck. Each player will then show their hand and the closest hand to 18 wins the pot (including all bucks paid to draw cards). Scores over 18 are subtracted from 18 by the amount they’re over (I.e. if a player’s cards add up to 20, they have a score of 16.) If the player pays a buck, draws at least one card and wins, everyone at the table has to pay that player a buck, whether they played that round or not. If two or more players tie for closest to 18, a card-a-roni ensues. Each player in a card-a-roni will be dealt 1 card at a time until a winner emerges. Players that choose to playi and lose a round will be required to match the pot up to a three buck limit. \n\nCard Point Values:\n\nAces are 1 or 11, your choice.\nFace cards are 1/2.\nEverything else is the rank of the card.\n\nSpades are double value. (I.e. Ace of spades is worth 2 or 22 points)\n\nHearts are negative value. (I.e. 5 of hearts is worth -5 points)\n\nExample Hands:\n\nAce of clubs, 9 of diamonds, 2 of hearts = 18 (11 + 9 - 2 = 18).\n\n10 of diamonds, 3 of spades, 6 of clubs = 14 (10 + 3(2) + 6 = 22 => 14).\n\nK of hearts, ace of diamonds, 8 of spades = 16.5 (-1/2 + 1 + 8(2) = 16.5).\n\nAdditional Rules:\n\nIf a player gets 18, they must sing “I’m 18 and I like it!”\n\nScores over 18 must be phrased as follows: “I have 16 on account of I have 20.”\n\nIf no one chooses to play but the dealer (who chooses last), everyone will have another chance to choose to play and keep them honest so they don’t win by default.\n\nIf no one chooses to play or just one player chooses to play (and wins by default), all players re-ante a buck before starting the next round."); }

18 Card Game