0

对不起，如果这真的很明显。我对 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' 合并到表中，就像井字游戏一样。这很好，但应该有轮流，就像一旦有一个 X，下一个应该是一个O，然后是 X，依此类推。谁能告诉我在这种情况下应该做什么以及可以使用哪种方法/功能？塔！

4

2 回答 2

1

你需要一个变量

 var nextTurn = 'X'

在顶部

然后是这样的：

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

ETC

 function changeTurn(){
      if(nextTurn == 'X'){
           nextTurn = 'O';
      } else {
           nextTurn = 'X';
      }
 }
于 2013-05-07T03:02:47.447 回答
0

我已经清理了你的代码：

<!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>
于 2013-05-07T03:55:44.607 回答