javascript - if条件中的javascript井字游戏逻辑错误
问题描述
我确实将逻辑写入 if 条件,但我发现 if/else if 条件计算 && 运算符评估为 true 的次数,因此逻辑错误(如果你在第一行放置 2 x 和 1 个圆圈,它会将其视为 2 x 获胜,如果有 3 个 X,它将评估为 3 个获胜)所以我尝试了很多方法,但我被卡住了.. 提前谢谢
这是我的代码
const divs = document.querySelectorAll(".game");
let counter = 0;
const circle = "public/Mat/circle.svg"
const cross = "public/Mat/cross.svg"
const player1 = {
win : 0,
lose : 0,
sign : "public/Mat/circle.svg"
}
const player2 = {
win : 0,
lose : 0,
sign : "public/Mat/cross.svg"
}
const track = [];
for(let i = 0; i< divs.length; i++) {
divs[i].addEventListener('click', action);
let x = document.createElement("img");
divs[i].append(x);
}
function action() {
if(this.firstChild.src === "") {
counter++;
track.push(counter)
let m = this.firstChild.src;
track.forEach(element => {
if(element % 2 == 0){
this.firstChild.src = circle;
check()
} else{
this.firstChild.src = cross;
check()
}
if (track.length == 9) {
console.log("draw");
}
});
}
}
function check() {
let host = "http://127.0.0.1:5500/";
let crs = host+cross;
let crc = host+circle;
if( // cross wins player 2
(divs[0].firstChild.src === crs && divs[1].firstChild.src === crs && divs[2].firstChild.src === crs) ||
(divs[3].firstChild.src === crs && divs[4].firstChild.src === crs && divs[5].firstChild.src === crs) ||
(divs[6].firstChild.src === crs && divs[7].firstChild.src === crs && divs[8].firstChild.src === crs) ||
(divs[0].firstChild.src === crs && divs[3].firstChild.src === crs && divs[6].firstChild.src === crs) ||
(divs[1].firstChild.src === crs && divs[4].firstChild.src === crs && divs[7].firstChild.src === crs) ||
(divs[2].firstChild.src === crs && divs[5].firstChild.src === crs && divs[8].firstChild.src === crs) ||
(divs[0].firstChild.src === crs && divs[4].firstChild.src === crs && divs[8].firstChild.src === crs) ||
(divs[2].firstChild.src === crs && divs[4].firstChild.src === crs && divs[6].firstChild.src === crs)
){
player2.win +=1;
player1.lose +=1;
console.log(player2.win);
} else if( // circle win player 1
(divs[0].firstChild.src === crc && divs[1].firstChild.src === crc && divs[2].firstChild.src === crc) ||
(divs[3].firstChild.src === crc && divs[4].firstChild.src === crc && divs[5].firstChild.src === crc) ||
(divs[6].firstChild.src === crc && divs[7].firstChild.src === crc && divs[8].firstChild.src === crc) ||
(divs[0].firstChild.src === crc && divs[3].firstChild.src === crc && divs[6].firstChild.src === crc) ||
(divs[1].firstChild.src === crc && divs[4].firstChild.src === crc && divs[7].firstChild.src === crc) ||
(divs[2].firstChild.src === crc && divs[5].firstChild.src === crc && divs[8].firstChild.src === crc) ||
(divs[0].firstChild.src === crc && divs[4].firstChild.src === crc && divs[8].firstChild.src === crc) ||
(divs[2].firstChild.src === crc && divs[4].firstChild.src === crc && divs[6].firstChild.src === crc)
){
player1.win +=1;
player2.lose +=1 ;
console.log(player1.win);
}
}
* {
margin: 0;
padding: 0;
}
#grid {
display: grid;
grid-template-areas:
"title title title title title"
"playerOne 1st 2nd 3rd playerTwo"
"playerOne 4th 5th 6th playerTwo"
"playerOne 7th 8th 9th playerTwo"
;
}
.game {
border: 2px solid red;
height: 20vh;
border-collapse: collapse;
}
#title {
grid-area: title;
text-align: center;
font-size: 8vh;
}
#it1 {
grid-area: 1st;
}
#it2 {
grid-area: 2nd;
}
#it3 {
grid-area: 3rd;
}
#it4 {
grid-area: 4th;
}
#it5 {
grid-area: 5th;
}
#it6 {
grid-area: 6th;
}
#it7 {
grid-area: 7th;
}
#it8 {
grid-area:8th;
}
#it9 {
grid-area:9th;
}
#player1 {
grid-area: playerOne;
text-align: center;
}
#player2 {
grid-area: playerTwo;
text-align: center;
}
img {
max-width: 70%;
max-height: 70%;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="public/css/style.css">
<title>TicTac</title>
</head>
<body>
<section id="grid">
<div id="title"><h1>Tic Tac Game</h1></div>
<div id="it1" class="game"></div>
<div id="it2" class="game"></div>
<div id="it3" class="game"></div>
<div id="it4" class="game"></div>
<div id="it5" class="game"></div>
<div id="it6" class="game"></div>
<div id="it7" class="game"></div>
<div id="it8" class="game"></div>
<div id="it9" class="game"></div>
<div id="player1">
<h2>Player 1</h2>
</div>
<div id="player2">
<h2>player 2</h2>
</div>
</section>
<script src="public/js/index.js"></script>
</body>
</html>
解决方案
我发现问题出在每种方法中,因此我对其进行了修改并改用了 if 条件,并且效果很好:))
function action() {
if(this.firstChild.src === "") {
counter++;
track.push(counter)
if(counter % 2 == 0) {
this.firstChild.src = circle;
check()
} else if(!counter % 2 == 0) {
this.firstChild.src = cross;
check()
}
}
}
推荐阅读
- python - Python如何将数据框的两列组合成一个列表?
- c# - 方法字符串[,]
- excel - 如果没有出现列,则 vba 代码停止脚本
- php - 继续收到错误:AWS HTTP 错误:cURL 错误 6:尝试上传文件时
- python - 返回列表中字符串的 ASCII 码
- sql-server - SQL Server 代理作业步骤 - 如果存在不评估
- dataframe - 如何在 Databricks 笔记本中合并 pyspark 中的多个数据框
- html - 奇怪的矩形元素宽度和高度行为仅在 Chrome 中
- google-cloud-platform - 部署 Google Cloud Endpoints 配置失败 Google API Linter 建议
- laravel - Laravel snappy pdf --viewport-size 1024x768 wkhtmltopdf windows OS 不工作