javascript初心者です。
練習で神経衰弱を作っていますが、わからないところがあるので質問させていただきます。
以下のような神経衰弱のスクリプトを書き、一応単純な骨組みは出来て、機能を追加しているところです。
今追加しようとしているのは、
「2枚のカードを表にしたときの表示時間中(0.5秒)に3枚目をクリックできないようにする」
です。
連打してクリックすると、2枚の判定をしている最中に3枚目をクリックしてしまい、スクリプトがおかしくなります。
これを解消したいのですが、うまい方法が思いつきません。
アドバイスいただければと思います。
/--------------------------------------------------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>神経衰弱</title>
<style type="text/css">
ul {
width: 300px;
list-style:none;
margin: 0;
padding: 0;
}
li {
float:left;
margin: 0;
padding; 0:
}
img {
vertical-align: bottom; /*上下隙間埋め*/
}
#all {
width: 300px;
margin: 0px auto 0px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="all">
<ul>
<li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li>
<li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li>
<li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li>
<li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li>
<li><img src="none_2.jpg" alt="" width="100" height="100"/></li>
<li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li>
<li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li>
<li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li>
<li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li>
</ul>
</div>
<script type="text/javascript">
var card_c = 0; //1枚目
var card_first; //altの数
var card_second; //altの数
var click_first; //開けた場所1
var click_second; //開けた場所2
var fullOpen = 0; //ワンペアで1追加 4でクリア
function conce(aaa){ //クリックで無地に数字を表示
var imgId = document.getElementById(aaa);//クリックしたimgのid
if(card_c==0){ //1枚目
imgId.src = imgId.alt+".jpg";
card_c++;
card_first = imgId.alt;
click_first=aaa;
}else{//2枚目
imgId.src = imgId.alt+".jpg";
card_second = imgId.alt;
click_second=aaa;
if(card_first==card_second){//揃ったら
card_c=0;
fullOpen++;
}else{//揃わなかったら
function bunki(){
document.getElementById(click_first).src="none.jpg";
document.getElementById(click_second).src="none.jpg";
}
setTimeout(bunki,500);//0.5秒後閉じる
card_c=0;
}
}
//全部そろえた時のアクション
if(fullOpen==4){
alert("complete!");
for(i=0;i<8;i++){
document.getElementById('c_'+(i+1)).src="none.jpg"
}
fullOpen=0;
}
}
</script>
</body>
</html>
/-------------------------------------------------------------/
よろしくおねがいします。
No.1
- 回答日時:
「時間」で管理しようとすると面倒だと思うので、
・2枚目を開けたときにフラグON。
・フラグが立っていたらクリック時の処理をしないようにする。
・待ち時間後の処理でフラグOFF
でどうでしょうか。
お返事ありがとうございます。
なるほど、フラグを立てるという考え方もあるのですね。
ありがとうございます。
参考にさせていただきます。
No.2ベストアンサー
- 回答日時:
カードが不揃いの場合を「3枚目以降は何もしない」状態にすれば、
次のカードが開けません。
switch(card_c) {
case 0: card_c++; 1枚目を開いた処理(); break;
case 1: card_c++; 2枚目を開いた処理(); break;
default: 3枚目以降は何もしない();
}
card_c を 0 に戻すタイミングですが、
二枚がそろった場合は、2枚目を開いた処理() の中で
二枚がちがった場合は、bunki() の中で
--
回答とは関係ありませんが、せっかくなので提案です。
間違えた場合に簡易アニメーションをしているので、全部裏返す処理も、
1枚目裏返す→N秒後に2枚目裏返す→...→N秒後に8枚目裏返す
とアニメをしてはいかがでしょうか。
お返事ありがとうございます。
switch分で分岐させればいいのですね。
ありがとうございます。
裏返す処理は次の追加要素にしたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
Slick.jsのオプションrtlについて
-
エンドロールを枠の中で表示す...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
htmlの記述で link rel=styles...
-
JQueryで画像の上で文字を動かす
-
ロールオーバー効果にならない。
-
jspでcssが読み込めない
-
スライダーを実装した場合、ペ...
-
離れた場所にマウスオーバーで...
-
フォントサイズの変更
-
変数内容をHTML内で表示する方法
-
javascriptでURLにマウスオーバー
-
1行で左寄せと右寄せと中央揃え...
-
document.getElementById( ).st...
-
連番画像「次へ」「前へ」で、...
-
文字を固定したいのですが…
-
戻ってきた時ツリーメニューが...
-
eclipseでcssを使うためには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報