【初心者でも簡単】JavaScriptでじゃんけんゲームを作ろう！サンプルコード付き

JavaScript

　今回は、JavaScriptでじゃんけんゲームを作っていきます。初心者の方でも理解しやすいようにサンプルコード付きで解説しています。

1. じゃんけんゲームを作ろう！

　前置きは、これぐらいにして早速やっていきましょう！

　では、Let’s Go!!

　※今回の記事では、JavaScriptのことはJSと省略して解説しております。

1-1. 全体のコード

　まず、全体のコードを紹介していきます。

　↓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;
}

↓のボタンから、完成品を確認することができます。一回実行してから、作ってください。

コードを実行

1-2. コードの解説

　これから、コードの解説に入っていきます。HTMLとJSで分けて解説します。

　1-2-1. HTMLコードの解説

　まず、HTMLファイルの解説に入ります。

<input type="button" value="グー" onclick="judge(0)">
<input type="button" value="チョキ" onclick="judge(1)">
<input type="button" value="パー" onclick="judge(2)">

　inputタグでボタンを作成しています。onclickタグとは、クリックされたら、JSの関数を実行するタグです。今回の場合は、JSのjudge関数を引数付きで実行しています。引数に代入されている値については、これからJSのコードを解説するときにわかってくるので、今は気にしなくて大丈夫です。

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

　scriptタグは、JSのファイルとHTMLのファイルを連携させるためのコードです。””に連携させたいJSファイルのパスを入れて下さい。相対パスでも絶対パスでも、どちらでも大丈夫です。（ファイル名などは自由に決めて下さって結構です）

　余談ですが、相対パスは現在の位置から見て目的のファイルがある位置を記述する方法で、絶対パスは目的のファイルまでのパスをすべて記述する方法です。今回のようにファイルを連携する場合は、（絶対パスは長いため）相対パスを使うことが多いです。

　余談ですが、相対パスは現在の位置から見て目的のファイルがある位置を記述する方法で、絶対パスは目的のファイルまでのパスをすべて記述する方法です。今回のようにファイルを連携する場合は、（絶対パスは長いため）相対パスを使うことが多いです。

　1-2-2. JavaScriptのコードの解説

　次に、JSファイルの解説に入っていきます。

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

　まず、handsという配列を宣言しています。配列の中には、グー,チョキ,パーの文字列が入っています。この配列の構成から、これから、0はグー, 1はチョキ, ２はパーと手を数で表すことができます。

　2行目では、com_handsという変数を宣言しています。この変数には、0,1,2のどれかをランダムで代入します。そして、ブラウザに表示するときは、hands[com_hands]として、表示します。こうすることで、簡単に手を表すことができます。

function judge(p_hands)

　judge関数を作っていきます。この関数は、ブラウザ上のボタンが押されたときに動作します。（先ほど解説した、HTMLのinputタグ）引数のp_handsにはプレイヤーの手（0,1,2）が代入されます。

<input type="button" value="手の種類" onclick="judge(手の番号)">

　HTMLのコードを再掲しました。onclickタグについてもう少し詳しく知りたいという方は、こちらやこちらの記事を参考にして見て下さい。

　では、JSのjudge関数の解説に移ります。

    com_hands = Math.floor( Math.random() * 3);

    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 --";

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

　「com_hands = Math.floor( Math.random()*3);」で、コンピュータの手をランダムで生成しています。小さなことですが、この処理をjudge関数内においているため、ボタンを押すたびにコンピュータの手が変わるようになっています。

　「if(hands_num === com_hands) result_text = “– Draw –“;」では、プレイヤーの手と、コンピュータの手がおなじであれば、ドローと表示する処理です。

　以下は、上と同じように、プレイヤーが勝つ場合の数の並びを書き、「You win」と表示します。また、それら以外の場合、プレイヤーの負けのため「You lose」と表示します。

　「document.getElementById」から、HTMLタグを取得し、結果と手を表示しています。

　以上でコードの解説を終わります。

まとめ

　どうだったでしょうか？じゃんけんゲームは作れましたか？コピペでいいので自分のPCで実行させて見て下さい。それだけで、とても達成感が得られると思います。

　ポイントは、0, 1, 2で手が表せることです。あのような書き方は、他のプログラムを書く時にもよく使いますので頭の片隅にでも置いておいてください。

　最後まで読んで頂きありがとうございました。ぜひ、他の記事も読んで見て下さい～。

コメント

タイトルとURLをコピーしました