254 lines
11 KiB
HTML
254 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Greg's Gambits | Game of 21</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="greg.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body>
|
|
<label id="start">Hello! Welcome to Greg's Gambits! Press "Start Game" to start! <br></label>
|
|
<label id="cpuGamesWon">Dealer cards:</label> <br>
|
|
<label id="cpuPoints"></label><br>
|
|
<label id="cpuCards"></label> <label id="hiddenCard"><img src="cards/hidden.png"></label><br>
|
|
<label id="playerGamesWon">Your cards:</label><br>
|
|
<label id="playerPoints"></label><br>
|
|
<label id="playerCards"></label><br>
|
|
<label id="cardsInPlay"></label>
|
|
<label id="winAnnounce"></label><br>
|
|
<input type="button" id="startButton" onclick="startGame()" value="Start Game">
|
|
<input type="button" id="continueButton" onclick="draw()" value="Continue Round">
|
|
<input type="button" id="endButton" onclick="endRound()" value="End Round">
|
|
<script>
|
|
var timesLooped = 0;
|
|
var cpuPoints = 0, playerPoints = 0;
|
|
var cpuCards = 0, playerCards = 0;
|
|
var totalCpuPoints = 0, totalPlayerPoints = 0;
|
|
var cpuTimesWon = 0;
|
|
playerTimesWon = 0;
|
|
var isStarted = false;
|
|
// Card array. This will allow us to remember if a card is in play.
|
|
var rows = 13;
|
|
var cols = 3;
|
|
var cardArray = Array.from({length: rows}, () =>
|
|
Array.from({length: cols}, () => [0, 0, false])
|
|
);
|
|
hiddenCard.hidden = true;
|
|
continueButton.hidden = true;
|
|
endButton.hidden = true;
|
|
cardsInPlay.hidden = true;
|
|
function checkEntireArray() {
|
|
var numOfBools = (cardArray.length * cardArray[0].length);
|
|
//console.log("Number of bools: " + numOfBools);
|
|
var trueCount = 0;
|
|
var returnBool = false;
|
|
for (let i = 0; i < cardArray.length; i++) {
|
|
for (let j = 0; j < cardArray[i].length; j++) {
|
|
if (cardArray[i][j][2]) {
|
|
trueCount++;
|
|
}
|
|
}
|
|
}
|
|
//console.log("Number of bools set to true: " + trueCount);
|
|
if (trueCount == numOfBools) {
|
|
returnBool = true;
|
|
}
|
|
return returnBool;
|
|
}
|
|
function getCardNumber() {
|
|
console.log("Times looped " + ++timesLooped);
|
|
let exitLoop = false;
|
|
let cardNumber = 0; //prompt("Card Number:");
|
|
let cardType = 0; //prompt("Card Type: ");
|
|
do {
|
|
//console.log(cardType + " " + cardNumber);
|
|
if (checkEntireArray()) {
|
|
console.log('Ran out of cards in deck! Breaking!');
|
|
alert("Cannot draw more cards!");
|
|
return false;
|
|
}
|
|
if (!cardArray[cardNumber][cardType][2]) {
|
|
cardArray[cardNumber][cardType] = [cardNumber, cardType, true];
|
|
exitLoop = true;
|
|
} else {
|
|
cardNumber = Math.trunc((Math.random() * 13));
|
|
cardType = Math.trunc((Math.random() * 3));
|
|
console.log("Ran into existing card, generating new numbers! " + cardType + " " + cardNumber);
|
|
exitLoop = false;
|
|
}
|
|
} while (!exitLoop);
|
|
printArray();
|
|
checkEntireArray();
|
|
console.log(cardType + " " + cardNumber);
|
|
return [cardNumber, cardType];
|
|
|
|
}
|
|
function printArray() {
|
|
document.getElementById("cardsInPlay").innerHTML = "";
|
|
for (let i = 0; i < cardArray.length; i++) {
|
|
for (let j = 0; j < cardArray[i].length; j++) {
|
|
document.getElementById("cardsInPlay").innerHTML += cardArray[i][j] + " ";
|
|
}
|
|
document.getElementById("cardsInPlay").innerHTML += "<br>";
|
|
}
|
|
}
|
|
function drawCards(player, cardNumber, cardType, isHidden) {
|
|
if (!isHidden) {
|
|
if (player == 'cpu') {
|
|
hiddenCard.hidden = true;
|
|
}
|
|
|
|
|
|
let cardBuilder = "cards/";
|
|
switch (cardNumber) {
|
|
case 0:
|
|
cardBuilder += "ace_of_";
|
|
break;
|
|
case 1:
|
|
cardBuilder += "2_of_";
|
|
break;
|
|
case 2:
|
|
cardBuilder += "3_of_";
|
|
break;
|
|
case 3:
|
|
cardBuilder += "4_of_";
|
|
break;
|
|
case 4:
|
|
cardBuilder += "5_of_";
|
|
break;
|
|
case 5:
|
|
cardBuilder += "6_of_";
|
|
break;
|
|
case 6:
|
|
cardBuilder += "7_of_";
|
|
break;
|
|
case 7:
|
|
cardBuilder += "8_of_";
|
|
break;
|
|
case 8:
|
|
cardBuilder += "9_of_";
|
|
break;
|
|
case 9:
|
|
cardBuilder += "10_of_";
|
|
break;
|
|
case 10:
|
|
cardBuilder += "jack_of_";
|
|
cardNumber = 9;
|
|
break;
|
|
case 11:
|
|
cardBuilder += "queen_of_";
|
|
cardNumber = 9;
|
|
break;
|
|
case 12:
|
|
cardBuilder += "king_of_";
|
|
cardNumber = 9;
|
|
break;
|
|
}
|
|
switch (cardType) {
|
|
case 0:
|
|
cardBuilder += "clubs.png"
|
|
break;
|
|
case 1:
|
|
cardBuilder += "diamonds.png"
|
|
break;
|
|
case 2:
|
|
cardBuilder += "diamonds.png"
|
|
break;
|
|
case 3:
|
|
cardBuilder += "spades.png"
|
|
break;
|
|
}
|
|
if (player == "cpu") {
|
|
cpuCards = cardNumber + 1;
|
|
} else if (player == "player") {
|
|
playerCards = cardNumber + 1;
|
|
}
|
|
document.getElementById(player + "Cards").innerHTML += "<img src=\"" + cardBuilder + "\"> ";
|
|
} else {
|
|
hiddenCard.hidden = false;
|
|
}
|
|
|
|
}
|
|
function updatePoints() {
|
|
document.getElementById("playerPoints").innerHTML = "This round: " + playerPoints + "; ";
|
|
document.getElementById("playerPoints").innerHTML += "Total Points: " + totalPlayerPoints;
|
|
document.getElementById("playerGamesWon").innerHTML = "Your cards: (times won: " + playerTimesWon + ")";
|
|
|
|
document.getElementById("cpuPoints").innerHTML = "This round: " + cpuPoints + "; ";
|
|
document.getElementById("cpuPoints").innerHTML += "Total Points: " + totalCpuPoints;
|
|
document.getElementById("cpuGamesWon").innerHTML = "Dealer cards: (times won: " + cpuTimesWon + ")";
|
|
}
|
|
function resetArray() {
|
|
for (let i = 0; i < cardArray.length; i++) {
|
|
for (let j = 0; j < cardArray[i].length; j++) {
|
|
cardArray[i][j] = [0, 0, false];
|
|
}
|
|
}
|
|
}
|
|
function startGame() {
|
|
resetArray();
|
|
// Dealer and player have two cards.
|
|
document.getElementById("winAnnounce").innerHTML = "";
|
|
if (!isStarted) {
|
|
document.getElementById("playerCards").innerHTML = "";
|
|
document.getElementById("cpuCards").innerHTML = "";
|
|
cpuPoints = 0;
|
|
playerPoints = 0;
|
|
var [cardNumber, cardType] = getCardNumber();
|
|
|
|
drawCards('cpu', cardNumber, cardType, false);
|
|
cpuPoints += cpuCards;
|
|
drawCards('cpu', 0, 0, true);
|
|
for (let i = 0; i < 2; i++) {
|
|
var [cardNumber, cardType] = getCardNumber();
|
|
drawCards('player', cardNumber, cardType, false);
|
|
playerPoints += playerCards + 1;
|
|
}
|
|
isStarted = true;
|
|
startButton.hidden = true;
|
|
continueButton.hidden = false;
|
|
endButton.hidden = false;
|
|
start.hidden = true;
|
|
}
|
|
updatePoints();
|
|
}
|
|
function draw() {
|
|
var [cardNumber, cardType] = getCardNumber();
|
|
// if ((playerPoints + cardNumber) < 21)
|
|
{
|
|
drawCards('player', cardNumber, cardType, false);
|
|
playerPoints += playerCards + 1;
|
|
updatePoints();
|
|
}
|
|
|
|
}
|
|
function endRound() {
|
|
var [cardNumber, cardType] = getCardNumber();
|
|
drawCards('cpu', cardNumber, cardType, false);
|
|
cpuPoints += cpuCards + 1;
|
|
updatePoints();
|
|
startButton.hidden = false;
|
|
continueButton.hidden = true;
|
|
endButton.hidden = true
|
|
isStarted = false;
|
|
// Determine winner
|
|
if (playerPoints <= 21 & (cpuPoints < playerPoints)) {
|
|
totalPlayerPoints += playerPoints;
|
|
playerTimesWon++;
|
|
document.getElementById("winAnnounce").innerHTML = "You win!";
|
|
} else {
|
|
totalCpuPoints += cpuPoints;
|
|
cpuTimesWon++;
|
|
document.getElementById("winAnnounce").innerHTML = "The dealer wins!";
|
|
}
|
|
updatePoints();
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|