LoginSignup
2
0

More than 3 years have passed since last update.

SGG(すごくなりたいがくせいぐるーぷ)Advent Calendar 2020Day 6sgg
@inoue2002(ようかん)inすごくなりたいがくせいぐるーぷ

【メモ】HTMLとJSでジャンケンする

Posted at

はじめに

知り合いからプログラミングの課題の協力をして欲しいと言われたので自分なりに書いたコードの復習と説明の代わりになればと思い書きます。

用件①画面リロードするとランダムで自分の手とPCの手を決定し、どちらが勝ったのかを表示する

用件②ユーザーに自分の手を選ばせ、PCの手を決定し、どちらが勝ったのかを表示する

用件①

まず簡単にindex.htmlを用意します。

index.html
<html>
  <body>
    <img id="you" src="" width="10%" />
    <p id="you_text"></p>
    <img id="pc" src="" width="10%" />
    <p id="pc_text"></p>
    <p id="result"></p>
  </body>
</html>

▼ 表示してみる

markdown-mark.png

もちろんなにも表示されませんね。ここにscriptを書いていきます。

index.html

<html>
  <body>
    <img id="you_img" src="" width="10%" />
    <p id="you_text"></p>
    <img id="pc_img" src="" width="10%" />
    <p id="pc_text"></p>

    <p id="result"></p>

    <script>
      //ぐー
      const rock = {
        img:
          "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8b692708-7744-36b8-ed83-1ee22f4ce7f3.jpeg",
        text: "ぐー",
      };

      //ちょき
      const scissors = {
        img:
          "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/698c6320-ef35-48c7-1f3e-3166ddbdff8a.jpeg",
        text: "ちょき",
      };

      //ぱー
      const paper = {
        img:
          "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/675e2d7d-f599-d21d-e39b-417748fc0fb7.jpeg",
        text: "ぱー",
      };

      //それぞれの手を一個の配列にする
      const Item = [rock, scissors, paper];

      //それぞれのidと連携する
      const youImg = document.getElementById("you_img");
      const youText = document.getElementById("you_text");
      const pcImg = document.getElementById("pc_img");
      const pcText = document.getElementById("pc_text");
      const result = document.getElementById("result");

      //画面がリロードされるとRockPaperScissors関数を叩く
      window.onload = RockPaperScissors;

      // ジャンケンをする関数
      function RockPaperScissors() {
        // youの出すものを決める
        const youChose = Item[Math.floor(Math.random() * Item.length)];

        //手の画像とテキストを設定する
        youImg.src = youChose.img;
        youText.textContent = "あなたが出したのは" + youChose.text + "です";

        //pcの出すもの決める
        const pcChose = Item[Math.floor(Math.random() * Item.length)];

        //手の画像とテキストを設定する
        pcImg.src = pcChose.img;
        pcText.textContent = "パソコンが出したのは" + pcChose.text + "です。";

        let judge = "";

        //ジャンケンは全てで9通り
        //そのうち引き分けになるのは3通り
        if (youChose.text === pcChose.text) {
          judge = "あいこです";
        }

        //勝つ3通りを出す
          //ぐーで勝つ
        else if (youChose.text === "ぐー" && pcChose.text === "ちょき") {
          judge = "あなたの勝ちです";
        } else if (youChose.text === "ちょき" && pcChose.text === "ぱー") {
          //ちょきで勝つ
          judge = "あなたの勝ちです";
        } else if (youChose.text === "ぱー" && pcChose.text === "ぐー") {
          //ぱーで勝つ
          judge = "あなたの勝ちです";
        } else {
          //あいこでも勝ちでもない場合
          judge = "あなたのまけです";
        }

        //結果を反映する
        result.textContent = judge;
      }
    </script>
  </body>
</html>

▼ 表示結果

markdown-mark.png

See the Pen zYKwRjv by ようかん / Yosuke Inoue (@inoue2002) on CodePen.

無事用件通り表示出来ましたね。何度かリロードして、それぞれの出す手や判定が変わることを確認してみましょう。

用件②

先ほどと大まかには似ている実装になりますが、異なるところはyouが出す部分を実際に決められるようにするという点です。
画面がリロードされたら、まずユーザに選択させるダイアログを表示させます。
ダイアログにはwindow.promptを使います。

index.html

<html>
  <head> </head>

  <body>
    <img id="you_img" src="" width="10%" />
    <p id="you_text"></p>
    <img id="pc_img" src="" width="10%" />
    <p id="pc_text"></p>

    <p id="result"></p>

    <script>
      const rock = {
        img:
          "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8b692708-7744-36b8-ed83-1ee22f4ce7f3.jpeg",
        text: "ぐー",
      };

      const scissors = {
        img:
          "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/698c6320-ef35-48c7-1f3e-3166ddbdff8a.jpeg",
        text: "ちょき",
      };

      const paper = {
        img:
          "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/675e2d7d-f599-d21d-e39b-417748fc0fb7.jpeg",
        text: "ぱー",
      };

      const Item = [rock, scissors, paper];

      const youImg = document.getElementById("you_img");
      const youText = document.getElementById("you_text");
      const pcImg = document.getElementById("pc_img");
      const pcText = document.getElementById("pc_text");
      const result = document.getElementById("result");

      //画面がリロードされたら
      window.onload = promptYou;

      function promptYou() {
        // 入力ダイアログを表示 ＋ 入力内容を user に代入
        user = window.prompt(
          "あなたの出す手を選んでください。 ぐー：1,ちょき：2,パー：3",
          ""
        );

        let youChose = "";
        //youchoseがぐー
        if (user == "1") {
          youChose = Item[0];
        }
        //youchoseがちょき
        else if (user == "2") {
          youChose = Item[1];
        }
        //youchoseがぱー
        else if (user == "3") {
          youChose = Item[2];
        }

        youImg.src = youChose.img;
        youText.textContent = "あなたが出したのは" + youChose.text + "です";

        //pcの手を決める
        RockPaperScissors(youChose.text);
      }

      function RockPaperScissors(youChoseText) {
        //pcの出すもの決める
        const pcChose = Item[Math.floor(Math.random() * Item.length)];
        pcImg.src = pcChose.img;
        pcText.textContent = "パソコンが出したのは" + pcChose.text + "です。";

        let judge = "";

        //ジャンケンは全てで9通り
        //そのうち引き分けになるのは3通り
        if (youChoseText === pcChose.text) {
          judge = "あいこです";
        }

        //勝つ3通りを出す
        //ぐーで勝つ
        else if (youChoseText === "ぐー" && pcChose.text === "ちょき") {
          judge = "あなたの勝ちです";
        } else if (youChoseText === "ちょき" && pcChose.text === "ぱー") {
          //ちょきで勝つ
          judge = "あなたの勝ちです";
        } else if (youChoseText === "ぱー" && pcChose.text === "ぐー") {
          //ぱーで勝つ
          judge = "あなたの勝ちです";
        } else {
          //あいこでも勝ちでもない場合
          judge = "あなたのまけです";
        }
        //結果を反映する
        result.textContent = judge;
      }
    </script>
  </body>
</html>
markdown-mark.png

無事自分の手は選んで、PCもランダムに手を出して結果を表示するところまで完成しました。

See the Pen qBamygy by ようかん / Yosuke Inoue (@inoue2002) on CodePen.

最後に

時間もなかったのでさくっと作りましたが、もっと可愛いモーションとか
リトライボランとか追加して盛り上げてみたいですね。何かの参考になれば幸いです。
CodePenの方で実際に試すこともできるので是非試してみてください。

▼今回使った手の写真


2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0