mardi 5 mai 2015

How do I get my card program to only allow one click per card and the game to end for when a king is picked? JavaScript only please

<!DOCTYPE HTML>
<html>
<body>
<head> 
<meta charset="utf-8">
<title>Don't Pick the King!</title>
<table style="width:50%">
  <tr>
    <td><img src="cards/b.gif" Class="back" id="card_0" onClick="flipCard(0);"></td>
    <td><img src="cards/b.gif" Class="back" id="card_1" onClick="flipCard(1);"></td>
    <td><img src="cards/b.gif" Class="back" id="card_2" onClick="flipCard(2);"></td>
  </tr>
  <tr>
   <td><img src="cards/b.gif" Class="back" id="card_3" onClick="flipCard(3);"></td>
   <td><img src="cards/b.gif" Class="back" id="card_4" onClick="flipCard(4);"></td>
   <td><img src="cards/b.gif" Class="back" id="card_5" onClick="flipCard(5);"></td>
  </tr>
  <tr>
  <td><img src="cards/b.gif" Class="back" id="card_6" onClick="flipCard(6);"></td>
  <td><img src="cards/b.gif" Class="back" id="card_7" onClick="flipCard(7);"></td>
  <td><img src="cards/b.gif" Class="back" id="card_8" onClick="flipCard(8);"></td>
  </tr>
  <tr>
  <td><img src="cards/b.gif" Class="back" id="card_9" onClick="flipCard(9);"></td>
  <td><img src="cards/b.gif" Class="back" id="card_10" onClick="flipCard(10);"></td>
  <td><img src="cards/b.gif" Class="back" id="card_11" onClick="flipCard(11);"></td>
  </tr>
</table>
<p id="score" style="float:center">Pick a card but do not pick a king.</p>

<style>
* {
    background-color: lightblue;
    border-color: hsla(173,100%,50%,1.00);
    font-weight: bold;  
}


.back
{width:100px;
height:100px;
}

</style>

<script language="JavaScript">


/*ID of each card 0,1,2
                  3,4,5,
                  6,7,8,
                  9,10,11 ---12 cards 0 being the 1st and 12th being the 13th card*/


var deck = ["cards/c11.gif","cards/c12.gif","cards/d11.gif","cards/d12.gif","cards/h11.gif",
        "cards/h12.gif","cards/s11.gif","cards/s12.gif","cards/c13.gif", "cards/d13.gif", "cards/h13.gif", "cards/s13.gif"];
deck(1,0);


function shuffle(deck){
    for(swaps=0; swaps<12; swaps++){
        shuffle1=Math.floor(Math.random()*deck.length);
        shuffle2=Math.floor(Math.random()*deck.length);
        temp=deck[shuffle1];
        deck[shuffle1]=deck[shuffle2];
        deck[shuffle2]=temp;
    }
}
function onLoad(){
    shuffle(deck)
} 
function flipCard(card){ 
    onLoad();
    selection=card;
    document.images[card].src=deck[card];
}



/*function randomPick(){

    var rand = Math.random();
    var randAdjusted = rand * itemArray.length;
    var index = Math.floor(randAdjusted);
    var item = itemArray[index];    
    outText.innerHTML += "<b>Rand:</b> " + rand + " <b>Adjusted:</b> " + randAdjusted + " <b>Index:</b> "+ index + " <b>Item:</b> " + item + "<br>";


</script>

</body>
</html>

hi so my program seems to want to allow me to click the grid and find a card from the array however it wont remove elements from the array so i can end up with 5 jacks for example. I only want the program to allow for 4 suits per card to show up when one card is pressed within the grid. How would I go about doing this? Thanks very much for your help in advance.

Aucun commentaire:

Enregistrer un commentaire