LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@taro_zun

初心者が簡単なじゃんけんゲームを作ってみた。

Posted at

##はじめに
初めまして、こんにちは！
私は現在32歳で未経験からエンジニアへの転職を目指して学習しています。

トレーニングとしてJavaScriptを使い、じゃんけんができるコードを書いてみました。

その過程を記事にまとめていきます。

この実装の目的は、
何を作るかを決めて、それを今理解できていることでとにかく実現することです。

##要件定義

  • ブラウザを開くと、「グー」「チョキ」「パー」という文字が書いてあるボタンが表示される
  • いずれかのボタンを押すと、ボタンに応じた画像が表示される
  • ↑ に加え、ランダムで相手の手（グーチョキパー）も表示される
  • 自分の手と相手の手により、「勝ち」「負け」「あいこ」の文字を表示する

この内容を実現できる内容を目指します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>じゃんけんゲーム </title>
  <style type="text/css">
  </style>
</head>

<body>
  <script>
    "use strict";
  </script>
</body>

</html>

まず枠組みを用意しました。

##実装
###1 ボタン
まずはボタン部分を用意します。

  <button class="button" id="T_btn"><span>チョキ</span></button>
  <button class="button" id="P_btn"><span>パー</span></button>
  <button class="button" id="G_btn"><span>グー</span></button>

チョキ、パー、グーの３つのボタンを作成しました。
合わせてCSS部分をこのようにして余裕を持たせて表示できるようにします。

 button {
      text-align: center;
      margin: 20px;
    }

###２ 画像やブラウザの表示部分
画像を表示する方法はいくつもあると思いますが、
予め表示されているが、ボタン押下によって見えるという実装を目指します。

 <!-- チョキ画像の変数とソース-->
  <div class="image" id="tyoki">
    <img src="./tyoki.png" />
  </div>

  <!-- ぐー画像の変数とソース-->
  <div class="image" id="gu">
    <img src="./gu.png" />
  </div>

  <!-- パー画像の変数とソース-->
  <div class="image" id="pa">
    <img src="./pa.png" />
  </div>

それぞれのクラス、imageに表示させないようCSSを設定します。

.image {
      display: none;
    }

そして相手の画像の表示部分と、その結果が表示される部分も作成します。

<div><span>相手の手</span></div>

  <!-- 相手画像の表示-->
  <img class="image" id="enemyImage">

  <!-- じゃんけんの結果の表示-->
  <div class="image" id="kekka"><span></span></div>

###3 ボタンの中身の実装
ボタンを押下することで、対象のクラスを外すことで対象の画像が表示されるようにします。
まずはチョキのボタンの中身を作ります。

 　　　//自分の手の変数
    let myHand = null;

    //相手の手の変数
    let enemyHand = null;

    //チョキボタンがクリックされると、チョキの絵が描かれる。
    const t_Btn = document.getElementById('T_btn');
    const tyokiImage = document.getElementById('tyoki');
    t_Btn.addEventListener('click', function () {
      myHand = "tyoki";
      tyokiImage.classList.remove("image");
      enemyImage.classList.remove("image");
      if (guImage.className === 'image' || paImage.className === 'image') {
        guImage.classList.add("image");
        paImage.classList.add("image");
      }
      judge();
    }, false);

クラスを追加するclassList.add（）メソッドと外すclassList.remove（）を使います。
if文の部分は他の画像が表示されていた場合はそれを消す内容です。
これらの内容をaddEventListener()でボタンに実装します。
これと同じようにグーとパーのボタンも作成します。

###4 相手の手の実装
相手は読み込まれた時にランダムで表示されるように実装します。

    //相手の手が３つの画像ソースからランダムで選択されるようにする
    let enemyImage = document.getElementById('enemyImage');
    const images = ["./tyoki.png", "./pa.png", "./gu.png"];
    let imageNo = Math.floor(Math.random() * images.length);
    enemyImage.src = images[imageNo];

    if (imageNo === 0) {
      enemyHand = "tyoki";
    } else if (imageNo === 1) {
      enemyHand = "pa";
    } else {
      enemyHand = "gu";
    }

配列にソースを格納し、それがランダムで表示されるようにします。
つまりimageNoには0,1,2のいずれかが振り分けられて、それがグー、チョキ、パーそれぞれになります。

###　5 勝敗判定の実装
条件式で勝敗判定を行います。

   //条件式でじゃんけんの結果を表示する。
    const kekka = document.getElementById("kekka");
    function judge() {
      if (myHand === "tyoki" && enemyHand === "pa") {
        kekka.innerHTML = "あなたの勝ちです";
      } else if (myHand === "tyoki" && enemyHand === "gu") {
        kekka.innerHTML = "あなたの負けです";
      } else if (myHand === "pa" && enemyHand === "gu") {
        kekka.innerHTML = "あなたの勝ちです";
      } else if (myHand === "pa" && enemyHand === "tyoki") {
        kekka.innerHTML = "あなたの負けです";
      } else if (myHand === "gu" && enemyHand === "tyoki") {
        kekka.innerHTML = "あなたの勝ちです";
      } else if (myHand === "gu" && enemyHand === "pa") {
        kekka.innerHTML = "あなたの負けです";
      } else {
        kekka.innerHTML = "あいこです";
      }
    }

