追記:
・HTMLを追記
・「attack_ok」の代入の値がおかしい部分を修正
javaScriptを使って、簡単なテキストゲームの試作を行っていました。
ボタンを押すと、簡単な戦闘結果がテキストで追加されます。
ダブルクリック防止、攻擊処理の実行中...にボタンを押せないように、
ボタンを押した後に、一定時間押せない時間を作りたいと思い、以下のプログラムを組みました。
【仕様イメージ】
・変数「attack_ok」が0ならば、ボタンが押せない
・変数「attack_ok」が1ならば、ボタンが押せる
HTML
1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width"> 7</head> 8<body> 9 10<div class="player-image" id="player-image">プレイヤーキャラ</div> 11 12<div class="attack-btn" id="trigAttack">Attack!!</div> 13 14<div class="battle-message" id="battleMessage"></div> 15 16 17<script type="text/javascript" src="/js/rpg-game.js"></script> 18<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script> 19<script type="text/javascript" src="/js/custom.js"></script> 20</body> 21</html>
JavaScript
1// 発火ボタンの取得 2var btn = document.getElementById('trigAttack'); 3 4// attack_ok:1 ボタン押せる 5// attack_ok:0 ボタン押せない 6var attack_ok = 1; 7 8// メッセージ欄の取得 9var message = document.getElementById('battleMessage'); 10 11// メッセージ用 12var message_text = ''; 13var text = ''; 14 15// 実行処理 16if(attack_ok == 1){ 17 console.log(attack_ok); // * 1が表示される 18 // attack_ok = 0; // ←追記前です 19 attack_ok += 3 ; // ここはテストで入れています 20 btn.onclick = Fight; 21} 22 23function Fight(){ 24 console.log(attack_ok); // *4が表示される 25 // 処理省略 26 27 // メッセージの追加 28 message_text = document.createElement('div'); 29 message_text.className = 'battle-message__box'; 30 message_text.innerHTML = text; 31 message.appendChild(message_text); 32 33 text = ''; 34 } 35 } 36}
クリックして中身を確認してみたのですが、
クリックする度に、consoleに「4」が何度も表示されます。
処理的には...
- attack_okに1が代入されている
- attack_okに3が加算される
- 1.に戻って繰り返されている
だと思うのですが、この考え方が間違っているのでしょうか...
いろいろと調べてみたのですが、検討がついていません...。
ご存じの方がおられましたら、ご教授いただけましたら幸いです。
どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー