Question

我正在写一个简单的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>

Answer 1

请查看此更新的代码。我很确定这是可行的。

$(".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>

比较数字和卡号

1 个答案: