JavaScriptプログラミング

【ゲームプログラム入門】JavaScriptで作るじゃんけん

JavaScript
2023.02.17

プログラミングをはじめる初心者が、最初の一歩で挫折することはとても多いです。

  • そもそもどんなプログラム言語を学ぼう？
  • 開発環境を作るのが大変そうだ
  • 結局何から手をつけて良いのかわからない

そこでこの記事では、事前準備なしですぐ使えるHTMLとJavaScriptで、簡単なゲームの作り方を学んでいきます。最初は文法を知らなくてOKです。実際に動くものを作ることがプログラミング上達の近道です。

作ったゲームはブラウザで手軽に遊べます。ゲームを完成させて、友人や家族に見せて自慢しましょう！

JavaScriptで作るじゃんけんゲームの完成形

最初にゲームとソースコードを共有します。

ゲームの遊び方は簡単です。「スタート」のあとに「✊」「✌️」「🖐」を押すと、勝ち負けが表示されます。これだけです。

じゃんけんゲームを遊んでみる

HTMLとJavaScriptのソースコード

<html>
<head>
    <script>
        const FPS = 4; // 1秒間に何回相手の手を更新するか
        const HANDS = ['✊', '✌️', '✋']; // 手の配列
        let lastRivalHandIndex = 0; // 最新のライバルの手をあらわす配列のインデックス
        let gameLoopInterbalId = null; // インターバル更新の Id
        
        // 「スタート」が押されたあとに実行するゲームループ
        // ライバルの手を指定の FPS で順番に変えていく
        function gameLoop() {
            const handIndex = (lastRivalHandIndex + 1) % 3;
            lastRivalHandIndex = handIndex;
            document.getElementById("RivalHand").innerHTML = HANDS[handIndex];
        }
        
        // 「スタート」が押された際に実行するゲームの初期化
        function start() {
            // ボタンの有効/無効を設定
            document.getElementById("startButton").disabled = true;
            document.getElementById("rockButton").disabled = false;
            document.getElementById("scissorsButton").disabled = false;
            document.getElementById("paperButton").disabled = false;
            
            // プレイヤーの手と結果表示を空白に
            document.getElementById("PlayerHand").innerHTML = '　';
            document.getElementById("Result").innerHTML = '';
            
            // ゲームループ開始
            gameLoopInterbalId = setInterval(gameLoop, 1000 / FPS);
        }
        
        // ✊」「✌️」「✋」が押された際の判定と結果表示
        function janken(playerHand) {
            // ゲームループを停止
            clearInterval(gameLoopInterbalId);
            
            // プレイヤーの手を表示
            document.getElementById("PlayerHand").innerHTML = playerHand;
            
            // ボタンの有効/無効を設定
            document.getElementById("startButton").disabled = false;
            document.getElementById("rockButton").disabled = true;
            document.getElementById("scissorsButton").disabled = true;
            document.getElementById("paperButton").disabled = true;
            
            const rivalHand = HANDS[lastRivalHandIndex];
            let result = "";

            //　勝ち負けの判定
            if (playerHand === rivalHand) {
                result = "あいこです。";
            } else if(playerHand === '✊' && rivalHand === '✌️' ||
                      playerHand === '✌️' && rivalHand === '✋' ||
                      playerHand === '✋' && rivalHand === '✊') {
                result = "あなたのかちです。";
            } else {
                result = "あなたのまけです。";
            }            

            //　結果を表示
            document.getElementById("Result").innerHTML = result;
        }
    </script>
</head>
<body>
    <div align="center">
        <h2>じゃんけんゲーム</h2>
        「スタート」をおしたあとに、<br>「✊」「✌️」「✋」をえらんでね。<br>
        <br>
        <table border="1" style="border-collapse: collapse">
            <tr>
                <td align="center"><h2>　あなた　<div id="PlayerHand">✊</div></h2></td>
                <td align="center"><h2>　あいて　<div id="RivalHand">✊</div></h2></td>
            </tr>
        </table>
        <br>
        <button id="startButton" onclick="start();"><h2>スタート</h2></button>
        <button id="rockButton" onclick="janken('✊');" disabled="true"><h2>✊</h2></button>
        <button id="scissorsButton" onclick="janken('✌️');" disabled="true"><h2>✌️</h2></button>
        <button id="paperButton" onclick="janken('✋');" disabled="true"><h2>✋</h2></button>
        <br><br>
        <div id="Result"></div>
    </div>
</body>
</html>

JavaScriptによるじゃんけんゲームの作り方

パソコンの準備

