ゲームプログラミング(○×ゲーム)のコード解説

○×ゲームのコードで使われている高校数学の解説をします。
まずはゲーム部分のコードを掲載します。
プログラミング言語は「JavaScript」です。

○×ゲームのコード


<head>
  <style>
    .cell {
      width: 100px;height: 100px;
      font-size: 60pt;text-align: center;
    }
  </style>
  <script>
    var count=0;
    function clickMe(e){
      if(count++%2==0){
        e.textContent="○";
      }else{
        e.textContent="×";
      }
    }
  </script>
</head>
<body>
        <table border="1">
          <tr>
          <td class="cell" onclick="clickMe(this);"></td>
          <td class="cell" onclick="clickMe(this);"></td>
          <td class="cell" onclick="clickMe(this);"></td>
          </tr><tr>
          <td class="cell" onclick="clickMe(this);"></td>
          <td class="cell" onclick="clickMe(this);"></td>
          <td class="cell" onclick="clickMe(this);"></td>
          </tr><tr>
          <td class="cell" onclick="clickMe(this);"></td>
          <td class="cell" onclick="clickMe(this);"></td>
          <td class="cell" onclick="clickMe(this);"></td>
          </tr>
        </table>
</body>
        

コードをざっくり解説

  • コードの真ん中から下の方の<table>~</table>で○×ゲームの表を作っています。
  • コードの上の方の<style>~</style>で表を整形しています。
  • コードの真ん中から上の<script>~</script>がこのゲームプログラミングの心臓部分です。

数学 in Programming

高校数学を含むゲームプログラミング部分を抜粋します。


  <script>
    var count=0;
    function clickMe(e){
      if(count++%2==0){
        e.textContent="○";
      }else{
        e.textContent="×";
      }
    }
  </script>
        
  • 「var count=0;」で,countという0から始まる変数を作っています。
    ※プログラミングの世界では,0,1,2,3…のように最初が1ではなく0から始まります。
  • 「function clickMe(e)」で,clickMeに対して以下の処理を登録しています。
  • 「count++%2==0」は,「count++」と「%2」,「==0」に分けてみていきましょう。
    • まず「count++」ですが,++は「変数の値を1ずつ増やす」という処理をします。
    • 次の「%2」は,2で割った余りを出す計算です。例えば,5%2は1,6%2は0です。
    • 最後の「==0」は,0ならtrueを返し,0意外ならfalseを返す処理をします。
    • まとめると,「count++%2==0」は「countを1ずつ増やしながら,2で割った余りが0かどうか判定している。」という処理をしています。
  • count++%2==0がtrueのとき,つまりcountが2で割り切れる0,2,4,6,8回目のクリックときマスの中に「○」を表示します。
  • count++%2==0がfalseのとき,つまりcountが2で割り切れない1,3,5,7,9回目のクリックときマスの中に「×」を表示します。

プログラミング的思考

上のプログラミングでは,2で割った余りの変数のときのクリックについて〇か×を振り分ける,という工夫をしています。
これにより,コードの行数がかなり少なくなっています。

もちろん,愚直に1回目(プログラミングの中では0回目)は○,2回目は×,3回目は○,……と処理しても○×ゲームを行うことは可能です。
2で割った余りを用いることのよさは何でしょうか?

・・・・・・

1つはコードを少なくできることです。

もう1つは,マス目が9個から変更になったときにも対応できることです!

ゲームではストーリーが進むにつれて難易度が上がることがよくありますが,各ステージで処理を変更するのは大変ですね。
「○と×を交互に表示する」ことを,「2で割った余りで○と×を振り分ける」ことに読み替えられるかどうか?
これがプログラミング的思考です。

今回のゲームプログラミングでの数学的要素は「2で割った余り」だけなので,高校数学ではないと思いますが,そこはご愛嬌ということで^^;

参考書籍

次の本を参考にしました。


田中賢一郎(2017)『ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版]』インプレスR&D

また,当サイトのHTML&CSSは次の本を参考にしました。


服部雄樹(2017)『HTML&CSSとWebデザインが1冊できちんと身につく本』技術評論社

HOMEへ戻る

inserted by FC2 system