index.html
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../../jquerylib/dist/jquery.js"></script>
<title>Bingo!</title>
</head>
<body>
<h1>THE BINGO GAME</h1>
<div>
<table align="center" valign="middle">
<tr>
<td id="1" class="num"></td>
<td id="2" class="num"></td>
<td id="3" class="num"></td>
<td id="4" class="num"></td>
<td id="5" class="num"></td>
</tr>
<tr>
<td id="6" class="num"></td>
<td id="7" class="num"></td>
<td id="8" class="num"></td>
<td id="9" class="num"></td>
<td id="10" class="num"></td>
</tr>
<tr>
<td id="11" class="num"></td>
<td id="12" class="num"></td>
<td id="13" class="num"></td>
<td id="14" class="num"></td>
<td id="15" class="num"></td>
</tr>
<tr>
<td id="16" class="num"></td>
<td id="17" class="num"></td>
<td id="18" class="num"></td>
<td id="19" class="num"></td>
<td id="20" class="num"></td>
</tr>
<tr>
<td id="21" class="num"></td>
<td id="22" class="num"></td>
<td id="23" class="num"></td>
<td id="24" class="num"></td>
<td id="25" class="num"></td>
</tr>
</table>
<button align="center" id="genRand">Generate random table</button>
</div>
<script>
class Player {
// bingo status of a player. 5 for a BINGO!!
_bingoStatus = 0;
// Wining status of a player. Only true if this._bingoStatus is 5
win = (this._bingoStatus == 5) ? true : false;
// Player name
name = "default_name";
// Set name
constructor(n = "") {
this.name = n;
}
currentPoint() {
return this._bingoStatus;
}
addOne() {
this._bingoStatus += 1;
}
}
// Some extra function
// Sort out duplicated elements in array
function unique(val, idx, self) {
return self.indexOf(val) === idx;
}
/*
Use: var unqArr = [...].filter(unique);
*/
// Check if a array is contained in another array
/*
ES6 one-lined answer:
var mainArr = [...];
var contArr = [...];
var contain = contArr.every(
i => mainArr.includes(i)
);
*/
// Initialization of global variables
// Current player. Singleplayer only for testing
var p = new Player('beta');
// var p1 = new Player('player1');
// var p2 = new Player('player2');
// Ready state of a game
var gameReady = false;
var val = [], ids = [];
var checked = [];
// All of the possible diagonals, rows and columns for a letter
// IMPORTANT
var bingoArray = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20],
[21, 22, 23, 24, 25],
[1, 6, 11, 16, 21],
[2, 7, 12, 17, 22],
[3, 8, 13, 18, 23],
[4, 9, 14, 19, 24],
[5, 10, 15, 20, 25],
[1, 7, 13, 19, 25],
[5, 9, 13, 17, 21]
]
// ID of slots in table
/*
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25
*/
$('#genRand').click(function () {
// Change the "gameReady" state
gameReady = true;
// Create array for random dispose of number on the table
for (let i = 1; i <= 25; i++) {
val.push(i); ids.push(i);
}
// If both the arrays are not empty
while (val.length && ids.length) {
// ... then randomize/shuffle them
val.sort(function () { return 0.5 - Math.random(); });
ids.sort(function () { return 0.5 - Math.random(); });
// Because the values in the arrays are random, so choosing the
// last element of the array is like choosing a random number
$('#' + ids.pop()).html(val.pop());
}
// Remove "clicked" attribute when reset the table
$('.num').removeAttr('clicked');
// Reset the 'checked' array
checked = [];
_bingoStatus = 0;
});
$('.num').click(function () {
// Check the ready state of the game, preventing the player from clicking randomly
if (gameReady) {
// A clicked "button" will receive the "true" property
// for "clicked" attribute so that it cannot be clicked again,
// avoiding error and cheating if possible. Idk...
$(this).attr('clicked', true);
// Get the id of the element that has just been checked
var justChecked = parseInt($(this).attr('id'));
// Add it to 'checked' array to find later
checked.push(justChecked);
checked = checked.filter(unique);
// IMPORTANT
/*
For each square clicked, this will check if any array of the bingoArray
is a subarray of 'checked' array. If do, increase the point by 1
But what I want is that for example, the ids of the clicked squares are
[1, 6, 11, 16, 21, 2, 3, 4, 5] (first row and first column), the p.addOne()
should only be called twice because I only choose one row and one column
As the code runs, p.addOne() is called six times with the example above.
Moreover, if for example, I click on the bottom left square, the console should
only log out p.currentPoint() is 2 (if everything is perfect) or 6 (using my algorithm).
The console here logs out 8 instead.
*/
for (let i = 0; i < bingoArray.length; i++) {
if (
bingoArray[i].every(
j => checked.includes(j)
)
)
p.addOne();
console.log(bingoArray[i], checked, p.currentPoint());
}
}
});
</script>
</body>
</html>
style.css
body {
background-color: #eee;
}
div {
display: block;
margin: 0 auto;
/*
height: 400px;
background: #eeeeee;
width: 400px;
*/
color: rgb(0, 0, 0)
}
h1 {
font-family: 'Google Sans', 'Segeo UI';
}
table,
button {
text-align: center;
}
button {
text-decoration: none;
border: none;
border-radius: 9px;
font-size: 20px;
}
.num {
background-color: rgb(207, 207, 207);
color: rgb(46, 46, 46);
margin: 0 auto;
width: 75px;
height: 75px;
font-size: 32px;
cursor: pointer;
}
.num:hover {
background-color: rgba(0, 46, 145, 0.726);
color: rgb(209, 209, 209);
}
.num[clicked=true] {
background-color: #000;
color: #000;
}
.num[clicked=true]:hover {
background-color: rgba(0, 0, 0, 0.315);
color: rgb(34, 34, 34);
}
h1 {
text-align: center;
}
.sum {
color: rgb(47, 99, 167);
}
目录树
/home/$USER/localhost/jquery
/games
/bingo
>index.html
>style.css
/jquerylib
/dist
>jquery.js
>jquery.min.js
我正在使用HTML，CSS和JS（用于事件的jQuery）创建Bingo游戏，但出现错误。
使用此类目录打开index.html时，您会看到一个带有5 x 5表格的页面。当您单击“生成随机表”按钮时，游戏将开始。
然后尝试在显示控制台窗口的同时单击整个第一行。最后一个数字是我的宾果点。单击整个第一行后，点是1。
尝试单击另一个正方形或已经涂黑的正方形。分数应仍为1，但控制台显示2。
回到有// IMPORTANT的代码，我将详细解释错误
答案 0 :(得分：1)
您的许多代码都可以重组和改进。最简单的“修复”是在for循环之前将p._bingoStatus重置为0。这样，已经发现的宾果就不会被计算两次。
p._bingoStatus = 0;
您当前的实施方式表明，当棋盘上有完全个宾果游戏时，获胜就为真。那是你真正想要的吗？这就是我想你真正想要的
win = this._bingoStatus > 0;