JavaScriptの書き方

まさおコンストラクションFXでメソッドを使用するには、準備が必要です。
とりあえずなんでもいいので、JavaScriptを使用しているまさおのソースファイルを見ながら解説を見るといいと思います。

変数について

ここでは、プログラムを記述する際に知っておくべき数、変数について解説します。

変数とは？

その名前の通り値が一定でなく変わる数のことです。
きちんとした定義は、

プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。

とのことです。
変数を使う場合はx,y,nなどの文字を使います。

宣言について

変数は宣言をしないと使えません。

宣言って何？

コンピュータは自動的に変数を判断しているわけではありません。判断させるには、これが変数であるとコンピュータに教えてあげる必要があります。これを変数を宣言するといいます。

宣言のしかた

宣言の仕方は以下のようになります。ここでは、変数を"masao"としましょう。

var masao;

このように記述すれば、宣言をしたことになります。上記のように変数には、x,y,nなどの半角英数字を使いましょう（数字から始まる変数はいけないようです）。
しかし、半角英数字であればなんでもいいわけでなく、制御文に使う(if,elseなど。このような語を予約語といいます。）文字はだめです。

良い例
boss_x,boss2

悪い例
2n,まさお,if,else

また、宣言する際になにか値をいれたい場合、

var masao = 2;
var masao_dead = false;
var message = "ゲームオーバーです";

と記述しましょう。

ちなみにmasao = 2というのは、masaoという変数に2を代入するという意味で、masaoと2が等しいわけではありません。
このままではわかりにくいので、a,b二つの数があった場合、a = bだとaにbを代入するという意味で、aとbは別の数であるということです。
等しいことを示す場合には=を二つ用いて、a == bとしましょう。これで、aとbが等しいということになります。例としては、

var a = b;　　　　//　aにbを代入する
if(a == b){
//　aがbである
	a = c;　　　　//aにcを代入する
}
if(a == c){

～～～～～～～～（略）～～～～～～～～

わかりにくいかもしれませんが頑張って理解してください。

appletタグの記述

まさおはJavaアプレットで動くので、appletタグを利用します。
appletタグは以下のように記述します。

<applet code="MasaoConstruction.class" width="512" height="320" archive="mc_c.jar" id="ID名">

サンプルでは、ID名にapplet1_idを使っているので以後ID名はapplet1_idとします。

DOMを使う

DOMを使うことで、どのブラウザでも動作します。

アプレットからDOMの値を取得する

document.getElementById("applet1_id")

と記述しましょう。

メソッドの呼び方

document.getElementById("applet1_id").メソッド名

と記述することでメソッドを呼ぶことができます。

しかし

いざプログラムを書くとなると、document.getElementById("applet1_id").メソッド名といちいち書くのは面倒くさいですよね？
そこで、メインプログラムのはじめになんでも良いので変数（サンプルではApplet1)を用意して、

Applet1 = document.getElementById("applet1_id");

と記述すれば、document.getElementById("applet1_id").メソッド名とApplet1.メソッド名は同じ動作をしてくれます。
変数はなんでもいいので、もっと短くするのもいいかもしれません(docとか）。

メソッド名につける()は絶対に忘れない！

メソッド名には必ず()をつけましょう。IEでは問題なく動作をしても、他のブラウザでは()の有無で動作が異なります（このへんはあまり詳しくありません。でも()は絶対につけましょう。）。

その他注意すべきこと

1．動作の後には;（セミコロン）を記述する
2．空白はプログラムに影響を及ぼさない。ということは、後で自分が点検するときに見やすくするために空白を入れてもよいということ。
例として、次のプログラムを見てください。

	else if(boss_con >= 100) {
		//  戦闘中
 
		if(boss_con == 100) {
			//  左へ移動中
 
			//  移動する
			boss_x = boss_x+boss_vx;
 
			if(boss_x <= sl_x+384) {
				//  射撃位置へ来た
				boss_con = 200;		//  射撃中
				boss_x = sl_x+384;
				boss_vx = 0;
			}
		}
	}

サンプルではこのように書いてあると思います。この空白は見やすくするためだけのものなので、空白はなくても正しく動作します。
サンプルではTabキーで空白を入れています（全角の空白だとエラーがでるかも？）
このように記述すれば、if文の{}がどこからどこまでなのかが分かりやすいですね。

同期式と非同期式

プログラムにも種類があって同期式と非同期式があります。

非同期式について

非同期式は、ゲーム本体であるJavaAppletとJavaScriptのプログラムが別々に動作している状態です。
timerID = setInterval("関数名",実行間隔時間(ms))を使います。
まさおコンストラクションUpdate11以降だと一部のメソッドは非同期式プログラムでは使えません。

非同期式の記述

非同期式プログラムの記述のしかたは、
適当な関数を作り、それを「timerID = setInterval("関数名",実行間隔時間(ms))」命令で動作させるだけです。

setInterval("関数名",実行間隔時間(ms))は、指定した関数を指定した時間間隔で実行させるものです。例としては、

timerID = setInterval("mainLoop()",50);

これは、mainLoop()という関数を0.05秒毎に実行するという意味になります。
この場合、JavaAppletとJavaScriptは違う周期で動作していることになります。
非同期式だと表示がぎこちなかったり、ゲーム開始時にエラーがでて動かなかったりするようです。

非同期式プログラムでエラーが起こった場合（プレイヤー側）

エラーが起きている場合IEなら左下に三角形で囲まれた「！」が出ています。
FireFoxならエラーコンソールにエラー内容が表示されています。
こうなっていた場合、一旦ブラウザの「戻る」をクリックし、ブラウザの「次へ」をクリックすれば、正常に動作する場合があります。
上記を試しても、正常に動作しない場合は、作成者側のプログラムミスの可能性があります。その時は、そのサイトの掲示板等で作成者に連絡してください。
同期式プログラムのエラーも同様に対応しましょう。

非同期式プログラムでエラーが起こった場合（作成者側）

bodyタグに以下のように「onLoad="実行したい関数（ここではonLoadJS()"」を加え、onLoadJS()内にtimerIDを使って非同期式のプログラムを実行すると非同期式でも起動時のエラーが起きなくなるようです。
サンプルでもこのような記述が使われています。

function onLoadJS() {
	Applet1 = document.getElementById("applet1_id");
	timerID = setInterval("mainLoop()",50);
}

<body … onLoad="onLoadJS()">

同期式について

同期式は、JavaAppletからJavaScriptのプログラムを呼び出して、同時に動作している状態です。
timerID = setInterval("関数名",実行間隔時間(ms))を使うことはできず、決まって0.1秒ごとにJavaScriptを呼び出します。
また、「MasaoXJSS2.class」か「MasaoJSS.class」を使っている時のみ同期式プログラムは動作します。（Update9以降でないと「MasaoJSS.class」は使えないので注意。）

同期式の記述

クラスファイルは「MasaoXJSS2.class」か「MasaoJSS.class」を使用します。
appletタグは以下のように記述します。

<applet code="MasaoXJSS2.class" width="512" height="320" archive="mc_c.jar" id="Applet1" mayscript>

「mayscript」をappletタグ内に必ず記述しましょう。理由はわかりませんが、そういう仕様です。

詳しい動作
ゲーム開始時にアプレットが「userJS」という関数を呼び出します。
後は各々が作成したプログラムが動きますが、サンプルプログラムのように、起動時の初期化をしたかを確かめ、
ゲームモードによっていろいろ動作を変えるほうが良いので、最低限「game25.html」の「userJS」関数の動きを導入したほうが良いです。

同期式プログラムでエラーが起こった場合（作成者側）

同期式プログラムの場合、ページ変更などによってエラーが発生することがあります。
そこでbodyタグに「onUnload="実行したい実数（ここではonUnloadJS()）"」を加え、次のように記述します。

//グローバル変数
var unload_f = 0;
var init_f = 0;
 
function userJS(Offscreen_g.mode.view_x,view_y) {
 
	if(unload_f > 0) return;
 
	if(init_f == 0) {
		init_f = 1;
 
		userInitJS();
	}
 
 
	if(mode == 1) {
 
		userTitleJS(Offscreen_g);
	}
	else if(mode >= 100  &&  mode < 200) {
		if(Applet1.getJSMes() >= 1) {
 
			Applet1.setJSMes(0);
 
			userGameStartJS();
		}
		else {
			userGameJS(Offscreen_g,view_x,view_y);
		}
	}
	else if(mode == 200) {
		userGameoverJS(Offscreen_g);
	}
	else if(mode == 300) {
		userEndingJS(Offscreen_g);
	}
	else if(mode == 400) {
		userChizuJS(Offscreen_g);
	}
}
 
 
function onUnloadJS() {
	unload_f = 1;
}	
 
 
<body … onUnload="onUnloadJS()">

結局どちらがいいのか

僕は当然同期式をお勧めします。
非同期式では使えないメソッドがあるし、表示がぎこちなかったりするからです。
もちろん、どちらにするかはあなたの自由です。

制御文について

JavaScriptを使用する際は、制御文を知っておかないと、上手く作れません。
制御文については、とほほのWWW入門というページのほうが詳しいので、そこも参考にするといいです。
とりあえず、よく使う制御文（僕はifとelseしか使ったことがないんですけど）を下にまとめました。

条件分岐（if,switch)

・if(条件）{　処理1　} else{　処理2　}

条件の部分が真(true)であるとき、処理1を行います。条件が真でない（false）場合、elseの処理2を行います。
else以降の記述は必要があるときにしましょう。
あと、else ifでさらに細かい分岐にすることも可能です。
この制御文は、まさおコンストラクションFXでJavaScriptを使う際によく用いるので、せめてこれだけは覚えておきましょう。

・switch(条件){ case 数値:　処理 }

条件の値に応じて処理を振り分けます。valueに変数を用いることは不可能です（プログラムが不正動作するようです）。どの条件にも当てはまらないとき、defaultの部分の処理を行います。例としては、

switch(boss_con){
case 1:
　　　　boss_x = 32;
　　　　break;
case 2:
　　　　boss_x = 30;
　　　　break;
case 3:
case 4:
　　　　boss_x = 28;
　　　　break;
default:
　　　　boss_x = 34;
　　　　break;
}

case 3:とcase 4:の部分がわかりにくいかもしれませんが、これは、boss_conが3または4のとき処理を行うという意味です。

ループ関係(while,do,for,break)

・while(条件) { 処理 }

条件が真である間、処理を繰り返し実行します。例としては、

n = 0;	//　nに0を代入
while(n < 10){
//　nが10を下回るとき
	//　boss_xの値を1減らす
	boss_x = boss_x-1;
	//　nの値を1増やす
	n++;
}

この場合、nが10を超えるまで、boss_xの値を減らしていくことになります。

・do { 処理 } while(条件)

条件が真である間、処理を繰り返します。
上記のwhile(条件) { 処理 }と何が違うのかというと、条件が真でなくても、処理が少なくとも一回は実行される点です。例としては、

n = 0;
do {
	boss_x = boss_x-1;
	n++;
} while (n < 10);

・for (処理1,条件,処理2) { 処理3 }

最初に処理1を実行し、次に処理3と処理2を条件が真である間繰り返し実行します。例としては、

for (i = 0; i < 10; i++) {
	boss_x = boss_x-1;
}

・break

最も内側のループ(for,while,do)や、switch文のcase節を抜けます。
breakのあとに"ラベル"をつけて入れ子になったループ(ループの中にループがあるようなもの)を一度に抜けだすことが可能です。例としては、

for (i = 0 ; i< 10; i++){
　　　if (i == 5) {
　　　　　　break;
　　　}
　　　Applet1.equipJet(20);
}
 
abc:
　for (i = 0; i< 10; i++){
　　　for ( j = 0; j < 10; j++){
　　　　　　if ( i + j == 12){
　　　　　　　　　break abc;
　　　　　　}
　　　　　　Applet1.equipJet(20);
　　　}
　}

jsファイル

HTMLにそのままプログラムを記述しても何の問題はありませんが、よく使うスクリプトとかはjsファイルとして保存するといいです。
jsファイルとは、JavaScriptのファイルで関数を記述しておくファイル（つまりプログラムを記述するファイル。）です。

記述法

HTMLに記述する場合、

<script type="text/javscript">～</script>

等の記述が別途必要になりますが、
jsファイルではメインプログラムのみで、上記は必要ありません。
拡張子は"js"です。（メモ帳で保存する際、ファイル名.jsとすればよいです。）

読み込み

jsファイルを作成したら、HTMLのヘッダに次のように記述してください。

<script type="text/javascript" src="ファイル名.js"></script>

これでjsファイルを読み込んだことになります。複数のjsファイルを取り扱うことも可能です。また、読み込ませて、さらにHTMLに直接スクリプトを記述することも可能です。

これで知っておくべき部分は知ったと思います。このページのような解説サイトは他にもありますので、そこも参考にするといいです。僕が解説しきれてない部分もあると思うので。
実際、サンプルのプログラムに少し手を加える程度でもある程度ボスは作ることができます。習うより慣れろ。さまざまなメソッドを試して、素晴らしいボスを作っていきましょう！！

戻る