2012-09-25 28 views
3

我正在使用html,css和JavaScript编写一个tic tac toe游戏。我在.html文件中引用了外部.js文件中的JavaScript。在.js文件中,我有一个名为playerMove的函数,它允许玩家进行移动并在玩家'x'和'o'之间切换。我想要做的是确定胜利者。Javascript和html Tic Tac Toe赢家

下面是我所拥有的:每个方块,当onclick(this)时,引用playerMove(piece)。每做完一个动作后,我想运行if语句来检查获胜者,但不确定参数是否包含对'piece'或a,b和c的引用。任何建议将不胜感激。

var turn = 0; 
a = document.getElementById("topLeftSquare").innerHTML; 
b = document.getElementById("topMiddleSquare").innerHTML; 
c = document.getElementById("topRightSquare").innerHTML; 

function playerMove(piece) { 
var win; 
if(piece.innerHTML != 'X' && piece.innerHTML != 'O'){ 
    if(turn % 2 == 0){ 
     document.getElementById('playerDisplay').innerHTML= "X Plays " + printEquation(1); 
     piece.innerHTML = 'X'; 
     window.setInterval("X", 10000) 
     piece.style.color = "red"; 
     if(piece.innerHTML == 'X') 
      window.alert("X WINS!"); 
    } 
    else { 
     document.getElementById('playerDisplay').innerHTML= "O Plays " + printEquation(1); 
     piece.innerHTML = 'O'; 
     piece.style.color = "brown"; 
     //document.getElementById('playerDisplay').innerHTML = "O Plays"; 

     //win = winner(); 
    } 

    turn+=1; 
} 

的html代码:

<div id="board"> 
      <div class="topLeftSquare" onclick="playerMove(this)"> 

      </div> 
      <div class="topMiddleSquare" onclick="playerMove(this)"> 

      </div> 
      <div class="topRightSquare" onclick="playerMove(this)"> 

      </div> 
</div> 
+0

你可以提供一些你的HTML的呢?以及如何/何时调用'playerMove(piece)' –

+3

我建议您使用并更新一个数组,描述哪里有'X','Os'以及哪里有空白点。经过五轮或更多的运行循环后,每回合后检查所有8个选项的胜利(它会很快)。 – zehelvion

+0

这是你的所有代码?此外,这不是寻求关于编程的建议的最佳地点。我可能在这里错了,但我会建议http://programmers.stackexchange.com/如果你正在寻找更多的通用建议 –

回答

0

阿瑟沃尔夫怀特说:

<html><head> 
<style> 
td{border:1px solid black;padding:0px;width:20px;height:22px;text-align:center} 
</style> 
<script> 
var s = "O"; 
var r = [0,0,0,0,0,0,0,0,0]; 
function t(a,b,c) { 
return (Math.abs(r[a] + r[b] + r[c]) == 3 ? true : false); 
} 
function a() { 
var c = document.getElementsByTagName("INPUT"); 
for (var i = 0; i < c.length;i++) { 
    if (c[i].checked == true) { 
    var g = parseInt(c[i].id); 
    r[g] = (s=="O" ? -1 : 1); 
    var m = document.createElement("TEXT"); 
    m.innerHTML = s; 
    c[i].parentNode.replaceChild(m, c[i]); 
    if (t(0,1,2) || t(3,4,5) || t(6,7,8) || t(0,3,6) || t(1,4,7) || t(2,5,8) || t(0,4,8) || t(2,4,6)) { 
    alert("Player " + s + " wins!"); 
    } 
    s = (s=="O" ? "X" : "O"); 
    } 
} 
} 
</script> 
</head><body> 
<table cellspacing='0' onclick='a()' name='board'> 
<tr><td><input type='checkbox' id='0' /></td><td><input type='checkbox' id='1' /></td><td><input type='checkbox' id='2' /></td></tr> 
<tr><td><input type='checkbox' id='3' /></td><td><input type='checkbox' id='4' /></td><td><input type='checkbox' id='5' /></td></tr> 
<tr><td><input type='checkbox' id='6' /></td><td><input type='checkbox' id='7' /></td><td><input type='checkbox' id='8' /></td></tr> 
</table> 
</body></html> 

WAY快速和肮脏的,但什么是极大的挑战!我是在下一次采访JS程序员时使用它的!

+0

我会试试这个,看看我能得到什么。我需要使用一个没有表格的外部javascript文件来编写这个文件(div唯一的图),但是我会解决这个问题,然后我会告诉你它是怎么回事。谢谢! – gotguts

4
<html> 
<head> 
<script type="text/javascript"> 
var cur_id; 
var tempkeycode = ""; 
function setKeycode(input) 
{ 
    tempkeycode = input; 
    xowin() 
} 
function setId(id) 
{ 
    cur_id = id; 
    xowin() 
} 
function keyPress(e) 
{ 
    var input = e.keyCode ? e.keyCode : e.charCode; 
    if(tempkeycode == "") 
    { 
     if ((input == 111) || (input == 120)) 
     { 
      setKeycode(input); 
      return true; 
     } 
     else 
      return false; 
    } 
    else 
    { 
     if(((input == 111) || (input == 120)) && (input != tempkeycode)) 
     { 
      setKeycode(input); 
      return true; 
     } 
     else 
     { 
      return false; 
     } 
    } 
} 
function preventBackspace(e) 
{ 
    var evt = e || window.event; 
     if (evt) 
     { 
      var keyCode = evt.charCode || evt.keyCode; 
      if (keyCode === 8) 
      { 
       if (evt.preventDefault) 
       { 
        evt.preventDefault(); 
       } 
       else 
       { 
        evt.returnValue = false; 
       } 
      } 
     } 
} 
function xowin() 
{ 
tb1val = document.getElementById("tb1").value; 
tb2val = document.getElementById("tb2").value; 
tb3val = document.getElementById("tb3").value; 
tb4val = document.getElementById("tb4").value; 
tb5val = document.getElementById("tb5").value; 
tb6val = document.getElementById("tb6").value; 
tb7val = document.getElementById("tb7").value; 
tb8val = document.getElementById("tb8").value; 
tb9val = document.getElementById("tb9").value; 

    if(tb1val == tb2val && tb2val == tb3val && tb1val!= "" && tb2val!= "" && tb3val!= "") 
    { 
     alert("Player "+tb1val+" Wins!!!"); 
    } 
    else if(tb4val == tb5val && tb5val == tb6val && tb4val!= "" && tb5val!= "" && tb6val!= "") 
    { 
     alert("Player "+tb5val+" Wins!!!"); 
    } 
    else if(tb7val == tb8val && tb8val == tb9val && tb7val!= "" && tb8val!= "" && tb9val!= "") 
    { 
     alert("Player "+tb7val+" Wins!!!"); 
    } 
    else if(tb1val == tb4val && tb4val == tb7val && tb1val!= "" && tb4val!= "" && tb7val!= "") 
    { 
     alert("Player "+tb4val+" Wins!!!"); 
    } 
    else if(tb2val == tb5val && tb5val == tb8val && tb2val!= "" && tb5val!= "" && tb8val!= "") 
    { 
     alert("Player "+tb2val+" Wins!!!"); 
    } 
    else if(tb3val == tb6val && tb6val == tb9val && tb3val!= "" && tb6val!= "" && tb9val!= "") 
    { 
     alert("Player "+tb6val+" Wins!!!"); 
    } 
    else if(tb1val == tb5val && tb5val == tb9val && tb1val!= "" && tb5val!= "" && tb9val!= "") 
    { 
     alert("Player "+tb9val+" Wins!!!"); 
    } 
    else if(tb3val == tb5val && tb5val == tb7val && tb3val!= "" && tb5val!= "" && tb7val!= "") 
    { 
     alert("Player "+tb3val+" Wins!!!"); 
    } 
    else 
    { 
     if(tb1val!= "" && tb2val!= "" && tb3val!= "" && tb4val!= "" && tb5val!= "" && tb6val!= "" && tb7val!= "" && tb8val!= "" && tb9val!= "") 
     { 
      alert("Draw"); 
     } 
    } 
} 
</script> 
</head> 
<body bgcolor="blue"> 
<center> 
    <h1>Tic Tac Toe</h1> 
    <input type="text" id="tb1" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"> 
    <input type="text" id="tb2" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"> 
    <input type="text" id="tb3" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"><br> 
    <input type="text" id="tb4" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"> 
    <input type="text" id="tb5" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"> 
    <input type="text" id="tb6" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"><br> 
    <input type="text" id="tb7" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"> 
    <input type="text" id="tb8" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"> 
    <input type="text" id="tb9" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"><br> 
</center> 
</body> 
</html> 
1
<html> 
<head> 
<script type="text/javascript"> 
var currentvalue = "O"; 
var b1 = "notClicked"; 
var b2 = "notClicked"; 
var b3 = "notClicked"; 
var b4 = "notClicked"; 
var b5 = "notClicked"; 
var b6 = "notClicked"; 
var b7 = "notClicked"; 
var b8 = "notClicked"; 
var b9 = "notClicked"; 
function first() 
{ 
    if(b1== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b1").value=currentvalue; 
      b1 = "clicked"; 
     if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b6=="notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
    } 
    xowin() 
} 
function second() 
{ 
    if(b2== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b2").value=currentvalue; 
      b2 = "clicked"; 
     if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b6=="notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
    } 
    xowin() 
} 
function third() 
{ 
    if(b3== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b3").value=currentvalue; 
      b3 = "clicked"; 
     if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b6=="notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
    } 
    xowin() 
} 
function fourth() 
{ 
    if(b4== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b4").value=currentvalue; 
      b4 = "clicked"; 
     if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b6== "notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
     else if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b1=="notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
    } 
    xowin() 
} 
function fifth() 
{ 
    if(b5== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b5").value=currentvalue; 
      b5 = "clicked"; 
     if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b6=="notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
    } 
    xowin() 
} 
function sixth() 
{ 
    if(b6== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b6").value=currentvalue; 
      b6 = "clicked"; 
     if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b5=="notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
    } 
    xowin() 
} 
function seventh() 
{ 
    if(b7== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b7").value=currentvalue; 
      b7 = "clicked"; 
     if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b6== "notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b2=="notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
    } 
    xowin() 
} 
function eight() 
{ 
    if(b8== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b8").value=currentvalue; 
      b8 = "clicked"; 
     if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b9== "notClicked") 
      { 
      document.getElementById("b9").value="O"; 
      b9 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b6=="notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
    } 
    xowin() 
} 
function ninth() 
{ 
    if(b9== "notClicked") 
    { 
     if(currentvalue == "O") 
      { 
      currentvalue = "X"; 
      } 
      document.getElementById("b9").value=currentvalue; 
      b9 = "clicked"; 
     if(b3== "notClicked") 
      { 
      document.getElementById("b3").value="O"; 
      b3 = "clicked"; 
      } 
     else if(b1== "notClicked") 
      { 
      document.getElementById("b1").value="O"; 
      b1 = "clicked"; 
      } 
     else if(b4== "notClicked") 
      { 
      document.getElementById("b4").value="O"; 
      b4 = "clicked"; 
      } 
     else if(b2== "notClicked") 
      { 
      document.getElementById("b2").value="O"; 
      b2 = "clicked"; 
      } 
     else if(b8== "notClicked") 
      { 
      document.getElementById("b8").value="O"; 
      b8 = "clicked"; 
      } 
     else if(b7== "notClicked") 
      { 
      document.getElementById("b7").value="O"; 
      b7 = "clicked"; 
      } 
     else if(b5== "notClicked") 
      { 
      document.getElementById("b5").value="O"; 
      b5 = "clicked"; 
      } 
     else if(b6=="notClicked") 
      { 
      document.getElementById("b6").value="O"; 
      b6 = "clicked"; 
      } 
    } 
    xowin() 
} 
function xowin() 
{ 
b1val = document.getElementById("b1").value; 
b2val = document.getElementById("b2").value; 
b3val = document.getElementById("b3").value; 
b4val = document.getElementById("b4").value; 
b5val = document.getElementById("b5").value; 
b6val = document.getElementById("b6").value; 
b7val = document.getElementById("b7").value; 
b8val = document.getElementById("b8").value; 
b9val = document.getElementById("b9").value; 

    if(b1val == b2val && b2val == b3val && b1val!= "" && b2val!= "" && b3val!= "") 
    { 
     alert("Player "+b1val+" Wins!!!"); 
    } 
    else if(b4val == b5val && b5val == b6val && b4val!= "" && b5val!= "" && b6val!= "") 
    { 
     alert("Player "+b5val+" Wins!!!"); 
    } 
    else if(b7val == b8val && b8val == b9val && b7val!= "" && b8val!= "" && b9val!= "") 
    { 
     alert("Player "+b7val+" Wins!!!"); 
    } 
    else if(b1val == b4val && b4val == b7val && b1val!= "" && b4val!= "" && b7val!= "") 
    { 
     alert("Player "+b4val+" Wins!!!"); 
    } 
    else if(b2val == b5val && b5val == b8val && b2val!= "" && b5val!= "" && b8val!= "") 
    { 
     alert("Player "+b2val+" Wins!!!"); 
    } 
    else if(b3val == b6val && b6val == b9val && b3val!= "" && b6val!= "" && b9val!= "") 
    { 
     alert("Player "+b6val+" Wins!!!"); 
    } 
    else if(b1val == b5val && b5val == b9val && b1val!= "" && b5val!= "" && b9val!= "") 
    { 
     alert("Player "+b9val+" Wins!!!"); 
    } 
    else if(b3val == b5val && b5val == b7val && b3val!= "" && b5val!= "" && b7val!= "") 
    { 
     alert("Player "+b3val+" Wins!!!"); 
    } 
    else 
    { 
     if(b1val!= "" && b2val!= "" && b3val!= "" && b4val!= "" && b5val!= "" && b6val!= "" && b7val!= "" && b8val!= "" && b9val!= "") 
     { 
      alert("Draw"); 
     } 
    } 
} 
</script> 
</head> 
<body bgcolor="lightblue"> 
<h1 align="center">TIC TAC TOE</h1> 
<center> 
    <input type="button" id="b1" onclick="first()"> 
    <input type="button" id="b2" onclick="second()"> 
    <input type="button" id="b3" onclick="third()"><br> 
    <input type="button" id="b4" onclick="fourth()"> 
    <input type="button" id="b5" onclick="fifth()"> 
    <input type="button" id="b6" onclick="sixth()"><br> 
    <input type="button" id="b7" onclick="seventh()"> 
    <input type="button" id="b8" onclick="eight()"> 
    <input type="button" id="b9" onclick="ninth()"><br> 
    <input type="button" id="b10" value="New Game" onclick="history.go(0)"> 
</center> 
</body> 
</html>