見出し画像

JavaScriptでじゃんけん！

donguri

サンプルコードをお借りして実行します。

HTMLは

<!DOCTYPE html>
<html lang="ja">
<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>
        div{
            margin-top: 30px;
            text-align: center;
            font-size: large;
        }
    </style>
</head>
<body>
    <div>
    <p>コンピューター：<span id="com"></span></p>
    <p>結果：<span  id="result"></span></p>
    <p>あなた：<span id="me"></span></p>
    <input type="button" value="グー" onclick="judge(0)">
    <input type="button" value="チョキ" onclick="judge(1)">
    <input type="button" value="パー" onclick="judge(2)">
    </div>

    <script src="main.js"></script>
</body>
</html>

JavaScriptは

let hands = ['グー','チョキ','パー'];
let com_hands;

function judge(p_hands){
    com_hands = Math.floor( Math.random() * 3);

    if(hands_num === com_hands) result_text = "-- Draw --";
    else if(p_hands === 0 && com_hands === 1 ) result_text = "-- You win --";
    else if(p_hands === 1 && com_hands === 2 ) result_text = "-- You win --";
    else if(p_hands === 2 && com_hands === 0 ) result_text = "-- You win --";
    else result_text = "-- You lose --";

    document.getElementById("com").innerHTML = hands[com_hands];
    document.getElementById("me").innerHTML = hands[p_hands];
    document.getElementById("result").innerHTML = result_text;
}

となっています。判定が0,1,2という数字でまとめてありスッキリしてとってもわかりやすいです。

HTMLの中身を見てみます。基本の構造は

<!DOCTYPE html>
<html lang="ja">
<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>
      // レイアウトを決めます。
    </style>
</head>
<body>
　　　// 表示させたいもの
</body>
</html>

レイアウトは

  div{
            margin-top: 30px;
            text-align: center;
            font-size: large;
  }

"div"というタグに上の余白を30px取って、中央に寄せ、フォントを大きく表示するように設定されています。

HTMLで"div"タグの中に"p"タグ"span"タグと"input"タグが使われています。
"p"は段落に使われ"span"は部分的にスタイルを当てたいときに使います。

"p"タグ"span"タグには"id"がつけられていて、この部分はJavaScriptで操作します。

"input"タグはじゃんけんの”手”をボタンで選ぶためのつけてあり、

onclick="judge(0)"

でJavaScriptを実行します。

JavaScriptは

変数宣言
関数

という構成で作られています。関数function judge()は

ランダムな数字の生成
じゃんけんお判定
表示するための"id"の取得

大まかにはこんな感じの関数です。

少し修正

これをそのままJSBinで実行してみます。

ボタンを押しても反応しません。少しコードを見てみます。

HTMLの方は表示できているのでよしとして、JavaScriptを見てみます。HTMLで

onclick="judge(0)

の部分がJavaScriptの呼び出しですのでこのjudge()関数を調べてみます。

function judge(p_hands){
　com_hands = Math.floor( Math.random() * 3);
　if(hands_num === com_hands) result_text = "-- Draw --";
　　　// 省略
}

引数がp_handsとなっていますが実際に比較されているのがhands_numとなっていているのでp_handsに変更します。

これで動くようになりました。あと自分なりにわかりやすく修正したいと思います。

変数宣言を付け加えます。

let result_text;

あとif文を見慣れた"{ }"を使った表現に変更してみました。

 if(p_hands === com_hands){
       result_text = "-- Draw --"
    }else if(p_hands === 0 && com_hands === 1 ) {
      result_text = "-- You win --"
    }else if(p_hands === 1 && com_hands === 2 ) {
      result_text = "-- You win --";
    }else if(p_hands === 2 && com_hands === 0 ) {
      result_text = "-- You win --";
    }else result_text = "-- You lose --";


この記事が気に入ったらサポートをしてみませんか？