Question

我想制作自己的Tic Tac Toe游戏，我是Javascript的新手，已经有两天了，我无法达到任何具体的......到目前为止......我在游戏中实现了这一点 - { {3}}

//Tic Tac Toe
//Global Variables
//Get input from user about which sign should be for playerOne.
//Set signs for both players.
//When user click on button it triggers play function()
//Play function detects who is playing this turn.
//Display Sign on that button accordingly.
var playerOneChoice;
var playerTwoChoice;
var playerTurn=1;
var matrix = [[], [], []];
var buttons = [[], [], []];
var row1;
var X = "X";
var O = "O";
var x;
var y;
var i;

//Input the matrix
for (i = 0; i <= 8; i++) {
    switch (i) {
    case 0: x=0; y=0; break;
    case 1: x=0; y=1; break;
    case 2: x=0; y=2; break;
    case 3: x=1; y=0; break;
    case 4: x=1; y=1; break;
    case 5: x=1; y=2; break;
    case 6: x=2; y=0; break;
    case 7: x=2; y=1; break;
    case 8: x=2; y=2; break;
    }
    matrix[x][y] = document.querySelector(".cell"+i);
    buttons[x][y] = document.querySelector("#b"+i);
    //matrix[x][y].innerHTML = i + " " + x + " " + y;
}
function play() {
displayOutput();

incPlayerTurn();
}
function displayTurn() {
    var display = document.querySelector("#playerTurn");
    if (playerTurn%2==0)
        display.innerHTML ="Its player two turn";
    else
        display.innerHTML ="Its player one turn";
}    
function incPlayerTurn(){
    playerTurn++;
}
function displayOutput(){
    if (playerTurn%2 == 1)
        this.innerHTML = playerOneChoice;
    else
        this.innerHTML = playerTwoChoice;
}
function setO(){
    playerOneChoice="O";
    playerTwoChoice="X"
}
function setX(){
    playerOneChoice="X";
    playerTwoChoice="O"
}

function displayO(){
var butt = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
 butt[i].onclick = function(e) {
 this.innerHTML ="O";
    };
}
}

function displayX(){
var butt = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
    butt[i].onclick = function(e) {
 this.innerHTML ="X";
    };
}
}

现在，我不确定，我怎么知道点击了哪个按钮，然后如何根据用户选择将其设置为“O”或“X”。

我认为这将是一个简单的游戏设计，但看起来它已经变得非常复杂了。

Answer 1

如何知道点击了哪个按钮

在分配给按钮的onclick属性的函数内部，'this'表示单击的按钮。

如何根据用户选择将其设置为“O”或“X”。

按钮有一个value属性，用于更改按钮的文本，例如：

this.value = "X"

您必须以某种方式获取用户选择，存储它，然后从onclick函数内部读取它。或者，你可以这样做，这样你的按钮每次点击都会在'X'和'O'之间变化。

this.value = (this.value == "X") ? "O" : "X"

Answer 2

我试图降低代码的复杂性，包括HTML和JS，你可以在这里看到fork：

http://jsfiddle.net/4AMq9/

现在希望更清洁，更容易理解和操纵以实现您的目标。其中一个重大变化是删除了每个按钮的矩阵和监听器。由于事件是传播的，因此您可以委派父元素来处理它们。这里有一个明显的例子：

playerchoice.addEventListener("change", function(event) {
    if (event.target.value === "O")
        players.reverse();

    this.disabled = true;
    playarea.style.display = "block";

    displayTurn();
}, false);

在这种情况下，this指的是playerchoice元素，event.target是触发事件的嵌套元素。

请注意，矩阵对于确定玩家何时获胜仍然有用，但我的印象是你试图将逻辑与UI混合 - 这是网络中常见的东西，这就是为什么我也删除了侦听器的HTML属性

希望它有所帮助！

Javascript中的双人Tic Tac Toe游戏

2 个答案: