如何减少重复代码并避免覆盖玩家的移动（JavaScript）答案

【问题标题】：How to reduce the recurring code and avoid overwritten the move of player (JavaScript)如何减少重复代码并避免覆盖玩家的移动（JavaScript）
【发布时间】：2017-10-13 14:25:57
【问题描述】：

几天来我一直在尝试创建一个简单的项目游戏（井字游戏），最后我做到了..... 我想在玩家和计算机之间创建一个模拟，但我设法以某种方式解决了问题:)

我遇到了两个问题：我如何限制移动的重写，因为我现在可以做到这一点。我的另一个问题是：如何避免重复代码，比如重复“If 语句”。

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

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

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

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

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

.data1x1 ,.data1x2 ,.data1x3,.data2x1 ,.data2x2 ,.data2x3 ,.data3x1 ,.data3x2 ,.data3x3{
    	width: 80px;
    	height: 80px;
        border-right:1px;
    	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">
    	<table class="tableContent">
            <tr class="rowContent">
    			<td id="cell1x1" class="data1x1"></td>
    			<td id="cell1x2" class="data1x2"></td>
    			<td id="cell1x3" class="data1x3"></td>
    		</tr>
    		<tr class="rowContent">
    			<td id="cell2x1" class="data2x1"></td>
    			<td id="cell2x2" class="data2x2"></td>
    			<td id="cell2x3" class="data2x3"></td>
    		</tr>
    		<tr class="rowContent">
    			<td id="cell3x1" class="data3x1"></td>
    			<td id="cell3x2" class="data3x2"></td>
    			<td id="cell3x3" class="data3x3"></td>
    		</tr>
    	</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>

【问题讨论】：

最好在codereview.stackexchange.com问这个问题

标签： javascript arrays click innerhtml overwrite

【解决方案1】：

嗯，有几件事可以改进，当然随着经验的积累会发生。我将介绍您特别询问的两个项目，以及更多内容。

首先，“移动重写”：当每次点击都测试 X 和 O 时，实际比较的内容如下所示：

这显然不匹配单个 X 或 O。

因此，基于此，我不会期望以这种方式设置字体：

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

...但是，我希望在 CSS 中使用 font-size 使用 dataXxY 属性设置字体大小：

.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：

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

当我们使用 CSS 时，除非将来需要单独的 .data* CSS 名称，否则数据样式的所有这些名称是否可以简化为一个名称？例如：

替换所有这些：

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

... 像这样：（随意重命名为您的喜好）

.dataCell

...然后对 html 文件中的所有文件也进行相同的更改。

=====

还原条件：

一种方法可能是有一个函数，您可以在其中传递一个单元格进行检查，但该函数的处理可以检查元素的字符串内容。（如果这有意义？）

例如，函数可能如下所示：（随意重命名为您的喜好）

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

... 然后减少 computerMove() 代码/处理以使用dataContent 数组上的循环自然预期，像这样：

function computerMove () {
    
    for(var i = 0; i < dataContent.length; i++){
        
        if ( !occupiedCell( dataContent[i] ) ) {
            dataContent[i].innerHTML = computerChar;
            break;
        }
    }
}

=====

但是，需要一些额外的项目来支持 computerMove() 更改：

playerMove() 函数不是似乎是必需的。每个点击处理程序已经为播放器设置“X”。有一个名为 nextMove 的变量设置为 X。不再需要此变量，因为它在 playerMove 函数中使用。（它也会从点击处理程序中删除，如下所述）

现在每个点击处理程序的代码都可以简化为：

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

...但是再抽象一点处理代码，从每个点击处理程序中创建另一个要使用的函数，这也将利用之前创建的新占用的Cell() 函数：

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

...然后每个单击处理程序都使用该函数，例如前三个处理程序的这个小示例：

$("#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!

我现在就到此为止，因为我确信这足以回顾和/或思考。如有需要，请随时提出问题。

【讨论】：

非常感谢您花时间查看我的代码并为我提供这些真正可以减少代码的好主意。我会花时间检查我的所有代码并尝试更改它。另一方面，我会考虑如何在计算机上使用随机动作，但到目前为止还有其他事情要考虑:)