ゼロからはじめてみる日本語プログラミング「なでしこ」(16) じゃんけんゲームを作ってみよう


日本語プログラミング言語「なでしこ」公式サイト

筆者が海外旅行に行ったとき、地元の方とじゃんけんをする機会があり、呼び名こそ違うものの、同じルールで勝負できることが新鮮でした。そもそも、じゃんけんは、江戸時代から明治時代にかけて日本で成立し、近代に世界に広まったものだそうです。今回は、日本が世界に誇る「じゃんけん」ゲームのプログラムを作ってみましょう。

ちなみに、「じゃんけん」ですが、日本国内でも、かけ声が違ったり、三回勝負だったりと、いろいろなローカルルールがありますが、インドネシアでは、ゾウ・アリ・ヒトで勝負したり、マレーシアでは、太陽・鉄砲・鳥・石・水の五種類で勝負するとか。やはり、国によって、いろいろなバリエーションがあるようです。とは言え、今回は、日本の伝統的なルールの、じゃんけんをプログラミングしてみましょう。

日本語プログラミングでじゃんけんゲームを作ってみる

まずは最初に、以下のような完成版のプログラムを紹介します。このプログラムをコピーして、なでしこ3の簡易エディタに貼り付けて「実行」ボタンを押してみましょう。

 # --- HTMLを定義 --- (*1)
 「#nako3_div_1」に「
 <div style="padding:15px; border:1px solid silver;">
   <div id="janken">今から<br>じゃんけんしよう</div>
   <div id="hand">
     <button id="gu">グー</button>
     <button id="choki">チョキ</button>
     <button id="pa">パー</button>
   </div>
 </div>
 」をDOM_HTML設定

 # --- HTMLのスタイルを定義 --- (*2)
 文字スタイルは、{
   "font-size": "24px",
   "padding": "10px",
   "line-height": "35px"
 }
 「#janken」に文字スタイルをDOMスタイル一括設定。
 「#hand button」に文字スタイルをDOMスタイル一括設定。

 # --- イベントを設定 --- (*3)
 「#gu」をクリックした時には、0で勝負処理。ここまで。
 「#choki」をクリックした時には、1で勝負処理。ここまで。
 「#pa」をクリックした時には、2で勝負処理。ここまで。

 ●(自手で)勝負処理
   敵手＝3の乱数。
   結果は(敵手 - 自手 + 3) % 3
   もし、結果が0ならば、判定は「あいこ」
   もし、結果が1ならば、判定は「勝ち★」
   もし、結果が2ならば、判定は「負け」
   手説明＝["グー","チョキ","パー"]
   自手説明＝手説明[自手]
   敵手説明＝手説明[敵手]
   「#janken」に「自分は<b>{自手説明}</b><br>
 相手は<b>{敵手説明}</b> ... {判定}」をDOM_HTML設定。
 ここまで。

すると、以下のように、「グー」「チョキ」「パー」の三つのボタンが表示されます。

三つのボタンが表示されます

そこで、出したい手のボタンをクリックすると、じゃんけんの結果が画面に表示されます。何度でも遊べるので、出したい手のボタンを押して遊んでみてください。


じゃんけんを遊んでいるところ - 勝ち	じゃんけんを遊んでいるところ - 負け

プログラムの大半は、じゃんけんの画面を定義するHTMLと、それを装飾するスタイルの指定に費やされています。それでは、一つずつ処理を見ていきましょう。

プログラムの(＊1)では、じゃんけんの画面に使うHTMLを定義しています。基本的には、メッセージを表示するdivタグと、じゃんけんの手を選ぶための三つのボタン(buttonタグ)を表示するようにしています。

プログラムの(＊2)では、配置したじゃんけんの画面を見やすくするために、HTMLのスタイルを一括で設定しています。ここでは、特に、文字を大きく表示するように、font-sizeを24pxに設定している部分がポイントです。

