javascript宾果游戏桌问题

时间：2017-05-03 08:46:57

标签： javascript html css

我已经碰壁了...创造一个宾果游戏，我可以看到以下问题：当我开始游戏时，表格从0到9,10到19,20到29等。

我需要它从1到10,11到20,21到30等。

我已经盯着它看了一会儿，但是无法弄明白。

＆＃13;
＆＃13; 
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
div     {
            text-align: center;
        }

        .bigNumberDisplay {
            font-size: 10em;
        }

        .numbersTable {
            font-size: 3em;
        }

        table {
            margin-left: auto;
            margin-right: auto;
        }

        table, tr, td {
            border-collapse: collapse;
            border: solid 1px #999;
        }

        td {
            min-width: 200px;
            color: #fff;
            text-align: center;
            font-size: 60px;
            font-weight: bolder;
        }

        td.selected {
            color: #f00;
            background-color: #A3B86C;
            border: solid 1px #000000;
        }
        #btnGenerate{
            width: 270px;  
            height: 60px;
            color: red;
            background-position: center;
            border: none;
            outline: none;
            font-size: 30px;
            font-weight: bolder;
            text-align: right;
            white-space: normal;

        }

</style>
    <script>
$(function() {
    var bingo = {
        selectedNumbers: [],
        generateRandom: function() {
            var min = 1;
            var max = 89;
            var random = Math.floor(Math.random() * (max - min + 1)) + min;
            return random;
        },
        generateNextRandom: function() {
            if (bingo.selectedNumbers.length > 88) {
                alert("Game over!");
                return 0;
            }
            var random = bingo.generateRandom();
            while ($.inArray(random, bingo.selectedNumbers) > -1) {
                random = bingo.generateRandom();
            }
            bingo.selectedNumbers.push(random);
            return random;
        }
    };
    $('td').each(function() {
        var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
        var numberString = parseInt(concatClass, 10).toString();
        $(this).addClass("cell" + numberString).text(numberString);
    });
    $('#btnGenerate').click(function() {
        var random = bingo.generateNextRandom().toString();
        $('.bigNumberDisplay span').text(random);
        $('td.cell' + random).addClass('selected');
    });
    window.onbeforeunload = function(e) {
        e = e || window.event;
        var returnString = 'Are you sure?';
        if (e) {
            e.returnValue = returnString;
        }
        return returnString;
    };
});
</script>
</head>
    <body>
        <div class="container">
    <div>
        <span>BingoDesk</span>
    </div>
    <div class="bigNumberDisplay">
        <span>0</span>
    </div>
    <div>
        <p>Hit Spacebar or click below to generate a number!</p>
        <audio id="sound1" src="chewbacca.mp3" preload="auto"></audio>
        <input id="btnGenerate" type="button" autofocus value="" onclick="document.getElementById('sound1').play();"/>
    </div>

    <br/>

    <div class="numbersTable">
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
        </table>
    </div>

    <br/>

    
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

请帮忙！我唯一要寻求帮助的是网格，所以不是0-9，我希望它从1开始，然后转到10.这只是调用数字，想法是玩家有预先印制的卡片和as每个号码都是随机生成的，并在卡片上标记出来。网格包含已调用的数字，但由于卡是表格格式，第一列是1-10秒列11-20，当前表格不能准确表示此格式。这是一个非盈利项目，

1 个答案:

答案 0 :(得分：0)

问题在于如何获得数字值：。

替换：

var numberString = parseInt(concatClass, 10).toString();
$(this).addClass("cell" + numberString).text(numberString);

使用：

var number = parseInt(concatClass, 10) + 1;
$(this).addClass("cell" + number ).text(number);

注意+ 1，我删除了.toString()（toString没有必要）。
另外，var max = 90;

示例：

$(function() {
  var bingo = {
    selectedNumbers: [],
    generateRandom: function() {
      var min = 1;
      var max = 90;
      var random = Math.floor(Math.random() * (max - min + 1)) + min;
      return random;
    },
    generateNextRandom: function() {
      if (bingo.selectedNumbers.length > 88) {
        alert("Game over!");
        return 0;
      }
      var random = bingo.generateRandom();
      while ($.inArray(random, bingo.selectedNumbers) > -1) {
        random = bingo.generateRandom();
      }
      bingo.selectedNumbers.push(random);
      return random;
    }
  };

  $('td').each(function() {
    var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
    var number = parseInt(concatClass, 10) + 1;
    $(this).addClass("cell" + number).text(number);
  });

  $('#btnGenerate').click(function() {
    var random = bingo.generateNextRandom().toString();
    $('.bigNumberDisplay span').text(random);
    $('td.cell' + random).addClass('selected');
  });

  window.onbeforeunload = function(e) {
    e = e || window.event;
    var returnString = 'Are you sure?';
    if (e) {
      e.returnValue = returnString;
    }
    return returnString;
  };
});
div {
  text-align: center;
}

.bigNumberDisplay {
  font-size: 1em;
}

.numbersTable {
  font-size: 1em;
}

table {
  margin-left: auto;
  margin-right: auto;
}

table,
tr,
td {
  border-collapse: collapse;
  border: solid 1px #999;
}

td {
  min-width: 50px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
}

td.selected {
  color: #f00;
  background-color: #A3B86C;
  border: solid 1px #000000;
}

#btnGenerate {
  width: 100px;
  height: 20px;
  color: red;
  background-position: center;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: bolder;
  text-align: right;
  white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>
    <span>BingoDesk</span>
  </div>
  <div class="bigNumberDisplay">
    <span>0</span>
  </div>
  <div>
    <p>Hit Spacebar or click below to generate a number!</p>
    <audio id="sound1" src="chewbacca.mp3" preload="auto"></audio>
    <input id="btnGenerate" type="button" autofocus value="" onclick="document.getElementById('sound1').play();" />
  </div>
  <div class="numbersTable">
    <table>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
  </div>
</div>

相关问题
最新问题