ｊｓ 数秒後の画像切り替え

Question

神経衰弱を作っています。
裏面のトランプを押したら、表になる。
表になるトランプは２枚まで　３枚目は押しても裏のまま
２枚トランプが表になったら１秒後に２枚とも裏になる
という機能を実装しようと思っているのですが、うまくいかないので質問させていただきました。

現在のコードでは１回目、２回目押したら２枚表になる
２回目押したトランプが表になったら１秒後に２回目押したトランプだけ裏になる。
という風になっています。
これを２回目押したら２枚とも１秒後に裏になる
３回目押しても３枚表にはならないと書きたいです

var list = [];
list = ["a"];
list = [];
list = ["a","b"];

for (let i = 0; i < cards.length; i ++){
  var elem2 = document.getElementById("card" + i);
  elem2.addEventListener("click",function(){
    console.log(list.length);
    if(list.length >= 2){
      console.log("aaa");
      var nstr1 = str.replace(shuffle[i],image);
      var display1 = document.getElementById("card" + i);
      display1.innerHTML = nstr1;
    }else if( list.length == 0){
      console.log("bbb");
      var nstr1 = str.replace(shuffle[i],image);
      var display1 = document.getElementById("card" + i);
      display1.innerHTML = nstr1;
    }else {
      console.log("ccc");
        var nstr1 = str.replace(image,shuffle[i]);
        var display1 = document.getElementById("card" + i);
        display1.innerHTML = nstr1;
    }
  })
}

  

var cards = ["../images/001.png","../images/002.png","../images/003.png","../images/004.png","../images/005.png",
"../images/006.png","../images/007.png","../images/008.png","../images/009.png","../images/010.png",
"../images/011.png","../images/012.png","../images/013.png",
"../images/101.png","../images/102.png","../images/103.png","../images/104.png","../images/105.png",
"../images/106.png","../images/107.png","../images/108.png","../images/109.png",
"../images/110.png","../images/111.png","../images/112.png","../images/113.png",
"../images/201.png","../images/202.png","../images/203.png","../images/204.png","../images/205.png",
"../images/206.png","../images/207.png","../images/208.png","../images/209.png","../images/210.png",
"../images/211.png","../images/212.png","../images/213.png",
"../images/301.png","../images/302.png","../images/303.png","../images/304.png","../images/305.png","../images/306.png",
"../images/307.png","../images/308.png","../images/309.png","../images/310.png","../images/311.png","../images/312.png","../images/313.png",
];
var image = "../images/trump_back.jpg";
var shuffle = arrayShuffle(cards);
let count = 0;


for (var i = 0;i < 4; i++){
  var tr1 = document.createElement("tr");
  for(var a = 0;a < 13; a++){
    var td1 = document.createElement("td");
    tr1.appendChild(td1);
    td1.id = "card" + [i*13+a];
    td1.innerHTML = "<img src=" + shuffle[i*13+a] +  ">";
    td1.innerHTML =  "<img src=" + image +  ">";
    var str = td1.innerHTML;
  document.getElementById("wrap").appendChild(tr1);
  }
}

function arrayShuffle(array) {
  for(var i = (array.length - 1); 0 < i; i--){
    var r = Math.floor(Math.random() * (i + 1));
    var tmp = array[i];
    array[i] = array[r];
    array[r] = tmp;
  }
  return array;
}
for (let i = 0; i < cards.length; i ++){
  var elem2 = document.getElementById("card" + i);
  elem2.addEventListener("click",function(){
    count++;
    if(count === 1){
      var nstr1 = str.replace(image,shuffle[i]);
      console.log(nstr1);
      var display1 = document.getElementById("card" + i);
      display1.innerHTML = nstr1;
    } else if(count === 2 ){
      var nstr1 = str.replace(image,shuffle[i]);
      console.log(nstr1);
      var display1 = document.getElementById("card" + i);
      display1.innerHTML = nstr1;
      var cnt = 0;
      var timer = setInterval(test,1000);
      // インターバル呼び出しの関数
      function test(){
        cnt ++;
        if(cnt === 1){
          console.log("aaa")
          clearInterval(timer);
          var nstr1 = str.replace(shuffle[i],image);
          console.log(nstr1);
          var display1 = document.getElementById("card" + i);
          display1.innerHTML = nstr1;
        }
      }
      count = 0;
    }
  })
}

