gpt4 book ai didi

javascript - 最终 else if 语句未运行

转载 作者:行者123 更新时间:2023-12-02 13:48:51 29 4
gpt4 key购买 nike

我正在尝试用 JavaScript 制作一个基本的井字棋类型游戏。尽管 x 和 y 值在 if 语句的范围内,但除最后一个之外的所有空格都有效。

我不知道为什么最后的 else if 语句不起作用。

var c = document.getElementById("tictactoe");
var cx = c.getContext('2d');
var turn;
var boardArray = [0,0,0,
0,0,0,
0,0,0];

function drawGameBoard(){
cx.lineWidth = 20;
cx.strokeStyle = "#888";
cx.lineCap = "round";

cx.beginPath();
cx.moveTo(200,20);
cx.lineTo(200,580);
cx.moveTo(400,20);
cx.lineTo(400,580);
cx.moveTo(20,200);
cx.lineTo(580,200);
cx.moveTo(20,400);
cx.lineTo(580,400);
cx.stroke();
}

$("#tictactoe").click(function(e){
var x = e.offsetX;
var y = e.offsetY;
checkPos(x, y);
});

function checkPos(x, y){
alert(x +"+"+ y);
if((x<190 && x>10) && (y<190 && y>10)){
gamePiece(1);
} else if((x<390 && x>210) && (y<190 && y>10)){
gamePiece(2);
} else if((x<590 && x>410) && (y<190 && y>10)){
gamePiece(3);
} else if((x<190 && x>10) && (y<390 && y>210)){
gamePiece(4);
} else if((x<390 && x>210) && (y<390 && y>210)){
gamePiece(5);
} else if((x<590 && x>410) && (y<390 && y>210)){
gamePiece(6);
} else if((x<190 && x>10) && (y<590 && y>410)){
gamePiece(7);
} else if((x<390 && x>210) && (y<590 && y>410)){
gamePiece(8);
} else if((x<590 && x>410) && (y<590 && y>410)){
gamePiece(9);
} else{
//do nothing
}
}

function gamePiece(pos){
if(isEmpty(pos)){
alert(pos);
if(pos == 1){
cx.clearRect(80,80,50,50);
cx.fillStyle = 'black';
cx.fillRect(80,80,50,50);
}
if(pos == 2){
cx.clearRect(280,80,50,50);
cx.fillStyle = 'black';
cx.fillRect(280,80,50,50);
}
if(pos == 3){
cx.clearRect(480,80,50,50);
cx.fillStyle = 'black';
cx.fillRect(480,80,50,50);
}
if(pos == 4){
cx.clearRect(80,280,50,50);
cx.fillStyle = 'black';
cx.fillRect(80,280,50,50);
}
if(pos == 5){
cx.clearRect(280,280,50,50);
cx.fillStyle = 'black';
cx.fillRect(280,280,50,50);
}
if(pos == 6){
cx.clearRect(480,280,50,50);
cx.fillStyle = 'black';
cx.fillRect(480,280,50,50);
}
if(pos == 7){
cx.clearRect(80,480,50,50);
cx.fillStyle = 'black';
cx.fillRect(80,480,50,50);
}
if(pos == 8){
cx.clearRect(280,480,50,50);
cx.fillStyle = 'black';
cx.fillRect(280,480,50,50);
}
if (pos == 9){
cx.clearRect(480,480,50,50);
cx.fillStyle = 'black';
cx.fillRect(480,480,50,50);
}
}
}

function isEmpty(pos){
if(boardArray[pos] == 0){
return true;
} else{
return false;
}
}

window.onLoad = drawGameBoard();
body{
padding: 0 auto;
margin: 0 auto;
}

.wrapper-parent{
width: 100%;
}

.canvas-wrapper{
width: 100%;
padding-bottom: 1em;
}

