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、picture 要素のプロパティを使用します。このプロパティは、既存のプロパティと競合してはなりません。基本的に、クリックしたプレーヤーで画像要素をマークするため、変更されず、最後にクリックしたのが誰であるかを後で知ることができます。