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

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

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

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

Q&A

解決済

2回答

3274閲覧

クリックしたときに、変数の値がある値になってしまいます。

Cat_san

総合スコア19

JavaScript

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

0グッド

0クリップ

投稿2017/02/11 16:50

編集2017/02/12 02:41

追記:
・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」が何度も表示されます。

処理的には...

  1. attack_okに1が代入されている
  2. attack_okに3が加算される
  3. 1.に戻って繰り返されている

だと思うのですが、この考え方が間違っているのでしょうか...

いろいろと調べてみたのですが、検討がついていません...。
ご存じの方がおられましたら、ご教授いただけましたら幸いです。

どうぞよろしくお願いいたします。

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

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

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

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

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

s8_chu

2017/02/11 17:01

HTMLを追記していただけませんか?
naomi3

2017/02/11 22:20

クリックする度に、「4」ではなく、「0」が何度も表示されますが。
guest

回答2

0

ベストアンサー

if(attack_ok == 1){ の分岐はかならず true になるため不要です。

JavaScript

1// 発火ボタンの取得 2var btn = document.getElementById( 'trigAttack' ); 3 4// attack_ok:1 ボタン押せる 5// attack_ok:0 ボタン押せない 6var attack_ok = 1; 7 8btn.onclick = Fight; 9 10var attack_count = 0; // テスト用 11 12function Fight() { 13 if ( attack_ok === 1 ) { 14 attack_ok = 0; 15 } else { 16 return; 17 } 18 console.log( 'attack', ++attack_count ); // テスト用 19 20 // 処理 21 22 setTimeout( function() { 23 attack_ok = 1; 24 }, 5000 ); // 5000ミリ秒(=5秒) 25} 26```**動くサンプル:**[https://jsfiddle.net/fj9yy5gv/1/](https://jsfiddle.net/fj9yy5gv/1/) 27 28--- 29 30【JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン】 31[https://techacademy.jp/magazine/5541](https://techacademy.jp/magazine/5541) 32 33window.setTimeout - Web API インターフェイス | MDN34[https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout)

投稿2017/02/12 06:09

kei344

総合スコア69364

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

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

Cat_san

2017/02/12 14:36

>kei344さん ご回答いただきまして、ありがとうございます! サンプルの作成、URLの添付など丁寧にありがとうございました! 問題も解決でき、javascriptへの理解も深まりました。 本当にありがとうございます!
guest

0

  1. attack_okに1が代入されている
  2. attack_okに3が加算される
  3. 1.に戻って繰り返されている

1に戻るということは1がまた代入されるってことですよね?
どこで戻るの?

クリックするたびに Fight()が呼ばれているから4が何度もでる。
Fightの中にattack_ok++;でも入れればわかりやすいかも。

投稿2017/02/12 03:26

編集2017/02/12 03:54
toutou

総合スコア2050

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

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

Cat_san

2017/02/12 14:38

>toutouさん ご回答いただきまして、ありがとうございます! 問題の切り分けができていませんでしたね...。 Fightの中に「attack_ok++;」を入れるのは、「なるほど!」と思いました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問