JavaScript② じゃんけんゲーム

前回記事に引き続き、吉岡直人ほか『非エンジニアのためのプログラミング講座』(リックテレコム、2015年)を参考にじゃんけんゲームを作っていきます。

非エンジニアのためのプログラミング講座

1.じゃんけんゲームを作る

まずはこちらのコードですが、コンピュータ側(相手側)は常にグーという設定で、ユーザー側はランダムに「グー」「チョキ」「パー」のいずれかを選択することになります。しかし、実際これをWebページにて表示すると・・・

上記のコードは「あいこ」の場合しか想定していないため、このように、ランダムで選択されたものが「グー」(あいこ)でない限りおかしな表示になってしまいます。これを解消するために、「勝ち」「負け」「あいこ」全ての場合を想定したコードを書き加えていきます。

2.すべての場合を想定したじゃんけん

ユーザー側がランダムに選択したものが「グー」「チョキ」「パー」のどれであっても勝敗が決まるよう、条件分岐のコードを書き加えていきます。これを実際にWebページにて表示すると・・・

この場合ユーザーは「チョキ」を選択したことになりますが、先ほどとは違いきちんと勝敗が表示されるようになりました。続いて、このゲームの開始を「ボタンクリック」に変えるべくコードを加えていきます。

3.ボタンをクリックするとゲーム開始

<input>タグに「onClick」プロパティを加え、ボタンをクリックすることでじゃんけんゲームが開始するようにします。

「ゲームにチャレンジ」ボタンをクリックすると・・・

ゲームが開始され、勝敗が表示されました。続いて、この勝敗結果をポップアップウィンドウにて表示するようコードを書き加えます。

4.勝敗結果をアラートで表示

関数「document.write」を、「alert」に書き換えて勝敗結果をアラートにて表示するようにします。こちらをWebページにて表示し、先ほどと同様ボタンをクリックしてゲームを開始すると・・・

このように、ポップアップのウィンドウが出てきて勝敗結果が表示されました。

「OK」をクリックするとアラートは消え、ユーザーの選んだ選択肢のみが残ります。

5.おわりに

前回記事に引き続きJavaScriptを用いたコードを書きましたが、初めて触れるものでもあったため新鮮でした。今回は基礎中の基礎に触れましたが、再来月は現在制作しているHPにJavaScriptを取り入れたいと考えているため、実際にWebサイトにおいて使うJavaScriptについてより勉強をしていきたいと思います。