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

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

ただいまの
回答率

90.53%

  • JavaScript

    19912questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,162

Cat_san

score 13

追記:
・HTMLを追記
・「attack_ok」の代入の値がおかしい部分を修正

javaScriptを使って、簡単なテキストゲームの試作を行っていました。
ボタンを押すと、簡単な戦闘結果がテキストで追加されます。

ダブルクリック防止、攻擊処理の実行中...にボタンを押せないように、
ボタンを押した後に、一定時間押せない時間を作りたいと思い、以下のプログラムを組みました。

【仕様イメージ】
・変数「attack_ok」が0ならば、ボタンが押せない
・変数「attack_ok」が1ならば、ボタンが押せる

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>

<div class="player-image" id="player-image">プレイヤーキャラ</div>

<div class="attack-btn" id="trigAttack">Attack!!</div>

<div class="battle-message" id="battleMessage"></div>


<script type="text/javascript" src="/js/rpg-game.js"></script>
<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
</body>
</html>
// 発火ボタンの取得
var btn = document.getElementById('trigAttack');

// attack_ok:1 ボタン押せる
// attack_ok:0 ボタン押せない
var attack_ok = 1;

// メッセージ欄の取得
var message = document.getElementById('battleMessage');

// メッセージ用
var message_text = '';
var text = '';

// 実行処理
if(attack_ok == 1){
    console.log(attack_ok); // * 1が表示される
    // attack_ok = 0; // ←追記前です
    attack_ok += 3 ; // ここはテストで入れています
    btn.onclick = Fight;
}

function Fight(){
    console.log(attack_ok); // *4が表示される
    // 処理省略

            // メッセージの追加
            message_text = document.createElement('div');
            message_text.className = 'battle-message__box';
            message_text.innerHTML = text;
            message.appendChild(message_text);

            text = '';
        }
    }
}

クリックして中身を確認してみたのですが、
クリックする度に、consoleに「4」が何度も表示されます。

処理的には...

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s8_chu

    2017/02/12 02:01

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

    キャンセル

  • naomi3

    2017/02/12 07:20

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

    キャンセル

  • turbgraphics200

    2017/02/12 11:58

    掲載されたコード片だけでは、問題が再現されません。https://jsfiddle.net/8g7hz4b1/ 掲載されたコード以外の個所が問題です。

    キャンセル

回答 2

checkベストアンサー

+1

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

// 発火ボタンの取得
var btn = document.getElementById( 'trigAttack' );

// attack_ok:1 ボタン押せる
// attack_ok:0 ボタン押せない
var attack_ok = 1;

btn.onclick = Fight;

var attack_count = 0; // テスト用

function Fight() {
    if ( attack_ok === 1 ) {
        attack_ok = 0;
    } else {
        return;
    }
    console.log( 'attack', ++attack_count ); // テスト用

    // 処理

    setTimeout( function() {
        attack_ok = 1;
    }, 5000 ); // 5000ミリ秒(=5秒)
}

動くサンプル:https://jsfiddle.net/fj9yy5gv/1/


【JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン】
https://techacademy.jp/magazine/5541

【window.setTimeout - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/12 23:36

    >kei344さん
    ご回答いただきまして、ありがとうございます!

    サンプルの作成、URLの添付など丁寧にありがとうございました!
    問題も解決でき、javascriptへの理解も深まりました。

    本当にありがとうございます!

    キャンセル

+1

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/12 23:38

    >toutouさん
    ご回答いただきまして、ありがとうございます!

    問題の切り分けができていませんでしたね...。
    Fightの中に「attack_ok++;」を入れるのは、「なるほど!」と思いました。

    ありがとうございました!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    19912questions

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