定期的なコードを減らし、プレーヤーの移動を上書きしないようにする方法（JavaScript）

私は数日間単純なプロジェクトゲーム（Tic Tac Toe）を作成しようとしていました。私はプレーヤーとコンピュータの間のシミュレーションを作成したいと私は何とか物事を整理するために管理:)定期的なコードを減らし、プレーヤーの移動を上書きしないようにする方法（JavaScript）

は、私は2つの問題に直面した：私は今、これを行うことができますので、はどのようにして、移動の書き換え制限することができます。私の他の問題は：繰り返しのコードを避ける方法です。

var nextMove = "X".fontsize(8); 
 
    var playerChar = "X".fontsize(8); 
 
    var computerChar = "O".fontsize(8); 
 
    var dataContent = [cell1x1, cell1x2, cell1x3, cell2x1, cell2x2, cell2x3, cell3x1, cell3x2, cell3x3]; 
 

 
    function playerMove() { 
 
     if (nextMove == "X") { 
 
      nextMove = computerMove(); 
 
     } 
 
     else { 
 
      nextMove = playerChar; 
 
     } 
 

 
    } 
 

 
    function computerMove() { 
 
    \t 
 
     for(var i = 0; i < dataContent.length; i++){ 
 
    \t \t 
 
    \t \t if (cell1x1.innerHTML === "X" || cell1x1.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell1x1.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[0].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell1x2.innerHTML === "X" || cell1x2.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell1x2.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[1].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell1x3.innerHTML === "X" || cell1x3.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell1x3.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[2].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell2x1.innerHTML === "X" || cell2x1.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell2x1.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[3].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell2x2.innerHTML === "X" || cell2x2.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell2x2.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[4].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell2x3.innerHTML === "X" || cell2x3.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell2x3.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[5].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell3x1.innerHTML === "X" || cell3x1.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell3x1.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[6].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t if (cell3x2.innerHTML === "X" || cell3x2.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell3x2.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[7].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t 
 
    \t \t if (cell3x3.innerHTML === "X" || cell3x3.innerHTML === "O") { 
 
      return; 
 
    \t \t } 
 
    \t \t if(cell3x3.innerHTML === ""){ 
 
    \t \t \t 
 
    \t \t \t dataContent[8].innerHTML = computerChar; 
 
    \t \t \t return; 
 
    \t \t } 
 
    \t \t 
 
    \t \t 
 
    \t \t 
 
    \t \t 
 
    \t } 
 
    } 
 

 
    $("#cell1x1").click(function(){ 
 
    \t if (cell1x1.innerHTML === "X" || cell1x1.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell1x1.innerHTML = "X"; 
 
    \t \t cell1x1.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    \t 
 
    }); 
 

 
    $("#cell1x2").click(function(){ 
 
    \t if (cell1x2.innerHTML === "X" || cell1x2.innerHTML === "O") { 
 
      return; 
 
    \t } 
 
    \t \t cell1x2.innerHTML = "X"; 
 
    \t \t cell1x2.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    \t \t 
 
    }); 
 

 
    $("#cell1x3").click(function(){ 
 
    \t if (cell1x3.innerHTML === "X" || cell1x3.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell1x3.innerHTML = "X"; 
 
    \t \t cell1x3.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    }); 
 

 
    $("#cell2x1").click(function(){ 
 
    \t if (cell2x1.innerHTML === "X" || cell2x1.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell2x1.innerHTML = "X"; 
 
    \t \t cell2x1.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    }); 
 
    $("#cell2x2").click(function(){ 
 
    \t if (cell2x2.innerHTML === "X" || cell2x2.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell2x2.innerHTML = "X"; 
 
    \t \t cell2x2.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    }); 
 
    $("#cell2x3").click(function(){ 
 
    \t if (cell2x3.innerHTML === "X" || cell2x3.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell2x3.innerHTML = "X"; 
 
    \t \t cell2x3.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    }); 
 
    $("#cell3x1").click(function(){ 
 
    \t if (cell3x1.innerHTML === "X" || cell3x1.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell3x1.innerHTML = "X"; 
 
    \t \t cell3x1.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    }); 
 
    $("#cell3x2").click(function(){ 
 
    \t if (cell3x2.innerHTML === "X" || cell3x2.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell3x2.innerHTML = "X"; 
 
    \t \t cell3x2.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    }); 
 
    $("#cell3x3").click(function(){ 
 
    \t if (cell3x3.innerHTML === "X" || cell3x3.innerHTML === "O") { 
 
      return; 
 
     } 
 
    \t \t cell3x3.innerHTML = "X"; 
 
    \t \t cell3x3.innerHTML = nextMove; 
 
    \t \t playerMove(); 
 
    \t \t computerMove(); 
 
    });

.data1x1 ,.data1x2 ,.data1x3,.data2x1 ,.data2x2 ,.data2x3 ,.data3x1 ,.data3x2 ,.data3x3{ 
 
    \t width: 80px; 
 
    \t height: 80px; 
 
     border-right:1px; 
 
    \t border-style: solid; 
 
    } 
 

 
    .tableContent{ 
 
     background-color: white; 
 
     margin: 150px auto auto; 
 
    } 
 

 
    .body{ 
 
     background-color: lightskyblue; 
 

 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Tic tac toe</title> 
 
    <link rel="stylesheet" type="text/css" href="myCss.css"> 
 
    </head> 
 

 
    <body class="body"> 
 
    <div class="container"> 
 
    \t <table class="tableContent"> 
 
      <tr class="rowContent"> 
 
    \t \t \t <td id="cell1x1" class="data1x1"></td> 
 
    \t \t \t <td id="cell1x2" class="data1x2"></td> 
 
    \t \t \t <td id="cell1x3" class="data1x3"></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="rowContent"> 
 
    \t \t \t <td id="cell2x1" class="data2x1"></td> 
 
    \t \t \t <td id="cell2x2" class="data2x2"></td> 
 
    \t \t \t <td id="cell2x3" class="data2x3"></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="rowContent"> 
 
    \t \t \t <td id="cell3x1" class="data3x1"></td> 
 
    \t \t \t <td id="cell3x2" class="data3x2"></td> 
 
    \t \t \t <td id="cell3x3" class="data3x3"></td> 
 
    \t \t </tr> 
 
    \t </table> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="myScript.js" ></script> 
 
    </body> 
 

 
    </html>

出典

2017-05-14 Marin Terziyski

https://codereview.stackexchange.com/ – Sphinxxx

まあ、より多くの経験を取得したとして、もちろんどうなる向上を図ることができるいくつかの事が、あります。あなたが具体的に尋ねた2つのアイテムと、もう少し詳しく説明します。

まず、「移動書き換え」：各クリックがXとOのためにテストされた場合、比較されている実際のコンテンツは次のようになります。明らかに、単一のXと一致していません

またはO.

フォントをこのように設定するので、それに基づいて、私は期待していないう：

var nextMove = "X".fontsize(8);

...ではなく、私は、フォントサイズが代わりにfont-sizeを使用してdataXxYプロパティとCSSで設定されることを期待しているでしょう：

.data1x1 ,.data1x2 ,.data1x3,.data2x1 ,.data2x2 ,.data2x3 ,.data3x1 ,.data3x2 ,.data3x3 { 
    width: 80px; 
    height: 80px; 
    border-right:1px; 
    border-style: solid; 
    font-size: 48px; /* adjust as needed */ 
}

私は単純な文字列であることを、これらの他の二つの変数から.fontsize(8)を削除、我々は唯一のXとOで動作するように：私たちはCSSにしているものの

var playerChar = "X"; 
var computerChar = "O";

、いくつかの未来があるだろうしない限り、データのスタイルのためのすべてのそれらの名前をすることができ、個々の.dataのの* CSSの名前を持っている必要があります1つの名前に減らされましたか？たとえば：

.dataCell

（お好みに合わせて名前を変更して自由に感じる）...そして同じを変更：このようなもので...

.data1x1 ,.data1x2 ,.data1x3,.data2x1 ,.data2x2 ,.data2x3 ,.data3x1 ,.data3x2 ,.data3x3

を：

は、これらすべてを交換してくださいhtmlファイル内のすべてのものについても。

=====

条件を削減：

一つの方法は、あなたがチェックするために、細胞を渡すことができますが、関数の扱いはその要素の文字列の内容を確認することができます機能を持っている可能性があります。（これが理にかなっていれば？）

例えば、関数は次のようになります。は（）お好みに合わせて、その後のループを使用するようにハンドリング/ computerMove（）のコードを削減

function occupiedCell(elementRef) { 
    return(elementRef.innerHTML === playerChar || elementRef.innerHTML === computerChar); 
}

を...名前を変更して自由に感じます

function computerMove() { 

    for(var i = 0; i < dataContent.length; i++){ 

     if (!occupiedCell(dataContent[i])) { 
      dataContent[i].innerHTML = computerChar; 
      break; 
     } 
    } 
}

しかし、いくつかの追加アイテムがサップに必要とされている=====

：このなどの自然に期待dataContent配列、または、computerMove（）の変更：

playerMove（）関数はではありません。が必要です。各クリックハンドラーは既にに設定されています。 "X" Xに設定されたnextMoveという名前の変数があります。この変数は、playerMove関数の内部で使用されているため、不要になりました。クリックするたびにハンドラのコードは今これに低減することができ

を（それは以下に示すように、あまりにもクリックハンドラから削除されます）：

if (cell1x1.innerHTML === "X" || cell1x1.innerHTML === "O") { 
    return; 
} 
cell1x1.innerHTML = playerChar; 
//  cell1x1.innerHTML = nextMove; 
//  playerMove(); 
computerMove();

...しかし、もう少しコードを処理することを抽象化、作成しますその関数が最初にこの小さな例のように、各クリックハンドラで使用され

function setPlayerX(elementRef) { 
    if (!occupiedCell(elementRef)) { 
     elementRef.innerHTML = playerChar; 
     computerMove(); 
    } 
}

...：また、以前に作成した新しいoccupiedCell（）関数を利用しますそれぞれのクリックハンドラから、使用する別の関数3ハンドラー：

$("#cell1x1").click(function(){ 
    setPlayerX(dataContent[0]); 
}); 

$("#cell1x2").click(function(){ 
    setPlayerX(dataContent[1]); 
}); 

$("#cell1x3").click(function(){ 
    setPlayerX(dataContent[2]); 
}); 

// Apply the similar change to the other 6 click handlers. 
// Ensure to set the correct dataContent array index within each handler!

ここでは、私がレビューや熟考するのに十分であると確信していますので、ここでは中止します。必要に応じて、お気軽に質問してください。

出典

2017-05-15 00:17:24

私のコードを見て、本当にコードを減らすこれらの良いアイデアをくれたことをありがとう、ありがとうございました。私はすべてのコードを見直して変更しようとします。他の手では、私はコンピュータのためのランダムな動きを使用する方法を考えるでしょう、しかし、これまでは考えている他のものがあります:) –

定期的なコードを減らし、プレーヤーの移動を上書きしないようにする方法（JavaScript）

答えて

関連する問題