宿題04の解説とヒント

1. Javascriptゲーム 01

問題

サンプル01のJavascriptを使ったページを作成し、キャラクターの初期位置などのパラメーターを調整したりして、工夫をして、js02.htmlという名前で、hwのサブディレクトリhw04を作成して、hw/hw04/内にアップロードしなさい。

このゲームでは、ねずみのキャラクターをクリックすると、ランダムな方向にジャンプするように作成されている。中央の黒い四角の穴にねずみを落として退治するゲームである。

id要素

この例では、以下ように４つのidが付けられた要素を用いている。

id="Bkg"

背景画像のIMG要素である。背景画像は500px×500pxのサイズで、ファイル名はbackground.pngである。

id="Nezumi1"

ねずみのキャラクターのDIV要素で、子要素にファイル名nezumi.pngのIMG要素を含んでいる。nezumi.pngのサイズは64px×64pxである。
CSSで、idセレクタ#Nezumi1のプロパティの定義で、position: absolute;を指定することで、親要素であるDIV要素の左上が(0,0)の原点になるようしている。leftプロパティはid="Nezumi1"の要素の左上の角のx座標、topプロパティはy座標になっている。
クリックするとジャンプするのは、<img src="nezumi.png" alt="ねずみ１" onClick="randomove('Nezumi1', D_nezumi)">のように、onClickのイベントハンドラーとしてrandomove()関数を呼び出して実行しているからである。

id="Nezumi2"

id="Nezumi1"と同様である。

id="Hole"

穴を表すDIV要素である。サイズは100px×100pxである。CSSで、idセレクタ#Holeのプロパティの定義で、position: absolute;を指定することで、親要素であるDIV要素の左上が(0,0)の原点になるようしている。leftプロパティは200px、topプロパティは200pxとしている。IMG要素は使用せず、background-color: #000000;で黒く塗りつぶしているだけである。

グローバル変数

以下の二つのグローバル変数を使用している。

D_nezumi

ねずみをクリックしたときに、ランダムに移動するが、そのときの最大の移動量を格納する変数である。70px移動するように設定されている。この値を大きくすると、ねずみのジャンプ量が大きくなり、小さくすると少ししか動かなくなる。

OVERLAP_HOLE

touch()関数で二つの要素の重なりがあるかないかを判定するが、第3パラメータとして、そのときの重なり具合を決めるパラメータとして使用するためのグローバル変数である。これは、ねずみと穴の重なり具合を定め、-60という値にしている。

関数(サブルーチン)

以下の関数を定義している。

initialize()

document.getElementIdBy()関数を使って、id="Nezumi1"、id="Nezumi2"、id="Hole"、id="Bkg"のx座標、y座標、幅、高さなどのプロパティを設定している。ページを読み込んだときに、このinitialize()関数を実行し（87行目）、CSSで設定した値をこれらのプロパティの値で上書きしている。

randomove(element_id, Delta)

ねずみをランダムに移動する関数である。 OnClickイベントハンドラーとして使用する。 第一引数にはid名、第二引数は移動量の最大値である。また、移動したのち、穴(id="Hole")と重なった場合は、ねずみのキャラクターのdisplayプロパティを"none"にして、非表示にしている。

move(element, dx, dy)

第一引数の要素を、第二、第三引数のx、y座標だけ移動して表示する関数である。randomove()内で使用されている。

touch( obj1, obj2, overlap )

第一引数と第二引数の要素が重なっている場合は1、重なっていない場合は0を返す関数である。第三引数は重なりの条件を調節することができるパラメータで、0とすると調整なしの条件になる。randomove()関数の中で、ねずみと穴の重なりがあるかないかの判定に使用している。

coordinates(element)

要素のleftプロパティとtopプロパティの値は、"px"という単位が付いていいるので、正規表現を使って"px"を除いた数字部分だけを取り出す関数で、返り値はposition = {x: 0, y: 0};と初期化された連想配列である。

elmSize(element)

要素のwidthプロパティとheightプロパティの値は、"px"という単位が付いていいるので、正規表現を使って"px"を除いた数字部分だけを取り出す関数で、返り値はelm_size = {w: 0, h: 0};と初期化された連想配列である。

ページの構造を理解するためのヒント

DIV要素に枠線を付けると、ページの構造が把握しやすくなる。 例えば、DIV要素に赤い枠線を表示するよにするには、STYLE要素の内容に以下のCSSの記述を追加すれば良い。

div {
   border: solid thin red;
}

宿題の注意点

