カジュアルゲームデザイン

カジュアルゲームのプログラミングについて紹介していきます

花札ゲームの作り方 – 札を表示させる

まずは、phaserエンジンを使って花札を表示させてみたいと思います。

一枚ずつの札はFudaEntityクラス、全部の札を管理するのがFudaクラスとするので 以下のクラス構成で作成しようと思います。

http://devit.work/wp-content/uploads/2017/12/dev1.png

この構成で作成したソースを以下に置きますのでとりあえずダウンロードして ローカルで解凍してください。

ダウンロード:template一式

Windows & Visual Studio Codeを想定していますが、C:\Hanafuda_devフォルダに解凍した場合の実行方法は以下の通りです。

(1) フォルダを開く

  • Visual Studio Codeを起動し、「ファイル->フォルダーを開く」を選択します。 http://devit.work/wp-content/uploads/2017/12/dev2.png

  • 先ほどの圧縮ファイルを解凍したフォルダを選択します。以下の例は「C:\Hanafuda_dev」に解凍した場合です。 http://devit.work/wp-content/uploads/2017/12/dev3.png

(2) index.htmlを開く

  • サイドバーにフォルダ構成が表示されるので、その中からindex.htmlをダブルクリックして表示します。 http://devit.work/wp-content/uploads/2017/12/dev4.png

(3) Preview on Web Serverを実行する

  • 拡張機能である「Preview on Web Server」が導入されている場合、ショートカットキー「Ctrl + Shift + I」でブラウザ実行することができます。 http://devit.work/wp-content/uploads/2017/12/dev5.png

うまく表示されたでしょうか?

次は、それぞれのプログラムに記載されている内容を説明していきます。

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

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

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ベースで作成してみようと思います。

  1. フレームワーク javascriptのゲームフレームワークはいくつかありそうですが、kiwiを使用してみようと思います。 Phaser.jsが頻繁に更新されているようなので、Phaser.jsを使用することにします。 phaser.io

  2. 素材 花札のゲームを作りには花札の札が必要なので、フリーで公開して頂いている素材を使わせて頂こうと思います。 www.pixiv.net

  3. エディタ エディタは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版はこちら。

ネットDEゲーム

※ソースはどこかに行ってしまった・・・

widget版のソースは奇跡的に残っていたので、このソースを再構築していこうと思います。

まずは、花札こいこいについて説明します。

① 親の決め方 まずは親決めです。裏になった2枚の札のどちらかを選びます。 小さい月の札をめくった方が親となります。

② ゲームの遊び方 親からゲームを開始します。 手札から札を一枚選び、月が合う札を取得します。 合う札がない場合は、場に一枚捨てます。 その次に山札を一枚めくり、合う札があれば取得し、 合う札がない場合は、場に捨てます。 取得した札で役が完成すれば、「こいこい」または「勝負」することができます。

③ 「こいこい」または「勝負」について ・「勝負」をすると、出来役にあった得点を得ることができます。 ・「こいこい」をすると、ゲームを続行することができ、つぎに「勝負」したときに倍の 得点を得ることができます。ただし、相手が「勝負」した際にも得点が倍になってしまう リスクがあります。 ・「こいこい」後、新たに役が付かない場合は「勝負」することができません。

④その他、主なルール ・五回戦勝負です。 ・勝者は親となります。 ・勝敗が付かない場合は、親権となります。

(2) 役と得点一覧 ・五光   :10文 ・四光   : 8文 ・雨四光  : 7文 ・三光   : 5文 ・花見で一杯: 5文 ・月見で一杯: 5文 ・猪鹿蝶  : 5文 ・赤短   : 5文 ・青短   : 5文 ・タネ   : 5文 ・タン   : 5文 ・カス   : 5文

花札の歴史については、任天堂のホームページに詳しいことが書いてあるのでそちらを参照してください。

花札の歴史・遊び方

このブログについて

私は、

ネットDEゲーム

の管理人です。主にカジュアルゲームを公開していますが、あれから10年くらいの月日が経ちました。

しばらく放置していましたが、そろそろリニューアルをしたいと思い当時flashで作成したソースを別な言語で作り直す過程を公開していきます!!