Category Archives: JavaScript

JavaScript 脱衣ブロック崩し バージョンアップしました。

Posted on by

2014年08月24日 に作成した「JavaScript 脱衣ブロック崩し」を、バージョンアップしました。
11年ぶりのバーションアップです。
当時小学１年生だった子が、高校卒業しています。マンモスびっくりです。

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

バージョンアップ内容

（１）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 / Bakuretu-Block

プログラムをダウンロードする場合は、GitHub からダウンロードしてください。
改造等自由に行ってください（MITライセンス）

その他

知人が AIイラスト作成のノウハウを公開していたので、せっかくなのでデモゲームを増やしました。

その他２

なんか、使用しているゲームエンジンの enchant.js の公式サイトが消えていた。
当時結構人気があった JavaScriptゲームエンジン だったのに。。。
悲しい。。。
これが、11年の重みか。。。

そういえばこのプロック崩し作った当時は「平成」でした。

NEC PC-8801風 JS Canvas 作画プログラム

Posted on by

パソコン黎明期（？） NEC PC-8801 のアドベンチャーゲーム作画処理を JavaScript で再現しました。
一瞬で表示できるのを時間をかけて表示しているので、実用性はありません。
そして、普通にフルカラーを使えるこのご時世に、8色しか使えません。

サラダの国のトマト姫01

サラダの国のトマト姫02

ポートピア連続殺人事件

機動戦士ジークアクス

プログラムに興味がある人はこちら
https://github.com/BakuretuKen/pc88canvas

JavaScript版「爆裂ブロック崩し」開発しました。

Posted on by

1999年に Java Applet で作った「爆裂ブロック崩し」の JavaScript版（enchant.js）を作成しました！
「爆裂BOMBゲーム」に続く、JavaScript (enchant.js) ゲーム第2弾です。スマホのブラウザでも動きます。
パネルの中央に弾を当てた時の「爆裂貫通弾」も実装しました。

まさか、15年くらい前に作った自分のプログラムを、自分で JavaScript に移植するとは思いませんでした。
爆裂ブロック崩しは、当時いろいろな雑誌で取り上げられたりして、作っていて楽しかったし、思い入れのあるプログラムです。

爆裂ブロック JS版 サンプルゲーム
https://bakuretuken.com/block_demo/demo02/

bakuretublock_demo01

スマホでも 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年ぶりだね｡」

「ああ間違いない。【爆裂ブロック崩し】だ。」

eva_gendo

という ネタ を当時の友人とやりたいくらいですねｗｗｗ

ちなみに1999年当時の Applet 版の「爆裂ブロック崩し」のページは、【ここ】 です。
懐かしいです。最終更新日が 2003年 ですがｗ

■ 2014.08.24 追記

「爆裂ブロック崩し」専用紹介ページ作成しました！

ブラウザ爆弾ゲーム バージョンアップしました

Posted on by

久しぶりの更新になります。爆裂健です。
最近暑くて、夏バテ気味です。。。

（今は当時の日記は消してしまいましたが）2000年の頃に「爆裂健ホームページ２」で日記を書いてた時は、どうでもいい話題をほぼ毎日書いていたんですが、さすがに当時のようには行かないですねｗ

なんか最新版のChromneで「ブラウザ爆弾ゲーム」の効果音が出なくなってしまったので、バージョンアップしました。
サウンド再生周りの処理が今までのやり方で動かなくなったようです。やはり JavaScript と HTML5 で本格的なゲームを作れる時代になりましたが、まだサウンド周りは弱いですね。

さしあたり enchant.js のgame.assets でのサウンドデータの読み込みは行わず、HTML5 Audio でサウンド再生するようにしました。ブラウザによってサポートがまちまちなので、対応していないブラウザの場合は効果音の再生が ON であってもサウンドの再生をあきらめました。

バグや問題等があれば、是非ご連絡くださいませ。。。m(__)m

ブラウザ爆弾ゲーム
BakuretuBomb

ブラウザ爆弾ゲーム Bakuretu Bomb 公開

Posted on by

ブラウザで動作する萌え（？）爆弾ゲーム Bakuretu Bomb が完成したので、公開しました！

爆弾ゲーム Bakuretu Bomb

ブラウザ爆弾ゲーム Bakuretu Bomb

先日知人にネタフリされたやつですｗ

enchant.js が面白かったので、勉強を兼ねて作成しました。

詳細は 爆弾ゲーム Bakuretu Bomb を見てください。

私はイラストが描けない人なので、もしこれを使ってゲームを公開してくれる絵師の方がいらっしゃると、嬉しい限りです (・∀・)

enchant.js 簡単すぎてワロタ

Posted on by

最近 JavaScript が面白いので、JavaScript で簡単にブラウザで動くゲームが作れると巷で噂の enchant.js に挑戦。

あっという間にホモォが動いたｗ

ホモォ

ホモォ – enchant.js
https://bakuretuken.com/enchant/homo.html

これは面白い。enchant.js をつかってゲーム作りたいなぁー
また「やるやる詐欺」になりそうですけど。。。
書いたプログラムは、この程度です。

[javascript]enchant();

var game = new Game(640, 320); // game stage

game.preload(‘img/homo02.png’); // preload image
game.fps = 20;

game.addBear = function(){
var bear = new Sprite(140, 32);
bear.image = game.assets[‘img/homo02.png’];
bear.x = rand(300);
bear.y = rand(300);
bear.frame = [0, 0, 1, 1]; // select sprite frame

bear.tl.moveBy(288, 0, 90) // move right
.scaleTo(-1, 1, 10) // turn left
.moveBy(-288, 0, 90) // move left
.scaleTo(1, 1, 10) // turn right
.loop(); // loop it
game.rootScene.addChild(bear);
};
game.start();

game.tick = 0;
game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
if (game.tick < 1100 && game.tick%80 == 0) game.addBear();
game.tick++;
});

function rand(num)
{
return Math.floor(Math.random()*num);
}[/javascript]