• 背景画像のbackground.pngと、ねずみのnezumi.pngが、js02.htmlと同じフォルダになければならない。
• まずは、コピー＆ペーストで良いので、js01.htmlと同じものを作成すること。サンプルのjs02.htmlのソースを参考にして、自分で工夫してjs02.htmlを作成すること。 なお、js01.htmlとjs02.htmlの違いを見つけるには、Windowsのfcコマンドが役に立つ。

  
  D:\> fc /n js01.html js02.html
  
  
  

2. Javascriptゲーム 03

問題

サンプル03のJavascriptを使ったページを作成し、キャラクターの初期位置などのパラメーターを調整したりして、工夫をして、js04.htmlという名前で、hw/hw04/内にアップロードしなさい。

このゲームでは、チーズを追加し、チーズをカーソルキーで動かすと、ねずみがチーズに近づいてい来るように変更した。 チーズにねずみが近づきすぎたら、ねずみのキャラクターをクリックしてランダムな方向にジャンプさせて追い払い、チーズを使って中央の黒い四角の穴にねずみを誘って落として退治するゲームである。

id要素

js03.htmlでは、js01.htmlに以下のチーズの要素を追加している。

id="Cheese"

チーズのキャラクターのDIV要素で、子要素にファイル名cheese.pngのIMG要素を含んでいる。cheese.pngのサイズは64px×64pxである。
CSSで、idセレクタ#Cheeseのプロパティの定義で、position: absolute;を指定することで、親要素であるDIV要素の左上が(0,0)の原点になるようしている。leftプロパティはid="Cheese"の要素の左上の角のx座標、topプロパティはy座標になっている。
カーソルキーを押したとき、move_cheese()関数を呼び出して、チーズを動かしている。

グローバル変数

js03.htmlでは、js01.htmlに以下のグローバル変数を追加している。

OVERLAP

touch()関数で二つの要素の重なりがあるかないかを判定するが、第3パラメータとして、そのときの重なり具合を決めるパラメータとして使用するためのグローバル変数である。これは、ねずみとチーズの重なり具合を定め、-40という値にしている。

関数(サブルーチン)

js03.htmlでは、以下の関数を定義している。

initialize()

js01.htmlのinitialize()関数に、id="Cheese"のx座標、y座標、幅、高さなどのプロパティを設定を追加している。 さらに、カーソルキー（矢印キー）の入力を受け付けるイベントリスナーの開始を追加している。

KeyDownFunc(e)

イベントリスナーで、キーが押されたときの処理をする関数である。key_code変数の値でどのキーが押されたのかを判断し、それに合わせてmove_cheese()関数で、押されたカーソルキーの方向にチーズを移動する。 また、id="Nezumi1"とid="Nezumi2"を、move2cheese()関数を使って、チーズの方向に移動している。

move_cheese(Delta_x, Delta_y)

チーズを移動する関数。移動後、穴に入ったか否かを判定している。

randomove(element_id, Delta)

ねずみをランダムに移動する関数である。 ねずみがチーズをぶつかったか否かの判定を追加した。 OnClickイベントハンドラーとして使用する。

move2cheese(element_id, Delta)

ねずみをチーズの方向に移動する関数。移動後に、ねずみがチーズとぶつかったか、ねずみが穴に落ちたかを判定している。

move(element, dx, dy)

js01.htmlと同じで変更なし。 第一引数の要素を、第二、第三引数のx、y座標だけ移動して表示する関数である。randomove()内で使用されている。

touch( obj1, obj2, overlap )

js01.htmlと同じで変更なし。 第一引数と第二引数の要素が重なっている場合は1、重なっていない場合は0を返す関数である。第三引数は重なりの条件を調節することができるパラメータで、0とすると調整なしの条件になる。randomove()関数の中で、ねずみと穴の重なりがあるかないかの判定に使用している。

coordinates(element)

js01.htmlと同じで変更なし。 要素のleftプロパティとtopプロパティの値は、"px"という単位が付いていいるので、正規表現を使って"px"を除いた数字部分だけを取り出す関数で、返り値はposition = {x: 0, y: 0};と初期化された連想配列である。

elmSize(element)

js01.htmlと同じで変更なし。 要素のwidthプロパティとheightプロパティの値は、"px"という単位が付いていいるので、正規表現を使って"px"を除いた数字部分だけを取り出す関数で、返り値はelm_size = {w: 0, h: 0};と初期化された連想配列である。

宿題の注意点

• まずは、コピー＆ペーストで良いので、js03.htmlと同じものを作成すること。サンプルのjs04.htmlのソースを参考にして、自分で工夫してjs04.htmlを作成すること。 なお、js03.htmlとjs04.htmlの違いを見つけるには、Windowsのfcコマンドが役に立つ。

  
  D:\> fc /n js03.html js04.html