4. JavaScriptと絵


4-a. 絵を出してみましょう

準備

HTMLファイルの書き方

ちょっと解説

ヒント:うまくいかない方へ
↑画像表示失敗例
 右の壊れたような画像出ていたりしますか? その場合に主に考えられるのが、
(a)ファイルが同じフォルダに無い
(b)ファイルが壊れている
(c)ファイル種別・拡張子が違う
(d)ファイル名が違う
の4種類になります。
 まずは(a)ファイル(例えばbb01.gif)が game.html と同じフォルダの中にあるかを確認してください。
次に(b)ファイルが壊れていないか、 そのファイルをダブルクリックして開き、 意図した画像が表示されるか確認してください。
 次に(c)ファイル種別ですが、拡張子が.gifか確認してください。 あるいは .jpeg でも良いでしょう。 逆に .gif, .jpeg 以外の画像は表示できない可能性がありますので注意してください。 間違えやすいとすると .bmpでしょうか。 また、2-bに書かれている設定をしていない場合、 拡張子は name.gif に見えるけど本当は name.gif.gif になっている場合もあります。 これは画像だけの問題ではありませんので、 再度2-bにあります「拡張子の確認方法」をご覧になり、 本当の拡張子を確認できるように設定してください。
 それらが問題無ければ、そしておそらく多くの方に多いのですが、 (d)ファイル名を間違えていないか調べて下さい。 コンピュータは1文字でも間違うと違うものと認識してしまいます。 今回もしbb01.gifのまま使うとすると、 bと6、0とO、1とl、あたりを間違えやすいかも知れません。 またgifとGIFが違ってもダメな場合があります。 これについてはパソコン内では問題無くてもアップロードするとダメになる場合が多いですので、 すべて小文字にすると良いでしょう。
 一方で、右のような壊れた画像ではなく、画像が一切出ない場合は、 imgタグが無いか、書く場所を間違えているか、 いずれにしてもhtml側の問題の可能性も高いです。
 これらについては上記の点に気をつけつつ色々試してみて下さい。

4-b. 絵をレイヤーに乗せましょう

レイヤーへ

ちょっと解説

  1. <div> ~ </div>で囲まれた部分が 新しくレイヤーとして定義されます。
  2. idは、そのレイヤーのIDつまり名前を定義します。 動かしたりする時にその名前を使用します。 今回は lyrball としてみました。
  3. styleは、レイヤーのスタイルを定義しますが、 ここでは position:absolute(絶対座標)、 left:128px (左から128ピクセルの位置に表示) top:128px (上から128ピクセルの位置に表示) としています。
    なおピクセルとは「色のついた点」のことで、文字や絵はこれらの集まりで出来ています。 左から128ピクセルの位置とは、 左端からその点を順に128個並べたところにある位置ということになります。 でもこんな説明じゃまだ難しいですよね。。。 上記のleftとtopの数値を、128から64とか200とか色々といじってみてください。 そうすればその意味がわかると思います。

4-c. レイヤーを操作してみましょう

表示・非表示

