解説/初級編 †
ワークエリアの利用 †
- 各シナリオ関数間でデータを共有するため、ワークエリアを用意しています。
- workプロパティに空のオブジェクトを作成してあります。この配下は自由に使用してください。このとき、workオブジェクトそのものを削除したり、work以外の他のメンバを破壊しないように注意してください。
new Theater({
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif"
],
scenario:[
function(){
this.work.count = 0;
this.act({
img: "img/sample1.gif",
msg: "カウント：" + this.work.count
});
},
function(){
this.work.count++;
this.act({
img: "img/sample2.gif",
msg: "カウント：" + this.work.count
});
},
function(){
this.work.count++;
this.act({
img: "img/sample3.gif",
msg: "カウント：" + this.work.count
});
}
]
});
シナリオ関数の返却値と引数 †
- 各シナリオ関数の返却値は、次に実行されるシナリオ関数の引数に設定されます。
- 何も返却しない場合は、nullが設定されます。
- 次のシナリオ関数へ値を渡したいだけなら、ワークエリアを使用するよりこちらのほうが簡便です。
new Theater({
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif"
],
scenario:[
function(){
this.act({
img: "img/sample1.gif",
msg: "trueを返却・・・"
});
return true;
},
function(result){
this.act({
img: "img/sample2.gif",
msg: "前のシナリオ関数の返却値：" + result
+ "。falseを返却・・・"
});
return false;
},
function(result){
this.act({
img: "img/sample3.gif",
msg: "前のシナリオ関数の返却値：" + result
});
}
]
});
サブシナリオの設定と実行 †
- シナリオ内で別のシナリオ関数配列(サブシナリオ)を設定・実行することができます。
- pushメソッド、およびkeepメソッドを使用します。
- pushメソッド
- 機能：サブシナリオを設定する。
- 第一引数：設定するサブシナリオ関数配列
- keepメソッド
- 機能：シナリオ関数終了後、直ちに次のシナリオ関数を実行する。
var subScenario = [
function(){
this.act({
img: "img/sample2.gif",
msg: "サブシナリオ１"
});
},
function(){
this.act({
img: "img/sample3.gif",
msg: "サブシナリオ２"
});
}
];
new Theater({
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif",
"img/sample4.gif"
],
scenario:[
function(){
this.act({
img: "img/sample1.gif",
msg: "メインシナリオ１"
});
},
function(){
this.push(subScenario);
this.keep();
},
function(){
this.act({
img: "img/sample4.gif",
msg: "メインシナリオ２"
});
}
]
});
- pushメソッドは引数のサブシナリオ関数配列を実行シナリオとして設定します。
- 設定されたサブシナリオは次回から実行され、終了後は元のシナリオに復帰し、続きが実行されます。
- pushメソッドはサブシナリオを設定するだけで、実行はしません。直ちに実行する場合はkeepメソッドを呼び出します。
- keepメソッドは、実行中のシナリオ関数の終了後、直ちに次に実行すべきシナリオ関数を実行するものです。呼び出した時点で次のシナリオ関数が実行されるわけではないので注意してください。
- サブシナリオ内で更にサブシナリオを呼び出すことも可能です。
基本メニュー表示とユーザ入力取得 †
- メニューを表示し、ユーザの入力結果を取得することができます。
- 基本的なメニューについて、４つのメソッドを用意しています。ここでは、これらのメソッドについて説明します。
- alertメソッド
- 機能：メッセージと「確認」ボタンで構成されるメニューを表示する。
- 第一引数：表示するメッセージ。
- 次回シナリオ関数実行時引数：指定なし(null)
- confrimメソッド
- 機能：メッセージと「はい」「いいえ」ボタンで構成されるメニューを表示する。
- 第一引数：表示するメッセージ。
- 次回シナリオ関数実行時引数：
- 「はい」押下時：true
- 「いいえ」押下時：false
- promptメソッド
- 機能：メッセージとテキストボックス、および「入力」ボタンで構成されるメニューを表示する。
- 第一引数：表示するメッセージ。
- 第二引数：テキストボックスのデフォルト値。
- 次回シナリオ関数実行時引数：テキストボックスの入力値。
- choiceメソッド
- 機能：可変個数のボタンで構成されるメニューを表示する。ボタンの個数は第一引数に設定された配列の長さによる。
- 第一引数：ボタンに設定する文字列の配列。
- 次回シナリオ関数実行時引数：選択されたボタンの文字列。
new Theater({
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif"
],
scenario:[
function(){
this.alert("alertメソッド。");
},
function(){
this.confirm("confirmメソッド。");
},
function(result){
this.act({
img: "img/sample1.gif",
msg: "confirmの結果：" + result
});
},
function(){
this.prompt("promptメソッド。", "初期値です。");
},
function(result){
this.act({
img: "img/sample2.gif",
msg: "promptの結果：" + result
});
},
function(){
this.choice(["choice1", "choice2", "choice3"]);
},
function(result){
this.act({
img: "img/sample3.gif",
msg: "choiceの結果：" + result
});
}
]
});
- 各メニューは、表示終了直後に次のシナリオ関数を実行します。このとき、alertメソッド以外は、ユーザの入力結果を引数に設定します。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
