animateメソッドは実はsetIntervalが起こっているので
animateが終わっていないうちに次の行を実行してしまう。
→
第三引数をfunctionとし、
animateが終わった後にその関数を実行するようにする
その内容は、いままで次の行に書いていたやつ。
なお、第二第三を別に書いてもいいし、もっとたくさんオプションもあるらしい。
「終了時に実行」（いま第三引数に入っているやつ）とか、
animateの時間（いま第二引数に入っているやつ）とか。
→さて、当たり判定の部分はこうなった
//当たり判定
function hantei(){
console.log('here is in hantei');
if(eles[0]==eles[1]){
console.log('一致');
}else{
console.log('不一致');
eles[0].animate({'opacity':'20%'},1500,function(){//第二引数でミリ秒、第三引数でアニメが終わったら次実行
eles[0].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
});//違っていたらカードが透明になる。先生版は値0
//第二引数は時間（ミリ秒）
eles[1].animate({'opacity':'20%'},1500,function(){
eles[1].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
});//違っていたらカードが透明になる
//eles[0].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
//eles[1].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
}
clicks = 0;//クリック数のリセット
}
さらに条件文を修正→
if(eles[0].text()==eles[1].text()){
そういえばなぜかこれにしないと「一致」にならなかった。
closeカードだけが選べるようにする→
.closeを追加
//click時の動作予約
$('#stage div.close').on('click',function(){//closeクラスだけのものが押せる
ここまで
--->test3.js(なにか挙動がおかしいけど)
$(function(){
console.log('hi');
var kigo = ['!','!','#','#','$','$','&','&',
'=','=','@','@','+','+','?','?'];//2枚ずつカードを用意
//シャッフルする
for (i=0; i<50; i++){
var r1 = Math.floor(Math.random()*kigo.length);//ランダム小数点切り捨て
var r2 = Math.floor(Math.random()*kigo.length);
var temp = kigo[r1];
kigo[r1] = kigo[r2];
kigo[r2] = temp;
}
console.log([kigo]);
//stage上に16のdivを配置。中身は配列の文字
for (i=0; i<kigo.length; i++){
var ele = $('<div>').text(kigo[i]).attr('class','close');//divを生成、textで配列の中身を入れる
$('#stage').append(ele);//stage上に配置
}
var clicks = 0;//カードのクリック回数
var eles = [];//オブジェクトそのもの(ここではthis)を入れる配列
//click時の動作予約
$('#stage div.close').on('click',function(){//closeクラスだけのものが押せる
eles[clicks] = $(this);//呼び出し元（クリックされたパネル）の「オブジェクトそのもの」
//elesの配列が何番目かはclicksの回数が自動で入る
$(this).css({'background':'#ffb7a3','color':'#f00'}).attr('class','open');
clicks ++;//クリック回数を増やす
//console.log('eles is '+eles+' and clicks is '+clicks);
//2枚以上開く前に判定をする
if (clicks==2){//クリック数が2回目だったら
clicks = 0;//クリック数のリセット
hantei();//判定の関数を呼び出す
}
});
//当たり判定
function hantei(){
if(eles[0].text()==eles[1].text()){
console.log('一致');
}else{
console.log('不一致');
eles[0].animate({'opacity':'20%'},1500,function(){//第二引数でミリ秒、第三引数でアニメが終わったら次実行
eles[0].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
});//違っていたらカードが透明になる。先生版は値0
//第二引数は時間（ミリ秒）
eles[1].animate({'opacity':'20%'},1500,function(){
eles[1].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
});//違っていたらカードが透明になる
}
}
});
