Question

In: Computer Science

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...

Write an Html Page that uses JavaScript Program to make a Blackjack Game.

I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game.

1. Blackjack Games Rules:

a. The object of the game is to "beat the dealer", which can be done in a number of ways:
• Get 21 points on your first two cards (called a blackjack), without a dealer blackjack;
• Reach a final score higher than the dealer without exceeding 21;
or • Let the dealer draw additional cards until his hand exceeds 21.

b. The player is dealt an initial two-card hand and add together the value of their cards.

c. The dealer (not the player) has to take hits until cards total 17 or more points.

d. Values: Jack, Queen and King is 10, Ace is either 1 or 11, and all other cards have the value of their number.

e. The order does not matter. For examples, get 13 points on “A + 2 + K “ and “K + 2 + A” .

This game needs to use images of cards to assign values and play the game.

How do I design this html page and how do I use Javascript to make the game work?

Solutions

Expert Solution

HTML CODE:


<!doctype html>
<html>
 <body>
     <h1>Blackjack</h1><br>
     Cards:
     <div id="dealer-cards"></div>
     <br>
     <div id="player-cards"></div>
     <br>
     <input type='button' id='new-game-button' value='New Game' onclick='newGame();'/>
     <input type='button' id='hit-button' value='Hit' onclick='hit();'/>
     <input type='button' id='stand-button' value='Stand' onclick='stand();'/>
     <br>
     <br>
     Score:
     <div id="player-score"></div>
     <div id="dealer-score"></div>
     <br>
     <h2 id="message-board"></h2>
     <script src="blackJackV2.0.js">
     </script>
</body>
   
</html>

JAVASCRIPT CODE:

/*jslint node: true*/
/*eslint no-console: ["error", { allow: ["log"] }] */
/*global document*/
"use strict";

var numCardsPulled = 0;

var player = {
        cards: [],
        score: 0,
        money: 100
    };
var dealer = {
    cards: [],
    score: 0
};

document.getElementById("hit-button").disabled = true;
document.getElementById("stand-button").disabled = true;

function getCardsValue(a) {
    var cardArray = [],
        sum = 0,
        i = 0,
        aceCount = 0;
    cardArray = a;
    for (i; i < cardArray.length; i += 1) {
        if (cardArray[i].rank === "J" || cardArray[i].rank === "Q" || cardArray[i].rank === "K") {
            sum += 10;
        } else if (cardArray[i].rank === "A") {
            sum += 11;
            aceCount += 1;
        } else {
            sum += cardArray[i].rank;
        }
    }
    while (aceCount > 0 && sum > 21) {
        sum -= 10;
        aceCount -= 1;
    }
    return sum;
}

