我用HTML和JavaScript编写了一个Tic-Tac-Toe游戏，想要显示得分（胜利，关系和损失）。我在脚本中设置了三个变量，如下所示（win，loss和tie）但是我不知道如何不断显示这些变量。
我的代码是： 在this website
我的代码在下面，我想显示变量，赢取损失和不断更新的关系： 井字棋 机器会征服人类吗？
if (document.all||document.getElementById){
document.write('<style>.tictac{')
document.write('width:50px;height:50px;')
document.write('}</style>')
}
var sqr1
var sqr2
var sqr3
var sqr4
var sqr5
var sqr6
var sqr7
var sqr8
var sqr9
var sqr1T = 0;
var sqr2T = 0;
var sqr3T = 0;
var sqr4T = 0;
var sqr5T = 0;
var sqr6T = 0;
var sqr7T = 0;
var sqr8T = 0;
var sqr9T = 0;
var moveCount = 0;
var turn = 0;
var mode = 1;
var win = 0;
var lose = 0;
var draw = 0;
function help() {
alert("Welcome to Daniel Schwartz's Will Machines Conquer Mankind: Tic-Tac-Toe! You " + name + " play as the X's and Daniel Schwartz's Artifical Intelligence plays as the O's. You " + name + " select the square you want to put your X into by clicking it. A rule is that a X or an O cannot occupy a square that is already occupied by another X or O. The first player to get three squares filled with the user's letter (X's or O's) in a row wins. Good Luck and enjoy Daniel Schwartz's Will Machines Conquer Mankind: Tic-Tac-Toe!!")
}
function vari()
{
sqr1 = document.tic.sqr1.value
sqr2 = document.tic.sqr2.value
sqr3 = document.tic.sqr3.value
sqr4 = document.tic.sqr4.value
sqr5 = document.tic.sqr5.value
sqr6 = document.tic.sqr6.value
sqr7 = document.tic.sqr7.value
sqr8 = document.tic.sqr8.value
sqr9 = document.tic.sqr9.value
}
function check()
{
if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ")
{
win = win + 1;
alert(name + " Wins! " + name + " beat the artificial intelligence!")
reset()
}
else
{
winCheck()
check2()
drawCheck()
}
}
function check2()
{
vari()
drawCheck()
if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
{
lose = lose + 1;
alert(name + " Loses! " + name + " lost to the artificial intelligence!")
reset()
}
}
function drawCheck()
{
vari()
moveCount = sqr1T + sqr2T + sqr3T + sqr4T + sqr5T + sqr6T + sqr7T + sqr8T + sqr9T
if(moveCount == 9)
{
draw = draw + 1;
alert(name + " and the computer have come to a draw!")
reset()
}
}
function winCheck()
{
check2()
if(sqr2 == " O " && sqr3 == " O " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr3 == " O " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr2 == " O " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr6 == " O " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr4 == " O " && sqr6 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr4 == " O " && sqr5 == " O " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr8 == " O " && sqr9 == " O " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr7 == " O " && sqr9 == " O " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr7 == " O " && sqr8 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr4 == " O " && sqr7 == " O " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr7 == " O " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr4 == " O " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr8 == " O " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr2 == " O " && sqr8 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr2 == " O " && sqr5 == " O " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr6 == " O " && sqr9 == " O " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr9 == " O " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr6 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr9 == " O " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr9 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr5 == " O " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr7 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr7 == " O " && sqr5 == " O " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else
{
computer()
}
check2()
}
function computer()
{
check2()
if(sqr1 == " O " && sqr5 == " O " && sqr3 == " X " && sqr8 == " X " && sqr9 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr4 == " X " && sqr6 == " X " && sqr5T == 0 && turn ==1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr6 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr2 == " X " && sqr3 == " X " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr3 == " X " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr2 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr5 == " X " && sqr6 == " X " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr4 == " X " && sqr6 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr4 == " X " && sqr5 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr8 == " X " && sqr9 == " X " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr9 == " X " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr8 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr4 == " X " && sqr7 == " X " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr7 == " X " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr4 == " X " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr5 == " X " && sqr8 == " X " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr2 == " X " && sqr8 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr2 == " X " && sqr5 == " X " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr6 == " X " && sqr9 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr9 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr6 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr5 == " X " && sqr9 == " X " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr9 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr5 == " X " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr7 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr5 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr9 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr3 == " X " && sqr7 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr2 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr3 == " X " && sqr8 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr8 == " X " && sqr7 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr8 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr5 == " O " && sqr8 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr5 == " O " && sqr8 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr5 == " X " && sqr9 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else
{
ArtificialIntelligence()
}
check2()
}
function ArtificialIntelligence()
{
vari()
if(document.tic.sqr1.value == " " && turn == 1)
{
document.tic.sqr1.value = " O "
turn = 0
sqr1T = 1
}
else if(document.tic.sqr2.value == " " && turn == 1)
{
document.tic.sqr2.value = " O "
turn = 0
sqr2T = 1
}
else if(document.tic.sqr3.value == " " && turn == 1)
{
document.tic.sqr3.value = " O "
turn = 0
sqr3T = 1
}
else if(document.tic.sqr4.value == " " && turn == 1)
{
document.tic.sqr4.value = " O "
turn = 0
sqr4T = 1
}
else if(document.tic.sqr5.value == " " && turn == 1)
{
document.tic.sqr5.value = " O "
turn = 0
sqr5T = 1
}
else if(document.tic.sqr6.value == " " && turn == 1)
{
document.tic.sqr6.value = " O "
turn = 0
sqr6T = 1
}
else if(document.tic.sqr7.value == " " && turn == 1)
{
document.tic.sqr7.value = " O "
turn = 0
sqr7T = 1
}
else if(document.tic.sqr8.value == " " && turn == 1)
{
document.tic.sqr8.value = " O "
turn = 0
sqr8T = 1
}
else if(document.tic.sqr9.value == " " && turn == 1)
{
document.tic.sqr9.value = " O "
turn = 0
sqr9T = 1
}
check2()
}
function reset()
{
document.tic.sqr1.value = " "
document.tic.sqr2.value = " "
document.tic.sqr3.value = " "
document.tic.sqr4.value = " "
document.tic.sqr5.value = " "
document.tic.sqr6.value = " "
document.tic.sqr7.value = " "
document.tic.sqr8.value = " "
document.tic.sqr9.value = " "
sqr1T = 0
sqr2T = 0
sqr3T = 0
sqr4T = 0
sqr5T = 0
sqr6T = 0
sqr7T = 0
sqr8T = 0
sqr9T = 0
vari()
turn = 0
moveCount = 0
}
function resetter()
{
reset()
}
</head>
<body>
<div id ="box">
<h1>Created By: Daniel Schwartz</h1>
<font size="10" color="orange">Cherokee High School</font>
</div>
</body>
答案 0 :(得分：1)
使用document.getElementbyId("anyid").innerHTML = score;
将您的得分变量等同于“anydiv”的innerHTML
供参考click here
答案 1 :(得分：0)
这是你原版的更新小提琴。正如peeyushsrj所提到的，你需要用分数更新你的元素。
http://fiddle.jshell.net/2Mxht/2/
我添加了以下HTML
<br />
Wins : <span id="wins">0</span>
Ties : <span id="ties">0</span>
Loses: <span id="losses">0</span>
<br />
JavaScript非常直接。在reset函数中，我检查变量并将该值赋给元素的innerHTML。
// Update win/loss/tie values
//wins is the div id, win is the variable
document.getElementById('wins').innerHTML = win;
//ties is the div id, draw is the variable
document.getElementById('ties').innerHTML = draw;
//losses is the div id, lose is the variable
document.getElementById('losses').innerHTML = lose;
希望这有帮助！ ：）