###発生している問題・エラーメッセージ
jQueryで神経衰弱を作ってみたものの動作しません。
動作の流れとしては以下の通りです。
① 16枚のカードの中から「?」と書かれたものをひとつクリック
② そのカードに書かれている「?」が「1」などの数字に変わる
③ もうひとつ「?」と書かれたものをクリックする
④ その要素に書かれている「?」が「1」などの数字に変わる
⑤ ②と④で表示された数字が一致している場合は、開いた数字はそのままで①に戻る。一致していない場合は1秒後に数字が「?」に戻り①にもどる。
⑥: 全ての要素が開かれたときにアラートで「Game Over」
ですが、現状は
カードをクリックしても「?」が数字に切り替わらず、2枚のカードをクリックすると途中クリック無効のコードが働き全てのカードがクリックできなくなってしまい先に進めません。
以下のサイトを参考に書いてみたのですが動作しません。
https://magnets.jp/web_design/6308/#midashi1
###該当のソースコード
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<title></title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/base.css"> 10<link rel="stylesheet" href="css/style.css"> 11</head> 12<body> 13<ul class="lists clearfix"></ul> 14<script type="text/javascript" src="js/jquery.js"></script> 15<script type="text/javascript"> 16//jquery 17</script> 18</body> 19</html>
css
1.lists { 2 border: 10px #CCC solid; 3} 4.lists > li { 5 float: left; 6 width: 25%; 7 background-color: #EEE; 8 border-top: 2px #CCC solid; 9 border-right: 2px #CCC solid; 10 font-size: 20px; 11 font-weight: bold; 12 line-height: 75px; 13 text-align: center; 14 cursor: pointer; 15 -webkit-box-sizing: border-box; 16 box-sizing: border-box; 17} 18.lists > li:nth-child(-n + 4) { 19 border-top: none; 20} 21.lists > li:nth-child(4n) { 22 border-right: none; 23}
javascript
1$(function(){ 2 var $ul = $(".lists"), 3 totalCard = 16, //カード枚数 4 cardNum = [], //カード配列 5 returnSec = 1000, //めくったカードが戻る秒数 6 index, //クリックしたカードの並び順 7 first = true, //クリックしたカードが1枚目かどうかの判定 8 card1, //1枚目に引いたカードの番号 9 card2, //2枚目に引いたカードの番号 10 pair = 0; //正解したカードのペア数 11 12 //カード番号を配列に格納 13 for (var i = 1; i <= totalCard/2; i++){ 14 cardNum.push(i,i); 15 } 16 //配列の中身をランダムに並び替える 17 cardNum.sort(function(){ 18 return Math.random() - Math.random(); 19 }); 20 //カードを追加 21 var listItems = cardNum.map(function(num){ 22 return "<li data-num='" + num + "'>?</li>"; 23 }); 24 $ul.append(listItems); 25 26 // カードを開く 27 function open(){ 28 $('li').click(function(){ 29 $(this).text($(this).data('num')); 30 }); 31 } 32 // カードを閉じる 33 function cardClose(){ 34 setTimeout(function(){ 35 $('li').text('?'); 36 },returnSec); 37 } 38 //カードをクリックさせない 39 function cardLock(){ 40 $('.lists li:eq('+index+')').css('pointer-events','none'); 41 } 42 //すべてのカードをロック 43 function allLock(){ 44 $('.lists li').css('pointer-events','none'); 45 } 46 //全てのカードをアンロック 47 function unLock(){ 48 $('.lists li').css('',''); 49 } 50 $('.lists li').click(function(){ 51 index = $('.lists li').index(this); 52 cardLock(); 53 cardClose(index,open); 54 if(first == true){ 55 index1 = index; 56 card1 = cardNum[index]; 57 first = false; 58 } else { 59 allLock(); 60 card2 = cardNum[index]; 61 comparison(); 62 } 63 }); 64 //選んだカード2枚の正否判定 65 function comparison(){ 66 if(card1 == card2){ //同じカードだったら 67 $('.lists li:eq('+index+')').css('pointer-events','none'); 68 $('.lists li:eq('+index1+')').css('pointer-events','none'); 69 pair++; 70 if(pair == totalCard/2){ 71 setTimeout(function(){ 72 alert('Game Over') 73 },returnSec); 74 } 75 } else { //違うカードだったら 76 setTimeout(function(){ 77 cardClose(index,close); 78 cardClose(index1,close); 79 },returnSec); 80 } 81 first = true; 82 card2 = 0; 83 setTimeout(function(){ 84 unLock(); 85 }, returnSec); 86 } 87});
###補足情報(言語/FW/ツール等のバージョンなど)
参考にしたものをほぼ写経して、不要なもの(imgなど使わないもの)は省いて書いたのですが、
動作しない原因が分からない状況のためアドバイスをいただきたいです。
回答2件
あなたの回答
tips
プレビュー