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

2021年10月1日金曜日

javascript ぷよぷよ

t f B! P L

スポンサーリンク

はじめに

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

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

ゲームの完成イメージ

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

enter image description here

<操作方法>

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

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

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

開発ツール

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

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

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

enter image description here

  • ファイルを解凍して、必要なファイル ( 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” のインストールをクリックします。
    enter image description here
  • インストール完了後、VS Code を再起動します。
  • 再起動後、画面右下の方を確認し、[Go Live]という表示があればOKです。
  • この[Go Live]のボタンをクリックすると、ブラウザが起動し、現在エディタで開いているファイルの実行結果を確認できます。

enter image description here

スポンサーリンク

ファイル構成

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

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

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

enter image description here

おわりに

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

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