Question

对于tic tac toe游戏，我使用以下代码将图像源更改为“x”或“o”：

var player = 1;    

function changePicture(picture){
        if(player === 1){
            document.getElementById(picture).src = "images/o.png";
            player = 2;
        }
        else if(player === 2){
            document.getElementById(picture).src = "images/x.png";
            player = 1;
        }
    }

但是，如果之后点击它们，我希望保持x和o不变。

Answer 1

您可以维护棋盘上每个元素的状态：

function changePicture(picture)
{
    var pic = document.getElementById(picture);

    if (pic._clicked) { return; }

    // mark it
    pic._clicked = player;
    pic.src = (player === 1 ? "images/o.png" : "images/x.png";

    // swap player
    player = 3 - player;
}

这使用了picture元素的_clicked属性;此属性不应与任何现有属性冲突。它基本上标记了点击它的玩家的图片元素，因此它不会改变，你以后会知道最后点击它的是谁。

Answer 2

你是如何接近这个的？有很多方法可以达到你所需要的，如果你使用onclick事件，你可以在输入这个功能后取消它。

onclick="changePicture(this);"

然后：

function changePicture(el){
    if(player === 1){
        el.src = "images/o.png";
        player = 2;
    }
    else if(player === 2){
        el.src = "images/x.png";
        player = 1;
    }
    el.onclick ='';
}

使用函数更改图像源

2 个答案: