Edge Animateでドラクエ風バトルシーン（簡易）を作ってみる

// ターン数
turnNum = 0;  // 全体で使うので var しない。
// 連打防止フラグ
isAnimate = false;  // 全体で使うので var しない。
// ステータス反映
for( var i = 0 ; i < battleData.startStatus.length ; i++ ){
	var currentStatus = battleData.startStatus[ i ];
	var statusElement = sym.getSymbol("TopIndex").getSymbol("OwnStatus" + i);
	statusElement.$("NameText").html( currentStatus.Name );
	statusElement.$("HPText").html( currentStatus.HP );
	statusElement.$("SPText").html( currentStatus.SP );
	statusElement.$("LVText").html( currentStatus.LV );
}
// 初回処理
var currentTurn = battleData.turn[ turnNum ];
// メッセージ反映
sym.getSymbol("TopIndex").$("Message").html( currentTurn.message );
// ターンのカウントを増やす
turnNum++;

if( isAnimate ){
	// アニメ中は動作しない。
} else {
	// 現在のターン
	currentTurn = battleData.turn[ turnNum ];
	nextTurn = battleData.turn[ turnNum + 1 ];
	// modeによって表示分岐
	if( currentTurn.mode == "attack" ) {
		sym.getSymbol("TopIndex").$("Message").html( currentTurn.message );
		sym.getSymbol("TopIndex").getSymbol( "Enemy" + currentTurn.effect.eid ).play( 2000 );
		sym.getSymbol("TopIndex").getSymbol( "Slash" + currentTurn.effect.eid ).play( 500 );
		sym.play(3000);
		// アニメ中フラグ ON
		isAnimate = true;
	} else if( currentTurn.mode == "defence" ) {
		sym.getSymbol("TopIndex").$("Message").html( currentTurn.message );
		sym.getSymbol("TopIndex").getSymbol( "Enemy" + currentTurn.effect.eid ).play( 1000 );
		sym.play(1500); // 画面揺れ
		// ダメージ反映
		var currentStatus = battleData.startStatus[ currentTurn.effect.id ];
		var statusElement = sym.getSymbol("TopIndex").getSymbol("OwnStatus" + currentTurn.effect.id);
		var afterHP = currentStatus.HP - currentTurn.effect.damage;
		statusElement.$("HPText").html( afterHP );
		// アニメ中フラグ ON
		isAnimate = true;
	} else if( currentTurn.mode == "finish" ) {
		window.open("edge_battle_sample.html", "_self");
	}

	// ターンのカウントを増やす
	turnNum++;
}

	<script>
	// バトルデータ
    battleData = {
		startStatus:[
			{ Name:"主人公" , HP:500 , SP:50 , LV:20 },
			{ Name:"仲間A" , HP:400 , SP:80 , LV:22 },
			{ Name:"仲間B" , HP:200 , SP:200 , LV:18 }
		]
		,
		turn:[
			{ mode:"info" , message:"ウィスプ 3ひきがあらわれた！<br /><br />　→つぎへ" },
			{ mode:"attack" , message:"主人公のこうげき！ウィスプAに30のダメージをあたえた！" , effect:{ eid:0 , damage:30 } },
			{ mode:"attack" , message:"仲間Aのこうげき！ウィスプBに25のダメージをあたえた！" , effect:{ eid:1 , damage:25 } },
			{ mode:"attack" , message:"仲間Bのこうげき！ウィスプCに8のダメージをあたえた！" , effect:{ eid:2 , damage:18 } },
			{ mode:"defence" , message:"ウィスプAのこうげき！主人公は5のダメージをうけた！" , effect:{ eid:0 , id:0 , damage:5 } },
			{ mode:"defence" , message:"ウィスプBのこうげき！主人公は12のダメージをうけた！" , effect:{ eid:1 , id:0 , damage:12 } },
			{ mode:"defence" , message:"ウィスプCのこうげき！仲間Bは8のダメージをうけた！" , effect:{ eid:2 , id:2 , damage:8 } },
			{ mode:"attack" , message:"主人公のこうげき！ウィスプAに28のダメージをあたえた！<br />ウィスプAをたおした！！" , effect:{ eid:0 , damage:28 } , dead:{ eid:0 } },
			{ mode:"attack" , message:"仲間Aのこうげき！ウィスプBに20のダメージをあたえた！" , effect:{ eid:1 , damage:20 } },
			{ mode:"attack" , message:"仲間Bのこうげき！ウィスプBに18のダメージをあたえた！<br />ウィスプBをたおした！！" , effect:{ eid:1 , damage:18 } , dead:{ eid:1 } },
			{ mode:"defence" , message:"ウィスプCのこうげき！仲間Aは8のダメージをうけた！" , effect:{ eid:2 , id:1 , damage:8 } },
			{ mode:"attack" , message:"主人公のこうげき！ウィスプCに22のダメージをあたえた！" , effect:{ eid:2 , damage:22 } },
			{ mode:"attack" , message:"仲間Aのこうげき！ウィスプCに11のダメージをあたえた！" , effect:{ eid:2 , damage:11 } },
			{ mode:"attack" , message:"仲間Bのこうげき！ウィスプCに15のダメージをあたえた！<br />ウィスプCをたおした！！" , effect:{ eid:2 , damage:15 } , dead:{ eid:2 } },
			{ mode:"finish" , message:"ウィスプ 3ひきをたおした！<br /><br />　→タッチするともう一度再生" }
		]
    }
	</script>