長々と説明を書いていますが、使ってみれば直感的にわかると思います。
要約すると。
- ブロック崩しを作れます。
- 背景は自由にセットできます。
- ブロックの破壊割合に応じて差分を表示することができます。
- クリア時にも報酬画像を設定できて、それは画像だけじゃなくてGIFを設定できます。
- 作ったゲームはHTMLで出力できます。自分のブログや同人活動などで有償無償問わず公開、配布してもOKです。その際にこのページを宣伝してくると嬉しいです(不利益を被っても自己責任で）
- エロもOK
- 要望があればこの記事かXまでコメントください。気が向けば修正実装します。
- 楽しめたら左下のボタンから珈琲を送ってくれると励みになります。
以降、長い説明書になります。必要なところだけかいつまんで読んでください。
プログラミング不要で、本格的なブロック崩しゲームを作って公開・配布できるWebアプリ「ブロック崩しエディター」を作りました。
作ったゲームは単一HTMLファイルとして出力されるので、ブログに埋め込んだり、同人活動で配布したり、自由に使えます。
どんなことができるの？
17種類のブロックを自由に配置
エディター上でマウスクリック・ドラッグするだけで、さまざまな効果を持つブロックを配置できます。
| ブロック | 効果 |
|---|---|
| ノーマル | 基本のブロック |
| ハード | HP2。1回では壊れない |
| 破壊不可 | 絶対に壊れない壁 |
| 爆発 | 壊すと周囲のブロックを巻き込んで爆発 |
| 多段ヒット | HP3。ダメージに応じて色が変化 |
| スピードUP | 当たるとボールが加速 |
| レインボー | 虹色に輝くブロック |
| ゴースト | 点滅して消えたり現れたりする |
| 移動 | 左右に動き続けるブロック |
| テレポート | 壊すとボールがランダム位置にワープ |
| 重力 | 近くのボールを引き寄せる |
| 分裂 | 壊すとボールが2つに分裂 |
| アイス | 当たるとボールが減速 |
| 連鎖 | 壊すと隣のブロックにダメージが連鎖 |
| 再生 | 壊しても一定時間後に復活（最大2回） |
| 装甲 | 外側の装甲を剥がしてから本体を壊す2段階式 |
| ミラー | 壊れない。ボールを正確に反射する |
ブロックのサイズも変更可能
1×1（標準）から4×2まで、8種類のサイズを選べます。大きなブロックを配置すれば、ボス的な存在感のあるステージも作れます。
19種類のドロップアイテム
ブロックを壊したときに落ちてくるアイテムも設定可能。パドルで受け取ると効果が発動します。
バフ系: パドル拡大、マルチボール、スロー、残機+1、ファイアボール、シールド、マグネット、レーザー、バリア、巨大ボール、ボム、タイムスロー、パワーショット、コイン
デバフ系: パドル縮小、スピードアップ、ミニパドル、リバース（操作反転）
バフとデバフを組み合わせることで、緊張感のあるステージが作れます。
マルチステージ対応
複数のステージを作成して、1つのゲームにまとめられます。ステージクリアで次のステージに進む、本格的なゲームが作れます。
- ステージの追加・削除・コピー
- ステージごとにボール速度やパドル幅を設定可能
テンプレートで素早くデザイン
1からブロックを並べるのが大変な場合は、テンプレート機能が便利です。
- ダイヤモンド – ひし形配置
- ピラミッド – 三角形配置
- 格子 – 市松模様
- ランダム – ランダムに30〜50個配置
- フルフィル – 上半分を全部埋める
- ボーダー – 外枠だけに配置
テンプレートで大枠を作って、手動で調整するのがおすすめです。
ゲームの設定
基本設定
- ゲームタイトル – タイトル画面に表示
- 作者名 – クレジット表示
- ゲーム説明文 – タイトル画面に表示
- 背景画像（複数登録・破壊率で切替） – ブロックの破壊率に応じて背景が段階的に変化
- ボールの色 – 9色プリセット＋カスタムカラー
難易度プリセット
ワンクリックで難易度を調整できます。
| 難易度 | ボール速度 | パドル幅 | 残機 |
|---|---|---|---|
| 簡単 | 3 | 140 | 5 |
| 普通 | 5 | 100 | 3 |
| 難しい | 7 | 70 | 2 |
背景画像の段階切替
背景画像を複数枚登録し、ブロックの破壊率（%）に応じて自動的に切り替わるように設定できます。
例えば：
- 0%（ゲーム開始時） → 暗い夜空の画像
- 50%（半分破壊） → 夜明けの画像
- 90%（ほぼ全破壊） → 青空の画像
のように設定すれば、ブロックを壊すごとに背景が変わっていく演出が作れます。ステージの雰囲気をガラリと変えたい場合にぜひ活用してください。
クリア報酬画像
全ステージクリア時に表示される報酬画像（イラストやGIFアニメ）を設定できます。同人ゲームでご褒美イラストを入れたい場合に最適です。
画像の保存を許可するかどうかも設定可能。保存不可に設定すると、右クリック保存やドラッグ保存がブロックされます。
エディターの使い方
基本操作
- 左サイドバーの「ブロック」タブからブロックの種類を選ぶ
- 必要に応じてHP、サイズ、ドロップアイテムを設定
- キャンバス上でクリック/ドラッグしてブロックを配置
- 右クリックで削除、またはツールバーから消しゴムモードに切り替え
便利な機能
- ブラシモード（B） – ドラッグで連続配置
- 消しゴムモード（E） – ドラッグで連続削除
- 矩形選択モード（S） – 範囲選択してコピー/ペースト/削除
- Ctrl+Z / Ctrl+Y – 元に戻す/やり直し
- 数字キー1〜9 – ブロックタイプを素早く切り替え
- ?キー – ショートカット一覧を表示
テストプレイ
右サイドバーの「出力」タブから「テストプレイ」ボタンを押すと、エディター上でそのままプレイできます。マルチステージにも対応しているので、通しプレイの確認もOK。
ゲームの出力と公開
HTMLでエクスポート
「HTMLでエクスポート」ボタンを押すと、完全スタンドアロンのHTMLファイルがダウンロードされます。
- 外部ファイル不要、単一HTMLで動作
- エンジン・サウンド・画像すべて内蔵
- タイトル画面・ステージクリア画面・ゲームオーバー画面付き
- 一時停止・サウンドON/OFF対応
- スマホ・タブレットのタッチ操作対応
ブログへの埋め込み
出力されたHTMLファイルをサーバーにアップロードして、iframeで埋め込めます。
<iframe src="あなたのゲーム.html" width="820" height="700" frameborder="0"></iframe>
同人活動での配布
HTMLファイルをそのままZIPに入れて配布するだけ。受け取った人はブラウザで開くだけでプレイできます。特別なソフトのインストールは不要です。
JSON保存
制作途中のデータはJSON形式で保存・読み込みできます。制作を中断して後から再開したり、バックアップを取ったりできます。
ゲームの演出
エクスポートされたゲームには以下の演出が自動で含まれます。
- パーティクルエフェクト – ブロック破壊時にカラフルな粒子が飛び散る
- サウンド – ブロック破壊・パドルバウンド・アイテム取得・爆発など（Web Audio APIで生成、外部ファイル不要）
- コンボシステム – 連続破壊で3コンボ以上になると画面に表示
- エフェクト表示 – アクティブなバフ/デバフと残り時間を画面左上に表示
- 背景変化 – ブロック破壊率に応じて背景が段階的に切り替わる
- スピードブースト – マウスを押し続ける（長押し）とボール速度が2倍に。テンポよく攻めたいときに
まとめ
「ブロック崩しエディター」は、プログラミング知識ゼロでも本格的なブロック崩しゲームが作れるWebアプリです。
- 17種のブロック × 19種のアイテム × カスタムサイズで無限の組み合わせ
- マルチステージ対応で本格的なゲーム制作
- 破壊率に応じた背景変化で没入感のある演出
- 長押しスピードブーストでテンポの良いプレイ体験
- 単一HTMLファイルで出力、どこでも公開・配布OK
- クリア報酬画像でご褒美要素も追加可能
ぜひ自分だけのオリジナルブロック崩しを作ってみてください！
コメント