Question

我必须做一个tic tac toe游戏，我感到难过。基本上Tic Tac Toe板工作，我能够分别为每个玩家放置X和O，但当我再次单击该单元时，它将用X或O替换它。例如，如果一个单元格中有一个X和你再次点击它出现O.我的问题是，如何查看所述单元格中是否有X，然后将其保存在那里并使其无法更改。从那里我想尝试赢得条件，这可能就像cell1＆amp;＆amp; cell2＆amp;＆amp; cell3 ===“X”然后只说你赢了什么。无论如何，任何帮助都将非常感激。

由于

http://jsfiddle.net/78pu4y7t/11/

var nextTurn = "X";


function clickButton()
{
if(this.id === "t1")
{
	if(document.getElementById("t1").innerHTML = "");
	{
		document.getElementById("t1").innerHTML = nextTurn;
		turnSwitch();
		
	}
}

else if(this.id === "t2")
{
	if (document.getElementById("t2").innerHTML = "");
	{
		document.getElementById("t2").innerHTML = nextTurn;
		turnSwitch();
		
	}
}

else if(this.id === "t3")
{
	if (document.getElementById("t3").innerHTML = "");
	{
		document.getElementById("t3").innerHTML = nextTurn;
		turnSwitch();
		
	}
}

else if(this.id === "t4")
{
	if (document.getElementById("t4").innerHTML = "");
	{
		document.getElementById("t4").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t5")
{
	if (document.getElementById("t5").innerHTML = "");
	{
		document.getElementById("t5").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t6")
{
	if (document.getElementById("t6").innerHTML = "");
	{
		document.getElementById("t6").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t7")
{
	if (document.getElementById("t7").innerHTML = "");
	{
		document.getElementById("t7").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t8")
{
	if (document.getElementById("t8").innerHTML = "");
	{
		document.getElementById("t8").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t9")
{
	if (document.getElementById("t9").innerHTML = "");
	{
		document.getElementById("t9").innerHTML = nextTurn;
		turnSwitch();
	}
}

}

document.getElementById("t1").onclick = clickButton;
document.getElementById("t2").onclick = clickButton;
document.getElementById("t3").onclick = clickButton;
document.getElementById("t4").onclick = clickButton;
document.getElementById("t5").onclick = clickButton;
document.getElementById("t6").onclick = clickButton;
document.getElementById("t7").onclick = clickButton;
document.getElementById("t8").onclick = clickButton;
document.getElementById("t9").onclick = clickButton;


function turnSwitch()
{

if(nextTurn === "X")
{
	nextTurn = "O";
}
else
{
	nextTurn = "X";
}
	
}

td{
border: 2px solid green;
height: 100px;
width: 100px;
text-align: center;

}

<table>
	<tr>
		<td id="t1"></td>
		<td id="t2"></td>
		<td id="t3"></td>
	</tr>
	<tr>
		<td id="t4"></td>
		<td id="t5"></td>
		<td id="t6"></td>
	</tr>
	<tr>
		<td id="t7"></td>
		<td id="t8"></td>
		<td id="t9"></td>
	</tr>
</table>

Answer 1

我可以建议一种相当简化的方法：

var nextTurn = "X";

// eventObj is the automagically passed Event object:
function clickButton(eventObj) {
  // the target of that event object is the one on which the event originated:
  var clicked = eventObj.target;

  // if the trimmed length of the innerHTML of the clicked element is falsey
  // (so zero), then we go inside the 'if':
  if (!clicked.innerHTML.trim().length) {
    // set the innerHTML of the clicked element:
    clicked.innerHTML = nextTurn;
    // invoke the turnSwitch function:
    turnSwitch();
  }
}

// document.querySelector returns the first and only match to the given
// CSS selector; addEventListener assigns the click event-handling function:
document.querySelector('table').addEventListener('click', clickButton);

function turnSwitch() {
  // if nextTurn is currently 'X', we change it to 'O'; if it's anything other than 'X',
  // we update it to 'X':
  return nextTurn === 'X' ? 'O' : 'X';

}

td {
  border: 2px solid green;
  height: 100px;
  width: 100px;
  text-align: center;
}

<table>
  <tr>
    <td id="t1"></td>
    <td id="t2"></td>
    <td id="t3"></td>
  </tr>
  <tr>
    <td id="t4"></td>
    <td id="t5"></td>
    <td id="t6"></td>
  </tr>
  <tr>
    <td id="t7"></td>
    <td id="t8"></td>
    <td id="t9"></td>
  </tr>
</table>

但值得注意的是，您的原始评估（if (document.getElementById("t3").innerHTML = "")）是分配值（因此评估为真值），而不是评估< / em>它并评估'准确';您需要使用：if (document.getElementById("t3").innerHTML === "")代替。

Answer 2

执行此操作的一种简单方法是在用户选择事件处理程序后取消注册。例如 document.getElementById("t9").innerHTML = nextTurn; document.getElementById("t9").onclick = null;

Answer 3

您使用错误的运算符来比较值。你应该使用比较运算符; ==或===代替分配运算符=：

if(document.getElementById("t1").innerHTML = "");

应该是：

if(document.getElementById("t1").innerHTML === "");

旁注：除了获取元素的id以使用它来找出要处理的元素，然后使用id获取对元素的引用，您可以直接使用对元素的引用。这极大地简化了事件处理程序代码：

function clickButton()
{

    if (this.innerHTML === "");
    {
        this.innerHTML = nextTurn;
        turnSwitch();

    }

}

Answer 4

在您的条件（if子句）中，您使用的是分配（=）而不是比较器（===）。这意味着每次评估if时，相关元素的innerHTML都会重置为空字符串。

if (document.getElementById('...').innerHTML === '') {
    // ...
}

工作得很好。

Answer 5

一些事情：

if(document.getElementById("t1").innerHTML = "");
{

单个=是分配，因此您每次都要将innerHTML设置为空字符串。你想要===（严格的平等测试）

其次，您不能在此行的末尾添加分号，我甚至不确定此语句的评估结果，但语法不正确if(document.getElementById("t1").innerHTML = ""); < / p>

第三，Javscript有一个＆＃34;真实性的概念，＆＃34;意味着在布尔上下文中评估的任何内容（如if语句，它将检查true / false）将转换为true或false。

所以你可以使用真实性来缩短你正在做的事情：

if( !document.getElementById("t1").innerHTML ) {

如果有不（!运算符）任何innerHTML，它将起作用。您还可以通过修复=运算符明确查找空字符串：

if( document.getElementById("t1").innerHTML === '' ) {

如果您知道类型将是相同的，那么使用===是最佳做法。将大括号放在与语句相同的行上也是最佳做法。

如何检查某些东西是否有值

5 个答案: