1

三目並べの非常に基本的なJavaScriptバージョンを作成しています。私はすでにテーブルを利用してボードをセットアップし、適切に境界線を割り当てています。

プレイヤーが移動すると、Xがボックス内に配置され、コンピューターがOになります。

ただし、私の問題は、セルが「使用された」かどうか、つまりセル内にXまたはOがすでに存在するかどうかを判断しようとしています。

HTML要素内のコンテンツをチェックできるJavaScriptの関数はありますか、それとも誰かがこれを行う別の方法を考えることができますか？xまたはoを保持し、この方法でチェックする9の配列を使用することを検討しましたが、配列を更新するためにセル番号をその関数に渡す方法を理解するという問題に遭遇しました。

私はjavascriptを初めて使用するので、これらの可能性のいずれかが存在する場合は、私に知らせてください。または、独自の提案があれば教えてください。

4

4 に答える 4

2

最良の方法は、2次元配列を使用することです。

            var tictactoe = [["","",""],["","",""],["","",""]]

次に使用します

            if(tictactoe[row][col] == "")
                tictactoe[row][col] = "X" //(or "O", you decide)

描画には別の関数を使用します

于 2012-11-13T04:13:55.213 に答える
2

textContentおよびを使用しinnerTextて、要素のテキストを取得します。

例：

<!doctype html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <p id="hello-container">Hello, World!</p>
        <script type="text/javascript">
            var el = document.getElementById('hello-container');
            var text = el.textContent || el.innerText || '';
            alert('The text is: ' + text);
        </script>
    </body>
</html>

説明：

IE8-は使用しinnerText、FirefoxはtextContent（他のブラウザが片側または両方を選択して）使用するため、両方のプロパティを確認する必要があります。JavaScriptの論理または演算子||を使用して、両方のプロパティを1行でチェックします。物件があればtext = el.textContent || el.innerText収納el.textContentします。プロパティがない場合（または空の文字列または空白だけの場合）、変数に格納しようとします。最後に、どちらも見つからなかった場合は、空の文字列に設定するために使用します*。texttextContenttextContenttextContentinnerTexttext|| ''textContentinnerText

*これはtextContent、が空の文字列/空白でありinnerText、存在しなかった場合にのみ必要です。この場合、両方とも偽になります。にするのではなく、代わりに空の文字列を格納しtextます。undefined''

HTMLがテキストではなく要素に含まれているかどうかを確認したい場合（これは、XとOに画像要素を使用している場合に役立ちます）、を使用できますinnerHTML。これはすべてのブラウザの標準です。

于 2012-11-13T04:10:12.167 に答える
1

デビッドに似ている…</p>

配列を使用して動きを保持する三目並べゲームを作成し、配列に基づいて表示します (ゲームロジックを表示から分離します)。そうすれば、セルの内容は気にしません。

とにかく、次のことができます。

if (element.textContent || element.innerText) {
  // there is some text content
}

ただし、誤検知の原因となる空白が要素に含まれる場合があります。または、X と O は画像要素である可能性があります。

于 2012-11-13T04:16:04.460 に答える
0

三目並べはとても単純なので、単一の配列を使用するだけでよいと思います。

var board = new Array(9);

//Board layout:
// [0][1][2]
// [3][4][5]
// [6][7][8]

//Win if any of these combinations are present
//012, 036, 048, 147, 246, 258, 345, 678

次に、ループしてorboardの値があるXかOどうかを調べ、いくつかの簡単なチェックを行って、3 つ連続しているかどうかを確認します。

var x = [], o = [];
var winner = 'Game in Progress';
for(var i in board){
    if(board.hasOwnProperty(i)){
      if(board[i] == 'X') 
        x[i] = true;
      else if(board[i] == 'O')
        o[i] = true;
      if(i == 8) winner = 'Cat Game';
    }
}

if((x[0] && x[1] && x[2]) || (x[0] && x[3] && x[6]) ||
   (x[0] && x[4] && x[8]) || (x[1] && x[4] && x[7]) ||
   (x[2] && x[4] && x[6]) || (x[2] && x[5] && x[8]) ||
   (x[3] && x[4] && x[5]) || (x[6] && x[7] && x[8])){
     winner = 'X is the Winner';
}

if(winner != 'X is the Winner')
if((o[0] && o[1] && o[2]) || (o[0] && o[3] && o[6]) ||
   (o[0] && o[4] && o[8]) || (o[1] && o[4] && o[7]) ||
   (o[2] && o[4] && o[6]) || (o[2] && o[5] && o[8]) ||
   (o[3] && o[4] && o[5]) || (o[6] && o[7] && o[8])){
     winner = 'O is the Winner';
}

三目並べゲームを作成するために必要なコードをいくつか書き上げたので、理解を深めることができます。あとは、誰のターンかを表示し、プレイヤーがボックスをクリックしたときに (自分のターン中に) シンボルがそのボックスに追加されるようにし (空の場合)、ゲームをリセットすることです。幸運を。:)

于 2012-11-13T05:31:15.533 に答える