Compare numbers to cards numbers

Question

I'm writing a simple html game. I want to compare the red cards' numbers to random numbers. If any one of random numbers equal to red cards' numbers, then dynamically add "BINGO" text to red square's back class when user flip red cards. It's like bingo game, user don't know which cards have "BINGO" strings before they flip red cards. I have problem with comparing array numbers to front class numbers and dynamically add "BINGO" string to red cards. Can somebody help please?

JSFIDDLE is here: http://jsfiddle.net/7emqLztp/28/

$(".treasure").flip();

var howMany = 3;
        var min = 2;
        var max = 5;
        var a = new Array();
        while (a.length < howMany) {
            var n = Math.floor(Math.random() * (max - min) + 0.5) + min;
            if (a.indexOf(n) == -1) {
                a.push(n);
            }
        }

$("#button").click(function () {
    $('.num').text(a)
  });

.table 
{
   display: table;
   border-collapse:separate;
   /*border-spacing: 5px;*/
   /*border: 1px solid #fff;*/
}

.table-row 
{
  display: table-row;
}

.table-cell 
{
  text-align: center;
  display: table-cell;
  border: 0.5px solid #231f20;
  vertical-align: middle;
  width: 50px;
  height: 50px;
}
        
.treasure 
{
  background-color: red;
}

user3596335 · Accepted Answer

Please have a look at this updated code. I'm pretty sure this is working.

$(".treasure").flip().find(".back").text("-")
var cardCount = 3;
var bingoCards = [];

do {
  let n = Math.floor(Math.random() * 4) + 2;
  if (bingoCards.indexOf(n) === -1) {
    bingoCards.push(n)
    let item = $(".treasure")[n-2];
    $(item).find(".back").text("BINGO")
  }
} while (bingoCards.length < cardCount)


$("#button").click(function() {
  $("#result").html(`The numbers are: ${bingoCards.join(", ")}`)
});

.table {
  display: table;
  border-collapse: separate;
  /*border-spacing: 5px;*/
  /*border: 1px solid #fff;*/
}

.table-row {
  display: table-row;
}

.table-cell {
  text-align: center;
  display: table-cell;
  border: 0.5px solid #231f20;
  vertical-align: middle;
  width: 50px;
  height: 50px;
}

.treasure {
  background-color: red;
}

Compare numbers to cards numbers

Answers (1)

Related Questions