1
私はビンゴのゲームを作成し、私は次の問題を見ることができます：私がゲームを開始すると、テーブルは0から9,10から19,20から29などに行くjavascriptビンゴゲームテーブルの問題
は、私はそれが11私は今しばらく見つめてされているとそれを把握するカント21など
30、20、1から10まで行く必要があります。
<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>助けてください！私が助けを求めているのはグリッドなので、0-9になるのではなく、1から始まって10に向かいたいと思う。これはちょうど数字を呼び出す。アイデアはプレイヤーがカードをプリプリントしてそれぞれの番号は無作為に生成され、カード上でマークされます。グリッドにはすでに呼び出された数値が含まれていますが、カードが表形式であるため、最初の列は1〜10秒の列11〜20です。現在の表はこれを正確に表していません。これは利益のためのプロジェクトではありません。