我想在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,因此您的逻辑表明该位置已被占用 –