var mojis = [];
空配列の宣言
ブラケットで宣言する
お買い物カートにどんどん商品入れていくのも「配列」でやるらしい。
購入が全部決定したらcarts配列とかはリセットをしますね
その時も空配列で新たに宣言するときれいさっぱりリセットされる。
var carts = [];
つまり空配列は
①配列の宣言
②配列のリセット
両方に用いる
mojis[clicks]
変数を呼び出してmojisのインデックスが0か1か決めるようにしている
さて、同じパネルを2度押すとか、変なことをされないようにしましょう。
クリックしたカードがまだポインタカーソルになってるのもどうかと。
--->test3.css
/*cursor: pointer;*//*マウスが乗ったときポインタになる*/
}
#stage div.open{/*divでopenクラスを持っているもの*/
}
#stage div.close{
}
ああ、openしたらdivにclassを付与するようにして管理するのかな。
カードを生成するときに、初めからcloseクラスも付与しておかないとなので
その部分を修正。
attrを使う
→修正
var ele = $('<div>').text(kigo[i]).attr('class','close');//divを生成、textで配列の中身を入れる
メソッドのチェーンはドットでつなぎますよ（カンマじゃないよ）
メソッドの引数1,2はカンマで区切る
クリック時の動作予約もこのように修正
eles[clicks] = $(this);//呼び出し元（クリックされたパネル）の「オブジェクトそのもの」
こみ入ってまいりました
ここまで
--->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').on('click',function(){
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回目だったら
hantei();//判定の関数を呼び出す
}
});
//当たり判定
function hantei(){
console.log('here is in hantei');
if(eles[0]==eles[1]){
console.log('一致');
}else{
console.log('不一致');
//eles[0].attr('class','close').css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat'});
//eles[1].attr('class','close').css({'background':'#000'});
eles[0].animate({'opacity':'20%'});//違っていたらカードが透明になる。先生版は値0
eles[1].animate({'opacity':'20%'});//違っていたらカードが透明になる
}
clicks = 0;//クリック数のリセット
}
});
eles[clicks] = $(this);
この中身は下のようになっている