じっくり解説

     ここに色々新しいことが出てきましたが、 今後も大事な事なので、ひとつひとつ説明していきます。 特に1~4は大事なので、何度も読んで、 サンプルソースも色々と修正して試して、マスターして下さいね。

  1. function
    3-e.アンカーから入力してみましょう」でも説明しましたが、 今度は変数を使用したものを定義するので、もう一度説明します。

    function 関数名( 変数名 , 変数名… ) { 中身 }

     既に説明した通り、functionで自分の関数を定義することができます。 関数名や変数名は自由に付けて構いません。 今回は lyrSetVisibility としました。名前の由来は以下のとおりです。

    lyr .. レイヤー Set .. 設定 Visibility .. 表示 → lyrSetVisibility

     関数名や変数名はできるだけわかりやすい名前を付けることが大切です。 それから注釈(//)を付けて、後で見てもわかるようにしておきましょう。 今はまだ大丈夫でしょうが、数が多くなると区別がつかなくなります。 それに人間はすぐに忘れてしまうものです。
     なお今回使用しているJavaScriptという言語に限れば、 最新のWebブラウザーでは日本語の変数名や関数名も使えるようです。 ですのでもし英語が嫌いであれば日本語名でも大丈夫です。 ただ他のプログラミング環境を見ると英数字のみ許されている場合も多いので、 本サイトの説明では慣例に従って英数字を使用することにします。

     関数名の後に続く変数名は、引数(ひきすう)と呼ばれるもので、 上の例では lyr(layer=レイヤー) と visf(visible flag = 表示フラグ)です。
     引数付きの関数がわかりづらいかも知れませんので簡単な例を出しましょう。 (関数lyrSetVisibilityの使い方はこの節の下の方に説明しています。 ここでは定義の方法を理解してください。)
     例えば、

    //------------------------------------------------ // 足し算関数(引数付き関数の例) //------------------------------------------------ function add( x , y ) { var z; z = x + y; alert( z ); }

    こういう関数定義をして、

    function gameStart() { add( 1 , 2 ); }

    として呼び出すと、x に 1、y に 2 が代入された状態で関数addが呼び出されます。 すると z = x + y; は z = 1 + 2; の意味になり、結果として 3 が表示されます。 前章の gameStart() の場合は引数を使用しませんでしたが、 関数ではこのように引数を用いて値を受け渡すこともできます。
     理解のために、読んで納得した気になるだけではなく、 ご自身で色々と試してみてください。

  2. if
    これは、以下の様に書いて条件分岐を行います。

    if ( 条件 ) { 中身 // 条件が true の時に実行されます。 }

  3. if ~ else
    これは、if の応用みたいなものです。以下の様に書いて条件分岐を行います。

    if ( 条件 ) { 条件が true の場合の処理 } else { 条件が false の場合の処理 }

     すなわち上の場合は、

    if ( visf ) { 表示させるための処理 } else { 非表示にするための処理 }

    となります。

  4. =
    これで代入という処理を行います。

    変数名 = 値;

     これで変数に値が入ります。値は計算式でも大丈夫です。 変数とは、物が一つしか入らない箱を想像していただければ良いと思います。 変数には色々な値を入れることができます。 新しい値を入れると、前の値は消えてしまいます。 ちなみに算数の「=」は忘れてください。 JavaScriptプログラムの「=」は変数への代入を行う命令です。

    var test; // test を変数として宣言(箱を用意) test = 1; // 1を代入(箱に1が入る) alert( test ); // 1 と表示される test = 2; // 2を代入(1は消され新たに2が入る) alert( test ); // 2 と表示される test = 1 + 2; // 1+2 を代入 alert( test ); // 3 と表示される test = test + 4; // 右辺のtest+4の結果が左辺のtestに入る alert( test ); // いくつでしょう?(想像してから試してください)

  5. レイヤーオブジェクト
    レイヤーの操作をする場合、
    document.getElementById( "レイヤー名" ).style

    と書きます。 この部分をレイヤーオブジェクトと呼びます。

  6. 表示・非表示
    レイヤーの表示と非表示は、
    レイヤーオブジェクト.visibility = 値;

    として値を代入する事で行います。その値は、 "visible"(表示)と "hidden"(非表示)です。

実験

ちょっと解説

  1. lyrSetVisibility
     これが上で定義した関数です!こうして使います。なんかすごいですよね?!
     引数には、第1引数にレイヤー名、第2引数に trueかfalse を渡します。 第2引数が true の時は表示、false の時は非表示です。
     今回のように、第一引数に "lyrball" が渡されると、これは
    lyr = "lyrball";
    と同じ意味になります。つまり、
    document.getElementById( lyr ).style.visibility
    が、
    document.getElementById( "lyrball" ).style.visibility
    という意味になる訳です。

4-d. 絵を動かしてみましょう

↑座標はこんな感じ

座標を設定する関数を定義

座標を設定してみましょう

座標を取得する関数を定義

ちょっと解説

  1. return
     関数は最後まで実行するのがフツーです。 でも return にぶつかるとそこで終了しちゃいます。

    
    function f() {
    
      ここは普通に処理される
    
      return;                    // ここでこの関数を終了
    
      ここは処理されない
    
    }
    

    (例)

    function f() { if ( NN6 ) { alert( "NN6" ); return; // NN6のときはここで抜ける } // NN6以外の処理 alert( "NN6以外" ); }

  2. return( 戻り値 )
    return を使って、戻り値という値を返すことができます。 ちょっとピンと来ないかも知れませんが、例を見てください。 とりあえず書き方はこうです(正確に言えばカッコは必要ありません)。

    return( 戻り値 );

    (例)

    function sub( a , b ) { return( a - b ); // 最初の引数から次の引数を引いた値を返す } var c; c = sub( 5 , 3 ); // c に 2 が入る (5-3=2だから) alert( c ); // 2 が表示される

ヒント:詳しく知りたい方へ
 上記関数はこのまま覚えてもらって問題ないのですが、 詳細までわからないと不安な方もいらっしゃるでしょうから、 使用している関数parseIntについて詳しく説明しましょう。 (その他はブラウザー決まりなのでそのまま理解してください)
 parseIntは、文字列の引数を数値に変換してくれるものです。 これは何故必要かと言うと、 レイヤーの画像の座標を返す関数、 document.getElementById(レイヤー名).style.top 等が、ブラウザーの種類によって 123 などの数値ではなく、 123px などの文字列を返すことがあるからなのです。
 少し難しい話になりますが、 JavaScript の世界では、データの型に文字列と数値の2種類が存在します。 文字列の足し算は文字列の追加を意味し、 具体的には "123px"+"8""123px8"になります。 座標としてこれでは困ってしまいますので、 parseIntで数値に変換する訳です。 例えばparseInt("123px")は数値の123となります。 もちろん123+8は131です。

移動させましょう

ちょっと解説

  1. ballxとbally
     このプログラムでは、変数ballxは、ボールの横の座標を表しています。 ballyは縦の座標です。 ballxは最初、lyrGetLeft("lyrball") の返り値が代入されます。 実際にはdivタグ内で設定した128になるでしょう。 その後ballx = ballx + 16;によって144になり、 その次に160、最後は176と変化するのですが、わかりますか?

  2. 右へ…
    ↓座標移動イメージ
     実験してみてどうでしょう?右へ進んでいる様に見えましたか? プログラムを見ておわかりかと思いますが、 右へ16ピクセルずつ位置をずらすプログラムになっています。 でもそれだけです。それだけなのに…、ビックリでしょ!?
     座標を指定するのは、レイヤーの左上の座標です。 つまりボールがレイヤーに乗っているので、 ボールの左上の座標を指定していることになります。 右の絵を見てイメージをつかんでください。

  3. 理解を深めよう(alert)
     今の状態では alert が邪魔してゲームにはなりませんよね? ちょっとalertを削ってみてください。どうでしょう? 一瞬で最後までいっちゃいましたよね? 実はコンピューターの処理はとても速いので、 本気を出されると私たちには見えなくなっちゃうんですよ。 これらは次の章で解決しますので、とりあえずおいておいてください。 今は、alert を増やしたり減らしたりするのは自由ですので、 色々自分でいじって試し、とにかく理解を深めてください。

  4. テレビゲームではどうしてるの?
     実は、世の中に出ているテレビゲームもこの方法でやっているんです。 画面には座標があって、左と上がそれぞれ0で、 右下は、例えばプレイステーション(の設定のひとつ)なら 右端が 319 で下端が 239 です。
     それで、キャラクターの左右を表すX座標を、 増やしていけば右に、 減らしていけば左に動きます。 同様にY座標は上下を表していて、 増やしていけば下に、減らしていけば上に動きます。 連続してやればもっとスムースに動いているように見える様になります。 テレビゲームではこれを1秒間に60回実施することでスムースに見せているんですよ。
     スムースに見える処理は次の章で説明しますので、少々お待ちくださいね(^_^)
ヒント:うまくいかない方へ
 この節は、今までのことをすべて理解していないとうまくいきません。 おそらく「3-a.JavaScript導入」まで戻る必要がある場合が多いと思います。 うまくいかない方は、 わかっていると思っても復習した方が良い場合も多いと思いますので、 焦らずに一度戻り、じっくりやってください。 その方が自由自在にゲームを作れるようになるのは結果的に早いと思います。 急がば回れ、です。

4-e. ボールを色々な方向へ

 4-d.絵を動かしてみましょうでは、 ボールが右へ16ずつ動くプログラムを書きました。 今度はそれを応用してボールが上へ10ずつ動くプログラムを書いてみてください。 それができたらボールが左下(斜め)に動くプログラムも書いてみてください。
 それぞれ座標がどうなっているかを確認しながら実施してください。 これからこの仕組みを使ってプログラムをしていくので、 上記以外でも自由自在にボールが動かせるようになるまで、 色々な方向へ動くプログラムを書いてください。 ここでは確実にボールを動かせるようになってから先へ進みましょう!

4-f. アンケート

 前章「3.JavaScript導入」までを理解された方で、 本章「4.絵とレイヤー」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「4-a.絵を出してみましょう」~「4-e.ボールを色々な方向へ」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
既に知っていました
1週間以内でだいたい理解できました
1ヶ月以内でだいたい理解できました
1年以内でだいたい理解できました
1年以上かかりましたがだいたい理解できました
理解できそうに無いのですぐあきらめました
1週間やってみましたがあきらめました
1ヶ月やってみましたがあきらめました
1年やってみましたがあきらめました
1年以上やってみましたがあきらめました
コメント欄:
※コメント欄にはご意見やわかり辛かった部分の指摘等がありましたらお願いします。 (なお質問についてはは掲示板までお願いします)
 ご協力ありがとうございます。


目次へ戻る