国民宿舎はらぺこ 大浴場

作ってみた。こんなもんに 5 営業日もかかっちまったよ。。。とりあえず、現段階では開発途上バージョンということで。

動作環境

Firefox、Opera、IE にて動作確認済み。但し IE では動作がやたらと重い。。。これは IE の処理能力が劣るだとか、おいらのプログラム側の問題だとか言うことではなくて、単に IE の window.setInterval() がそれほど短い delay に対応していないだけだと思う。

遊び方

カーソルキーの「←」と「→」でキャラを左右に動かして、どんどん下のほうへ飛び降りてください。画面はどんどん上へ上へとせりあがっていきます。キャラが画面の上まで行って隠れてしまうか、もしくは落っこちすぎて画面の下へ隠れてしまうとゲームオーバー。また、飛んでくる火の玉 (には見えないだろうけどｗ) にぶつかってもゲームオーバー。

キャラがどれだけ飛び降りることができたかによってスコアが増えるようになっています。

ちなみに、画面の右端と左端は繋がっています。初期のファミコンルールですなｗ

プログラムの解説とヒント

ソースはここから参照してください。自由に使っていただいて構いません。

やっていることは、window.setInterval() によるタイマー呼び出しから、主に HTML の <img> 要素をひたすら書き換えているだけです。オブジェクト指向を駆使しているように見えますが、可能な限りメンバーをプライベート化させるべきところで、敢えてプライベート化させていなかったりします (だって面倒くさいし)。それでも、オブジェクト指向的な設計が成立しうる程度には、オブジェクト指向的な機能を使ってはいるつもりですが。

強いてポイントとして取り上げるとすれば、こいつぐらいかなぁ。

    var that = this;
    this.timer = setInterval(function() { that.interval(); },
        1000 / boeboe_frame_par_second);

window.setInterval() とか window.setTimeout() とかって、処理内容はリテラル (" とかで括った文字列) で渡すように説明している参考書やサイトがほとんどで、上記みたいに、関数オブジェクトそのものを渡すこともできる、って辺りに触れられている参考書やサイトってほとんど無いんじゃないかと思う。

関数オブジェクトを渡す方法が優れているのは、JavaScript ならではの仕様であるスコープチェーンが使えるということ。つまり、上記の 1 行目で宣言したローカル変数 that が、 window.setInterval() に渡す関数内でも生きていて、そのおかげで this の受け渡しに成功している、ってわけだわね。

その他

なんかおかしな点とかあったらコメントに書き込んでちょ。