In: Computer Science
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?
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();
}