JavaScriptで無理やり3Dゲーム。
JavaScriptには幾何描画機能はない。直線を引くことすらできない。しかし、スタイルシートを操作することで画像の配置、重ね合わせ、表示・非表示などの制御が可能である。
で、考えた。画像をうまく配置すれば3Dっぽく見せることができるんじゃね、と。
じゃぁ作ってみるかということで作ってみたのがこのゲーム。開発初期は鬼畜な感じだったが今ではだいぶ丸くなった・・・はず。
3DであることよりもJavaScript製であることに意義がある・・・って大学祭の展示で一般人相手に主張しても分かってくれることはそうそうないんでサイトで主張してみる。
ゲームのプレイは下のリンクからどうぞ。
アルファチャンネルPNG対応のブラウザじゃないと正常に表示されないと思います。ということでIE6には未対応。
とりあえず動作確認したブラウザはFirefox3、IE7、Google Chrome、Opera9、Safari3。
バグ・不具合報告、要望、提案等は送信フォームまたはメールでどうぞ。
バグ・不具合報告の際はブラウザの種類やバージョンを記載してくれると早期解決(または匙投げ)できるかもしれません。
A.残機なんてありませんよ。一発でゲームオーバーです。ようするに仕様です。
A.はい。1種類だけです。
一応blockbreaker.jsのstage関数をいじればオリジナルのステージを作ることもできます。
A.できないの。
A.Enterキーを押すか、ゲーム画面上でクリックすればタイトルに戻ります。
A.確かに・・・。特に手前から奥へ(または奥から手前へ)ボールが動くときとかは静止しているようにみえたり。
手前に来ると大きくなって奥にいくと小さくなるようにすればいい・・・というわけだが今使ってる方法だとそれができないし、当たり判定関連もややこしくなりそう。ということでこの辺の改善は期待薄です。
A.ブラウザがアルファチャンネルPNGに対応していないと思われます。こちらで動作確認したブラウザを使えば問題なく画像が表示されると思います。
onmousedonイベントを拾ったあとonmouseupイベントを拾い損ねたのでしょう。
とりあえずEnterキーを押すか、ゲーム画面上でクリックすれば直るはずです。
A.詳細に報告お願いします。この際はブラウザの種類とかの情報は結構です。
実際のところ3次元での当たり判定や反射について人間に正しく認識できるのか怪しいところですが。
冒頭で「JavaScriptには幾何描画機能はない」って言ったけどそれも変わりつつあるんだよね。HTMLの次期仕様と目されているHTML5ではcanvas要素っていう幾何描画とかができる要素が加わるようで、すでにいくつかのブラウザで実装されています。
canvas要素を使えばFAQで「できましぇん」とか言ってた機能、描画のいくつかが実現可能になりそうです。ということでcanvas要素版も作ってみようかな〜、と考えてたりしてます。実際作るかどうかはともかく。