質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1341閲覧

Javascript ファンクションの多重動作回避

romukuro0328

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/01/23 08:10

編集2018/01/23 08:49

問題点

javascriptでゲームを作成しているのですが、
そのゲームの中で一時停止機能を作成し、一時停止中にファンクションの処理をスルーすることは実装できたのですが、
一時停止ボタンを連打した際に画像表示処理が複数呼び出され、多重動作を起こしてしまいます。
また、画像が表示されている時に一時停止を行うと、解除した後にその画像の消去動作が行われずクリックされるまで消えないまま残ってしまいます。
ファンクションの多重呼び出しを回避する方法はあるのでしょうか?
皆様のお知恵をおかりしたいです。よろしくお願いします。

実現したいこと

一時停止を解除した際に、ファンクションが多重動作するのを防ぎたい。
画像表示中に一時停止をし、解除した際に消去処理を行いたい(一時停止を解除して2秒経過後)

コード

下記コードのdrawTimingが多重呼び出しされてしまっている状態です。
コードの中から関係のありそうな部分を抜粋しています。
足りない部分などありましたらご指摘ください。

html

1<!DOCTYPE html> 2<html> 3 ~省略~ 4 <body> 5 ~省略~ 6 drawTiming();//drawTimingの呼び出し 7 8 /*enemy表示インターバル*/ 9 function drawTiming(){ 10 if(ispause){ 11 return; 12 }else{ 13 drow();//drow呼び出し 14 // フィーバー開始チェック 15 if(isFever){//フィーバーだった場合 16 setTimeout("drawTiming()",100);//一定間隔でdrawTimingを呼び出す 17 feverbgmstart();//feverbgmスタート 18 }else{//通常だった場合 19 //表示タイミングの設定(ランダム) 20 var time=Math.floor(MIN_DRAW_TIMING+(Math.random()*MAX_DRAW_TIMING));//最小値から最大値の間で設定 21 setTimeout("drawTiming()",time);//drawTimingを呼び出す 22 } 23 } 24 25 } 26 27 /*enemyの色抽選*/ 28 function drow(){ 29 省略 30 } 31 32 /*enemyの表示位置抽選*/ 33 function drow2(colornum){ 34 省略 35 } 36 37 /*enemyの表示*/ 38 function drow3(colornumber,positionnum){ 39 if(ispause){ 40 return; 41 }else{ 42 var enemy = document.getElementById('enemy'+positionnum); 43 hikae=document.getElementById('enemy'+positionnum); 44 enemy.src=enemyimage[colornumber];//画像の置き換え 45 enemy.style.visibility = 'visible';//表示設定 46 enemy.value=colornumber; //押された種類IDの取得 47 48 enemy.style.position="absolute";//enemyをabsoluteにする 49 //テスト var rect = enemy.getBoundingClientRect(); 50 var positionX = Math.floor(Math.random()*1000);//X座標をランダムで設定 51 var positionY = Math.floor(Math.random()*450);//Y座標をランダムで設定 52 enemy.style.marginLeft=positionX;//enemyのmarginLeftとして入れる 53 enemy.style.marginTop=positionY;//enemyのmarginTopとして入れる 54 55 if(!isFever){//通常だった場合 56 setTimeout(function(){ignoreEnemy(enemy)},IGNORE_ENEMY_TIME);//消えるタイミング 57 } 58 } 59 } 60 61 /*enemyを無視した場合*/ 62 function ignoreEnemy(enemy){ 63 if(ispause){ 64 return; 65 }else{ 66 if(enemy.style.visibility=="visible"){//もしそのとき表示されていたら 67 dashsound();//逃走SE 68 console.log("無視した!"); 69 //console.log(enemy.id); 70 enemy.style.visibility="hidden";//非表示にして 71 if(enemy.value != BULE_MONSTRY){//青以外のとき 72 document.lifeimage.src = lifeimg[life]; 73 AddScore(-1);//スコアを-1する 74 comboCount=0; 75 document.feverimage.src = feverimg[0]; 76 } 77 } 78 } 79 } 80 81 /*-enemyを捕獲*/ 82 function onDestroyEnemy(enemy){ 83 if(ispause){ 84 return; 85 }else{ 86 attacksound();//捕獲SE呼び出し 87 console.log("ヒット!"); 88 //console.log(enemy.id); 89 enemy.style.visibility="hidden";//enemyを非表示にする 90 // 押された種類をチェック 91 if(enemy.value == GREEN_MONSTRY){ 92 console.log("みどり"); 93 AddScore(1); 94 comboCount++; 95 } 96 else if(enemy.value == RED_MONSTRY){ 97 console.log("あか"); 98 AddScore(5); 99 comboCount++; 100 } 101 else if(enemy.value == BULE_MONSTRY){ 102 console.log("あお"); 103 life--; 104 document.lifeimage.src = lifeimg[life]; 105 AddScore(-1); 106 comboCount = 0; 107 } 108 else{//念のため 109 AddScore(0); 110 comboCount = 0; 111 } 112 } 113 } 114 115 116 } 117 118 /*一時停止処理*/ 119 function pause(){ 120 if(!ispause){ 121 ispause=true; 122 document.getElementById("pauseimg").style.visibility="visible"; 123 }else{ 124 ispause=false; 125 document.getElementById("pauseimg").style.visibility="hidden"; 126 drawTiming(); 127 } 128 129 } 130 131 </script> 132 133 </body> 134</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/01/23 08:21

<!DOCTYPE html>ですかね? ここを間違えると意図せず互換モードになるかもしれません。
romukuro0328

2018/01/23 08:24

ご指摘ありがとうございます。両方に!がついていたので訂正しました(汗
x_x

2018/01/23 08:31

よく見たほうがいいですよ? できればコピペで
romukuro0328

2018/01/23 08:48

何度もすみません…ありがとうございます。
guest

回答1

0

setTimeoutで処理しているようですので、一時停止するならclearTimeoutを実行する必要があるかもしれません

投稿2018/01/23 08:14

yambejp

総合スコア114839

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

romukuro0328

2018/01/23 08:22

回答ありがとうございます。clearTimeoutを試してみたのですが、 drawTimingが多重呼び出しされることに変わりはなく、enemyが大量発生してしまいます…。 書き方が不適切だっただけで、適切に使用すれば問題は解消できそうでしょうか…?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問