「Socket.IO ブラウザゲーム プログラム」ページで、「Socket.IOゲームの基本プログラム」を公開しています。
言語は TypeScript、サーバーは node.js で動作します。
この基本プログラムの解説ページ作りました。
プログラム例として、「ワンナイト人狼」での最初の「カードをシャフルして配る処理」のプログラムを解説しています。
→ ソケット通信ゲームプログラム解説 – 「ワンナイト人狼」カード配布部分
ソケット通信ゲームプログラム解説
Category Archives: JavaScript
「爆裂ブロック崩し」をPhaser3で作り直しました
2014年の8月作成の JavaScript ブロック崩しですが、「重ね着バージョン」など改良を続けてきました。
使っている JavaScript のゲームエンジンは 2014年当時 私が好きだった enchant.js だったのですが、現在ではサポートが終了しています。
そこで今回ゲームエンジンを世界的に有名な Phaser3 にして、プログラムを書き換えました。
動作は変わっていません。
Phaser 3 はWEB上に情報が無数にあり、もし改造したい人がいれば、ゲームを改造しやすくなったと思います。
（enchant.js は知らない間にオフィシャルサイトすら消えてました。。。）
そんな訳で、これからも「爆裂ブロック崩し」をよろしくお願いします (｀･ω･´)ゞ
↓クリックで「爆裂ブロック崩し」ページに移動
あと、ついでに「ブラウザ爆弾ゲーム Bakuretu Bomb」も、enchat.js から Phaser 3 に書き換えました。
こちらもプログラムを改造しやすくなったと思います。
↓クリックで「Bakuretu Bomb」ページに移動
ブラウザネットワークゲームの基本部分公開中
前に作成した「Socket.IO ブラウザゲーム プログラム」を、デザインを付けて改良しました。
昔リリースしていた「ブラウザでワンナイト人狼」の「マッチング処理部分」プログラムです。
サーバープログラムとゲームプログラムで出来ています。TypeScipt です。
ライブデモ (Live Demo)
GitHubで公開しているプログラムがそのまま動いています。
https://socketgamecode.fly.dev/
こんな感じで参加者のマッチングが行われ、ゲーム開始で全てのユーザーがサーバーを経由して WebSocket で接続されます。
ゲーム部分は未実装なので、そこを作り込んでください。
詳細は下記ページを見てください。
ブラウザ爆弾ゲーム Bakuretu Bomb Ver2 に更新
バージョン上げました。
↓ 画像クリックでゲームスタート
落ちてくる爆弾をクリックして服を破壊してください。クリアはありません。
ただ、服を破壊するだけの JavaScript プログラムです。
（１）ただ爆弾を爆発させるクリアがないゲーム（？）なので、タイマーによる時間制限を削除
（２）アニメーション機能を追加。主に目パチ用です
（３）画像を見るための一時停止ボタン追加
（４）効果音の ON / OFF ボタンを追加
このゲームの紹介ページは下記です。
ブラウザ爆弾ゲーム Bakuretu Bomb
プログラムは GitHub に置いてあります。自由に使ってください。
https://github.com/BakuretuKen/Bakuretu-Bomb
ふと久しぶりに更新しようと思って更新したら、なんとプログラムをいじったのは12年ぶり。
フリーレン かよ。。。
ブロック崩しにアニメーション機能を追加しました
こんな感じのアニメーションパターンを画像で用意するとこで、目パチとかできるようになりました（v2.07）
部分的な簡易アニメーションができます。
↓ クリックでゲームスタート
アニメーション機能の具体的な使い方は GitHub を参照してください。
脱衣ブロック崩し 重ね着バージョン 作成しました
2014年作成の「爆裂ブロック崩し」の JavaScript版 の新バージョンを公開しました。
大昔の Java Applet 同様、ブロックゲームが２段階になりました！
サンプルゲーム
※ 画像クリックでゲームスタート
変更点
・設定で「重ね着バージョン（2段階）」と「通常バージョン（1段階）」を設定できるようにしました
・ライフ（残機）を設定できるようにしました
ゲーム詳細
詳細は「ブロック崩しページ」を更新していますので、そちらを見てください。
JavaScript版「爆裂ブロック崩し」重ね着バージョン
その他
最初にこのゲームを作った2014年のころは、enchant.js はまだ使っている人多かったのに、2025年12月の今となっては、完全に過去のゲームエンジンになってしまいました。。。（開発も止まっちゃったみたい）
10年がすぐ経ってしまって悲しい。。。
JavaScript 脱衣ブロック崩し バージョンアップしました。
2014年08月24日 に作成した「JavaScript 脱衣ブロック崩し」を、バージョンアップしました。
11年ぶりのバーションアップです。
当時小学１年生だった子が、高校卒業しています。マンモスびっくりです。
バージョンアップ内容
（１）PCでゲームを実行するとゲーム画面が左上になっていました。
あまり気にしてなかったのですが、中央に寄せたほうがどう考えても良いですね。
CSSを書き換えて画面中央に配置しました。
旧バージョン（v0.01） PCでの表示
新バージョン（v0.02） PCでの表示
（２）ゲームクリア時に左上に「RESTART」ボタンが出ていました。
このボタン表示はミスで、押しても何も起きませんでした。
非表示にしました。
旧バージョン（v0.01） ゲームクリア時
新バージョン（v0.02） ゲームクリア時
（３）ゲームの設定をHTMLに移動しました
旧バージョン（v0.01）
・JavaScript プログラムを編集してゲーム設定を変更する必要がありました
新バージョン（v0.02）
・HTMLの設定項目を編集すればゲーム設定を変更できます
| <script> 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 = 40; // 画面下からの反射パネルの高さ var BLOCK_GAME_BLOCK_SIZE = 32; // ブロックのサイズ（16 or 32） </script> |
（４）ダウンロード用プログラムを GitHub に移動しました
プログラムをダウンロードする場合は、GitHub からダウンロードしてください。
改造等自由に行ってください（MITライセンス）
その他
知人が AIイラスト作成のノウハウを公開していたので、せっかくなのでデモゲームを増やしました。
その他２
なんか、使用しているゲームエンジンの enchant.js の公式サイトが消えていた。
当時結構人気があった JavaScriptゲームエンジン だったのに。。。
悲しい。。。
これが、11年の重みか。。。
そういえばこのプロック崩し作った当時は「平成」でした。
NEC PC-8801風 JS Canvas 作画プログラム
パソコン黎明期（？） NEC PC-8801 のアドベンチャーゲーム作画処理を JavaScript で再現しました。
一瞬で表示できるのを時間をかけて表示しているので、実用性はありません。
そして、普通にフルカラーを使えるこのご時世に、8色しか使えません。
プログラムに興味がある人はこちら
https://github.com/BakuretuKen/pc88canvas
何十年ぶりにブロック崩しゲームを作った
JavaScript版「爆裂ブロック崩し」開発しました。
1999年に Java Applet で作った「爆裂ブロック崩し」の JavaScript版（enchant.js）を作成しました！
「爆裂BOMBゲーム」に続く、JavaScript (enchant.js) ゲーム第2弾です。スマホのブラウザでも動きます。
パネルの中央に弾を当てた時の「爆裂貫通弾」も実装しました。
まさか、15年くらい前に作った自分のプログラムを、自分で JavaScript に移植するとは思いませんでした。
爆裂ブロック崩しは、当時いろいろな雑誌で取り上げられたりして、作っていて楽しかったし、思い入れのあるプログラムです。
爆裂ブロック JS版 サンプルゲーム
https://bakuretuken.com/block_demo/demo02/
スマホでも PC でも動作します。今のところ、Windows Chrome、iPhone Safari のみ動作確認しています。
近日中に、ゲーム画像があれば簡単にゲームが作れるようにプログラムを公開します。
ドキュメントページも作る予定です。
■JavaApplet版との違い
- 反射パネルを少し大きくしました
- ボール数を１つにしました。残弾はなくなりました
- ゲームサイズを (480 x 560) から (480 x 640) に変更
- ブロックサイズが (16 x 16) から (16 x 16)と(32 x 32)を選べるようになりました
■公開までの残作業
- ドキュメントページの作成
- 効果音の追加
- Android で全画面表示で出来てないので調査&修正
- 各種ブラウザでの動作テスト
ブロック（服部分）の画像フォーマットが GIF から PNG に変わっただけなので、当時のゲーム画像も使えると思います。
まぁ、もはや当時ゲーム使って頂いた人が、このサイトにお越しになってないとは思いますがｗ
しかし、たまたま JavaApplet 版の問い合わせメールが来て当時を思い出したり、
週末予定が狂って時間ができたりでなにか作りたくなったりで作ってしまいました。
「15年ぶりだね｡」
「ああ間違いない。【爆裂ブロック崩し】だ。」
という ネタ を当時の友人とやりたいくらいですねｗｗｗ
ちなみに1999年当時の Applet 版の「爆裂ブロック崩し」のページは、【ここ】 です。
懐かしいです。最終更新日が 2003年 ですがｗ
■ 2014.08.24 追記