その２へ戻る
その３ 初期化処理を組み込もう
|
うおっほん。
今回は、前回のHTMLに、初期化処理のJavaScript部分を組み込んでみよう。
|
|
やった〜。やっとJavaScriptのプログラミングが始まるんだね。
すかじい、早く教えてよ〜。
|
すかじい
うむ。その前に、JavaScriptがどこから開始しているのか考えてみよう。
HTMLのBODYタグが <body onload="Syokika()"> となっていたと思うが、
こうすることで、HTMLがすべて読み込み終わってからSyokika()関数を実行することができるんじゃ。
ひろちゃん皇帝
なんでHTMLをすべて読み込んでからでないと実行しちゃだめなの？
すかじい
いい質問じゃ。
Webのページというのは上から下に順番に読み込まれていくんじゃ。
今回の初期化処理では、HTMLの <TEXTARAE> に直接値を書き込んだりしているのじゃが、もし <TEXTARAE> が読み込まれる前に関数を実行してしまうと<TEXTARAE>が見つからなくてエラーがでてしまうんじゃ。
JavaScriptでプログラミングする際には重要なポイントなので、良く覚えておくようにな。
|
今回はこの Syokika() 関数を作ればいいのね。
|
すかじい
そうじゃ。
まずはソースを見てみよう。
前回のHTMLの
<script language="JavaScript">
<!--
// -->
</script>
部分のみ載せているぞ。
<script language="JavaScript">
<!--
// 使用する変数の宣言 --------------------------------------------------------
cr = "\r\n"
mojiretu= ""; // 画面に表示する文字列取得用
width = 8; // 画面の広さ
height = 20; // 画面の高さ
score = 0; // スコア
level = 1; // レベル
// 仮想VRAM用２次配列
vr = new Array( width );
for ( i = 0; i < width; i++ ) {
vr[i] = new Array( height );
}
// 初期化用関数 -------------------------------------------------------------------
function Syokika() {
// 変数の初期化
score = 0;
level = 1;
for ( i = 0; i < height; i++ ) {
for ( j = 0; j < width; j++ ) {
vr[j][i] = "□"; // 仮想画面クリア
}
}
// 仮想画面を表示する
Hyouji();
// 次画面をクリアする
mojiretu = "□□□□" + cr +
"□□□□" + cr +
"□□□□" + cr +
"□□□□";
document.game.tugi.value = mojiretu;
}
// 仮想画面を表示する関数
function Hyouji() {
// 画面に表示する文字列の作成
mojiretu = "";
for ( i = 0; i < height; i++) {
for ( j = 0; j < width; j++ ) {
mojiretu = mojiretu + vr[j][i];
}
if ( i != height - 1 ) {
mojiretu = mojiretu + cr;
}
}
// 画面の表示
document.game.gamen.value = mojiretu;
document.game.SCORE.value = score;
document.game.LEVEL.value = level;
}
function Moveturn() {
}
function Moveleft() {
}
function Moveright() {
}
function Movedown() {
}
// -->
</script>
すかじい
と、こんな感じじゃ。
赤い部分が前回からの追加部分じゃ。
最初に変数の宣言がある。
実際に自分で何かプログラムを作る際は、最初、どんな変数を宣言すればいいのか判らない事が多い。
作成中に必要な変数がどんどん出てくるので、その際にどんどん追加するスタイルで作っていけば良い。
とりあえず、今回使用する重要な変数だけ説明しよう。
cr = "\r\n"
という部分では、改行コードを変数に入れておる。
テキストエリアで文字を折り返すのには改行コードが必要で、それを変数に入れておる。
\r\nはWindows用の改行コードじゃ。
マックでは\r、Linuxでは\n になるが、今回はWindowsに特化した作りになっておる。
仮想VRAM用２次配列 というのがあるが、これは実際の画面の代わりに画面の状態を保存しておく２次配列じゃ。
ここでいろんな処理を行った結果がテキストエリアに表示される。
ひろちゃん皇帝
すかじい、２次配列って何？
すかじい
配列とは、変数を vr[0]、vr[1]、vr[2]、のように変数名と数値で扱うことができるようにする方法じゃ。
２次配列とは、vr[0][0]、vr[0][1] のように、数字の部分が２つある配列のことじゃ。
配列を説明するのは難しいので、vr 配列変数が何に使われているのかが解れば良い。
テキストエリア内には、横8×縦20 のブロックが並ぶことになっておる。
その状態を変数に持たせるために２次配列を使っておる。
配列の宣言は、
配列変数名 = new Array( 使う数 );
としなければいけないんじゃ。
vr 変数は 配列の宣言部分で、
vr = new Array( width );
for ( i = 0; i < width; i++ ) {
vr[i] = new Array( height );
}
としておる。
width = 8 で、 height = 20 だから、
これは、vr[i][0〜19の20個] 使うのを 0〜7 の 8回繰り返しておる。
つまり
vr[0][0]、vr[0][1] ・・・ vr[0][19]
vr[1][0]、vr[1][1] ・・・ vr[1][19]
・
・
vr[7][0]、vr[7][1] ・・・ vr[7][19]
の範囲が使えるようになったのじゃ。
リナ姫
0〜19 ということは 全部で20個、0〜7 ということは全部で8個、
これは画面の縦と横の数と同じってことね。
すかじい
その通り。
vr[0][0] には テキストエリアの一番左上のブロックの情報が、
vr[7][19] には テキストエリアの一番右下のブロックの情報が入ることになるわけじゃ。
ちょっとややこしいが、実際に使っているところをみれば、また解ってくると思うぞ
では、Syokika() 関数の中を見てみるかの。
ひろちゃん皇帝
最初にスコアを0点にして、ゲームのレベルを1にしているんだね。
すかじい
そうじゃ。これは後ほど表示するので覚えておくようにな。
さて、
for ( i = 0; i < height; i++ ) {
for ( j = 0; j < width; j++ ) {
vr[j][i] = "□"; // 仮想画面クリア
}
}
という所は、仮想画面用２次配列の中身をすべて「□」にしている。
つまり、画面の初期状態をつくっておるわけじゃな。
リナ姫
次に Hyouji() 関数を実行しているわね。
すかじい
Hyouji() 関数は、vr[ ][ ] ２次配列の中身を実際にテキストエリアに表示する関数じゃ。
では、Hyouji() 関数に飛んで、Hyouji() 関数を見てみよう。
// 画面に表示する文字列の作成
mojiretu = "";
for ( i = 0; i < height; i++) {
for ( j = 0; j < width; j++ ) {
mojiretu = mojiretu + vr[j][i];
}
if ( i != height - 1 ) {
mojiretu = mojiretu + cr;
}
}
というところでは、vr[ ][ ] ２次配列を結合して、１つの文字列にしておる。
後でテキストエリアに表示するための準備じゃな。
ひろちゃん皇帝
if ( i != height - 1 ) {
mojiretu = mojiretu + cr;
}
ってところは何をしているの？
すかじい
ここは、横１行分を作成した後で、改行をつけておる。
cr というのは変数じゃ。
最初の方で cr = "\r\n" と宣言したじゃろ。
これを表示すると
□□□□□□□□\r\n
□□□□□□□□\r\n
・
・
・
と言う感じで表示されるのじゃ。
ただし、一番最後の行に改行を付けてしまうと一番最後の行が
□□□□□□□□\r\n
←このように１行余分に空白ができてしまうんじゃ。
だから、一番最後の行以外の時だけ改行を付けておる。
あとは、作成した文字列を、
document.game.gamen.value = mojiretu;
としてテキストエリアに表示しておる。
ひろちゃん皇帝
あっ！ じゃあ、
document.game.SCORE.value = score;
document.game.LEVEL.value = level;
という所は、さっき初期化したスコアとレベルが表示されるんだね？
すかじい
そのとおりじゃ。
実際にどこに表示されるかは、HTMLを見てみるとよいぞ。
SCORE と LEVEL という名前のついた INPUT タグが見つかるじゃろう。
さて、Hyouji() 関数が終わったのでまた Syokika() 関数を見てみよう。
リナ姫
これは、なんとなく解るわ。
次のブロックを表示する部分を、「□」で埋めてるのね。
すかじい
そのとおりじゃ。
これで、初期化部分は完成じゃ。
実際にHTMLファイルにしてブラウザで見てみると、HTMLだけの時には無かったスコアとレベルが表示されとるじゃろ。
また、次のブロックを表示する部分と、メインの画面が「□」で埋められているじゃろ。
その４ メインルーチンを作ろうへ続く・・・
|