JSFiddle：http://jsfiddle.net/onlyandrewn/b18b4bza/
我正在制作一张宾果卡，目前它每次点击一个方格时都会计算。然而，我失去了如何制作它，以便当点击一个宾果游戏中的一行，一列或一个对角线上的五个方格时，它知道它是胜利而不是任意随机五个方格卡片。
我是否必须给卡片上的每个方格一个#id，然后有阵列说明方块1,2,3,4,5是否被点击=宾果游戏？
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Election Bingo</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Political Zinger</h1>
<button class="print">Print</button>
<button class="again">Play again</button>
<div class="congrats">
<p>WINNER!</p>
</div><!-- /.congrats -->
<div class="bingo">
<div class="row">
<div class="square"><p>Chrissy Teigen cries</p></div>
<div class="square"><p>Host makes a quick change</p></div>
<div class="square"><p>'I love you!'</p></div>
<div class="square"><p>'Merci' or 'Gracias'</p></div>
<div class="square"><p>Attempt at re-creating the 'Ellen selfie'</p></div>
</div>
<div class="row">
<div class="square"><p>A Weinstein is thanked</p></div>
<div class="square"><p>Jennifer Lawrence trips</p></div>
<div class="square"><p>Half-joking mention of nominee diversity</p></div>
<div class="square"><p>'This is heavy!'</p></div>
<div class="square"><p>A shout-out for winner's kids (who should be sleeping)</p></div>
</div>
<div class="row">
<div class="square"><p>Joke about number of British nominees</p></div>
<div class="square"><p>Award accepted posthumously</p></div>
<div class="logo"><p>Logo</p></div>
<div class="square"><p>Joke about the Sony hack</p></div>
<div class="square"><p>Winner mentions fellow nominees</p></div>
</div>
<div class="row">
<div class="square"><p>'I'd like to thank the academy ...'</p></div>
<div class="square"><p>'Je Suis Charlie'</p></div>
<div class="square"><p>The show goes over three hours</p></div>
<div class="square"><p>Camera pans to George and Amal</p></div>
<div class="square"><p>Winner talks over orchestra</p></div>
</div>
<div class="row">
<div class="square"><p>Winner thanks agent or manager</p></div>
<div class="square"><p>Winner forgets to thank spouse</p></div>
<div class="square"><p>Host makes a borderline-offensive joke</p></div>
<div class="square"><p>Presenters have a scripted 'disagreement'</p></div>
<div class="square"><p>NPH performs a music number</p></div>
</div>
</div><!-- /.bingo -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
$(function() {
// Play again, removes all previously clicked
$('.again').click(function(){
$('.square').removeClass('clicked');
});
// var newNum = Math.floor(Math.random);
// Toggle clicked and not clicked
$('.square').click(function(){
$(this).toggleClass('clicked');
});
// Count the number of squares clicked
$('.square').data('clicked', 0)
.click(function(){
var counter = $(this).data('clicked');
$(this).data('clicked', counter ++);
console.log(counter);
})
});
答案 0 :(得分：1)
与往常一样，有一种方法可以给猫皮肤涂抹，特别是在这种情况下。也就是说，这是一种方法。
更新了JSFiddle：http://jsfiddle.net/b18b4bza/5/
首先为每个单元格分配一个唯一的ID。我选择了一种类似于电子表格的“A1，B2”格式，其中字母和数字分别代表列和行。
<div class="bingo">
<div class="row">
<div class="square" id="a1"><p>Chrissy Teigen cries</p></div>
<div class="square" id="b1"><p>Host makes a quick change</p></div>
<div class="square" id="c1"><p>'I love you!'</p></div>
<div class="square" id="d1"><p>'Merci' or 'Gracias'</p></div>
<div class="square" id="e1"><p>Attempt at re-creating the 'Ellen selfie'</p></div>
</div>
<div class="row">
<div class="square" id="a2"><p>A Weinstein is thanked</p></div>
<div class="square" id="b2"><p>Jennifer Lawrence trips</p></div>
<div class="square" id="c2"><p>Half-joking mention of nominee diversity</p></div>
<div class="square" id="d2"><p>'This is heavy!'</p></div>
<div class="square" id="e2"><p>A shout-out for winner's kids (who should be sleeping)</p></div>
</div>
<div class="row">
<div class="square" id="a3"><p>Joke about number of British nominees</p></div>
<div class="square" id="b3"><p>Award accepted posthumously</p></div>
<div class="logo"><p>Logo</p></div>
<div class="square" id="d3"><p>Joke about the Sony hack</p></div>
<div class="square" id="e3"><p>Winner mentions fellow nominees</p></div>
</div>
<div class="row">
<div class="square" id="a4"><p>'I'd like to thank the academy ...'</p></div>
<div class="square" id="b4"><p>'Je Suis Charlie'</p></div>
<div class="square" id="c4"><p>The show goes over three hours</p></div>
<div class="square" id="d4"><p>Camera pans to George and Amal</p></div>
<div class="square" id="e4"><p>Winner talks over orchestra</p></div>
</div>
<div class="row">
<div class="square" id="a5"><p>Winner thanks agent or manager</p></div>
<div class="square" id="b5"><p>Winner forgets to thank spouse</p></div>
<div class="square" id="c5"><p>Host makes a borderline-offensive joke</p></div>
<div class="square" id="d5"><p>Presenters have a scripted 'disagreement'</p></div>
<div class="square" id="e5"><p>NPH performs a music number</p></div>
</div>
</div><!-- /.bingo -->
然后使用一些附加内容更新您的Javascript：
$(function() {
// Set winning combinations to array
var winners = [
['a1','a2','a3','a4','a5'],
['b1','b2','b3','b4','b5'],
['c1','c2','c3','c4','c5'],
['d1','d2','d3','d4','d5'],
['e1','e2','e3','e4','e5'],
['a1','b1','c1','d1','e1'],
['a2','b2','c2','d2','e2'],
['a3','b3','c3','d3','e3'],
['a4','b4','c4','d4','e4'],
['a5','b5','c5','d5','e5'],
['a1','b2','c3','d4','e5'],
['a5','b4','c3','d2','e1']
];
var possibleWinners = winners.length;
// Initialize selected array with c3 freebie
var selected = ['c3'];
// Play again, removes all previously clicked
$('.again').click(function(){
$('.square').removeClass('clicked');
selected = ['c3'];
});
// Toggle clicked and not clicked
$('.square').click(function(){
$(this).toggleClass('clicked');
// Push clicked object ID to 'selected' array
selected.push($(this).attr('id'));
// Compare winners array to selected array for matches
for(var i = 0; i < possibleWinners; i++) {
var cellExists = 0;
for(var j = 0; j < 5; j++) {
if($.inArray(winners[i][j], selected) > -1) {
cellExists++;
}
}
// If all 5 winner cells exist in selected array alert success message
if(cellExists == 5) {
alert('Winner!');
}
}
});
// Count the number of squares clicked
$('.square').data('clicked', 0)
.click(function(){
var counter = $(this).data('clicked');
$(this).data('clicked', counter ++);
console.log(counter);
})
});
我按照外表的顺序对JS做了什么：
创建所有可能获胜组合的“获胜者”数组
创建一个“选定”数组，预先填充单元格C3，因为那是免费的
如果有人选择再次播放，请清除“已选择”数组
将您的“获胜者”数组与“选定”数组进行比较，如果有5场比赛（所有中奖号码），则提示您有获胜者。显然，当有胜利者时，你可以用你想要采取的任何行动来取代警报......
阵列比较的细节无疑是有点笨拙，但希望这个概念至少能让你有一个良好的开端。
此外，该解决方案不是特别可扩展的，尤其是关于“获胜者”阵列。理论上你可以使用条件语句确定获胜者，但在这种情况下只有少数可能的获胜组合，所以我的例子只是硬编码。