Large Display Size Middle Display Size Small Display Size

2014年 9月 の Release

(※ Release = 公開記事)

2014/9/14(日)


▲ゲーム シューティング・レイン
 上のメニューの「プログラム 欄」にJavaScriptによるゲーム『Shooting-Rain(シューティング・レイン)』を追加しました。

 画像の代わりに文字を使った1画面タイプのシューティングゲーム。
 戦闘機デルタ・ストリング1号を駆使し、倒せば倒すほど増えていく「スクエア・ディブ・ターグ」に立ち向かえ。

 左図をクリックするとすぐにゲームが始まります。


遊び方:

 三角形▲が自機。
 四角形■が敵機。

 上下左右キーで自機移動。
 zキーで攻撃です。
 音は出ません。

 敵機をすべて撃破すれば、面クリです。
 エンディングはありません。

補足:

 敵機にぶつかっても死にません。
 ミサイルに当たると死にます。
 zキー長押しで連射になり、楽です。
 11面以降にレアキャラが1匹出ます。
 21面から2匹出ます。
 画面外は、敵の攻撃の届かない安全地帯です。休みたいときにどうぞ。

親切設計:

最初のバージョンで画面の左上に、
   
    Shooting-Rain
    STAGE 1 / Shooting down 0
    STAGE 4 / Shooting down 6 (LAST)
    Z key: fire.
    Arrow key: move.

と表示させていました。
 赤く示した LAST の行は前回のスコアを表示するもので、これがあると
「自分や友達の前回の記録と比べてもっと良いスコアにしよう」
という気持ちにつながり、ゲームとしてはヒートアップするのですが、ゲーム中毒になると思います。
 そのためこの表示の機能をオフしました。
 安心して遊んでください。

動作確認済み:

Windows Firefox、InternetExplorerで動作。
core i5 CPUのPCで快適に動作します。

動作しない機種:

キーボード操作が基本のため、タッチパネルのみの機種では操作できません。

プログラム:

複数の物体が同時に動く処理を導入しています。 ゲームのしくみ:物体達の動作 参照
また、滑らかなキー入力にするために特別な工夫をしています。


▲この図はこのゲームで使用されているキー入力のロジックを理解しやすくするために作りました。

・run() は setInterval() により一定時間(100msくらい)ごとに呼ばれる関数です。

・黄丸○は 押されたキーに対応する処理(キャラが上に動くなど) が実際に実行される場所です。run()上で実行されます。
・A,B,Cはキーオブジェクトに対する操作で、ソースコードに同じABCのコメントで示しています。
・薄黄色はキーオブジェクトの存在期間を表します。
・キーが押されるとキーオブジェクトが作成され、キーオブジェクトはキーバッファに入れられます。run()にてキーバッファ内の各キーオブジェクトが処理されます。キー1つにキーオブジェクトは1つ作成されます。キー1つが2回押されてもキーオブジェクトは1つです。


 JavaScriptでおなじみのsetInterval()を使用して、一定時間ごとにrun()を呼び出しています。
 onkeydownのイベントにより、キー入力を検出しますが、その場ですぐにキーの処理をせず、キー入力の記録だけを行います。そして、次のrun()の呼び出しを待ち、run()の中で記録したキー入力を処理するようにします。
 こうすることで、キータイプ(カタッ、タカタカタカタカという入力)の ぎこちなさ を吸収して、キーセンス(キーが押されたら、素直に押されたことを示し続け、離されたら離されたことを示し続けるキー入力方法です。最近は「キーセンス」という言葉はほとんど使われなくなったようです)のような滑らかな入力になります。

 ただし、工夫が必要で、そのままだと、キーが離された後に、1回だけ余分にキー入力処理を実行してしまうなどの不具合があります。上図のように、厳密にキーの押下とキーの解放のパターンを調べて対処する必要があります。

 図中のA,B,Cの記号はソースコード中にも対応したコメントを記入しています。(//Aなど)
 Aではキャラ移動などキーにさせたい処理の実行
 Bではrun()が来る前にボタンの押下と解放が短時間に行われた場合の後処理、
 Cではキーが離されたのち、キーにさせたい処理が実行済みになっている、という場合の後処理。

 黄色○は、キーの処理を実行する箇所(run()上となっている)を示しています。

 なかなか理解することは難しいかもしれませんが、「キーイベントとキーの処理を別のタイミングにする」という方法は、使えるんじゃないかと思います。
 ご自分でその方法を行ってみて、なにか困ったら、参考までにこのソースコードを見てみてください。

 ソースコード


2014/9/1(月)


▲長い間、間違った内容でページを公開していて、恥ずかしい。
「初めての水晶発振子」のページですが、「水晶発振子」は思っている以上に難しい部品であることに気付いたので、「初めてのセラミック発振子」に変更しました。




▲画面の裏にマッチョマンがいて操作しているんでしょ。
 スプライン曲線という計算を使ったボールアニメーションです。

 私が高校生のころ、このアルゴリズム(計算方法)をどこで手に入れたのか忘れましたが、BASICのプログラムにして学校に持って行ってパソコンでクラスメートに見せていました。そしたら、

『だれか画面の裏にいて、うごかしてんじゃないの?』

という感想をもらいました。




ページ制作 homepage6047



ページの上端へ (もくじ開く)