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 を正常に作成します。次のタスクは、Tic Tac Toe ゲームのように「O」をテーブルに組み込む必要があるため、理解できないものです..これは問題ありませんが、X があると次は X になるようにターンが必要です。 O、X など。誰が私に何をするのが適切で、そのような場合にどのメソッド/関数を使用できるか教えてもらえますか? タ！

4

2 に答える 2

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 に答える