javascript - 检查当前玩家是否在 JavaScript 中赢得井字游戏
问题描述
我正在用 html CSS 和 JavaScript 制作一个简单的井字游戏。没有实现计算机 AL 播放器。只有两个玩家轮流。我的 checkWinner 功能不起作用,我不知道如何确定获胜者。有人建议我创建一个二维数组来存储我在名为 winCombos 的变量中所做的获胜组合。我正在遍历所有这些,并在单元格数组的不同位置与 currentPlayer 进行比较,但它不起作用。可能我做错了。有人能帮帮我吗。谢谢
var player1 = "X";
var player2 = "O";
var cells = Array.from(document.querySelectorAll(".cell"));
var currentPlayer = player1;
var winner = "";
var winCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
function checkWinner(arr, curPlayer){
arr.forEach(function(subArr){
var counter = 0;
subArr.forEach(function(elem){
if(cells[elem] === curPlayer){
counter++;
if(counter == 2 ){
winner = curPlayer;
alert(winner);
}
}
});
});
}
function move(e){
if(e.target.className === "cell" && e.target.textContent === ""){
e.target.textContent = currentPlayer;
checkWinner(winCombos, currentPlayer);
currentPlayer = (currentPlayer === player1)?player2:player1;
}
}
document.querySelector(".board").addEventListener("click", move);
.container{
width: 400px;
height: 480px;
background: tomato;
margin: 50px auto;
text-align: center;
padding: 10px;
}
.board{
width: 90%;
margin: 20px auto;
}
.board .cell{
width: 118px;
height: 100px;
float: left;
text-align: center;
line-height: 80px;
font-size: 80px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</body>
</html>
解决方案
两件事:innerHTML
用于获取 div 的内容,而不是包含整个 div 的字符串。还要检查是否实际上连续 3 个,而不仅仅是 2 个。(或者您可以counter++;
在检查后将 移至,并将其保留为counter == 2
)
if(cells[elem].innerHTML === curPlayer){
counter++;
if(counter == 3 ){
winner = curPlayer;
alert(winner);
}
}
var player1 = "X";
var player2 = "O";
var cells = Array.from(document.querySelectorAll(".cell"));
var currentPlayer = player1;
var winner = "";
var winCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
function checkWinner(arr, curPlayer){
arr.forEach(function(subArr){
var counter = 0;
subArr.forEach(function(elem){
if(cells[elem].innerHTML === curPlayer){
counter++;
if(counter == 3 ){
winner = curPlayer;
alert(winner);
}
}
});
});
}
function move(e){
if(e.target.className === "cell" && e.target.textContent === ""){
e.target.textContent = currentPlayer;
checkWinner(winCombos, currentPlayer);
currentPlayer = (currentPlayer === player1)?player2:player1;
}
}
document.querySelector(".board").addEventListener("click", move);
.container{
width: 400px;
height: 480px;
background: tomato;
margin: 50px auto;
text-align: center;
padding: 10px;
}
.board{
width: 90%;
margin: 20px auto;
}
.board .cell{
width: 118px;
height: 100px;
float: left;
text-align: center;
line-height: 80px;
font-size: 80px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</body>
</html>
推荐阅读
- asp.net-core-mvc - 在授权策略需求处理程序中访问 dbcontext
- ios - iOS 扩展是否有 IPA 文件?
- python - 在对象方法中使用 Numexpr
- sql - 调用函数的 MS Access 更新查询不返回任何内容/更新字段
- javascript - 如何将表单数据传递给 GAS
- rx-java2 - 为什么在 startWith 中使用 just 或 fromCallable 时 Single 的行为会有所不同?
- python - 替换R中段落中的确切句子
- wordpress - 在 Woocommerce 购物车页面上选择的付款方式应在结帐页面上处于活动状态
- r - 在R中如何计算一个值出现的次数并满足多个条件
- ansible - Rundeck 通过插件与 Ansible 集成