TOP サイトマップ タイピングゲームを作る講座 ゲーム DIABLO
チャット BBS リンク集 顔文字 逆アクセスランキング

JavaScriptでタイピングゲームを作ろう講座
〜JavaScriptの基本〜

まずはタイピングゲームを作成する前にJavaScriptの基本的な事を学びます。
詳細についてはJavaScriptについてのサイトで勉強するのがいいと思います。


1:メニュー

1-1.JavaScriptの記述する場所
1-2.変数
1-3.演算
1-4.関数
1-5.条件文
1-6.繰り返し文


1-1.JavaScriptの記述する場所

まず最初にJavaScriptはどこに記述すればいいのか?
それはタグの中の<head>〜</head>内、もしくは<body>〜</body>内に記述します。

ではブラウザがどこからがJavaScriptでどこまで続いてるのか?ということですが、それがブラウザにわかるように、 JavaScriptを記述する場所は<script language="JavaScript">〜<script>内に書く事になります。 こうすることでその部分がJavaScriptであるとブラウザに教えることになります。

メニューへ戻る


1-2.変数

さてJavaScriptで一番多くでてくるものとして変数があります。 この変数は数値や文字などのデータを保存できるものです。 一度データを入れても後で変更したりもできます。 グローバル変数やローカル変数などがありますが、これはスクリプト全体で利用できるのと、一部で利用できるものと理解してください。 今回のタイピングゲームではほとんどがグローバル変数になります。 変数の名前の付け方には規則がありますが、規則を守れば自由な名前を書く事ができます。 変数の使い方としては、

hensuu=5;
test="こんにちは";

などとして数値や文字のデータを入れておく事ができます。 こうすることで変数のhensuuを指定すると数値の5を取り出すことができます。 数学などでみる=と違うのは、これは等しいという意味ではなく右辺を左辺に代入するという意味です。 ちなみに等しいかどうかはhensuu==5などとします。 例を見てわかるとおり、文字列のデータはダブルクォーテーション(")で囲みます。ちなみに一文字のデータはシングルクォーテーション(')で囲みます。

メニューへ戻る


1-3.演算

数学などで行う四則演算をしたい場合があります。
普通の数学と違う記号を使う以外は同じように使う事ができます。

数学(+,−,×,÷)、JavaScript(+,-,*,/)

上のようにそれぞれ対応します。 使い方としては、数学で(10÷5+2)×(3−1)の演算をJavaScriptで記述してみます。 今回はその計算結果を変数resultに保存するとします。

result=(10/5+2)*(3-1);

上記のようにすれば計算して変数resultに値が代入されることになります。 今回小括弧がありますがこれは数学と同じように括弧内の演算から行うということを示しています。

メニューへ戻る


1-4.関数

関数とは一つのまとまった処理をおこなうものです。
関数は作成しなくても大丈夫ですが、同じ動作を行う処理を何度も記述していたのでは効率が悪いので、 何度も使う動作を関数としてひとつにまとめ、使用する時に呼び出して使います。

関数の書き方は

function 関数名(仮引数){
 動作;
}

と記述します。関数名は規則に反しない限り自由に名前をつけることができます。仮引数とはその関数内だけで使用できる変数で、 他の関数から渡された引数を受け取ります。引数を受け取らない場合は仮引数は記述しなくてもいいです。 仮引数は複数取ることができ、カンマ(,)で区切って並べます。

関数の呼び出しは

関数名(引数);

で呼び出せます。呼び出した関数で引数を取らない場合は引数部分は記述しなくて大丈夫です。 なおスクリプトは上から順番に実行されるので、関数呼び出しの前に関数の本体(実際に行う動作がかかれているもの)を 記述しておかなければいけません。 次のサンプルは関数sum()を 作り、呼び出す例です。

function sum(b){ //関数の本体
 return b++;
}

c=5;
b=sum(c); //関数sum()の呼び出し

わかりましたでしょうか?説明には入っていない//、returnとb++というものがでてきています。
//はコメントが始まる前に記述します。これ以降の一行分はコメントとして扱われ、スクリプトには影響をおよぼしません。 なのでプログラムをわかりやすいようにコメントを入れると良いでしょう。
ちなみに/*コメント*/とすることもできます。
returnというのは呼び出し元に変数や値などを返す処理を行い、b++というのは変数bの値に+1をするということです。 つまりb=b+1と同じ事をしてます。

では上の例ではいったいどういった事が行われるのか?それはまず変数cに値5を入れ、その変数cを引数として関数sum()を 呼び出します。関数sum()を呼び出すと関数sum()に処理が移り、変数cの値を仮引数bに代入します。
その変数bの値に+1してその値をreturnで呼び出し元に値が戻りその値を変数bに代入します。

さてこの結果変数b,cの値はそれぞれいくつになるのでしょうか?
答えはbが6、cが5になります。
ここで疑問に思った方も多いと思います。なぜなら変数bが二つあるからです。 ひとつは関数内の仮引数として、もうひとつは関数呼び出しから戻ってきた時の値を入れるbです。
さきほどの答えはあまりいい答えではありませんでした。正しい答えは

グローバル変数bは6、ローカル変数bはなし、グローバル変数cは5になります。
つまり関数内の仮引数であるbは関数sum()内での動作が終了すると同時に受け取った値を破棄してしまうのです。
ローカル変数b(sum()関数内の仮引数b)はなしと書いてありますが、ゴミ(不定の値)が入っているか、もしくは ブラウザを開いたときにエラーとなります。

と長々と書いていますが、JavaScriptでは変数宣言でvarを変数名の前につけて宣言しなければいけない そうなんですが、わたしはすべてつけてません。つけないとどうなるかというと関数内で宣言した変数もグローバル変数 になるとか?

ですがブラウザによってはどこでvarをつけていてもグローバル変数になってしまうという話もあるので、実際わたしが組んだスクリプトはほとんどすべてがグローバル変数で取り扱ってます。 わたしの書いた文章は当てにならないかも・・・

メニューへ戻る


1-5.条件文

さてスクリプトを組む上で必要になってくるのが条件文です。例えば0の時は+1、1の時は+2などと 条件に合わせて処理を行いたい時があります。(条件文にはswitch文もありますが今回は扱いません) そんな時は

if(条件式){
 動作;
}else if(条件式){
 動作;
}else{
 動作;
}

などと記述します。条件式というのは変数aが3より大きいかなどの条件を記述する場所です。
else if(条件式)というのはif(条件式)でひっかからなかった場合でかつelse if(条件式)の条件にあった場合動作します。
最後のelseはどの条件にもひっかからなかった場合に動作します。
ここではelse if(条件式)とelseを記述していまうすが、これは任意で記述しなくてもいいです。例えば

if(条件式){
 動作;
}

だけでも使用できます。それではサンプルとして変数aの値が5以上の時は+1、1より上4以下の時は+2、それ以外の時は+3 をする条件式を書いてみます。

if(a>=5){ //変数aが5以上の時
 a++;
}else if(a>1 && 4>=a){ //変数aが1より上4以下の時
 a=a+2;
}else{ //それ以外の時
 a=a+3;
}

さてここで5以上や4以下の時に不等号として>、<を使っています。これは数学の≧や≦と同じです。
ただし=の前に必ず>や<を記述しなければいけません。

メニューへ戻る


1-6.繰り返し文

1から10までを足す動作をする場合、ひとつずつ足していったのでは効率が良くありません。
そこで活躍するのが繰り返し文です。

繰り返し文にはfor文、while文,do-while文がありますが、今回はfor文のみ取り扱います。
その他の繰り返し文も動作的には同じものになります(多少違います)。

for文は以下のように記述します。

for(初期設定;条件式;再設定){
 動作;
}

実際のスクリプトを見ないとどうなっているのかわからないと思います。なので例として1から10までを足す動作をする スクリプトを記述します。

a=0;
for(i=1;i<=10;i++){ //1から10までを足す
 a+=i;
}

上記の説明としては、初期設定として変数iに1を代入します。そして条件式i<=10(iが10以下の時)はfor文内を実行するので 変数aにiの値(この時点では1)を足します。ここでa+=iはa=a+iと同じことを短く書いたものです。
一行に同じ変数aが二つありこんがらがりそうですが、これは

b=a+i;
a=b;

と同じことを短く書いたものです。動作的には右辺のa+iをした後に左辺のaに代入するので問題ないです。 これでfor文内の動作が終了して、次に再設定のi++を実行します。
これでiの値が1増えて2になります。その後、条件式で条件に合ってるのでまたfor文内を実行します。
これがiが10になるまで実行し、その条件を外れるとfor文は終了します。

メニューへ戻る

さて、ごく簡単にJavaScriptの基本事項について述べてきましたが、これだけのことが理解できれば、 この後の講座も読み進める事ができると思います。

利用規約 講座のTOPへ戻る