0
我想在JavaScript中製作一個基本的井字遊戲類型的遊戲。即使x和y值在if語句的範圍內，板子上的所有空間都可以工作，除了最後一個。最後如果語句沒有運行
我不知道爲什麼final 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>
什麼如果事情不起作用，'alert（）'會顯示出來嗎？ （你也許應該使用'console.log（）'來代替）。 – Pointy
希望看到使用'switch'而不是所有'if..else'只是FYI – haxxxton
你的電路板數組是0 ... 8 - 數組索引是基於0的......然後使用索引9作爲測試對象0 ...但未定義！== 0，因此您的邏輯表明該位置已被佔用 –