I'm trying to make a card game using javascript, and because my skills are... non existent.. i'm having a little trouble
i have a full deck of cards, and i'm looking for a code that'll allow me to click a "deal" button, and have one card dealt to the computer, and three cards to the player.
I have an array consisting of all my cards (and i have the images for each one), i have a shuffle function that i got working from a different project that i did in class. But from here I really have no idea.. i've been trying to hours and hours to do this and any help would be appreciated..
If you want to adopt an object oriented approach you could create a javascript deck of cards object with a property being an array of the cards and then object methods to deal and shuffle the cards. The method to deal the cards would generate a random number from 0 to the number of cards left in the deck -1 and then remove the card at that random number index in the cards array as it is "dealt" to a player.
Using an object oriented approach then allows you to use that deck of cards object in other javascript applications very easily.
i have a full deck of cards, and i'm looking for a code that'll allow me to click a "deal" button, and have one card dealt to the computer, and three cards to the player.
Maybe use this demo deck of cards object as a starting point.
The object constructor is
Code:
function cardStack(cardPicsO,numDecks)
where
cardPicsO = array of preloaded card images and the nominal value of each card. Face cards are worth 10 points.
numDecks = the number of 52 card decks you want in your stack of cards.
cardPics (see demo) is a 53 element 2D array where each row contains the path to the image for the card and the nominal value of the card. The first row is the back of the card image.
The cardStack object has a method to shuffle the cards in the stack and a method to deal however many you want at a time either face up or face down.
this.dealCards=function(num,faceDown) is the method to call when you want to deal some cards.
num = the number of cards you want to deal
faceDown is a boolean (true or false) for whether you want the cards dealt face up or face down.
When you click "New game", 3 cards are dealt face up to to the "player" and 1 card is dealt face down to the "computer".
For testing purposes the total of each player's hand is displayed above their cards.
If you use this object, you will need to write your own code to handle the reshuffling of the cardstack when the last card in the stack is dealt and any other functionality you need.
This cardStack object can be used on other card game applications as well if required.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#tabletop {
width: 900px;
border: 3px solid black;
background-color: green;
margin: 20px auto 0px auto;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
#computerBox {
width: 40%;
border: 1px solid red;
margin: 20px 0px 20px 20px;
padding: 10px 10px 10px 10px;
min-height: 150px;
float: left;
}
#playerBox {
width: 40%;
border: 1px solid red;
margin: 20px 20px 20px 0px;
padding: 10px 10px 10px 10px;
min-height: 150px;
float: right;
}
#controlsContainer {
clear: both;
}
</style>
<script type="text/javascript">
var cardPics = [
['back-blue-150-1.png',0],['clubs-a-150.png',1],['clubs-2-150.png',2],['clubs-3-150.png',3],['clubs-4-150.png',4],['clubs-5-150.png',5],['clubs-6-150.png',6],['clubs-7-150.png',7],['clubs-8-150.png',8],['clubs-9-150.png',9],['clubs-10-150.png',10],['clubs-j-150.png',10],['clubs-q-150.png',10],['clubs-k-150.png',10],['diamonds-a-150.png',1],['diamonds-2-150.png',2],['diamonds-3-150.png',3],['diamonds-4-150.png',4],['diamonds-5-150.png',5],['diamonds-6-150.png',6],['diamonds-7-150.png',7],['diamonds-8-150.png',8],['diamonds-9-150.png',9],['diamonds-10-150.png',10],['diamonds-j-150.png',10],['diamonds-q-150.png',10],['diamonds-k-150.png',10],['hearts-a-150.png',1],['hearts-2-150.png',2],['hearts-3-150.png',3],['hearts-4-150.png',4],['hearts-5-150.png',5],['hearts-6-150.png',6],['hearts-7-150.png',7],['hearts-8-150.png',8],['hearts-9-150.png',9],['hearts-10-150.png',10],['hearts-j-150.png',10],['hearts-q-150.png',10],['hearts-k-150.png',10],['spades-a-150.png',1],['spades-2-150.png',2],['spades-3-150.png',3],['spades-4-150.png',4],['spades-5-150.png',5],['spades-6-150.png',6],['spades-7-150.png',7],['spades-8-150.png',8],['spades-9-150.png',9],['spades-10-150.png',10],['spades-j-150.png',10],['spades-q-150.png',10],['spades-k-150.png',10]
];
var cardPicsO = new Array();
for(i=0; i < cardPics.length; i++){
cardPicsO[i] = new Image();
cardPicsO[i].src = cardPics[i][0];
cardPicsO[i].value = cardPics[i][1];
}
function cardStack(cardPicsO,numDecks){
this.cardPics = cardPicsO;
this.numDecks = numDecks;
this.shuffledIndxs = [];
this.curCardIndx = 1;
this.shuffle=function(){
this.curCard = 1;
var s = [];
while (this.shuffledIndxs.length) s.push(this.shuffledIndxs.splice(Math.random() * this.shuffledIndxs.length, 1));
while (s.length) this.shuffledIndxs.push(s.pop());
}
this.init=function(){
for(i=1; i <= this.numDecks*52; i++){
this.shuffledIndxs.push(i);
if(i > 52){ //extend this.cardPics if more than 1 deck in the stack
this.cardPics.push(this.cardPics[i-52]);
}
}
this.shuffle();
}
this.init();
this.dealCards=function(num,faceDown){
var cards = new Array();
for(i=0; i < num; i++){
if(this.curCardIndx > this.shuffledIndxs.length){
this.shuffle();
} else {
if(faceDown){
this.cardPics[this.shuffledIndxs[this.curCardIndx]].src = this.cardPics[0].src;
}
cards.push(this.cardPics[this.shuffledIndxs[this.curCardIndx]]);
}
++this.curCardIndx;
}
return cards;
}
}
//-----------------------------------------------------
function startGame(){
clearPlayerCards(computerBoxO);
clearPlayerCards(playerBoxO);
//deal 3 cards face up to the player
var total = 0;
var newCards = deck.dealCards(3,false);
for(i=0; i < newCards.length; i++){
var newImg = document.createElement('img');
newImg.src = newCards[i].src;
playerBoxO.appendChild(newImg);
total += newCards[i].value;
}
document.getElementById('playerHandTotal').innerHTML = 'Total = '+total;
//deal 1 card face down to the computer
var total = 0;
var newCards = deck.dealCards(1,true);
for(i=0; i < newCards.length; i++){
var newImg = document.createElement('img');
newImg.src = newCards[i].src;
computerBoxO.appendChild(newImg);
total += newCards[i].value;
}
document.getElementById('computerHandTotal').innerHTML = 'Total = '+total;
}
function clearPlayerCards(obj){
var imgsO = obj.getElementsByTagName('img');
while(imgsO.length > 0){
imgsO[0].parentNode.removeChild(imgsO[0]);
imgsO = obj.getElementsByTagName('img');
}
}
window.onload=function(){
computerBoxO = document.getElementById('computerBox');
playerBoxO = document.getElementById('playerBox');
document.getElementById('btnNewGame').onclick=startGame;
deck = new cardStack(cardPicsO,1);
}
</script>
</head>
<body>
<div id="tabletop">
<fieldset id="computerBox">
<legend>Computer</legend>
<div id="computerHandTotal"></div>
</fieldset>
<fieldset id="playerBox">
<legend>Player</legend>
<div id="playerHandTotal"></div>
</fieldset>
<div id="controlsContainer">
<button id="btnNewGame">New game</button>
</div>
</div>
</body>
</html>
Before you post, read our: 
help with cardgame
....the earlier demo had an undesirable "feature" in it 
.
