花札ゲームの作り方 - プログラム構成

まずは全体のプログラム構成を考えたいと思います。
以下の構成で作成してみます。

Hanafuda
│ index.html
│
├─assets
│ └─img
│  │ backFuda.png
│  │ background.jpg
│  │
│  └─fuda
│   10.jpg
│   11.jpg
│   12.jpg
│   13.jpg
│   20.jpg
│   21.jpg
│   22.jpg
│   23.jpg
│   30.jpg
│   31.jpg
│   32.jpg
│   33.jpg
│   40.jpg
│   41.jpg
│   42.jpg
│   43.jpg
│   50.jpg
│   51.jpg
│   52.jpg
│   53.jpg
│   60.jpg
│   61.jpg
│   62.jpg
│   63.jpg
│   70.jpg
│   71.jpg
│   72.jpg
│   73.jpg
│   80.jpg
│   81.jpg
│   82.jpg
│   83.jpg
│   90.jpg
│   91.jpg
│   92.jpg
│   93.jpg
│   100.jpg
│   101.jpg
│   102.jpg
│   103.jpg
│   110.jpg
│   111.jpg
│   112.jpg
│   113.jpg
│   120.jpg
│   121.jpg
│   122.jpg
│   123.jpg
│
├─lib
│   phaser.min.js
│
└─src
│   game.js
│
├─GameObjects
│   Cpu.js
│   Effect.js
│   Fuda.js
│   Player.js
│
└─States
Main.js

では一つずつ説明していきます。

1. ./lib/phaser.min.js
phaserのライブラリです。minの方を使用することにします。

2. ./src/game.js
最初に呼ばれるプログラムとします。

3. ./States/Main.js
画面制御に関する処理を行うクラスとします。

4. ./GameObjects/Fuda.js
札の情報を管理するクラスです。

5. ./GameObjects/Player.js
プレイヤーに関する情報を格納するクラスとします。

6. ./GameObjects/Cpu.js
コンピュータの札取得に関するアルゴリズムを記述します。

7. ./GameObjects/Effect.js
画面のエフェクト処理を行うクラスとします。

8. ./assets/fuda/10.jpg ～ 123.jpg
花札の画像を格納します。
花札は1月～12月までありますが、それぞれの月は４枚構成です。
つまり、1月は10.jpg, 11.jpg, 12.jpg, 13.jpg 、2月は21.jpg, 22.jpg, 23.jpg, 24.jpg ・・・12月は120.jpg, 121.jpg, 122.jpg, 123.jpg
というファイル名で構成するものとします。

9. ./assets/img/backFuda.png
花札の裏面の画像です。

10. ./assets/img/background.jpg
メインの背景画像です。花札ということで畳のイメージにします。

11.index.html
画面を表示するhtmlです。