花札ゲームの作り方 – 札を表示させる
まずは、phaserエンジンを使って花札を表示させてみたいと思います。
一枚ずつの札はFudaEntityクラス、全部の札を管理するのがFudaクラスとするので 以下のクラス構成で作成しようと思います。
この構成で作成したソースを以下に置きますのでとりあえずダウンロードして ローカルで解凍してください。
ダウンロード:template一式
Windows & Visual Studio Codeを想定していますが、C:\Hanafuda_devフォルダに解凍した場合の実行方法は以下の通りです。
(1) フォルダを開く
Visual Studio Codeを起動し、「ファイル->フォルダーを開く」を選択します。
(2) index.htmlを開く
(3) Preview on Web Serverを実行する
- 拡張機能である「Preview on Web Server」が導入されている場合、ショートカットキー「Ctrl + Shift + I」でブラウザ実行することができます。
うまく表示されたでしょうか?
次は、それぞれのプログラムに記載されている内容を説明していきます。
花札ゲームの作り方 - プログラム構成
まずは全体のプログラム構成を考えたいと思います。
以下の構成で作成してみます。
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月までありますが、それぞれの月は4枚構成です。
つまり、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です。
花札ゲームの作り方 - 準備
今回はとりあえずjavascriptベースで作成してみようと思います。
フレームワーク javascriptのゲームフレームワークはいくつかありそうですが、
kiwiを使用してみようと思います。 Phaser.jsが頻繁に更新されているようなので、Phaser.jsを使用することにします。 phaser.io素材 花札のゲームを作りには花札の札が必要なので、フリーで公開して頂いている素材を使わせて頂こうと思います。 www.pixiv.net
エディタ エディタはVisual Studio Codeを使用してみようと思います。 code.visualstudio.com
Phaser.jsのフレームワークを動作する際、Webサーバが必要となるため簡易的に動作させることができるVisual Studio Codeの拡張機能である「Preview on Web Server」を導入します。
導入手順は以下の通りです。
(1) 拡張機能の設定画面を表示します
サイドバーが表示されていない場合は、表示 -> 拡張機能 を選択します。
(2) Preview on Web Serverを検索します
(3) インストールします
音楽や効果音については時間があれば追加します。
花札ゲームの作り方 - はじめに
過去にFlashとYahoo widgetで作成し公開して頂いたことがあります。
Flash版はこちら。
※ソースはどこかに行ってしまった・・・
widget版のソースは奇跡的に残っていたので、このソースを再構築していこうと思います。
まずは、花札こいこいについて説明します。
① 親の決め方 まずは親決めです。裏になった2枚の札のどちらかを選びます。 小さい月の札をめくった方が親となります。
② ゲームの遊び方 親からゲームを開始します。 手札から札を一枚選び、月が合う札を取得します。 合う札がない場合は、場に一枚捨てます。 その次に山札を一枚めくり、合う札があれば取得し、 合う札がない場合は、場に捨てます。 取得した札で役が完成すれば、「こいこい」または「勝負」することができます。
③ 「こいこい」または「勝負」について ・「勝負」をすると、出来役にあった得点を得ることができます。 ・「こいこい」をすると、ゲームを続行することができ、つぎに「勝負」したときに倍の 得点を得ることができます。ただし、相手が「勝負」した際にも得点が倍になってしまう リスクがあります。 ・「こいこい」後、新たに役が付かない場合は「勝負」することができません。
④その他、主なルール ・五回戦勝負です。 ・勝者は親となります。 ・勝敗が付かない場合は、親権となります。
(2) 役と得点一覧 ・五光 :10文 ・四光 : 8文 ・雨四光 : 7文 ・三光 : 5文 ・花見で一杯: 5文 ・月見で一杯: 5文 ・猪鹿蝶 : 5文 ・赤短 : 5文 ・青短 : 5文 ・タネ : 5文 ・タン : 5文 ・カス : 5文