読者です 読者をやめる 読者になる 読者になる

JavaScript② じゃんけんゲーム

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

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

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

 

 

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

f:id:shika16:20170126025341j:plain

 

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

 

f:id:shika16:20170126025447j:plain

 

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

 

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

f:id:shika16:20170126025718j:plain

 

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

 

f:id:shika16:20170126025817j:plain

 

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

 

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

f:id:shika16:20170126025940j:plain

 

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

 

f:id:shika16:20170126030125j:plain

 

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

 

f:id:shika16:20170126030142j:plain

 

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

 

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

f:id:shika16:20170126030256j:plain

 

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

 

f:id:shika16:20170126030434j:plain

 

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

 

f:id:shika16:20170126030529j:plain

 

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

 

5.おわりに

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