Comments

[m.ts10806]

どこかで見たタイトルと思って確認してみたら下記とタイトルが同じですが、
https://teratail.com/questions/15mll816yu4kv9
どう違うのでしょう。
タイトルは要件を記載してください。

[int32_t]

> トランプが表の状態でクリックしたら裏が表示される。
> トランプが表の状態ならそのトランプを押しても裏にはならない

矛盾してます。どちらですか?

Answer 1

現在のコードだと、同じカードを2回クリックすると1秒後に裏にもどってしまいそうですね。

裏に戻すことを考えると、けっきょくのところ「表になっているカードのリスト」を持っておくのがよいでしょう。

• リストは最初は空 []
• カードがクリックされたとき、リストの長さが2以上なら何もしない
• クリックされたカードの要素がリストの[0]と同じなら何もしない
• クリックされたカードを表にして、その要素をリストに足す。リストの長さが2以上なら1秒後にリスト中の全要素を裏に戻しリストを空にする

---

以下のようなやり方の方がよりHTMLらしいかもしれません。

• カードの要素すべてに class="card" を付ける
• カードがクリックされたとき、document.querySelectorAll('.card.opened').length が2以上なら何もしない
• クリックされたカードの要素が opened クラスを持っていたら何もしない
• クリックされたカードの要素に opened クラスを足す。カード裏表の表示切り替えはCSSで行う。document.querySelectorAll('.card.opened').length が2以上なら1秒後にdocument.querySelectorAll('.card.opened')の全要素からopenedクラスを削除する。

Comments

[bskbbbggg]

回答ありがとうございます。
一部自分の力では実現できなかったのでもう一度回答いただきたいのですが可能でしょうか？
回答いただいた中の「リスト中の全要素を裏に戻しリストを空にする」という部分です。リストの要素を裏に戻すというコードがわからなく悩んでいます。
現在のコードですと、２枚目の画像のみ裏返ってしまい、１枚目が裏にならないのでその点を教えていただきたいです。

var list = [];

for (let i = 0; i < cards.length; i ++){
var elem2 = document.getElementById("card" + i);
elem2.addEventListener("click",function(){
count++;
list.push(shuffle[i]);
console.log(list);
//２枚以上クリックしていたら何も反応しない
if(list.length > 2){
//2枚以下なら表にする
}else if(list.length <=2) {
// console.log("ccc");
var nstr1 = str.replace(image,shuffle[i]);
var display1 = document.getElementById("card" + i);
display1.innerHTML = nstr1;
if(list.length === 2){
var cnt = 0;
var timer = setInterval(test,1000);
function test(){
cnt ++;
if(cnt === 1){
clearInterval(timer);
console.log(list[0]);
console.log(list[1]);
var nstr1 = list[1].replace(shuffle[i],image);
console.log(nstr1);
var display1 = document.getElementById("card" + i);
display1.innerHTML = "<img src=" + nstr1 + ">";
list = [];
}
}
}
}
})
}

[int32_t]

> 現在のコードですと、２枚目の画像のみ裏返ってしまい

そりゃあ、list[0] に何もしてないですからね。

> list.push(shuffle[i]);

表にしたものを記録したいので、無条件にpush()してはダメです。回答に書いたとおりに表にしたときだけlist.push(display1) してください。

clearInterval() より下のコードは以下のような感じにしましょう:
list[0].querySelector('img').src = image;
list[1].querySelector('img').src = image;
list = [];

[bskbbbggg]

再度の回答ありがとうございました。
list[0]に対してのコードを忘れていたのは完全にミスでした。すみませんでした。
現状のコードが無条件でpushになっていること、clearInterval()の下のコードなどは思いつくことができなかったので助かりました。
今後の参考にさせていただきます。