Сравните номера с номерами карт - PullRequest
Новая
       8

Сравните номера с номерами карт

0 голосов
/ 16 сентября 2018

Я пишу простую HTML-игру. Я хочу сравнить номера красных карточек со случайными числами. Если любое из случайных чисел равно номерам красных карточек, то динамически добавляйте текст " BINGO " в класс back красного квадрата, когда пользователь переворачивает красные карточки. Это похоже на игру в бинго, пользователь не знает, на каких картах есть строки " BINGO ", прежде чем перевернуть красные карточки. У меня проблема со сравнением номеров массивов с front номерами классов и динамическим добавлением строки " BINGO " к красным карточкам. Может кто-нибудь помочь, пожалуйста?

JSFIDDLE здесь: 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;
}
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
</head>

<div class="table">
        <div class="table-row">
            <div class="table-cell">
                1
            </div>
            <div class="table-cell treasure">
              <div class="front">2</div>
              <div class="back"></div>
            </div>
            <div class="table-cell treasure">
                <div class="front">3</div>
                <div class="back"></div>
            </div>
            <div class="table-cell treasure">
                <div class="front">4</div>
                <div class="back"></div>
            </div>
            <div class="table-cell treasure">
                <div class="front">5</div>
                <div class="back"></div>
            </div>
            <div class="table-cell">
                6
            </div>
        </div>
</div>

<button id="button">Random Num</button>
<div class="num"></div>

1 Ответ

0 голосов
/ 16 сентября 2018

Пожалуйста, посмотрите на этот обновленный код.Я почти уверен, что это работает. 

$(".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: <b>${bingoCards.join(", ")}</b>`)
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>


<div class="table">
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell treasure">
      <div class="front">2</div><div class="back"></div>
    </div>
    <div class="table-cell treasure">
      <div class="front">3</div><div class="back"></div>
    </div>
    <div class="table-cell treasure">
      <div class="front">4</div><div class="back"></div>
    </div>
    <div class="table-cell treasure">
      <div class="front">5</div><div class="back"></div>
    </div>
    <div class="table-cell">6</div>
  </div>
</div>

<button id="button">Random Numbers</button>
<div id="result"></div>
...