HTMLとJavaScriptの開発と実行のためには、パソコンが必要です。WindowsでもMacでも構いません。

iPadなどのタブレットでもできなくはないですが、画面のサイズや外部キーボードの必要性などを考慮すると、パソコンの方がおすすめです。

初心者はそっくりそのまま真似るのが重要

まずは以下をやってみてください。

  1. 「janken.html」ファイルを作成
  2. テキストエディタでファイルを開き、上記のコードをそのまま書く
  3. 「janken.html」をダブルクリックして実行

これだけです。成功したらブラウザでじゃんけんゲームを遊べます。

最初は下手に手を加えず、そのまま真似ることが重要です。何もわからない状態でアレンジしようとすると、バグってよくわからない状態におちいる可能性があります。

写経で大丈夫なので、そっくりそのまま書いてみてください。動いてから、構造を把握するという順番が良いです。

もちろん、ある程度プログラムを学習済みの人は、アレンジしていただいて全然OKです。

わからないことを検索する癖をつけよう

プログラムの解説の前に、心構えを。

HTMLのタグやJavaScriptの文法でわからないことがあれば、どんどんググりましょう。ググれば大抵のものは調べられます。テストではないので、あらかじめ覚えておく必要はないんです。わからないことがあるたびに、どんどん検索していきましょう。

HTMLの解説

ここから要点を解説します。

HTMLは「HyperText Markup Language」の略で、WEBページを作成するための言語です。

タグで囲んだ部分に特別な意味を持たせられます。タグは開始と終了があり、例えばリンクは次ように書きます。

<a href=“https://meganeprog.com”>リンク</a>

HTMLはタグを使いこなせるようになれば上達します。しかし単純にはいかないものが存在します。それがCSSとJavaScriptです。

CSSは今回未使用なので省略します。簡単に説明だけすると、CSSはWebページの文字の色や大きさなどの装飾やスタイルを設定する言語です。

<script> タグの中に書かれているものがJavaScriptです。ファイルを分けることが多いですが、今回はシンプルさを優先してHTMLに埋め込んでいます。

JavaScriptの解説

HTMLの「スタート」ボタンが押されたらゲームを開始する

HTML内の button の onclick にJavaScriptで定義した関数名を指定すると、ボタンがクリックされたときに関数が呼ばれます。ここでは、「スタート」ボタンが押されたときに、ゲームの初期化を行う start 関数を呼んでいます。

関数とは？

関数はプログラムの一連の処理を、別のプログラムから呼び出すための仕組みです。HTMLとJavaScriptは相互作用ができるので、関数を作ることで、HTMLからJavaScriptの処理を呼び出せるようになります。

<button id="startButton" onclick="start();">

初期化関数の中身

// 「スタート」が押された際に実行するゲームの初期化
function start() {
    ... 省略 ...
}

start 関数では、主に２つのことを行なっています。

１つ目はHTMLのボタンやテキストを初期状態に設定するです。

// ボタンの有効/無効を設定
document.getElementById("startButton").disabled = true;
document.getElementById("rockButton").disabled = false;
document.getElementById("scissorsButton").disabled = false;
document.getElementById("paperButton").disabled = false;
            
// プレイヤーの手と結果表示を空白に
document.getElementById("PlayerHand").innerHTML = '　';
document.getElementById("Result").innerHTML = '';

document.getElementById は、HTMLで id のついたパーツから、特定の名前のパーツを取り出します。

disabled はボタンの無効設定です。true にするとボタンが無効に、false にするとボタンが有効になります。無効設定を有効にするって、紛らわしいですね（笑）。ボタンが何度も押されることを防止するために設定しています。

innerHTML は、開始タグから終了タグに挟まれたHTMLをJavaScriptから直接書き換えるのに使用します。たとえば <div> から </div> に挟まれた部分です。ここでは空白にしています。

２つ目はゲームループの実行です。

// ゲームループ開始
gameLoopInterbalId = setInterval(gameLoop, 1000 / FPS);

setInterval は gameLoop 関数を 1000 / FPS おきに呼び出すために利用します。停止させるためには Id を保存しておく必要があり、gameLoopIntervalId に保存しています。

FPSとは？

第２引数で1000 / FPSを指定しています。FPSとはFrame Per Secondの略で、１秒間に何回処理を実行するかをあらわすものです。const FPS = 4;のとおり、FPSの初期値は4です。つまり、1000 / 4 = 250 で、250ミリ秒ごとに１度gameLoopが呼ばれます。

ゲームループ関数の中身

