解説

Webページは、タグで指定されたHTML文書の要素（element）の階層的な集まりである。

document
    |
    +--- <html>
           |
           +---- <head>
           |       |
           |       +---- <title> 
           |
           +---- <body>
                   |
                   +---- <h1>
                   |
                   +---- <div>
                           |
                           +---- <div>
                                   |
                                   +---- <img>
                                   |
                                   +---- <div>
                                   |       |
                                   |       +----  <img>
                                   |
                                   +---- <div>
                                   |       |
                                   |       +----  <img>
                                   |
                                   +---- <div>

DOM(Document Object Model)という仕組み(API、英: Application Programming Interface)を使って、これらの要素をJavaScriptで操作することができる。

id属性

CSSでも使用するが、タグで指定されたHTML文書の要素を区別するための属性である。このサンプルでは、移動するネズミの画像を囲むdiv要素に、それぞれ、Nezumi1、Nezumi2というidをつけている。

イベントハンドラー

マウスポインターを重ねるとか、クリックするといったイベントが発生したときに行う処理を指定するのが、イベントハンドラーである。（※同じ要素に同じイベントハンドラーで複数定義したい場合は、インラインではない方法を使わないといけないことに注意する必要がある。）イベントハンドラーをタグ要素の属性として、値にJavaScriptの関数などの処理を指定する。サンプルでは、以下のイベントハンドラーを重複して指定している。

onclick

マウスでクリックしたというイベントのイベントハンドラー。

< img src="nezumi.png" onclick="move('Nezumi1')" alt="ねずみ１" >

onmouseover

マウスポインタを重ねたというイベントのイベントハンドラー。

< img src="nezumi.png" onmouseover="move('Nezumi1')" alt="ねずみ１" >

onmouseup

マウスのボタンを離したというイベントのイベントハンドラー。

< img src="nezumi.png" onmouseup="move('Nezumi1')" alt="ねずみ１" >

注意

イベントの発生を把握しやすくするために、ネズミのアイコンに赤い枠を表示するようにCSSのiconクラスセレクタのプロパティに、border: solid thin #ff0000;を追加しておいた。完成時には、/* border: solid thin #ff0000; */として、コメントアウトすること。

getElementById()関数

JavaScriptからidを付けたHTMLの要素を取得して使用するための関数(DOMの関数)である。サンプルでは、move()関数の中で使用している。

var nezumi = document.getElementById(ID);

move()関数内では、取得した要素をnezumiという名前のオブジェクトとして参照し、例えばnezumi.style.leftで、CSSのleftプロパティを参照するなどしている。

グローバル変数

// 庭の画像のサイズ
var WIDTH = 500;
var HEIGHT = 500;

// ネズミをクリックしたときの座標の変化量の最大値
var DX = 70;
var DY = 70;

// ネズミの画像のサイズ
var ICON_WIDTH = 64;
var ICON_HEIGHT = 64;

// 穴のサイズ
var HOLE_WIDTH = 100;
var HOLE_HEIGHT = 100;

// 穴の位置
var HOLE_TOP = 200;
var HOLE_LEFT = 200;

独自に定義した関数

move(ID)

ネズミを移動する関数

var str = nezumi.style.left;

によって、ネズミのdiv要素であるnezumiのx座標（たとえば"300 px"という文字列）が変数strに代入される。

var x = str.match(/([0-9]+?)\s*px/i)[1];

によって、([0-9]+?)\s*pxという正規表現は、例えばstr="300 px"の場合は、([0-9]+?)のグループは"300"にマッチする。従って、str.match(/パターン/)[1]は、パターンの最初にマッチしたグループを表すので、変数xには"300"が代入されることになる。

ネズミがクリックされた場合（すなわり、check_hole(x,y)の戻り値が1の場合）、ネズミを非表示にするために、nezumiのstyle.displayプロパティの値をnoneにしている。

nezumi.style.display = none;

new_x(x)

ネズミの移動のx座標成分を返す関数

new_y(y)

ネズミの移動のy座標成分を返す関数

check_hole(x, y)

点(x,y)が穴の位置に入っているときは1、そうでないときは0を返す。

Javascriptゲーム 03

解説