本文介绍了我如何使用 jquery 检查获胜者的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..我正在尝试使用 jquery 为游戏实现 tic tac,这是我的代码:
$(document).ready(function() {让转= 1;$(".smallbox").click(function() {如果(转 == 1){$(this).text("X");$(this).addClass("X");转 = 2;} 别的 {$(this).text("O");$(this).addClass("O");转 = 1;}$("#tune").text(turn);});});
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="box" id="mainbox"><!-- 创建 9 个小盒子 --><div class="smallbox" id="square1"></div><div class="smallbox" id="square2"></div><div class="smallbox" id="square3"></div><div class="smallbox" id="square4"></div><div class="smallbox" id="square5"></div><div class="smallbox" id="square6"></div><div class="smallbox" id="square7"></div><div class="smallbox" id="square8"></div><div class="smallbox" id="square9"></div>
但是,由于 X 和 Y,我很难检测到获胜者.由于我的代码提供 X 信息而不提供 Y,我该如何改进我的代码?
解决方案$(document).ready(function() {让 gameArray = [];让转= 1;让 gameOver = false;$("#turn").text(turn === 1 ? 'X' : 'O');$(".smallbox").click(function() {让 squereIndex = $(this).attr('id').replace('square', '') - 1;if (turn == 1 && !gameOver && gameArray[squereIndex] === undefined) {$(this).text("X");$(this).addClass("X");转 = 2;游戏数组[squereIndex] = 1;} else if (!gameOver && gameArray[squereIndex] === undefined) {$(this).text("O");$(this).addClass("O");转 = 1;gameArray[squereIndex] = -1;}检查赢家();$("#turn").text(turn === 1 ? 'X' : 'O')});函数 checkWinner() {让结果;//检查行对于(让我= 0;我<= 6;我+= 3){结果 = gameArray[i] + (gameArray[i + 1]) + (gameArray[i + 2]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真;}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真;}}//检查列for (让 i = 0; i <= 3; i++) {结果 = gameArray[i] + (gameArray[i + 3]) + (gameArray[i + 6]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真;}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真;}}//检查对角线结果 = gameArray[0] + (gameArray[4]) + (gameArray[8]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真;}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真;}结果 = gameArray[2] + (gameArray[4]) + (gameArray[6]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真;}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真;}}});
.smallbox {宽度:50px;边框:1px纯黑色;高度:35px;边距:2px;文本对齐:居中;填充顶部:15px;}.row-容器{显示:弹性;}
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div class="box" id="mainbox">转弯:<span id='turn'></span><!-- 创建 9 个小盒子 --><div class="smallbox" id="square1"></div><div class="smallbox" id="square2"></div><div class="smallbox" id="square3"></div><div class='row-container'><div class="smallbox" id="square4"></div><div class="smallbox" id="square5"></div><div class="smallbox" id="square6"></div>
<div class="smallbox" id="square7"></div><div class="smallbox" id="square8"></div><div class="smallbox" id="square9"></div><span id='winner'></span>
I am tryin to implement a tic tac to game using jquery, and here is my code:
$(document).ready(function() {
let turn = 1;
$(".smallbox").click(function() {
if (turn == 1) {
$(this).text("X");
$(this).addClass("X");
turn = 2;
} else {
$(this).text("O");
$(this).addClass("O");
turn = 1;
}
$("#tune").text(turn);
});
});
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="mainbox">
<!-- creat 9 small box -->
<div class="smallbox" id="square1"></div>
<div class="smallbox" id="square2"></div>
<div class="smallbox" id="square3"></div>
<div class="smallbox" id="square4"></div>
<div class="smallbox" id="square5"></div>
<div class="smallbox" id="square6"></div>
<div class="smallbox" id="square7"></div>
<div class="smallbox" id="square8"></div>
<div class="smallbox" id="square9"></div>
</div>
however I have difficulty detecting the winner, due to X and Y. Since my code is providing X information but not Y, how can I improve my code in this regard?
解决方案$(document).ready(function() {
let gameArray = [];
let turn = 1;
let gameOver = false;
$("#turn").text(turn === 1 ? 'X' : 'O');
$(".smallbox").click(function() {
let squereIndex = $(this).attr('id').replace('square', '') - 1;
if (turn == 1 && !gameOver && gameArray[squereIndex] === undefined) {
$(this).text("X");
$(this).addClass("X");
turn = 2;
gameArray[squereIndex] = 1;
} else if (!gameOver && gameArray[squereIndex] === undefined) {
$(this).text("O");
$(this).addClass("O");
turn = 1;
gameArray[squereIndex] = -1;
}
checkWinner();
$("#turn").text(turn === 1 ? 'X' : 'O')
});
function checkWinner() {
let result;
//check Rows
for (let i = 0; i <= 6; i += 3) {
result = gameArray[i] + (gameArray[i + 1]) + (gameArray[i + 2]);
if (result === 3) {
$("#winner").text('X win');
gameOver = true;
}
if (result === -3) {
$("#winner").text('O win');
gameOver = true;
}
}
//check Columns
for (let i = 0; i <= 3; i++) {
result = gameArray[i] + (gameArray[i + 3]) + (gameArray[i + 6]);
if (result === 3) {
$("#winner").text('X win');
gameOver = true;
}
if (result === -3) {
$("#winner").text('O win');
gameOver = true;
}
}
//check Diagonal
result = gameArray[0] + (gameArray[4]) + (gameArray[8]);
if (result === 3) {
$("#winner").text('X win');
gameOver = true;
}
if (result === -3) {
$("#winner").text('O win');
gameOver = true;
}
result = gameArray[2] + (gameArray[4]) + (gameArray[6]);
if (result === 3) {
$("#winner").text('X win');
gameOver = true;
}
if (result === -3) {
$("#winner").text('O win');
gameOver = true;
}
}
});
.smallbox {
width: 50px;
border: 1px solid black;
height: 35px;
margin: 2px;
text-align: center;
padding-top: 15px;
}
.row-container {
display: flex;
}
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="mainbox">
Turn: <span id='turn'></span>
<!-- creat 9 small box -->
<div class='row-container'>
<div class="smallbox" id="square1"></div>
<div class="smallbox" id="square2"></div>
<div class="smallbox" id="square3"></div>
</div>
<div class='row-container'>
<div class="smallbox" id="square4"></div>
<div class="smallbox" id="square5"></div>
<div class="smallbox" id="square6"></div>
</div>
<div class='row-container'>
<div class="smallbox" id="square7"></div>
<div class="smallbox" id="square8"></div>
<div class="smallbox" id="square9"></div>
</div>
<span id='winner'></span>
</div>
这篇关于我如何使用 jquery 检查获胜者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论