神経衰弱つづき
前回のファイルを修正
・closeの概念を削除
・付随するattrも2か所削除
・cssのopen,closeも削除
おそらくここまで
--->test5.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<link rel="stylesheet" href="test5.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="stage"></div>
<script src="test5.js"></script>
</body>
</html>
--->test5.js
$(function(){
console.log('hi');
var kigo = ['!','!','#','#','$','$','&','&',
'=','=','@','@','+','+','?','?'];
//シャッフルする
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]);
//カードの配置
for (i=0; i<kigo.length; i++){
var ele = $('<div>').text(kigo[i]);//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'});
clicks ++;//クリック回数を増やす
//判定をする
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].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].css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1'});
});//違っていたらカードが透明になる
}
}
});
--->test5.css
body{
background: #FFc;
background-image: url(img/fish_kue2.png);
background-size: contain;/*元画像の縦横比は保持、要素に画像が全て収まるように調整*/
/*background-size: cover;*/
}
#stage{
display: flex;/*横並び*/
flex-wrap: wrap;/*アイテムは複数行に分割*/
width: 400px;
margin: auto;
border: solid 1px #ccc;
background: #000;
}
#stage div{
/*カードのデザイン*/
width: 100px;
height: 100px;
text-align: center;/*ボックスの中央に配置*/
background: #000;
background-image: url(img/fish_kue2.png);
background-size: contain;
background-repeat: no-repeat;
box-sizing: border-box;/*border含めたサイズ*/
border: solid 1px #ccc;
/*文字*/
font-size: 2rem;
line-height: 3;
cursor: pointer;
}
修正していきましょう。
カードが当たっていたら、もうクリックできないようにしたい。
$(this).css({'background':'#ffb7a3','color':'#f00','pointer-events':'none'});/*pointerを制御*/
'pointer-events':'none'
ポインタがカーソルに戻り、そのうえクリックを認めなくなる
判定関数のなかで不一致の時にポインタも戻す
console.log('不一致');
eles[0].animate({'opacity':'20%'},1500,function(){//第二引数でミリ秒、第三引数でアニメが終わったら次実行
eles[0].css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1',
'pointer-events':'auto'},);