この結果が反映されるようにボタン押下による反映部分に追加で以下の文を追加します。

//チョキの場合
   kekka.classList.remove("image");

##　最後に
これでブラウザに読み込むとボタンが表示されてボタンを押下することでじゃんけん判定ができるようになります。
canvas見本.png
canvas見本.png

##最後に
色々と追加したい部分やレイアウトについて整えていない部分、リファクタリングを行っていない等不足している部分が多々あると思いますが、目的としていた機能を実装することができました。
たったこれだけの内容ですが途中何度も躓いて何日もかかってしまいました。
これからも自分なりに０から作成することで少しずつ学習を進めていきたいと思います。

見ていただきありがとうございました！！

最後に全体のコードを記載します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>じゃんけんゲーム</title>
  <style type="text/css">
    button {
      text-align: center;
      margin: 20px;
    }

    .image {
      display: none;
    }
    img {
      width: 250px;
      height: 250px;
    }
  </style>
</head>

<body>

  <button class="button" id="T_btn"><span>チョキ</span></button>
  <button class="button" id="P_btn"><span>パー</span></button>
  <button class="button" id="G_btn"><span>グー</span></button>

  <!-- チョキ画像の変数とソース-->
  <div class="image" id="tyoki">
    <img src="./tyoki.png" />
  </div>

  <!-- ぐー画像の変数とソース-->
  <div class="image" id="gu">
    <img src="./gu.png" />
  </div>

  <!-- パー画像の変数とソース-->
  <div class="image" id="pa">
    <img src="./pa.png" />
  </div>

  <div><span>相手の手</span></div>

  <!-- 相手画像の表示-->
  <img class="image" id="enemyImage">



  <!-- じゃんけんの結果の表示-->
  <div class="image" id="kekka"><span></span></div>


  <script>
    "use strict";
    //自分の手の変数
    let myHand = null;

    //相手のての変数
    let enemyHand = null;

    //チョキボタンがクリックされると、チョキの絵が描かれる。
    const t_Btn = document.getElementById('T_btn');
    const tyokiImage = document.getElementById('tyoki');
    t_Btn.addEventListener('click', function () {
      myHand = "tyoki";
      tyokiImage.classList.remove("image");
      enemyImage.classList.remove("image");
      kekka.classList.remove("image");
      if (guImage.className === 'image' || paImage.className === 'image') {
        guImage.classList.add("image");
        paImage.classList.add("image");
      }
      judge();
    }, false);

    //ぐーボタンがクリックされると、ぐーの絵が描かれる。
    const g_Btn = document.getElementById('G_btn');
    const guImage = document.getElementById("gu");
    g_Btn.addEventListener('click', function () {
      myHand = "gu";
      guImage.classList.remove("image");
      enemyImage.classList.remove("image");
      kekka.classList.remove("image");
      if (tyokiImage.className === 'image' || paImage.className === 'image') {
        tyokiImage.classList.add("image");
        paImage.classList.add("image");
      }
      judge();
    }, false);

    //パーボタンがクリックされると、パーの絵が描かれる。
    const p_Btn = document.getElementById('P_btn');
    const paImage = document.getElementById("pa");
    p_Btn.addEventListener('click', function () {
      myHand = "pa";
      paImage.classList.remove("image");
      enemyImage.classList.remove("image");
      kekka.classList.remove("image");
      if (guImage.className === 'image' || tyokiImage.className === 'image') {
        guImage.classList.add("image");
        tyokiImage.classList.add("image");
      }
      judge();
    }, false);


    //相手の手が３つの画像ソースからランダムで選択されるようにする
    let enemyImage = document.getElementById('enemyImage');
    const images = ["./tyoki.png", "./pa.png", "./gu.png"];
    let imageNo = Math.floor(Math.random() * images.length);
    enemyImage.src = images[imageNo];

    if (imageNo === 0) {
      enemyHand = "tyoki";
    } else if (imageNo === 1) {
      enemyHand = "pa";
    } else {
      enemyHand = "gu";
    }
    //条件式でじゃんけんの結果を表示する。
    const kekka = document.getElementById("kekka");
    function judge() {
      if (myHand === "tyoki" && enemyHand === "pa") {
        kekka.innerHTML = "あなたの勝ちです";
      } else if (myHand === "tyoki" && enemyHand === "gu") {
        kekka.innerHTML = "あなたの負けです";
      } else if (myHand === "pa" && enemyHand === "gu") {
        kekka.innerHTML = "あなたの勝ちです";
      } else if (myHand === "pa" && enemyHand === "tyoki") {
        kekka.innerHTML = "あなたの負けです";
      } else if (myHand === "gu" && enemyHand === "tyoki") {
        kekka.innerHTML = "あなたの勝ちです";
      } else if (myHand === "gu" && enemyHand === "pa") {
        kekka.innerHTML = "あなたの負けです";
      } else {
        kekka.innerHTML = "あいこです";
      }
    }

  </script>
</body>

</html>
1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?