enchant.js で ぷよぷよ(風）なゲームを作ってみた

スポンサーリンク

はじめに

HTML + Javascirptでゲーム開発が出来る、enchant.js を使って、
ぷよぷよ(風?）なゲームを作ってみました。

作ってみた感想として、enchant.js は簡単な開発環境で試せるし、
フレームワークとしての機能も充実しているため、
簡単なコードで楽にゲームが作れると思います。

ゲームの完成イメージ

完成イメージは、こんな感じです。
最低限の実装しかしてません ^^;

<操作方法>

キーボード	動作
↑↓←→ キー	ぷよを上下左右に移動します 上にも移動出来ちゃいます ^^;
Space キー	ぷよを回転させます
Enter キー	ぷよを一番下まで落として、配置を確定します。

ちなみに、通常はぷよが上から徐々に落ちてきますが、
このゲームでは落ちません！！（超甘口です）

デモ用として、こちらのページからプレイ出来るようにしています。

開発ツール

テキストエディタと開発用WebサーバがあればOKです。
今回は以下のツールを使用しています。

• Visual Studio Code (VS Code) ※コードエディタ
• Live Server (VS Codeの拡張機能で、簡単にWebサーバが起動できる)

まずは enchant.js のダウンロード

• 公式サイトのダウンロードリンクより zipファイルをダウンロードします
  http://enchantjs.com/ja/download-ja/

• ファイルを解凍して、必要なファイル ( enchant.js/map0.png ) を取り出します。

解凍先のフォルダ/ 
　├ images/ 
　│　　└ map0.png      ←これと
　│　　└ gameover.png      ←これと
　│　　└ ・・・
　├ build/
　│　　└ enchant.js    ←これが必要です
　│　　└ plugins
　├ doc/
　・・・

Visual Studio Code のインストール

普通にインスートルしてください (適当 ^^;)

VS Code に Live Server を導入する

Live Server ブラウザが自動リロードするローカルWebサーバで、
VS Codeの拡張機能として提供されています。
ファイルの内容を変更すると、ブラウザが自動リロードする便利な奴です。

インストール手順

• 左側のメニューアイコンより [拡張機能]を選択します
• 検索窓に “Liver Server” と入力します。
• 検索結果エリアに表示された “Live Server” のインストールをクリックします。
  
• インストール完了後、VS Code を再起動します。
• 再起動後、画面右下の方を確認し、[Go Live]という表示があればOKです。
• この[Go Live]のボタンをクリックすると、ブラウザが起動し、現在エディタで開いているファイルの実行結果を確認できます。

スポンサーリンク

ファイル構成

今回作成するゲームは、以下のようなファイル構成になってます。
また、完成後のコードは、 GitHubに公開しています。

プロジェクトルート/  
　├ images/
　│　　└ puyopuyo2.png      ぷよの素材画像
　│　　└ map0.png           ゲーム盤背景の素材画像
　├ js/
　│　　└ GameContext.js     ゲーム全体の状態を管理するコンテキストクラス
　│　　└ GameController.js  Keybord操作に応じて、ゲームを操作するクラス
　│　　└ GameMap.js         ゲーム盤背景および、ぷよの配置管理を行うクラス
　│　　└ Puyo.js            １つのぷよを管理するクラス
　│　　└ PuyoPair.js        落下用の引っ付いた２つのぷよを管理するクラス
　│　　└ RensaAnimation.js  同じ色が４つ以上揃った時や連鎖の時の、ぷよを消すアニメーションを行うクラス
　├ enchant.js             ダウンロードした enchant.js 本体
　├ app.js　　　　          メインのJavascript
　├ index.html             ゲーム画面を表示するHTML

クラスの関連は以下のイメージです。

おわりに

だいたい１日ぐらいで、ここまでの機能を作る事ができました。
簡単なものであれば、enchant.js でサクッと作れて楽しいです。
※ 逆に、凝ったゲームや、動きの激しい物を enchant.js で作るのは難しいかもです。
コードの詳細な内容については、今後記載してい行きたいと思います。