JavaScript版「爆裂ブロック崩し」


JavaScript版「爆裂ブロック崩し」

1999年に Java Applet で作った「爆裂ブロック崩し」の JavaScript版 を作成しました!

PC、スマートフォンの両方でゲームが遊べます。

反射パネルのちょうど中心にボールを当てると、ボールが赤くなり「爆裂貫通弾」となります。(Applet版の仕様そのまま)
block_kantsudan01


■ サンプルゲーム

★サンプルゲーム その1
爆裂ブロックサンプルゲーム

1ブロックのサイズは ( 32 x 32 ) ですが、当時の Applet版 のブロックサイズ ( 16 x 16 ) にもできます。

★サンプルゲーム その2 (ブロックが細かいパターン)


■ダウンロード

 bakuretublock001.zip (2014.08.24)

<ファイル内容>

画像は背景画像、勝利画像が JPEG フォーメットで、それ以外は  PNG フォーマットです。
自分で画像を用意する場合は同じファイルで、同じ画像サイズでファイルを用意してください。
ブロック画像は「透明PNG」で用意してください。透明部分はブロックになりません。


■ゲーム設定

JavaScript で下記の変数を設定することで、ゲーム設定を変えられます。参考で設定されている数字はデフォルト設定です。
デフォルト以外の動作チェックはあまり行っていないので、問題があったら報告しておらえると助かります。

var BLOCK_GAME_WIDTH = 480;
var BLOCK_GAME_HEIGHT = 640;
var BLOCK_GAME_FPS = 24;
var BLOCK_GAME_BALL_SPEED = 10;
var BLOCK_BAR_MARGIN_BOTTOM = 80;
var BLOCK_GAME_BLOCK_SIZE = 32;
var BLOCK_GAME_MIN_BLOCK_PIXEL = 24; // BLOCK_SIZEが16の場合は6
  • BLOCK_GAME_WIDTH ・・・ ゲーム画面幅(ブロック幅の倍数のみ設定可能)
  • BLOCK_GAME_HEIGHT ・・・ ゲーム画面高さ(ブロック幅の倍数のみ設定可能)
  • BLOCK_GAME_FPS  ・・・ ゲームFPS
  • BLOCK_GAME_BALL_SPEED  ・・・ 1FPSあたりのボール移動距離
  • BLOCK_BAR_MARGIN_BOTTOM  ・・・ 画面下からの反射パネルの高さ
  • BLOCK_GAME_BLOCK_SIZE  ・・・ ブロックのサイズ(16 と 32 のみ設定可能)
  • BLOCK_GAME_MIN_BLOCK_PIXEL ・・・ ブロックエリア内に透明でないピクセルがこの設定値以上あったらブロック化する

ゲーム JavaScript を呼び出す前にHTMLに設定することで有効になります。

<script type="text/javascript" charset="utf-8">
var BLOCK_GAME_BLOCK_SIZE = 32;
</script>
<script src="bakuretublock000.min.js"></script>

■ゲーム開発にあたって

  • ダウンロードしてきたけど自分の PC で動作しない

enchant.js の仕様(?)でサーバにアップしないと動作しないようです。(リソースファイルの読み込みで失敗している模様)
自分の PC では画像のみを作成し、画像完成後にサーバにアップしてゲームの確認して下さい。

  • 画像をサーバ上で更新したのにゲーム画像が変わらない

ブラウザに画像ファイルがキャッシュされています。
ブラウザのキャッシュをクリアしてください。ゲーム開発中はブラウザ設定で「コンテンツをキャッシュしない」にしてもいいと思います。
あと、未確認ですが Google Chrome の シークレットウィンドウ は、キャッシュをしないと聞いたことがあります。


■ブログ記事


■昔の Applet  のゲームを JavaScript版に移植するには?

今さらそんな人がいるか不明ですが、次のような手順で移植できます。

  1. 昔の背景画像と勝利画像を 480 x 560 から 480 x 640 に変更します。ちょっと縦長になります
  2. 昔のブロック画像(服画像)を 480 x 560 から 480 x 640 に変更し、画像フォーマットを 透明GIF から 透明PNG に変更します
  3. 画像ファイル名を指定の名前に変えて完成です

試してみたところちゃんと動きました。
bisuketan_test_block

が、この歳になって当時の自分の絵を見るはめになり、なんとも言えない感じに心に傷を負いましたw ビスケたんとか、知らない人多そうですね。


■利用について

「爆裂ブロック」ゲームプログラム、画像ファイルに関して利用の制限はありません。
自由に使ってください。
「爆裂ブロック」ゲームプログラムは「MITライセンス」です。
「爆裂ブロック」はJavaScriptゲームエンジン enchant.js を使用しています。
enchant.js に関してまして、こちら にライセンス記載があります。


■更新履歴

  • [2014.08.24] ファーストリリース (Ver 0.0.1)