// 「スタート」が押されたあとに実行するゲームループ
// ライバルの手を指定の FPS で順番に変えていく
function gameLoop() {
    const handIndex = (lastRivalHandIndex + 1) % 3;
    lastRivalHandIndex = handIndex;
    document.getElementById("RivalHand").innerHTML = HANDS[handIndex];
}

ゲームループは非常に単純です。handIndex を 0 から 2 の範囲で順番に切り替えています。(lastRivalHandIndex + 1) % 3 の部分です。前回のインデックスに 1 を足して 3 で割った余りを求めることで、0 から 2 の範囲になります。

そして手の絵文字の入った HANDS 配列にインデックスを指定して、ひとつの絵文字を取り出しています。取り出した絵文字はライバルの手として画面に表示します。

「✊」「✌️」「🖐」のボタンが押されたら結果を判定する

button の onclick で呼び出す関数には引数を与えることができます。ここでは✊という絵文字を渡しています。文字を渡すときには、「✊」ではなく「’✊’」と書きます。

<button id="rockButton" onclick="janken('✊');" disabled="true">

じゃんけん判定の中身

こちらが判定の関数です。

// ✊」「✌️」「✋」が押された際の判定と結果表示
function janken(playerHand) {
    ... 省略 ...
}

まずはゲームループを停止します。停止しないと、ライバルの手が更新され続けてしまいます。

// ゲームループを停止
clearInterval(gameLoopInterbalId);

次にプレイヤーが選んだ手を表示します。

// プレイヤーの手を表示
document.getElementById("PlayerHand").innerHTML = playerHand;

続いてボタンの有効/無効を切り替えます。

// ボタンの有効/無効を設定
document.getElementById("startButton").disabled = false;
document.getElementById("rockButton").disabled = true;
document.getElementById("scissorsButton").disabled = true;
document.getElementById("paperButton").disabled = true;

そして結果を判定します。同じ手ならあいこです。プレイヤーが✊かつライバルが✌️、プレイヤーが✌️かつライバルが🖐、プレイヤーが🖐かつライバルが✊のときに勝ちです。それ以外は負けです。

数値を使って判定のプログラムをもっと短くすることもできますが、わかりやすさを優先しています。わかりやすいプログラムを書くことは、上級者も常に意識すべきです。

//　勝ち負けの判定
if (playerHand === rivalHand) {
    result = "あいこです。";
} else if(playerHand === '✊' && rivalHand === '✌️' ||
          playerHand === '✌️' && rivalHand === '✋' ||
          playerHand === '✋' && rivalHand === '✊') {
    result = "あなたのかちです。";
} else {
    result = "あなたのまけです。";
}

最後に結果を表示します。

//　結果を表示
document.getElementById("Result").innerHTML = result;

プログラムを自分なりにアレンジしてみよう

相手の手の切り替えを速くする

const FPS = 4; // 1秒間に何回相手の手を更新するか

数字の4を変更することで、相手の手の切り替え速度を変更できます。先に説明したとおり、FPSとは1秒間に更新する回数をあらわします。1にすると1秒に1回の更新、10にすると1 秒に10回の更新です。数字が大きいほど、更新速度が上がります。

テレビゲームは、30FPSや60FPSで動作するものが多いです。PCゲームだと120FPS以上もあります。ただしこのじゃんけんゲームでは、30FPSぐらいまでをおすすめします。じゃないと目で追えなくなります😅

相手の手をランダムに変える

相手の手は、グー、チョキ、パーの順番に切り替わっています。目押しができますね。次の手をランダムに切り替えることで、目押しを封じて、運ゲーに変更できます。ランダムの使い方は、「JavaScript 乱数」でググってみてください。

画像を使ってみる

このじゃんけんゲームでは、絵文字を使っています。絵文字を画像に変えることで、見栄えを良くできると思います。「JavaScript 画像 切り替え」でググって、実装方法を調べてみてください。

まとめ

じゃんけんゲームは正しく動きましたか？最初は文法がわからなくても気にしなくて大丈夫です。

私もいくつもの小さなプログラムを作ってみて、徐々に文法を理解していきました。ググれば大抵のことは調べられるので、やり方がわからなければ、どんどんググってください。

慣れてきてもっと複雑なゲームを作ってみたいと思ったら、以下の記事も読んでみてください。

【ゲームサンプル】JavaScriptで作るリズムじゃんけん
「JavaScriptで脱初心者のために、少しだけ複雑なゲームを作ってみたい」という人を対象にしています。じゃんけんにタイミング要素を追加した、リズムじゃんけんというゲームを作りました。ゲームの作り方を解説します。
meganeprog.com
2023.05.09

それでは。

コメント