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

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

ただいまの
回答率

90.51%

  • JavaScript

    19307questions

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

  • jQuery

    7765questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jsでジャンケンゲーム

解決済

回答 2

投稿

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

you-you

score 3

初歩的な質問ですみません。

ジャンケンで敵が手を出し、その手に勝つ手を出して、また敵が手を出す…というゲームを制作してます。
①敵が手を出す
②自分が「勝つ」手をだす
③勝ち負け判定
①に戻る

上記流れは上手く行ったのですが、2順目から勝ち負け判定が2個分でる。3順目4個出る。4順目6個でる。…と2コずつ増えていきます。
お分かりになれば解決策をご教授頂けると幸いです。

$(document).ready(function(){
start();
function start() {
    // compの手
    var r = Math.floor( Math.random() * 3 + 1);
    console.log(r);
    if (r == 1) {
        $('#comp').html('<img src="img/comp-gu.png" alt="グー" width="170" height="176">');
    }else if (r == 2) {
        $('#comp').html('<img src="img/comp-cho.png" alt="チョキ" width="170" height="176">');
    }else {
        $('#comp').html('<img src="img/comp-par.png" alt="パー" width="170" height="176">');
    }
    // compの手+自分の手
    $("#gu_btn").on("click",function(){
        janken(1, r);
    });
    
    $("#cho_btn").on("click",function(){
        janken(2, r);
    });
    
    $("#par_btn").on("click",function(){
        janken(3, r);
    });
}
// 勝ち負け判定
function janken(myhand, comphand) {
    var judge = ( myhand - comphand + 3 ) % 3;
    console.log(judge);
    if (judge == 0) {
        $("#scoa").append('<p>△</p>');
    }else if(judge == 1) {
        $("#scoa").append('<p>✕</p>');
    }else if(judge == 2) {
        $("#scoa").append('<p>◯</p>');
    }
    start();
}

});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="js/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>じゃんけんゲーム</title>
<script src="js/janken.js"></script>
</head>
<body>
<div class="wrapper">

<header>
  <h1>Janken&nbsp;Game</h1>
</header>

<div id="comp-bk">
    <p id="comp"></p>
</div>
<div id="scoa">
</div>
<footer>
<ul>
    <li id="gu_btn"></li>
    <li id="cho_btn"></li>
    <li id="par_btn"></li>
</ul>
</footer>

</div><!-- /wrap-btm -->
</div><!-- .wapper -->
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

結果が増殖するのは start() を実行した数だけ click イベントが定義されるのが原因だと思われます。
click イベントは始めに一回だけ定義するように工夫してみてください。
` Re: you-you さん

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/11/19 22:23

    そうなんですね。工夫して書き換えて見ます。
    勉強になりました。ありがとうございます。

    キャンセル

0

原因は think49 さんの指摘の通りです。

それも踏まえ、構造を変更してみたものを jsdoit におきました。
http://jsdo.it/katoy/mPf8

変更点:
 1. on でのイベントハンドラーの設定は一度だけにした。
 2. 画面更新処理をすべて show() に集めた。
イメージ説明
html と javascript を下に引用しておきます。

<div class="wrapper">
    <header>
      <h1>Janken&nbsp;Game</h1>
    </header>

    <div id="comp-bk">
        <p id="comp"></p>
    </div>
    <div id="scoa"></div>
    <footer>
    <ul>
        <li id="gu_btn">グー</li>
        <li id="cho_btn">チョキ</li>
        <li id="par_btn">パー</li>
    </ul>
    </footer>

</div><!-- .wapper -->

$(document).ready(function(){

  // 自分の手 + compの手
  $("#gu_btn").on("click",function() {
      janken(1, comp_hand());
  });

  $("#cho_btn").on("click",function() {
      janken(2, comp_hand());
  });

  $("#par_btn").on("click",function() {
      janken(3, comp_hand());
  });

  function comp_hand() {
    // compの手
    var hand = Math.floor( Math.random() * 3 + 1);
    console.log("comp_hand():" + hand);
    return(hand);
  }

  // 勝負を判定して、内容を画面に表示する
  function janken(myhand, comphand) {
    var judge = ( myhand - comphand + 3 ) % 3;
    console.log("myhand:" + myhand + ", compand:" + comphand + ", judge:" + judge);
    show(myhand, comphand, judge);
  }

  function show(myhand, comphand, judge) {
    // コンピュータの手を表示する
    if (comphand == 1) {
        $('#comp').html('グー');
    } else if (comphand == 2) {
        $('#comp').html('チョキ');
    } else {
        $('#comp').html('パー');
    }
    //  勝敗結果を表示する
    if (judge === 0) {
        $("#scoa").append('<p>△</p>');
    } else if (judge === 1) {
        $("#scoa").append('<p>✕</p>');
    } else if (judge === 2) {
        $("#scoa").append('<p>◯</p>');
    }
  }

});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/11/19 23:05

    ご丁寧にありがとうございます!
    大変参考になりました。

    キャンセル

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

  • JavaScript

    19307questions

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

  • jQuery

    7765questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。