.ctic{
display: block;
padding: 0;
margin: auto;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper-parent">
<div class="canvas-wrapper">
<canvas id="tictactoe" class="ctic" width="600px" height='600px'>
</canvas>
</div>
</div>

最佳答案

您需要像这样更改“isEmpty”函数:

function isEmpty(pos){
// Array indexes start with 0 not 1
// Also it is generally better to use strict equality in my opinion
return (boardArray[(pos - 1)] === 0);
}

您的数组中有 9 个项目,这意味着最后一个项目的“pos”是“8”而不是“9”

这是带有小改动的完整片段。

var c = document.getElementById("tictactoe");
var cx = c.getContext('2d');
var turn;
var boardArray = [0,0,0,
0,0,0,
0,0,0];

function drawGameBoard(){
cx.lineWidth = 20;
cx.strokeStyle = "#888";
cx.lineCap = "round";

cx.beginPath();
cx.moveTo(200,20);
cx.lineTo(200,580);
cx.moveTo(400,20);
cx.lineTo(400,580);
cx.moveTo(20,200);
cx.lineTo(580,200);
cx.moveTo(20,400);
cx.lineTo(580,400);
cx.stroke();
}

$("#tictactoe").click(function(e){
var x = e.offsetX;
var y = e.offsetY;
checkPos(x, y);
});

function checkPos(x, y){
alert(x +"+"+ y);
if((x<190 && x>10) && (y<190 && y>10)){
gamePiece(1);
} else if((x<390 && x>210) && (y<190 && y>10)){
gamePiece(2);
} else if((x<590 && x>410) && (y<190 && y>10)){
gamePiece(3);
} else if((x<190 && x>10) && (y<390 && y>210)){
gamePiece(4);
} else if((x<390 && x>210) && (y<390 && y>210)){
gamePiece(5);
} else if((x<590 && x>410) && (y<390 && y>210)){
gamePiece(6);
} else if((x<190 && x>10) && (y<590 && y>410)){
gamePiece(7);
} else if((x<390 && x>210) && (y<590 && y>410)){
gamePiece(8);
} else if((x<590 && x>410) && (y<590 && y>410)){
gamePiece(9);
} else{
//do nothing
}
}

function gamePiece(pos){
if(isEmpty(pos)){
alert(pos);
if(pos == 1){
cx.clearRect(80,80,50,50);
cx.fillStyle = 'black';
cx.fillRect(80,80,50,50);
}
if(pos == 2){
cx.clearRect(280,80,50,50);
cx.fillStyle = 'black';
cx.fillRect(280,80,50,50);
}
if(pos == 3){
cx.clearRect(480,80,50,50);
cx.fillStyle = 'black';
cx.fillRect(480,80,50,50);
}
if(pos == 4){
cx.clearRect(80,280,50,50);
cx.fillStyle = 'black';
cx.fillRect(80,280,50,50);
}
if(pos == 5){
cx.clearRect(280,280,50,50);
cx.fillStyle = 'black';
cx.fillRect(280,280,50,50);
}
if(pos == 6){
cx.clearRect(480,280,50,50);
cx.fillStyle = 'black';
cx.fillRect(480,280,50,50);
}
if(pos == 7){
cx.clearRect(80,480,50,50);
cx.fillStyle = 'black';
cx.fillRect(80,480,50,50);
}
if(pos == 8){
cx.clearRect(280,480,50,50);
cx.fillStyle = 'black';
cx.fillRect(280,480,50,50);
}
if (pos == 9){
cx.clearRect(480,480,50,50);
cx.fillStyle = 'black';
cx.fillRect(480,480,50,50);
}
}
}

function isEmpty(pos){
// Array indexes start with 0 not 1
// Also it is generally better to use strict equality in my opinion
return (boardArray[(pos - 1)] === 0);
}

window.onLoad = drawGameBoard();
body{
padding: 0 auto;
margin: 0 auto;
}

.wrapper-parent{
width: 100%;
}

.canvas-wrapper{
width: 100%;
padding-bottom: 1em;
}

.ctic{
display: block;
padding: 0;
margin: auto;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper-parent">
<div class="canvas-wrapper">
<canvas id="tictactoe" class="ctic" width="600px" height='600px'>
</canvas>
</div>
</div>

关于javascript - 最终 else if 语句未运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41155741/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com