0
這是我使用HTML5畫布井字棋遊戲代碼： 井字遊戲：如何在贏得所有瓷磚填滿時防止「這是一條領帶」提示？
//Global Variables
var filled;
var content;
var winningCombos;
var turn = 0;
var tilesFilled = 0;
window.onload=function(){
filled = new Array(); //An array for checking if the tile contains content (Xs or Os) to prevent it from being reused
content = new Array(); //An array for checking what the tile content is (Xs or Os) to determine a winner
winningCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]]; //A dual array of the 8 different winning combos (3 across, 3 down, 2 diagonal)
for(var l = 0; l <= 8; l++){ //A for loop, which starts out as unfilled and blank, to assign values to the tiles incrementally
filled[l] = false;
content[l]='';
}
}
//The Canvas and Tiles Function
function canvasClicked(canvasNumber){ //This will get the number from canvasClicked in the html body
var theTile = "canvas"+canvasNumber; //And then append 「canvas」 to the number. This equals the canvas id.
var c = document.getElementById(theTile);
var ctx = c.getContext("2d"); //This is adding 2d context to theTile (canvas id)
// Filling in the Tiles
if(filled[canvasNumber-1] ==false){ //If the tile is empty
if(turn%2==0){ //Determine whose turn it is by the modulo operator
ctx.beginPath(); //Drawing the X
ctx.moveTo(20,20);
ctx.lineTo(80,80);
ctx.moveTo(80,20);
ctx.lineTo(20,80);
ctx.lineWidth = 2;
ctx.strokeStyle="palevioletred";
ctx.stroke();
ctx.closePath();
content[canvasNumber-1] = 'X';
}
else{ //If it isn’t Xs turn, then it’s Os turn
ctx.beginPath(); //Drawing the O
ctx.arc(50,50,40,0,2*Math.PI);
ctx.lineWidth = 2;
ctx.strokeStyle="skyblue";
ctx.stroke();
ctx.closePath();
content[canvasNumber-1] = 'O';
}
turn++; //Alternate Xs and Os turn by using the increment operator, starting with 0 in the global variable turn
filled[canvasNumber-1] = true;
tilesFilled++; //Checks whether all tiles are filled yet, again with the increment operator, starting at 0 in the variable tilesFilled
checkForWinners(content[canvasNumber-1]); //Check for winners
if(tilesFilled==9) { //If there is no winner after all tiles are filled start a new game
alert("It's a Tie!");
location.reload(true);
}
}
}
function checkForWinners(symbol){
for(var i = 0; i < winningCombos.length; i++){ //This for loop will go through the 8 winningCombos
//This will go through all the winningCombos to see whether the 0,1,2 within the index have the same content (Xs or Os)
if(content[winningCombos[i][0]]==symbol&&content[winningCombos[i][1]]==symbol&&content[winningCombos[i][2]]==symbol){
alert(symbol+ " WON THE GAME!");
location.reload(true);
}
}
}
</script>
</head>
<body>
<h1>Tic Tac Toe</h1>
<canvas id = "canvas1" width="100" height="100" onclick="canvasClicked(1)"></canvas>
<canvas id = "canvas2" width="100" height="100" onclick="canvasClicked(2)"></canvas>
<canvas id = "canvas3" width="100" height="100" onclick="canvasClicked(3)"></canvas><br/>
<canvas id = "canvas4" width="100" height="100" onclick="canvasClicked(4)"></canvas>
<canvas id = "canvas5" width="100" height="100" onclick="canvasClicked(5)"></canvas>
<canvas id = "canvas6" width="100" height="100" onclick="canvasClicked(6)"></canvas><br/>
<canvas id = "canvas7" width="100" height="100" onclick="canvasClicked(7)"></canvas>
<canvas id = "canvas8" width="100" height="100" onclick="canvasClicked(8)"></canvas>
<canvas id = "canvas9" width="100" height="100" onclick="canvasClicked(9)"></canvas>
</body>
從本質上講，當所有9瓦都充滿了「這是一個領帶」警報將運行。然而，當第九塊磚被填滿時獲得勝利時，這也將產生「這是一條領帶」警報。我如何防止這種情況？
此外，任何和所有關於如何改進此代碼的建議是值得歡迎的。