How to compare 2 cards in a JavaScript card game

Question

I want to create a game with JavaScript that randomly selects 52 random cards (no jokers) and displays the cards one at a time while comparing the cards depending on the card being lower than the last card that was selected.

So, it's a high and low card game.

Here is my code:

CSS

body {
    border: 2px solid #f45f;      
}
div {
    background:red;    
}
#card {
    font-size:40px;
    background:red;
}

JavaScript

var cards = [
["&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;",
"&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;",
"&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;","&spades;","&clubs;", "&diams;", "&hearts;",
"&spades;","&clubs;", "&diams;", "&hearts;"],
[1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,11,11,11,11,12,12,12,12,13,13,13,13]

];

var x=0;
var newCard=[],[];
function Start(){
    document.getElementById("welcome").innerHTML ="<br>Welcome to the high and low card game ! :)";

    document.getElementById("test").style.display = 'block';
    document.getElementById("test2").style.display = 'block';
    document.getElementById("test1").style.display = 'none';    
}

function highOrLow(answer){
    var answer=answer;
    var rand=Math.floor(Math.random() * 50) + 1;
    document.getElementById("res1").innerHTML =rand;
    document.getElementById("res").innerHTML =x;
    document.getElementById("question").innerHTML = "Is The next card higher or lower ?";
    document.getElementById("name").innerHTML = answer;

    document.getElementById("card").innerHTML = cards[1][rand]+cards[0][rand];

    if (x < 51) {
        return x++;
    }
    else if (x = 51) {
        document.getElementById("welcome").innerHTML ="";
        document.getElementById("res1").innerHTML ="";
        document.getElementById("res").innerHTML ="";
        document.getElementById("card").innerHTML ="";
        document.getElementById("question").innerHTML = "";
        document.getElementById("test").style.display = 'none';
        document.getElementById("test2").style.display = 'none';
        document.getElementById("test").style.display = 'none';
        document.getElementById("test2").style.display = 'none';
        document.getElementById("test1").style.display = 'block';
        document.getElementById("name").innerHTML = "the game is over";

        return x = 0;
    }    
}   

function clbutton() {
    document.getElementById("test").style.display = 'none';
    document.getElementById("test2").style.display = 'none';    
}

HTML

<body onload="clbutton()">
    <div id="top">
        <center><h1>High Low Card Game</h1></center>
    </div>
    <br>
    <p>the rules are simple chose if the next card is high or is the card low and try to beat your own score !
    &spades;        
    &clubs;     
    &diams;     
    &hearts;
    </p>
    <br>    

    <button id="test1" type="button"
    onclick="setTimeout( Start(), 1000000 )">
    Start Game</button> 

    <span id="welcome"></span>
    <p id="name"></p>
    <p id="res"></p>
    <br>
    <p id="res1"></p>
    <br>
    <span id="card"></span>

    <br>

    <span id="question"></span>

    <button id="test" type="button"
    onclick="highOrLow('high')" >
    Higher</button>
    <br>
    <button id="test2" type="button"
    onclick="highOrLow('low')">
    Lower</button>    

    <br>

    <span id="high"></span>
</body>