var deck = {
        deckArray: [],
        initialize: function () {
            var suitArray, rankArray, s, r;
            suitArray = ["clubs", "diamonds", "hearts", "spades"];
            rankArray = [2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A"];
            for (s = 0; s < suitArray.length; s += 1) {
                for (r = 0; r < rankArray.length; r += 1) {
                    this.deckArray[s * 13 + r] = {
                        rank: rankArray[r],
                        suit: suitArray[s]

                    };
                }
            }
        },
        shuffle: function () {
            var temp, i, rnd;
            for (i = 0; i < this.deckArray.length; i += 1) {
                rnd = Math.floor(Math.random() * this.deckArray.length);
                temp = this.deckArray[i];
                this.deckArray[i] = this.deckArray[rnd];
                this.deckArray[rnd] = temp;
            }
        }
    };

deck.initialize();
deck.shuffle();

function resetGame() {
    numCardsPulled = 0;
    player.cards = [];
    dealer.cards = [];
    player.score = 0;
    dealer.score = 0;
    deck.initialize();
    deck.shuffle();
    document.getElementById("hit-button").disabled = true;
    document.getElementById("stand-button").disabled = true;
    document.getElementById("new-game-button").disabled = false;
}

function endGame() {
    if (player.score === 21) {
        document.getElementById("message-board").innerHTML = "You win! You got blackjack." + "<br>" + "click New Game to play again";
        bet("win");
        document.getElementById("player-money").innerHTML = "Your money: $" + player.money;
        resetGame();
    }
    if (player.score > 21) {
        document.getElementById("message-board").innerHTML = "You went over 21! The dealer wins" + "<br>" + "click New Game to play again";
        bet("lose");
        document.getElementById("player-money").innerHTML = "Your money: $" + player.money;
        resetGame();
    }
    if (dealer.score === 21) {
        document.getElementById("message-board").innerHTML = "You lost. Dealer got blackjack" + "<br>" + "click New Game to play again";
        bet("lose");
        document.getElementById("player-money").innerHTML = "Your money: $" + player.money;
        resetGame();
    }
    if (dealer.score > 21) {
        document.getElementById("message-board").innerHTML = "Dealer went over 21! You win!" + "<br>" + "click New Game to play again";
        bet("win");
        document.getElementById("player-money").innerHTML = "Your money: $" + player.money;
        resetGame();
    }
    if (dealer.score >= 17 && player.score > dealer.score && player.score < 21) {
        document.getElementById("message-board").innerHTML = "You win! You beat the dealer." + "<br>" + "click New Game to play again";
        bet("win");
        document.getElementById("player-money").innerHTML = "Your money: $" + player.money;
        resetGame();
    }
    if (dealer.score >= 17 && player.score < dealer.score && dealer.score < 21) {
        document.getElementById("message-board").innerHTML = "You lost. Dealer had the higher score." + "<br>" + "click New Game to play again";
        bet("lose");
        document.getElementById("player-money").innerHTML = "Your money: $" + player.money;
        resetGame();
    }
    if (dealer.score >= 17 && player.score === dealer.score && dealer.score < 21) {
        document.getElementById("message-board").innerHTML = "You tied! " + "<br>" + "click New Game to play again";
        resetGame();
    }
    if (player.money === 0) {
        document.getElementById("new-game-button").disabled = true;
        document.getElementById("hit-button").disabled = true;
        document.getElementById("stand-button").disabled = true;
        document.getElementById("message-board").innerHTML = "You lost!" + "<br>" + "You are out of money";
    }
}

function dealerDraw() {
    
    dealer.cards.push(deck.deckArray[numCardsPulled]);
    dealer.score = getCardsValue(dealer.cards);
    document.getElementById("dealer-cards").innerHTML = "Dealer Cards: " + JSON.stringify(dealer.cards);
    document.getElementById("dealer-score").innerHTML = "Dealer Score: " + dealer.score;
    numCardsPulled += 1;
}

function newGame() {
    document.getElementById("new-game-button").disabled = true;
    document.getElementById("hit-button").disabled = false;
    document.getElementById("stand-button").disabled = false;
    document.getElementById("message-board").innerHTML = "";
    hit();
    hit();
    dealerDraw();
    endGame();
}

function hit() {
    player.cards.push(deck.deckArray[numCardsPulled]);
    player.score = getCardsValue(player.cards);
    document.getElementById("player-cards").innerHTML = "Player Cards: " + JSON.stringify(player.cards);
    document.getElementById("player-score").innerHTML = "Player Score: " + player.score;
    numCardsPulled += 1;
    if (numCardsPulled > 2) {
        endGame();
    }
}

function stand() {
    while (dealer.score < 17) {
        dealerDraw();
    }
    endGame();
}

Related Solutions

javascript BlackJack i made a blackjack game, the code is below //this method will return a...
javascript BlackJack i made a blackjack game, the code is below //this method will return a shuffled deck function shuffleDeck() { //this will store array fo 52 objects const decks = [] const suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades'] const values = ['Ace', 'King', 'Queen', 'Jack', 'Ten', 'Nine', 'Eight', 'Seven', 'Six', 'Five', 'Four', 'Three', 'Two', 'One'] //run a loop till 52 times for (let i = 0; i < 52; i++) { //push a random item decks.push({ suit: suits[Math.floor(Math.random() *...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
Need to write a program and part 1 of the program is to write an HTML...
Need to write a program and part 1 of the program is to write an HTML code, here are the parameters, but I am new to HTML and I am confused as to how to write this. 1) HTML file shall:         - have your name(s) somewhere near the top, as a comment.         - be a complete html document with appropriate html tags.         - have 1 form with 2 parts, described as follows:         part 1:             -...
write on eclipse java Write a program named lab5 that will play a game of Blackjack...
write on eclipse java Write a program named lab5 that will play a game of Blackjack between the user and the computer. Create a second class named Card with the following: Define the following private instance variables: cardValue (int) & cardSuite (String) Write a constructor with no parameters that will Set cardValue to a random number between 1 and 13 Generate a second random number between 0 and 3 and assign cardSuite a string based on its value (0 –...
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that follow, debug (if necessary).  When required to write a function, you must include a script to test the function with at least two different data sets.  In all cases, for testing, you must write an HTML file that references the JavaScript file. Output an HTML table of the numbers from 2 to 8 along with their squares and cubes. Create a function titled counter that takes...
Write an HTML/Javascript canvas program that displays a black dot in the center after the user...
Write an HTML/Javascript canvas program that displays a black dot in the center after the user presses the 's' button on the keyboard. Hint: Canvas size should be 500x500 and the black dot should only appear after pressing 's'.
Please write "my account" page program by using HTML and CSS
Please write "my account" page program by using HTML and CSS
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT