这是我使用HTML5 Canvas制作一款井字游戏的代码:
//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>
本质上，"It's a tie"警报将在所有9个贴图都填满时运行。然而，当第9个贴图被填满时取得胜利时，这也会产生"平局"警报。我该如何预防呢?
同时，任何关于如何改进此代码的建议都是受欢迎的。
//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
var winnerName = checkForWinners(content[canvasNumber-1]);//Check for winners
if(tilesFilled == 9 && winnerName == "undefined") { //If there is no winner after all tiles are filled start a new game
alert("GAME OVER!");
location.reload(true);
}else if(winnerName != "undefined"){
alert(winnerName+ " WON THE GAME!");
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){
return symbol; break;
//location.reload(true);
}
}
return "undefined";
}<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>我不知道你在哪里打印它是领带。但是我要改变这个方法调用:
checkForWinners(content[canvasNumber-1]);
返回一个布尔值，如果调用该方法中的alert，则该值为真。
然后修改:
if(tilesFilled==9) {
if(noWinnersAlertBoolean && tilesFilled==9) {