This is Black Jack game where if a person gets a sum of 21 by randomly picking cards, he/she wins the bet

sarfraz-mohsin · sarfraz-mohsin · commit 9fe76d8fb464 · 2022-11-19T21:56:27.000+05:30
diff --git a/blackJack/backgroundImage/casino table.jpg b/blackJack/backgroundImage/casino table.jpg
diff --git a/blackJack/index.css b/blackJack/index.css
@@ -0,0 +1,46 @@
+body{
+    position: relative;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    background-size: cover;
+    width: 500px;
+    height: 400px;
+    align-items: center;
+    justify-content: center;
+}
+
+img{
+    position: absolute;
+    z-index: -10;
+    height: 400px;
+    width: 500px;   
+}
+
+h1{
+    margin-top: 0px;
+    padding-top: 20px;
+    color: goldenrod;
+    font-weight: bold;
+}
+
+p{
+    color: white;
+    font-weight: bold;
+}
+
+.italic{
+    font-style: italic;
+}
+
+button{
+    color: #045127;
+    background-color: goldenrod;
+    width: 150px;
+    height: 40px;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    border: 1px solid #045127;
+    font-weight: bold;
+    border-radius: 5px;
+}
diff --git a/blackJack/index.html b/blackJack/index.html
@@ -0,0 +1,21 @@
+<!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="stylesheet" href="index.css">
+    <title>Black Jack</title>
+</head>
+<body>
+    <img src="backgroundImage/casino table.jpg" alt="">
+    <h1>Blackjack</h1>
+    <p id="message-el" class="italic">Want to play a round?</p>
+    <p id="cards-el">Cards:</p>
+    <p id="sum-el">Sum:</p>
+    <button onclick="startGame()">Start Game</button>
+    <button onclick="newCard()">New Card</button>
+    <p id="player-el"></p>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/blackJack/index.js b/blackJack/index.js
@@ -0,0 +1,83 @@
+let cards = []
+
+let sum = 0
+let hasBlackJack = false;
+let isAlive = false;
+let message = '';
+
+let messageEl = document.getElementById('message-el')
+let sumEl = document.getElementById('sum-el')
+let cardsEl = document.getElementById('cards-el');
+let playerEl = document.getElementById('player-el')
+
+let player = {
+    name: 'Sarfraz',
+    chips: '150'
+}
+
+playerEl.textContent = player.name + ': $' + player.chips
+
+function getRandonCard(){
+    
+    let randomNumber = Math.floor( Math.random()*13 ) + 1;
+    
+    if(randomNumber === 1){
+        randomNumber = 11;
+    }
+    else if(randomNumber > 10){
+        randomNumber = 10;
+    }
+    else{
+        randomNumber;
+    }
+
+    return randomNumber;
+
+}
+
+function startGame(){
+    let firstCard = getRandonCard();
+    let secondCard = getRandonCard();
+    isAlive= true;
+
+    sum= firstCard + secondCard;
+    cards = [firstCard, secondCard];
+
+    renderGame();
+}
+
+function renderGame(){
+
+    cardsEl.textContent = 'Cards: ';
+    for(let i=0; i<cards.length; i++){
+        cardsEl.textContent += cards[i]+ ' ';
+    }
+
+    sumEl.textContent = 'Sum: ' + sum;
+
+    if(sum <21){
+        message ='Do you want to draw a card ?' 
+    }
+
+    else if(sum ===21){
+        message = 'You have won the game'
+        hasBlackJack = true;
+    }
+
+    else{
+        message = 'You have lost the game'
+        isAlive = false;
+    }
+
+    messageEl.textContent = message;
+
+}
+
+function newCard(){
+    if(isAlive === true && hasBlackJack=== false){
+    let card = getRandonCard();
+    sum += card;
+    cards.push(card);
+    renderGame(); 
+    }
+}