So, what is the issue? You will need to be more specific. There are a few problems with your code that I see at first glance. For example, you use the assignment operator (`=`) rather than the equality operator (`===`) here: `if (x = 51)` which I suspect is not your intention. — Drew Gaynor, Oct 28 '15 at 13:02
Please check what a [mcve] is. You do not specify any issue and your code is not minimal. — Kyll, Oct 28 '15 at 13:07
the problem is how do i compare a new card to an old selected card ? — benji8, Oct 28 '15 at 13:30
Your question inspired me to make [this](http://jsfiddle.net/ajmair01/q9bp7g60/). — Andrew Mairose, Oct 31 '15 at 03:22
@benji8 this is a good question but please provide a description to make anybody sees this post understand the aim of your question better. — Willy satrio nugroho, Aug 11 '20 at 09:04
@benji8 probably I would give an example pic of what I'm trying to achieve. I guess a picture is more universal than any language. — Willy satrio nugroho, Aug 13 '20 at 02:47

Andrew Mairose · Accepted Answer · 2015-10-28T14:00:20.193

First off, get rid of var newCard = [], [];. It is causing a syntax error in your code and you don't use it anyway.

Next, set display: none in your css for your #test and #test2 buttons, that way you don't have to call a function to do it in the onload of your body.

Your else if statement to end the game should be changed from x = 51 to x === 51.

For comparing the cards, you need to store the last card's value in a variable. In the example below, I have called this lastCard. Use var val = cards[1][rand] to get the actual card value rather than the index in the array. Then you can compare it to the lastCard value. After you do the comparison, you then set lastCard = val, so that this round's card will be lastCard for the next round. I have also implemented a score in the example below to show you that the comparison is working.

Here is the comparison logic:

var val = cards[1][rand];

if (answer === 'high' && val > lastCard) {
  document.getElementById("score").innerHTML = "Score: " + (++score);
} else if (answer === 'low' && val < lastCard) {
  document.getElementById("score").innerHTML = "Score: " + (++score);
}

lastCard = val;

I also added a displayVal variable. This is used to change the displayed value to A, J, Q or K if the actual numeric value of the card is 1, 11, 12 or 13. It is stored in this separate variable so that it will not affect the numerical comparison.

This should get you going in the right direction.

var cards = [
  ["&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;",
    "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;",
    "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;", "&spades;", "&clubs;", "&diams;", "&hearts;",
    "&spades;", "&clubs;", "&diams;", "&hearts;"
  ],
  [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12, 13, 13, 13, 13]

];

var x = 0;
var lastCard = 0;
var score = 0;

function Start() {
  score = 0;
  document.getElementById("score").innerHTML = "Score: " + score;
  document.getElementById("welcome").innerHTML = "<br>Welcome to the high and low card game ! :)";

  document.getElementById("test").style.display = 'block';
  document.getElementById("test2").style.display = 'block';
  document.getElementById("test1").style.display = 'none';
  document.getElementById("score").style.display = 'block';
  document.getElementById("question").innerHTML = "Is The next card higher or lower ?";

  highOrLow(null);
}

function highOrLow(answer) {
  var rand = Math.floor(Math.random() * 50) + 1;

  var val = cards[1][rand];
  var suit = cards[0][rand];
  var displayVal = val;
  switch (displayVal) {
    case 1:
      displayVal = 'A';
      break;
    case 11:
      displayVal = 'J';
      break;
    case 12:
      displayVal = 'Q';
      break;
    case 13:
      displayVal = 'K';
      break;
  }

  document.getElementById("card").innerHTML = displayVal + suit;

  if (answer === 'high' && val > lastCard) {
    document.getElementById("score").innerHTML = "Score: " + (++score);
  } else if (answer === 'low' && val < lastCard) {
    document.getElementById("score").innerHTML = "Score: " + (++score);
  }

  lastCard = val;

  if (x < 51) {
    x++;
  } else if (x === 51) {
    document.getElementById("welcome").innerHTML = "";
    document.getElementById("card").innerHTML = "";
    document.getElementById("question").innerHTML = "";
    document.getElementById("test").style.display = 'none';
    document.getElementById("test2").style.display = 'none';
    document.getElementById("test1").style.display = 'block';
    document.getElementById("name").innerHTML = "the game is over";

    x = 0;
  }

}

body {
  border: 2px solid #f45f;
}
div {
  background: red;
}
#card {
  font-size: 40px;
  background: red;
}
#test,
#test2,
#score {
  display: none;
}

<body>
  <div id="top">
    <center>
      <h1>High Low Card Game</h1>
    </center>
  </div>
  <br>
  <p>the rules are simple chose if the next card is high or is the card low and try to beat your own score ! &spades; &clubs; &diams; &hearts;
  </p>
  <br>


  <button id="test1" type="button" onclick="setTimeout( Start(), 1000000 )">
    Start Game</button>


  <span id="welcome"></span>
  <p id="name"></p>
  <br>
  <span id="card"></span>

  <br>

  <span id="question"></span>
  <br>
  <span id="score"></span>

  <button id="test" type="button" onclick="highOrLow('high')">
    Higher</button>
  <br>
  <button id="test2" type="button" onclick="highOrLow('low')">
    Lower</button>


  <br>

  <span id="high"></span>

</body>

How to compare 2 cards in a JavaScript card game

1 Answers1

Linked