javascript - 使用功能保持图像源更改

Question

对于井字游戏，我使用以下代码将图像源更改为“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;
}

这使用_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 ='';
}