Question

很抱歉，如果这很明显。我是JavaScript新手。我必须创建一个基本的X游戏。这是HTML代码。

<table border="1" cellpadding="5">
    <tbody>
        <tr>
            <td id="cell1"></td>
            <td id="cell2"></td>
            <td id="cell3"></td>
        </tr>
        <tr>
            <td id="cell4"></td>
            <td id="cell5"></td>
            <td id="cell6"></td>
        </tr>
        <tr>
            <td id="cell7"></td>
            <td id="cell8"></td>
            <td id="cell9"></td>
        </tr>
    </tbody>
</table>

我必须编写一个代码，以便点击任何单元格，会在单元格上显示一个X.

function click() {
    if (this.id == "cell1") {
        document.getElementById("cell1").innerHTML = "X";
    } else if (this.id == "cell2") {
        document.getElementById("cell2").innerHTML = "X";
    } else if (this.id == "cell3") {
        document.getElementById("cell3").innerHTML = "X";

    } else if (this.id == "cell4") {
        document.getElementById("cell4").innerHTML = "X";
    } else if (this.id == "cell5") {
        document.getElementById("cell5").innerHTML = "X";
    } else if (this.id == "cell6") {
        document.getElementById("cell6").innerHTML = "X";

    } else if (this.id == "cell7") {
        document.getElementById("cell7").innerHTML = "X";
    } else if (this.id == "cell8") {
        document.getElementById("cell8").innerHTML = "X";
    } else if (this.id == "cell9") {
        document.getElementById("cell9").innerHTML = "X";

    }
}

document.getElementById("cell1").onclick = click;
document.getElementById("cell2").onclick = click;
document.getElementById("cell3").onclick = click;
document.getElementById("cell4").onclick = click;
document.getElementById("cell5").onclick = click;
document.getElementById("cell6").onclick = click;
document.getElementById("cell7").onclick = click;
document.getElementById("cell8").onclick = click;
document.getElementById("cell9").onclick = click;

此方法在单击时成功为表格中的每个单元格创建一个X.接下来的任务是我不明白的事情，因为我现在必须将'O'加入到桌面中，就像Tic Tac Toe Game ...这很好但是应该有转动，就像有一个X，下一个应该是一个O然后是X等等。请问有谁可以告诉我什么是合适的，在这种情况下可以使用哪种方法/功能？的Ta！

Answer 1

你需要一个变量

 var nextTurn = 'X'

在顶部

然后像：

 if (this.id == "cell1")
 {
      if(document.getElementById("cell1").innerHTML == ""){ 
           document.getElementById("cell1").innerHTML = nextTurn;
           changeTurn();
      }
 }

等

 function changeTurn(){
      if(nextTurn == 'X'){
           nextTurn = 'O';
      } else {
           nextTurn = 'X';
      }
 }

Answer 2

我已经清理了你的代码了一下：

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
<style type="text/css">
td{width:20px;height:20px;text-align: center;vertical-align: middle;}
</style>
</head>
 <body>
<table border="1" cellpadding="5">
    <tbody>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
//IE 8 and below doesn't have String.trim() so have to add it
if(!String.prototype.trim){
    String.prototype.trim=function(){
        return this.replace(/^[\s]*[\s]*$/igm,"");
    }
}
var game={
    currentPlayer:"X",
     move:function(e){
        e=window.event||e;//IE uses window.event
        var src=e.target||e.srcElement;
        if(src.tagName==="TD"&&src.innerHTML.trim()===""){
            src.innerHTML=game.currentPlayer;
            game.currentPlayer=(game.currentPlayer==="X")?"O":"X";
        }
    }
}

var table=document.body.getElementsByTagName("table")[0];
if(typeof table.addEventListener==="function"){
    table.addEventListener("click",game.move);
}else if(typeof table.attachEvent){
    //for IE
    table.attachEvent("onclick", game.move);
}
</script>
 </body>
</html>

如何在Tic Tac Toe游戏中创建转弯？

2 个答案: