2

我想制作自己的井字游戏，我是 Javascript 新手，已经两天了，我无法达到任何具体的东西......到目前为止..我已经在我的游戏中实现了这一点 - http:// jsfiddle.net/f9sV4/

//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”。

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

4

2 回答 2

0

我怎么知道点击了哪个按钮

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

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

按钮有一个 value 属性，它改变按钮的文本，例如：

this.value = "X"

您必须以某种方式获取用户选择，存储它，然后从 onclick 函数内部读取它。或者，您可以使您的按钮在每次单击时都在“X”和“O”之间变化。

this.value = (this.value == "X") ? "O" : "X"
于 2013-05-13T06:16:18.743 回答
0

我试图降低代码的复杂性，包括 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 属性。

希望能帮助到你！

于 2013-05-13T07:14:39.720 回答