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

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

ただいまの
回答率

87.61%

JavaScript じゃんけんゲームの挙動についてのコード

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 224

score 6

【やっていること】
関数の勉強で、JavaScriptでじゃんけんゲームを作成しようと思いました。
(この作成を指標にされている方も多かったので)

【実現したいこと】
画像、グーチョキパーのどれかをクリックした際、
その挙動に合わせてランダムでグーチョキパーのどれかが出力される。
それに併せて勝ち・あいこ・負けの表示をさせたいです。

イメージ説明

【詰まっていること】
何とかコードを書いてみたのですが、画像をクリックしても反応がありません・・。
どこが間違っているのか・どうすれば動くのか教えていただきたいです。

<!DOCTYPE html>
<html>
  <head>
    <title>じゃんけんゲームの作成</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
        <div id="pc"><img src="../images/janken_null.png"></div>
        <div id="kekka"></div>
      </div>
      <br>
      <div id="guu"><img src="../images/janken_gu.png"></div>
      <div id="choki"><img src="../images/janken_choki.png"></div>
      <div id="paa"><img src="../images/janken_pa.png"></div>
      <script type="text/javascript" src="../js/test.js"></script>

  </body>
</html>
function rand(){
  var judge = Math.floor(Math.random()* 3);
  return judge;
 }

 var guubtn = document.querySelector( "guu" )
 guubtn.onclick = function(){

   r = rand();
   if (r === 1) {
   document.querySelector( "kekka" ).innerHTML = "勝利!";
   document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_pa.png\">";
   } else if (r === 2) {
     document.querySelector( "kekka" ).innerHTML = "あいこ";
     document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_gu.png\">";
   } else if (r === 3) {
      document.querySelector( "kekka" ).innerHTML = "敗北";
      document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_choki.png\">";
   };

 var chokibtn = document.querySelector( "choki" )
 chokibtn.onclick = function(){
   r = rand();
   if (r === 1) {
    document.querySelector( "kekka" ).innerHTML = "勝利!";
    document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_pa.png\">";
    } else if (r === 2) {
      document.querySelector( "kekka" ).innerHTML = "あいこ";
      document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_gu.png\">";
    } else if (r === 3) {
       document.querySelector( "kekka" ).innerHTML = "敗北";
       document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_choki.png\">";
    };
 }

 var paabtn = document.querySelector( "paa" )
 paabtn.onclick = function(){
   r = rand();
   if (r === 1) {
    document.querySelector( "kekka" ).innerHTML = "勝利!";
    document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_pa.png\">";
    } else if (r === 2) {
      document.querySelector( "kekka" ).innerHTML = "あいこ";
      document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_gu.png\">";
    } else if (r === 3) {
       document.querySelector( "kekka" ).innerHTML = "敗北";
       document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_choki.png\">";
    };
   }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+2

document.querySelectorはCSSセレクターで記述する必要があるため、
idを指定する場合はそれぞれ

document.querySelector( "#guu" )
document.querySelector( "#choki" )
document.querySelector( "#paa" )


などのように、#id名とする必要があります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/05/30 21:07

    ご回答ありがとうございます!
    単純な事が抜けておりました・・・。

    キャンセル

checkベストアンサー

+1

  • guubtn.onclick = function(){の書き方が間違っています。guubtnをクリックした際に実行される関数は、guubtn.addEventListener('click', function () {と書くのが正解です。
  • また、document.querySelectorでIDを指定したい場合は、document.querySelector("#guu")のように、「#(ID名)」とする必要があります。

上記2点を直せば、画像をクリックした際に反応するようにはなるかと思います。
ゲームとしての動きはまだ不思議ですね。グー・チョキ・パーのいずれかをクリックしたとき、勝ち負けの表示が間違っているように見えます(左上の手に対する勝ち負けが正しく表示できていない)

また、今回はグー・チョキ・パーをクリックしたときでそれぞれ関数を別々に作っているようですが、1つの関数にまとめることも可能です。(自分の手、CPUの手を引数に渡して、それに則って勝敗を判定する)
この方が処理が簡潔でよいですね。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/05/30 21:11

    早速のご回答ありがとうございます!
    追加でお伺いさせてください。addEventListenerについて学習しなおしました。
    ご指摘いただいたようにこちらを使うべきだと思ったのですが、
    guubtn.addEventListener('click', の括弧閉じ【 )】はどこに記述するべきでしょうか・・・?
    色んな位置、falseを追加してみましたが赤い波線が出るのと、いまだ動作しませんでした。

    キャンセル

  • 2021/05/30 21:14 編集

    試しに、グーをクリックしたときの部分のみ書いてみますとこのようになります。
    波括弧閉じの後です。

    guubtn.addEventListener("click", function () {
    r = rand();
    if (r === 1) {
    document.querySelector("#kekka").innerHTML = "勝利!";
    document.querySelector("#pc").innerHTML =
    '<img src="../images/janken_pa.png">';
    } else if (r === 2) {
    document.querySelector("#kekka").innerHTML = "あいこ";
    document.querySelector("#pc").innerHTML =
    '<img src="../images/janken_gu.png">';
    } else if (r === 3) {
    document.querySelector("#kekka").innerHTML = "敗北";
    document.querySelector("#pc").innerHTML =
    '<img src="../images/janken_choki.png">';
    }
    });

    キャンセル

  • 2021/05/30 21:17 編集

    ご親切にコードまでありがとうございます!
    同じような記述が続いているのでまとめられそうだな~と思いつつ、まだまだ勉強不足のためそこまで至らない次第です・・。

    ご回答と、今後のヒントまでありがとうございました!

    キャンセル

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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