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 属性；此属性不应与任何现有属性冲突。它基本上用点击它的玩家来标记图片元素，这样它就不会改变，你稍后会知道最后点击它的人是谁。