学科ブログ

入門JavaScript Vol.3【CG・Webクリエイター科】

2011年10月29日

　みなさまお久しぶりです。じゅんです。

　JavaScript講座3回目にして少し止まってしまいましたがご容赦ください。

　今までの講座では、簡単なJavaScriptのプログラミングとJavaScriptを使った画像のコントロールを2回にかけて実施しましたが、今回はそれらを組み合わせて簡単なゲーム作成を行います。

　今回作成するゲームですが、「ナンバークロス」というものになります。
ルールは簡単、5つのマス目が十字に並んでいてそれぞれに1から5までの数字が書いてあります。その数字をクリックすると一定のルールで数字パネルが入れ替わるので、順次動かしながら目的の配列にするというパズルです。

　言葉だけでは分かりづらいので動作をまとめてみました。
　
　
　
　図で｢1｣の場所を押すと一つずつ下にずれ、はみ出した｢5｣が｢1｣の場所に移ります。同様に｢2｣を押すと右側に、｢4｣の場所を押すと左に、｢5｣の場所を押すと上にずれます。
　そして真ん中の｢3｣のパネルを押すとその周りにあるパネルが右回転します。
　
　これだけでは分かりづらいので、実際の動作環境を置いておきますので、ダウンロードしてください。
　
　JavaScript講座サンプル：ナンバークロス
　
　
　今回はそのステージを作成して次回実際のプログラムすることにします。
　
　ソフトとしての動作は、画面上に並べられた5つの画像ごとに動きを設定すれば大丈夫なのですが、問題は自分だけではなく、自分以外の画像も動かす必要があることです、2回目でやった内容を、1回目のやり方で仕込んでゆきます。できる人はチャレンジしてみよう！
　
　それではまず、画面構成から片付けてゆきましょう。先ほどダウンロードしたものを解凍すると「ここに記入.html」というファイルがありますので、そのファイルをテキストエディタ（1回目で説明したメモ帳で開きます。その中身はこのようになっているはずです。
　
　
　
　まず、必要なものを表示します。先ほどの図では下側になります。
　まずはタイトルと各パネルを表示します。


<本文用ソースコード>

<center>
//タイトル＋操作用の画像表示
<img src="img/sousa.gif" 
  width="450" height="450" align="center"><br>
<table style="        //画像を配置する枠を作ります。
  width:450px;
  border-collapse:
  collapse;">
<tr>               //1段目
<td></td>
<td><img src="img/2.gif" id="area1" alt="1"  width="150" height="150" onClick="swap(1)"></td>
<td></td>
</tr>

<tr>                //2段目
<td><img src="img/1.gif" id="area2" alt="2"  width="150" height="150" onClick="swap(2)"></td>
<td><img src="img/4.gif" id="area3" alt="3"  width="150" height="150" onClick="swap(3)"></td>
<td><img src="img/3.gif" id="area4" alt="4"  width="150" height="150" onClick="swap(4)"></td>
</tr>

<tr>                //3段目
<td></td>
<td><img src="img/5.gif" id="area5" alt="5"  width="150" height="150" onClick="swap(5)"></td>
<td></td>
</tr>
</table>

　
　このソースを図の表示用という部分に記入します。この部分では表示用の枠を決める部分と、画像を表示する部分に分かれます。
　枠の部分ですが、ここではテーブル・タグを使って5つの数字を表示するエリアを決めています。これはもともと表の表現に使われるものですが、簡単なレイアウトを決める場合にも使われるものです。
　画面には表示できませんが下の図のように枠を設定しています。
　
　
　
　もう一つは前回にも出てきた画像表示用のタグ「img」です。その中身を説明すると

• src　　　表示する画像の場所
• width　　表示する画像の横幅
• height　 表示する画像の高さ
• alt　　　画像の説明
• id 　　　画像表示場所に割り振った番号

　となります。そのほかにあるのが「onClick」ですがこれは前回やった「onMouseOver」と同じ種類のもので、クリックしたときに行う動作を決める場所です。
　かっこの中に少し変わったもの書いてありますが、これが今回主役になるJavaScriptの関数です。関数というとなんだか難しそうですが、作業の手順がひとまとまりになったものと思ってもらえばわかりやすいと思います。
　その関数を呼び出す際にかっこの中に自分のいる場所を指定すれば、その場所ごとに画像を入れ替えることになります。
　
　次回は、この心臓部である動作部分作ってゆきます。それまでこのゲーム楽しんで、次回のプログラム楽しみにしてみてくださいね。