CODEWITHSUNDEEP
javascript
user2984273
user2984273

Reputation: 35

How to give a card a numerical value when making a simple card game (Javascript)

Apologies if this sounds totally stupid but I'm a total dunce when it comes to coding! I'm trying to make a higher or lower guessing game using a deck of cards (i.e. The player guesses if the next card will be higher or lower than the one shown) but I don't really understand how to give each individual card a value.

For example I want to give the Ace card a value of "1" so then the person can guess if the next card will be higher or lower than 1.

I know arrays & classes are involved but I can't seem to find a tutorial that explains it in plain English. Here's my code so far (& yes I know it's dreadful!)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script language="javascript" type="text/javascript">


var ask=window.confirm("Do you understand the rules of Higher or Lower?")
if (ask)
window.alert("Lets go!")
else
window.alert("Guess if the next card shown will be higher or lower than the current card.")

function rollDice()
{
var diceArray = ["card0.jpg","card1.jpg","card2.jpg","card3.jpg","card4.jpg","card5.jpg"];
var pickCard = diceArray[Math.floor(Math.random() * diceArray.length)];
document.getElementById("cards").src = pickCard;
}


</script>
<link rel="stylesheet" href="teststyle.css" type="text/css">
</head>
<body style="text-align: center;">
<br>
<big style="font-weight: bold; font-family: Helvetica,Arial,sans-serif;"><big><big>HIGHER
OR LOWER?</big></big></big><br>
<h3>Use your knowledge of probability to guess if the next card will be
higher or lower!</h3>
<br>
<br>
<img src="card5.jpg" onload="pickCard()" id="cards"><br>
<br>
<span
style="font-weight: bold; font-family: Helvetica,Arial,sans-serif;">VALUES</span><span
style="font-family: Helvetica,Arial,sans-serif;">: ACE, TWO, THREE,
FOUR, FIVE, SIX, SEVEN, EIGHT, NINE, TEN, JACK, QUEEN, KING</span><br>
<br>
<br>

</body>
</html>

Upvotes: 2

Views: 1716

Answers (3)

Paul Richter
Paul Richter

Reputation: 11082

I think the simplest approach would be to use an array of objects, with each object's position corresponding to its value. Something like this:

var diceArray = [
    {
        "card_name": "Ace",
        "value": 1,
        "card_image": "card0.jpg" // I'm guessing card0 is the ace, replace this with the correct card image if that is incorrect
    },
    {
        "card_name": "Two",
        "value": 2
        "card_image": "card1.jpg"
    }
    ... and so on
]

Your random selection still works in the same fashion:

var pickCard = diceArray[Math.floor(Math.random() * diceArray.length)];

Since now you're dealing with an object rather than a simple string, you can access its data like so:

var cardImage = pickCard.card_image;
var cardName = pickCard.card_name;

Or

var cardImage = pickCard["card_image"];
var cardName = pickCard["card_name"];

Upvotes: 0

monastic-panic
monastic-panic

Reputation: 3997

really depends on your situation but there are a few ways you could do it. There isn't a "right" way I don't think.

You could use a switch statement, but I think the more "javascript way" is you an object literal that maps your values like

  var cardValues = {
      "ace": 1,
      "king": 13,
      "queen": 12
  }

  //then you can get your card value from the 'name' very simply
  var value = cardValues["ace"] // => 1

Upvotes: 0

apsillers
apsillers

Reputation: 115980

I think you might find it useful to represent each card as an object:

{
    imagePath: "card0.jpg",
    value: 1,
    name: "Ace"
}

You can place these in your array:

var diceArray = [
    {
        imagePath: "card0.jpg",
        value: 1,
        name: "Ace"
    },
    {
        imagePath: "card1.jpg",
        value: 2,
        name: "Two"
    },
    // and so on...
];
var pickCard = diceArray[Math.floor(Math.random() * diceArray.length)];
document.getElementById("cards").src = pickCard.imagePath;

var pickedValue = pickCard.value;

And you can see, the result stored in pickCard is now an object with properties name, value and imagePath. You can later add other properties (suit, etc.) as needed.

Upvotes: 6

Related Questions