プログラムの(＊3)の部分では、グー・チョキ・パーの各手のボタンをクリックした時に、関数「勝負処理」を実行するように指定します。そして、勝負処理が呼びだされたときには、ランダムに敵の手を決定し、自分の出した手と比較して、勝敗を表示します。

じゃんけんをプログラムで判定する方法

じゃんけんのルール自体は、関数「勝負処理」で定義されています。特に、勝敗判定をしているプログラムは、以下の4行で記述することができます。このプログラムですが、前提として、じゃんけんの手を数値で表しています。グーなら0、チョキなら1、パーなら2です。数値で表した場合のメリットとしては、簡単な計算によって、勝負の判定ができるという点にあります。

 結果は(敵手 - 自手 + 3) % 3
 もし、結果が0ならば、判定は「あいこ」
 もし、結果が1ならば、判定は「勝ち★」
 もし、結果が2ならば、判定は「負け」

計算でじゃんけんの勝敗判定ができるのは、面白いことと言えます。

しかし、もし、誰の目にも明らかなように、じゃんけんのルールを実装するなら、以下のように書き直すことができるでしょう。以下のプログラムでは、コンピューター同士がランダムに手を決定して、じゃんけんを行います。

 # --- 変数の初期化
 手説明＝["グー","チョキ","パー"]
 グーは0。チョキは1。パーは2。

 # --- 手を決定して勝負 --- (*1)
 自手＝３の乱数。
 敵手＝３の乱数。
 「自分は」&手説明[自手]と表示。
 「相手は」&手説明[敵手]と表示。
 自手と敵手で勝敗判定して表示。

 # --- 勝敗判定を行う関数 --- (*2)
 ●(自手と敵手で)勝敗判定とは
   もし、自手＝敵手ならば、「あいこ」を戻す。
   もし、（自手=グー)かつ(敵手=チョキ)ならば「勝ち」を戻す。
   もし、（自手=グー)かつ(敵手=パー)ならば「負け」を戻す。
   もし、（自手=チョキ)かつ(敵手=グー)ならば「負け」を戻す。
   もし、（自手=チョキ)かつ(敵手=パー)ならば「勝ち」を戻す。
   もし、（自手=パー)かつ(敵手=チョキ)ならば「負け」を戻す。
   もし、（自手=パー)かつ(敵手=グー)ならば「勝ち」を戻す。
 ここまで。

エディタで実行ボタンを押すと、以下のように、じゃんけんが行われて、結果が表示されます。

プログラムを実行したところ

プログラムの(＊1)の部分では、自手と敵手でランダムにじゃんけんの手を決定し、関数「勝敗判定」を呼びだします。

そして、プログラムの(＊2)の部分で、じゃんけんのメインロジックを記述しています。グー・チョキ・パーの各手の組み合わせごとに、勝敗を記述しています。じゃんけんの各手の組み合わせは、3×3=9通りありますが、あいこの場合の3パターンを一つの「もし」構文で記述できて、残りの6パターンを記述すれば、全ての手を処理できます。

まとめ

以上、今回は、じゃんけんをプログラミングする方法を紹介しました。

冒頭のプログラムでは、計算によって勝敗を決定し、末尾のプログラムでは、じゃんけんの全ての手を「もし」構文で振り分けるという手法でルールを記述しました。この二つのプログラムを比べてみると、じゃんけんのルールを記述する方法にも、いくつかのやり方があるというのが分かるのではないでしょうか。

答えを求める方法は、一つではないのです。もちろん、単純に、どちらの書き方が優れているかを判定することはできません。冒頭の書き方は、判定自体は一行なので、洗練されているように感じますが、誰にでもプログラムが読みやすく、じゃんけんのルールが分かりやすいのは、末尾の書き方です。人の数だけ、やり方があるでしょう。ぜひ、自分でじゃんけんのプログラムを作ってみてください。楽しくゲームを作ることは、プログラミングのレベルアップにつながります。