Basic functions of Blackjack done - even counting cards in your head

2025-12-29 08:56:11 +00:00 · 2024-10-26 00:31:07 +02:00
parent 25fa32724b
commit 398c900fa0
3 changed files with 169 additions and 16 deletions
--- a/index.html
+++ b/index.html
@@ -10,13 +10,17 @@
    <title>BlackJack</title>
 </head>
 <body>
-    <article class="cards cards1"><img src="./BlackJackCards/J-B.png" class="card" alt=""></article>
+    <h2 id="dealerScore">???</h2>
+    <article class="cards cards1"></article>
    <h2 id="playerScore">0</h2>
    <article id="playerHand" class="cards cards2"></article>
-    <section>
+    <section id="buttons">
        <button onclick="hit()">Hit</button>
        <button onclick="stand()">Stand</button>
    </section>
+    <section id="reset">
+        <button id="resetBTN" onclick="reset()">Reset</button>
+    </section>
    <script src="main.js"></script>
 </body>
 </html>
--- a/main.js
+++ b/main.js
@@ -1,4 +1,6 @@
 let playerCards = [];
+let dealerCards = [];
+let dealerScore = 0;
 let score = 0;

 const Deck = {
@@ -114,7 +116,33 @@ function addScore(num){
            score += isNaN(e) ? 10 : parseInt(e);
        }
    });
-    document.querySelector('h2').innerHTML = score;
+    document.querySelector('#playerScore').innerHTML = score;
+}
+
+function addDealerScore(num){
+    dealerCards.push(num);
+
+    //? Filters out Aces
+    const withoutAces = dealerCards.filter(e => e !== 'A');
+
+    const count = dealerCards.length-withoutAces.length;
+
+    //? Adds the aces to the end
+    for(let i=0; i<count;i++){
+        withoutAces.push('A');
+    }
+
+    dealerCards = [...withoutAces];
+
+    dealerScore = 0;
+    dealerCards.forEach(e => {
+        if(e === 'A'){
+            dealerScore += (dealerScore < 11) ? 11 : 1;
+        }else{
+            dealerScore += isNaN(e) ? 10 : parseInt(e);
+        }
+    });
+    document.querySelector('#dealerScore').innerHTML = dealerScore;
 }

 function reshuffle(){
@@ -123,11 +151,12 @@ function reshuffle(){
    setTimeout(200);
 }

-function createCard(imgSource){
+function createCard(imgSource, people){
    let newCard = document.createElement('img');
    newCard.src = imgSource;
    newCard.classList.add('card');
-    document.querySelector('.cards2').append(newCard);
+    if(people === 'human') document.querySelector('.cards2').append(newCard);
+    else document.querySelector('.cards1').append(newCard);
 }

 function cardAvail(num){
@@ -152,17 +181,36 @@ function cardAvail(num){
    const card = currentDeck[randomCard][cardIndex];

    addScore(card);
-
-    createCard(`./${randomCard}/${card}.png`);
-
-    /*document.querySelectorAll('.card').forEach(e => {
-        e.src = `./${randomCard}/${card}.png`;
-    });*/
-
+    createCard(`./${randomCard}/${card}.png`, 'human');
+    currentDeck[randomCard].splice(cardIndex, 1);
+
+    console.log(`Card removed from ${randomCard}: ${card}`);
+}
+
+function dealerCardGet(num){
+    if(dealerScore>18) return;
+    const availableCards = ['Clubs', 'Diamonds', 'Hearts', 'Spades'].filter((suit, idx) => num[idx] > 0);
+
+    if(availableCards.length === 0){
+        console.log('No cards available. Deck is empty.');
+        return;
+    }
+
+    const randomCard = availableCards[Math.floor(Math.random() * availableCards.length)];
+
+    if(!currentDeck[randomCard] || currentDeck[randomCard].length === 0){
+        console.log(`Error: ${randomCard} has no cards left.`);
+        return;
+    }
+
+    const cardIndex = Math.floor(Math.random()*currentDeck[randomCard].length);
+    const card = currentDeck[randomCard][cardIndex];
+
+    addDealerScore(card);
+    createCard(`./${randomCard}/${card}.png`);
    currentDeck[randomCard].splice(cardIndex, 1);

    console.log(`Card removed from ${randomCard}: ${card}`);
-    console.log(currentDeck);
 }

 function isDeckEmpty() {
@@ -175,21 +223,76 @@ function addCard(){
    }
    cardAvail(cardsleft());
    if(score > 21){
-        alert("You lost");
+        resultText('lost');
    }
 }

+function addCardDealer(){
+    if(isDeckEmpty()){
+        reshuffle();
+    }
+    dealerCardGet(cardsleft());
+    if(dealerScore<18){
+        addCardDealer();
+    }
+}
+
+async function resultText(res){
+    let text = document.createElement('h1');
+    text.classList.add('result');
+    if(res==='won'){
+        text.classList.add('won');
+        text.innerText = "You've won!";
+    }else if(res==='lost'){
+        text.classList.add('lost');
+        text.innerText = "You've lost!";
+    }else if(res==='bj'){
+        text.classList.add('blackjack');
+        text.innerText = "BLACKJACK";
+    }else if(res==='draw'){
+        text.classList.add('draw');
+        text.innerHTML = "It's a Draw!"
+    }
+    document.body.append(text);
+    setTimeout(() => {
+        text.remove();
+    }, 600);
+    document.querySelector('#buttons').style.display = 'none';
+    document.querySelector('#reset').style.display = 'flex';
+}
+
+function dealerHit(){
+    addCardDealer();
+}

 function hit(){
    addCard();
    if(score === 21){
-        alert("BLACKJACK!")
+        resultText('bj');
+        //- Add 1.5 money
    }
 }

 function stand(){
+    dealerHit();
+    if(score>21 || (score < dealerScore && dealerScore<=21)){
+        resultText('lost');
+    }else if(dealerScore>21 || (score > dealerScore && score<=21)){
+        resultText('won');
+    }else{
+        resultText('draw');
+    }
+}
+
+function reset(){
    document.getElementById('playerHand').innerHTML = "";
+    document.querySelector('.cards1').innerHTML = "";
    score = 0;
+    dealerScore = 0;
    playerCards = [];
-    document.querySelector('h2').innerHTML = score;
+    dealerCards = [];
+    document.querySelector('#playerScore').innerHTML = score;
+    document.querySelector('#dealerScore').innerHTML = '???';
+    document.querySelector('#buttons').style.display = 'flex';
+    document.querySelector('#reset').style.display = 'none';
 }
--- a/style.css
+++ b/style.css
@@ -36,6 +36,44 @@ h2{
    margin-top: .5rem;
 }

+.result{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    filter: drop-shadow(1.5px 1.5px 6px #000);
+    text-transform: uppercase;
+    font-size: 100px;
+    animation: pop 0.5s ease-in-out;
+}
+
+.won{
+    color: #0f0;
+}
+
+.lost{
+    color: #f00;
+}
+
+.blackjack{
+    color: #ff0;
+}
+
+.draw{
+    color: #fff;
+}
+
+@keyframes pop{
+    0%{
+        scale: 0.5;
+        transform: translate(-100%, -50%);
+    }
+    100%{
+        scale: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
 button{
    border-radius: 5px;
    border: none;
@@ -44,5 +82,13 @@ button{
    margin: .5rem;
    color: #fff;
    background: #6b6b6b;
+    box-shadow: 10px 10px 10px #202020,
+        inset 2.5px 2.5px 2.5px #999;
    cursor: pointer;
+}
+button#resetBTN{
+    width: 140px;
+}
+#reset{
+    display: none;
 }