如何检查单击的行/列中的所有元素，宾果游戏
[英]How to check all elements in row/column clicked, Bingo game
问题描述
问题
JSFiddle： http : //jsfiddle.net/onlyandrewn/b18b4bza/
我正在制作宾果卡，目前每次点击一个正方形时，它都会保留一次计数。 但是，我迷失了如何做到这一点，所以当单击连续，垂直或对角线的五个方格来宾果游戏时，它知道这是一场胜利，而不是卡上任意五个方格。
我是否必须给卡上的每个正方形指定一个#id，然后使用数组来说明是否单击了1,2,3,4,5个正方形= Bingo？
的index.html
<!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>
scripts.js中
$(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);
})
});
1 个解决方案
解决方案1
1 已采纳 2015-04-28 22:08:44
与往常一样，有多种方法可以给猫咪剥皮，尤其是在这种特殊情况下。 也就是说，这是一种方法。
更新的JSFiddle： http : //jsfiddle.net/b18b4bza/5/
首先为每个单元格分配一个唯一的ID。 我选择了一种类似于电子表格的“ A1，B2”格式，其中字母和数字分别代表列和行。
的index.html
<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：
scripts.js中
$(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个匹配项（所有获胜数字），则提醒有一个获胜者。 显然，如果有获胜者，您将要采取任何行动来替换警报...
当然，数组比较的细节有些笨拙，但是希望该概念至少可以使您有个良好的开端。
另外，该解决方案不是特别可扩展的，尤其是在“优胜者”阵列方面。 从理论上讲，您可以使用条件语句确定赢家，但是在这种情况下，可能的赢家组合很少，因此我的示例只是硬编码。
宾果游戏，减少麻烦，重置计数器跟踪方块单击
[英]Bingo game, trouble subtracting, resetting counter tracking squares clicked
如果行和列中的四个元素相同，如何检入二维数组？
[英]How to check in 2d array if four elements in row and column are the same?
在 React-Table 中，如何选中/取消选中行或列中的所有复选框
[英]In React-Table, how to check/uncheck all checkboxes in a row or column
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.