2-5. その他の基本処理

HTML5では従来機能も殆どは使える

samplejpg

HTML5では、一部の従来機能は削除されましたが、殆どの機能については従来通り使用できます。 ゲームを作成する場合には、従来からある機能も利用する必要があります。

本節では、ゲーム作りに必要となる主要な従来機能について説明します。

マウスイベントを処理する

canvas = document.getElementById('id_canvas2');
canvas.addEventListener('click',clickfunc,true);

function clickfunc(event) {
  var rect = event.target.getBoundingClientRect();
 var x = event.clientX - rect.left;
 var y = event.clientY - rect.top;
  // クリック時の処理
}

上記のコードでは、マウスのclickイベント用の処理関数を最前面に表示されるcanvasに登録しています。 登録した関数では、イベント発生時にイベントオブジェクトからcanvas上でのマウス座標をピクセル単位で計算しています。

マウスイベントには、他にも、mousemove/mousedown/mouseup/mouseout等がありますが、処理形態は同様です。 イベントを処理したいcanvasに対して処理関数を登録し、実際の処理は登録した関数の内部で行います。

複数のcanvasをレイヤー的に利用するために設定している場合には、イベント処理関数の登録は最前面に表示されるcanvasに対して行います。

なお、スマートフォンやタブレットデバイスでの動作も想定する場合には、mousemoveやmouseout等のマウスカーソルの移動に関するイベントは実質的に使えません。 これらのデバイスでは、画面に対するタッチ入力が基本になるため、PCとは違って、通常はそれらのイベントは発生しないからです。 このため、ゲームの操作は、全てマウスクリックのみで行えるようにする必要があります。

キーボードイベントを処理する

window.addEventListener('keydown',keydownfunc,true);

function keydownfunc(event) {
  var code = event.keyCode;

  switch (code) {
  case 37:
    // ←キー
    event.preventDefault();
    break;
  case 39:
    // →キー
    event.preventDefault();
    break;
  case 38:
    // ↑キー
    event.preventDefault();
    break;
  case 40:
    // ↓キー
    event.preventDefault();
    break;
  }
}

上記のコードでは、キーボードイベントに処理関数を登録しています。 処理関数では、キーコードを取得し、カーソルキーが押されていた場合には、event.preventDefault()を実行することで、ブラウザの画面がスクロールしないようにしています。

キーボードイベントには、他にも、keyupがありますが、処理形態は同様です。 最初にイベント処理関数を登録し、キーボードイベントが発生した場合には、その処理関数内で処理を行います。

上記のようにしてevent.preventDefault()メソッドを使用すれば、PCを対象としたブラウザゲームでカーソルキーを使用することも出来るようになります。 ただし、ユーザーが使用するブラウザがOperaであった場合には、上記の方法では上手く動作しません。

Operaでは、フォーカスを持ったオブジェクトが存在しない場合、カーソルキーが押されるとページ上の項目を移動してしまいます。 preventDefault()メソッドは有効には働きません。 このため、Operaの使用を想定する場合には、ページ上にダミーのテキストボックスを用意し、常に、そこにフォーカスを持たせる処理も必要になります。

なお、スマートフォンやタブレットデバイスでの動作も想定する場合には、キーボードイベントは実質的に使えません。 これらのデバイスの多くでは、キーボードは存在しないからです。 このため、ゲームの操作は全てマウス入力で行えるようにする必要があります。

インターバルタイマーを利用する

var loop = 0;
var timerID = setInterval('timerfunc()', 50);

function timerfunc() {
  loop += 1;
  if (loop == 20*5) {
    clearInterval(timerID);
  }
}

上記のコードでは50m秒毎にタイマーイベントが発生するようにし、その処理関数を登録しています。 処理関数ではイベントの発生回数をカウントし、5秒後にインターバルタイマーの設定をクリアし、以降のイベントが発生しないようにしています。

一般に、ゲームでは頻繁に画面表示を更新することになるため、画面更新のタイミングに合わせたインターバルでタイマーイベントを利用するのが便利です。

上記のコードではインターバルを50m秒にしてあるため、画面更新のレートは20FPSになります。 このレートを高くすればするほど、ゲームで使用するアニメーション表示を滑らかに出来ますが、それに応じて、ブラウザの処理負荷は増大していきます。 このため、設定するインターバルは不必要に短くしないようにする必要があります。