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

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

// クリックイベントの設定（view全体に）
this.TopIndex.onClick = function( e ){
	if( stage.isAnimate ){
		// アニメ中は動作しない。
	} else {
		// 現在のターン
		var currentTurn = battleData.turn[ stage.turnNum ];
		var nextTurn = battleData.turn[ stage.turnNum + 1 ];
		// modeによって表示分岐
		if( currentTurn.mode == "attack" ) {
			e.target.Message.text = stage.multiLineConvert( currentTurn.message );
			e.target[ "Enemy" + currentTurn.effect.eid ].gotoAndPlay( "defence" );			
			e.target[ "Slash" + currentTurn.effect.eid ].gotoAndPlay( "attack" );
			e.target.parent.gotoAndPlay( "attack" );
			// アニメ中フラグ ON
			stage.isAnimate = true;
		} else if( currentTurn.mode == "defence" ) {
			e.target.Message.text = stage.multiLineConvert( currentTurn.message );
			e.target[ "Enemy" + currentTurn.effect.eid ].gotoAndPlay( "attack" );		
			e.target.parent.gotoAndPlay( "defence" );
			// ダメージ反映
			var currentStatus = battleData.startStatus[ currentTurn.effect.id ];
			var statusElement = e.target[ "OwnStatus" + currentTurn.effect.id ];
			var afterHP = currentStatus.HP - currentTurn.effect.damage;
			statusElement.HPText.text = afterHP;
			// アニメ中フラグ ON
			stage.isAnimate = true;
		} else if( currentTurn.mode == "finish" ) {
			// アニメ中フラグ ON
			stage.isAnimate = true;
			// URLジャンプ
			window.open("createjs_battle_sample_viewport.html", "_self");
		}
	
		// ターンのカウントを増やす
		stage.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ひきがあらわれた！\n\n　→つぎへ" },
		{ 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のダメージをあたえた！\nウィスプ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のダメージをあたえた！\nウィスプ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のダメージをあたえた！\nウィスプCをたおした！！" , effect:{ eid:2 , damage:15 } , dead:{ eid:2 } },
		{ mode:"finish" , message:"ウィスプ 3ひきをたおした！\n\n　→タッチするともう一度再生" }
	]
}
</script>

// 複数行時のテキスト整形
stage.multiLineConvert = function(str){
	var ret = "";
	var lineNum = 15;
	var count = 0;
	while( count < str.length - 1 ){
		var cutStr = str.substr(count,lineNum);
		var turnIndex = cutStr.indexOf("\n");
		if( turnIndex > -1 ){
			turnIndex += 1;
			ret += cutStr.substr(0,turnIndex);
			count += turnIndex;
		} else {
			ret += cutStr + "\n";
			count += lineNum;
		}
		
	}
	return ret;
}