Forked from: jsdo.it_team's 【終了しました】SPEC vol.5 投稿用コード View Diff (2648)

斜めにスライドする　( SPEC vol.5 投稿用コード)

asou_jp

2013-09-13 11:45:10

License: MIT License

Fork: 3

Fav: 12

View: 7222

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 2150 lines
HTML 0 lines
CSS 3 lines

スマートフォン向けのソーシャルゲームを想定して作成しました。

カードはスライドで選んで選択します。

~~PCからは見れない&操作できないです。~~

PCからはマウスホイールとクリックで無理やり再現しておきました。

お手数ですがドメインをjsrun.itに書き直すか、下のQRを使ってアクセスしてください。
http://jsrun.it/asou_jp/ehbU

UI
　・タッチパネル、手にあったUIかどうか。
　・電車の中など不自由なシチュエーションでも片手で操作できるか。
　・一般的なカード選択UIから突出しすぎていないか。

演出
　・合成にワクワク感、ご褒美感があるか。
　・ゲームの主体となっているカードが引き立てられているか。
　・コンテキストは美しいか。

このへんを意識したつもりです。

斜めにスライドする　( SPEC vol.5 投稿用コード)
TangoJS v0.7.0

//======================================================================================================================
// iPhoneでぼけてたので追加
//======================================================================================================================
var viewportMeta = this.document.createElement('meta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
this.document.getElementsByTagName('head')[0].appendChild(viewportMeta);

//======================================================================================================================
// 動的な情報
//======================================================================================================================

//カードの情報
var datas = [

{url : 'http://jsdo.it/img/event/spec/vol5/material_js/1.jpg', name : 'カード１', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/2.jpg', name : 'カード２', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/3.jpg', name : 'カード３', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/4.jpg', name : 'カード４', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/5.jpg', name : 'カード５', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/6.jpg', name : 'カード６', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/7.jpg', name : 'カード７', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/8.jpg', name : 'カード８', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/9.jpg', name : 'カード９', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/10.jpg', name : 'カード１０', level : 2, attack : 1000, defense : 1000, skill : '特になし'},
	{url : 'http://jsdo.it/img/event/spec/vol5/material_js/11.jpg', name : 'カード１１', level : 2, attack : 1000, defense : 1000, skill : '特になし'}
];

//操作の途中に挟んだ演出の有無。　
var contextEffectEnabled = true;

//======================================================================================================================

//======================================================================================
// preprocess
//======================================================================================
(function (global) {
	'use strict';

//非サポートブラウザは停止
	if (!global.pm.isSupport) {
		//簡易的に文言を突っ込んどく。
		global.document.write('非対応端末です。');
		return;
	}

//pm.* に入ってるものをごっそり直下に複製。
	global.pm.Tango.copyToGlobal(true);

//12FPSに設定。（FlashLite基準）
	global.Tango.fps = 12;

//documentのタッチイベントをなかったことにする。あんなことやこんなことも無かったことにしたいです。
	global.document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

}(this));

//======================================================================================
// Application Init !!
//======================================================================================
(function (global) {

'use strict';

var stage, model, preloadCompleteHandler, appInit, debugInit, inited;

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

//onload時にプリロード開始
	global.Tango.atReady = function () {
		var len, i;
		global.MyPreloader = new global.PPreloader();
		global.MyPreloader.add(
			'http://jsrun.it/assets/t/5/v/f/t5vfi.png',
			'http://jsrun.it/assets/1/8/n/f/18nfr.png',
			'http://jsrun.it/assets/1/X/T/S/1XTSd.png',
			'http://jsrun.it/assets/o/A/D/p/oADp9.png',
			'http://jsrun.it/assets/5/q/H/e/5qHe1.png',
			'http://jsrun.it/assets/i/a/A/r/iaAre.png',
			'http://jsrun.it/assets/1/F/w/L/1FwLF.png',
			'http://jsrun.it/assets/k/E/w/5/kEw53.png',
			'http://jsrun.it/assets/z/G/8/N/zG8NP.png',
			'http://jsrun.it/assets/q/g/l/2/qgl2S.png',
			'http://jsrun.it/assets/7/f/M/H/7fMHM.png',
			'http://jsrun.it/assets/d/o/k/n/doknr.png',
			'http://jsrun.it/assets/l/Q/g/K/lQgK3.png',
			'http://jsrun.it/assets/z/E/g/e/zEgeJ.png',
			'http://jsrun.it/assets/w/x/c/1/wxc1Y.png'

);
		len = global.datas.length;
		for (i = 0; i < len; i++) {
			global.MyPreloader.add(global.datas[i].url);
		}
		global.MyPreloader.addEventListener(global.PEvent.COMPLETE, preloadCompleteHandler);
		global.MyPreloader.load();
	};

//プリロード完了
	preloadCompleteHandler = function () {

//Stageを作成
		stage = new global.Stage();
		stage._displayRotateHandler = function () {
			if (!inited && this.displayRotate === 0) {
				appInit();
			}
		};
		stage.addEventListener(global.PEvent.DISPLAY_ROTATE, stage._displayRotateHandler);
		stage._displayRotateHandler();

//appInit();//アプリケーションを開始
		//debugInit();//開発用
	};

//アプリケーションを開始
	appInit = function () {
        var wheelHandler = function (e) {
			var slider, model;
			slider = global.SpecModel.getInstance().slider;
			model  = global.SpecModel.getInstance();
			if (model.contextEffect.stage || model.confirmationSprite.stage) {
				return;
			}
			slider._scrollX += e.wheelDelta;
		}
		inited = true;
        stage.scaleX = stage.scaleY = stage.globalWidth / 320;
		if (global.PSystem.isIOS || global.PSystem.isAndroid || (global.PSystem.agent.toLowerCase().indexOf('kindle') > -1)) {
			//stage.scaleX = stage.scaleY = stage.globalWidth / 320;
		} else {
			global.addEventListener('mousewheel', wheelHandler, false);
			global.SpecModel.getInstance().slider.addEventListener(global.PEvent.CLICK, function () {
				var model, slider;
				model = global.SpecModel.getInstance();
				if (model.contextEffect.stage || model.confirmationSprite.stage) {
					return;
				}
				slider = global.SpecModel.getInstance().slider;
				slider._selectCard();
			});
		}
		stage.width = 320;
		stage.height = 417;
		stage.originX = 0;
		stage.originY = 0;
		stage.overflow = 'hidden';

//Stageに追加
		model = global.SpecModel.getInstance();
		stage.addChild(model.backgroundWing);//背景の翼
		stage.addChild(model.magicCircle);//魔法陣
		stage.addChild(model.inazuma);
		stage.addChild(model.slider);//スライダー
		stage.addChild(model.status);//ステータスボード
		stage.addChild(model.header);//ヘッダー
		stage.addChild(new global.ConformButton());
		model.stage = stage;

//stage.addChild(global.SpecModel.getInstance().backgroundWing);

global.Motion.serial(
			global.Motion.prop(model.magicCircle).$x(160).$y(230).$scaleX(1.2).$scaleY(1.2),
			global.Motion.prop(model.slider).$x(500).$y(-350),
			global.Motion.prop(model.slider._arrow).alpha(0),
			global.Motion.prop(model.status).alpha(0).$y(80),
			global.Motion.parallel(
				global.Motion.tween(model.slider, 0.4, global.Ease.EXPO_OUT).$x(0).$y(0).delay(0.4),
				global.Motion.tween(model.slider._arrow, 0.4, global.Ease.EXPO_OUT).alpha(1).delay(0.8),
				global.Motion.tween(model.magicCircle, 0.5, global.Ease.EXPO_IN).$x(0).$y(0).$scaleX(0).$scaleY(0),
				global.Motion.tween(model.status, 0.4, global.Ease.EXPO_OUT).$y(0).delay(0.6),
				global.Motion.tween(model.status, 0.4).alpha(1).delay(0.6),
				global.Motion.func(model.contextEffect, model.contextEffect.open, 0).delay(1)
			)
		).play();

//アドレスバーを隠す
		global.setTimeout(global.scrollTo, 100, 0, 1);

};

//開発用
	debugInit = function () {
		//テスト用
		global.debugText = new global.DisplayObject('p');
		global.debugText.color = 0xFFFFFF;
		stage.addChild(global.debugText);
		//フレームレートを表示
		var p = new global.PProfiler();
		p.mouseEnabled = false;
		stage.addChild(p).y = 350;
	};

}(this));

(function (global) {
	'use strict';
	var ConfirmationSprite, p;
	ConfirmationSprite = function () {
		this.initialize();
	};
	p = ConfirmationSprite.prototype = new global.Sprite();
	p._Sprite_initialize = p.initialize;

p.initialize = function () {
		var asset, scale;
		scale = (320 / 480);
		this._Sprite_initialize('div', 'ConfirmationSprite');
		this.width = 320;
		this.height = 417;

this.container = this.addChild(new global.DisplayObjectContainer());

this.bg = this.container.addChild(new global.DisplayObject());
		this.bg.y = 45;
		this.bg.width = 320;
		this.bg.height = 417 - 45;
		this.bg.bgColor = 0;
		this.bg.alpha = 0.6;
		this.bg.mouseEnabled = false;

this._canvas = this.container.addChild(new global.CanvasSprite());
		this._canvas.mouseEnabled = false;
		this._canvas.x = 25;
		this._canvas.y = 120;
		this._canvas.canvasWidth = 270;
		this._canvas.canvasHeight = 160;
		this._ctx = this._canvas.element.getContext('2d');

this.label0 = this.container.addChild(new global.DisplayObject("p"));
		this.label1 = this.container.addChild(new global.DisplayObject("p"));
		this.label0.color = 0xFFFFFF;
		this.label1.color = 0xFFFFFF;
		this.label0.y = this.label1.y = 290;
		this.label0.width = this.label1.width = 120;
		this.label0.height = this.label1.height = 40;
		this.label0.mouseEnabled = false;
		this.label1.mouseEnabled = false;
		this.label0.x = 25;
		this.label1.x = 175;
		this.label0.fontSize = this.label1.fontSize = 16;
		this.label0.style.textAlign = this.label1.style.textAlign = 'center';
		this.label0.innerHTML = "ベースカード";
		this.label1.innerHTML = "素材カード";

this.button0 = this.addChild(new global.Sprite());
		this.button1 = this.addChild(new global.Sprite());
		this.button2 = this.addChild(new global.Sprite());

this.button0.overflow = this.button1.overflow = this.button2.overflow = "hidden";

asset = this.button0.addChild(global.MyPreloader.get('http://jsrun.it/assets/k/E/w/5/kEw53.png'));
		asset.width *= scale;
		asset.height *= scale;
		this.button0.width = asset.width;
		this.button0.height = asset.height >> 1;
		this.button0.getChildAt(0).y = -this.button0.height;
		this.button0.mouseEnabled = false;

asset = this.button1.addChild(global.MyPreloader.get('http://jsrun.it/assets/q/g/l/2/qgl2S.png'));
		asset.width *= scale;
		asset.height *= scale;
		this.button1.width = asset.width;
		this.button1.height = asset.height;

asset = this.button2.addChild(global.MyPreloader.get('http://jsrun.it/assets/z/G/8/N/zG8NP.png'));
		asset.width *= scale;
		asset.height *= scale;
		this.button2.width = asset.width;
		this.button2.height = asset.height >> 1;

this.button0.x = 20;
		this.button0.y = 330;
		this.button1.x = 20;
		this.button1.y = 60;
		this.button2.x = 200;
		this.button2.y = 60;

this.button0.addEventListener(global.PEvent.MOUSE_DOWN, global.Util.delegate(this, this.fix));
		this.button2.addEventListener(global.PEvent.MOUSE_DOWN, global.Util.delegate(this, this._close));
		this.button1.addEventListener(global.PEvent.MOUSE_DOWN, global.Util.delegate(this, this.clear));

global.SpecModel.getInstance().addEventListener('confirmation', global.Util.delegate(this, this._confirmationHandler));
		global.SpecModel.getInstance().addEventListener('selectedCard', global.Util.delegate(this, this._selectedCardHandler));

};

p._close = function () {
		if (this.button2.getChildAt(0).y !== 0) {
			return;
		}
		this.close();
	};

p._selectedCardHandler = function () {
		var model = global.SpecModel.getInstance();
		if (model.selectedCards.length > 1) {
			this.button0.getChildAt(0).y = 0;
		} else {
			this.button0.getChildAt(0).y = -this.button0.height;
		}
		if (model.selectedCards.length < 10) {
			this.button2.getChildAt(0).y = 0;
		} else {
			this.button2.getChildAt(0).y = -this.button2.height;
		}
	};

p.clear = function () {
		if (!this.flg) {
			return;
		}
		this.button0.getChildAt(0).y = -this.button0.height;
		this.button2.getChildAt(0).y = 0;
		this.close();
		global.SpecModel.getInstance().dispatch('clear');
	};

p.fix = function () {
		if (this.button0.getChildAt(0).y !== 0) {
			return;
		}
		if (!this.flg) {
			return;
		}
		this.close();
		global.SpecModel.getInstance().dispatch('selectedCards');
	};

p.close = function () {
		if (!this.flg) {
			return;
		}
		this.flg = false;
		global.SpecModel.getInstance().dispatch('closeConfirmation');
		global.Motion.serial(
			global.Motion.tween(this.container, 0.3).alpha(0),
			global.Motion.func(this.parent, this.parent.removeChild, this)
		).play();
	};

p._confirmationHandler = function () {
		var model, defaultCard, baseCard, px, py, len, i;
		model = global.SpecModel.getInstance();
		defaultCard = global.MyPreloader.getImageObject('http://jsrun.it/assets/i/a/A/r/iaAre.png');

this._ctx.clearRect(0, 0, 320, 320);
		this._ctx.save();
		if (model.selectedCards.length > 0) {
			baseCard = model.selectedCards[0].element;
		} else {
			baseCard = defaultCard;
		}
		this._ctx.drawImage(baseCard, 0, 0);

len = model.selectedCards.length;
		px = 0;
		py = 0;
		this._ctx.scale(0.3, 0.3);
		for (i = 1; i < 10; i++) {
			if (i < len) {
				this._ctx.drawImage(model.selectedCards[i].element, px + 500, py);
			} else {
				this._ctx.drawImage(defaultCard, px + 500, py);
			}
			px += 140;
			if (px >= 360) {
				px = 0;
				py += 185;
			}
		}
		this._ctx.restore();

model.stage.addChild(this);
		global.Motion.parallel(
			global.Motion.prop(this.button0).y(340).visible(false),
			global.Motion.prop(this.button0).visible(true).delay(0.4),
			global.Motion.tween(this.button0, 0.4, global.Ease.BACK_OUT).y(330).delay(0.4)
		).play();
		global.Motion.serial(
			global.Motion.prop(this.container).alpha(0),
			global.Motion.tween(this.container, 0.2).alpha(1).delay(0.1),
			global.Motion.prop(this, {flg : true})
		).play();
	};

global.ConfirmationSprite = ConfirmationSprite;

}(this));

/**
 * Created with JetBrains WebStorm.
 * User: User
 * Date: 12/09/14
 * Time: 0:15
 * To change this template use File | Settings | File Templates.
 */

(function (global) {
	'use strict';
	var Inauzuma, p;
	Inauzuma = function () {
		this.initialize();
	};
	p = Inauzuma.prototype = new global.DisplayObjectContainer();
	p._DisplayObjectContainer_initialize = p.initialize;
	p.initialize = function () {
		this._DisplayObjectContainer_initialize('div', 'Inazuma');
		this._kira = global.MyPreloader.getImageObject('http://jsrun.it/assets/1/8/n/f/18nfr.png');
		this._asset = global.MyPreloader.getImageObject('http://jsrun.it/assets/7/f/M/H/7fMHM.png');
		this.width = 320;
		this.height = 416;
		this._canvas = this.addChild(new global.CanvasSprite());
		this._canvas.canvasWidth = 320;
		this._canvas.canvasHeight = 416;
		this._ctx = this._canvas.element.getContext('2d');
		this._pos = 0;
		this._ctx.globalCompositeOperation = 'lighter';
		this._count = 0;
		this._brightLayer = this.addChild(new global.DisplayObject());
		this._brightLayer.bgColor = 0xFFFFFF;
		this._brightLayer.width = 320;
		this._brightLayer.height = 416;
		this._brightLayer.alpha = 0;
		this._brightLayer.mouseEnabled = false;
		this._canvas.mouseEnabled = false;
		this.mouseEnabled = false;
	};

p.createBaseCard = function () {
		this._effectCard = this.addChild(new global.BrightSprite(120, 160));
		this._effectCard.setImage(global.MyPreloader.getImageObject(global.SpecModel.getInstance().selectedCards[0]._data.url));
		this._effectCard.bright = 0.8;
		this._effectCard.x += 100;
		this._effectCard.y += 120;
		this._effectCard.rotation = 360;
		this._effectCard.scaleX = this._effectCard.scaleY = 0.5;
	};

p.effect = function () {
		this._repeat = 20;
		this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
	};

p.effect2 = function () {
		this._circleSize = 0;
		var motion = global.Motion.parallel(
			global.Motion.tween(this, 1.2, global.Ease.EXPO_OUT, {_circleSize : 500}),
			global.Motion.func(this, this.effect3).delay(0.8)
		);
		motion.play();
		this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler2);
	};
	p.effect3 = function () {
		this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler2);
		this._brightLayer.alpha = 1;
		this._ctx.clearRect(0, 0, 320, 416);
		this.createBaseCard();
        this.effect4();
		global.Motion.tween(this._brightLayer, 0.8, global.Ease.EXPO_IN_OUT).alpha(0).play();
		global.Motion.tween(this._effectCard, 0.8, global.Ease.EXPO_IN, {bright : 0}).play();
		global.Motion.tween(this._effectCard, 0.8, global.Ease.EXPO_IN_OUT).scale(1.5).rotation(0).play();
		this._levelUp = this.addChild(new global.LevelUpText());
		this._levelUp.x = 70;
		this._levelUp.y = 270;
		this._levelUp.scaleX = this._levelUp.scaleY = 0;
		global.Motion.tween(this._levelUp, 0.8, global.Ease.BACK_OUT).scale(1.2).delay(0.6).play();
		global.Motion.serial(
			global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(-70),
			global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(115),
			global.Motion.func(this, this._cardMotion)
		).play();

};

p._cardMotion = function () {
		this._getActiveTween().play();
	};

p._getActiveTween = function () {
		return global.pm.Motion.serial(
			global.pm.Motion.func(this._levelUp, this._levelUp.effect),
			global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(125),
			global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(115),
			global.pm.Motion.func(this, function () {
				this._cardMotion();
			})
		);
	};
	p.effect4 = function () {
		var i, index, obj;
		this._kiras = [];
		this._r = 0;
		this._lineSize = 0;
		this._RADIAN = Math.PI / 180;
 this._lines = [];
 for (i = 0; i < 16; i++) {
 obj = {
 size : 20 + Math.random() * 20,
 v: Math.random() * 5 - 2.5,
 r: Math.random() * 360
 };
 index = Math.floor(Math.random() * 4);
			switch (index) {
			case 0:
				obj.color = 'rgba(' + 60 + ',' + 100 + ',' + 255 + ',' + 0.4 + ')';
				break;
			case 1:
				obj.color = 'rgba(' + 140 + ',' + 80 + ',' + 255 + ',' + 0.4 + ')';
				break;
			case 2:
				obj.color = 'rgba(' + 180 + ',' + 200 + ',' + 120 + ',' + 0.4 + ')';
				break;
			default:
				obj.color = 'rgba(' + 255 + ',' + 255 + ',' + 255 + ',' + 1 + ')';
				obj.size *= 0.5;
				break;
			}
 this._lines.push(obj);
 }

this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler3);
        this._enterFrameHandler3();

};

p._enterFrameHandler3 = function () {
		var crateCount, len, i, r, obj, tx, ty, n, px, py, grad;
		this._ctx.clearRect(0, 0, 320, 416);

this._ctx.globalCompositeOperation = 'source-over';
        grad = this._ctx.createRadialGradient(160, 200, 80, 160, 200, 150);
        grad.addColorStop(0, 'rgba(255, 255, 255, 1)');
        grad.addColorStop(0.5, 'rgba(200, 220, 255, 1)');
        grad.addColorStop(0.6, 'rgba(200, 255, 255, 1)');
        grad.addColorStop(0.7, 'rgba(200, 220, 255, 0.3)');
        grad.addColorStop(1, 'rgba(200, 220, 255, 0)');
		this._ctx.fillStyle = grad;
		this._ctx.fillRect(0, 0, 320, 416);
		this._ctx.fill();

//
 this._ctx.globalCompositeOperation = 'lighter';
		n = 0;
		for (i = 0; i < 16; i++) {
			obj = this._lines[i];
			obj.r += obj.v;
			this._ctx.beginPath();
			this._ctx.moveTo(160, 230);
			this._ctx.fillStyle = obj.color;
			tx = Math.cos(obj.r % 360 * this._RADIAN) * 400;
			ty = Math.sin(obj.r % 360 * this._RADIAN) * 400;
			this._ctx.lineTo(tx + 160, ty + 230);
			tx = Math.cos((obj.r + obj.size) % 360 * this._RADIAN) * 400;
			ty = Math.sin((obj.r + obj.size) % 360 * this._RADIAN) * 400;
			this._ctx.lineTo(tx + 160, ty + 230);
			this._ctx.closePath();
			this._ctx.fill();
			n += 45;
		}
		this._r += 1;

crateCount = 3;
		while (--crateCount) {
			r = (Math.random() * 360);
			obj = {};
			obj.x = 140;
			obj.y = 150;
			obj.scale = Math.random();
			obj.alpha = 1 / obj.scale;
			obj.vx = Math.cos(r * this._RADIAN) * 10;
			obj.vy = Math.sin(r * this._RADIAN) * 16;
			obj.r = Math.random() * 180;
			this._kiras.push(obj);
		}
		len = this._kiras.length;
		for (i = len - 1; i >= 0; i--) {
			obj = this._kiras[i];
			obj.x += obj.vx;
			obj.y += obj.vy;
			obj.alpha *= 0.95;
			obj.scale *= 1.01;
			if (obj.x < -70 || obj.x > 320 || obj.y < -70 || obj.y > 416) {
				this._kiras.splice(i, 1);
			}
		}
		len = this._kiras.length;
		for (i = 0; i < len; i++) {
			obj = this._kiras[i];
			px = obj.x / obj.scale;
			py = obj.y / obj.scale;
			this._ctx.save();
			this._ctx.globalAlpha = obj.alpha;
			this._ctx.scale(obj.scale, obj.scale);
			this._ctx.translate(px, py);
			this._ctx.rotate(obj.r);
			this._ctx.translate(-px, -py);
			this._ctx.drawImage(this._kira, px, py);
			this._ctx.restore();
		}

};

p._enterFrameHandler2 = function () {
		this._ctx.clearRect(0, 0, 320, 416);
		this._ctx.save();
		this._ctx.fillStyle = "rgb(255,255,255)";
		this._ctx.shadowColor = 'rgb(255, 255, 255)';
		this._ctx.shadowBlur = 30;
		this._ctx.scale(1, 0.50);
		this._ctx.beginPath();
		this._ctx.arc(160, 600, this._circleSize, 0, 360 * Math.PI / 180, false);
		this._ctx.fill();
		this._ctx.restore();
		if (this._circleSize > 250) {
			this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler2);
			this._ctx.clearRect(0, 0, 320, 416);
			this._brightLayer.alpha = 1;
		}
	};

p._enterFrameHandler = function () {
		var s, loop, wingbg;
		wingbg = global.SpecModel.getInstance().backgroundWing.bg;
		wingbg.alpha *= 0.5;
		if (--this._repeat === 0) {
			this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
			return;
		}
		this._ctx.clearRect(0, 0, 320, 416);
		++this._count;
		if (this._count % 4 === 0) {
			this._brightLayer.alpha = 0.5;
			wingbg.alpha = 1;
			loop = 5;
			while (--loop) {
				if (++this._pos === 5) {
					this._pos = 0;
				}
				this._ctx.save();
				this._ctx.translate(160, 290);
				s = Math.random() + 1;
				this._ctx.scale(s, s);
				this._ctx.rotate((Math.random() * 180 - 90) * Math.PI / 180);
				this._ctx.translate(-85 / 2, -160);
				this._ctx.drawImage(this._asset, 0, 0);
				this._ctx.restore();
			}
		}
		this._brightLayer.alpha *= 0.4;
	};
	global.Inauzuma = Inauzuma;
}(this));

(function (global) {
	'use strict';
	var DisplayRotateSprite, p;
	DisplayRotateSprite = function () {
		this.initialize();
	};
	p = DisplayRotateSprite.prototype = new global.Sprite();
	p._Sprite_initialize = p.initialize;

p.initialize = function () {
		this._Sprite_initialize('div', 'DisplayRotateSprite');
		this.addEventListener(global.PEvent.ADDED_TO_STAGE, this._addedToStageHandler);
		this.bgColor = 0;
		this._text = this.addChild(new global.DisplayObject('p'));
		this._text.position = "static";
		this._text.innerHTML = "ごめんなさい、画面を縦にして下さい。";
		this._text.color = 0xFFFFFF;
		this._text.fontSize = 16;
		this._text.style.textAlign = "center";
		this._text.style.width = "100%";
		this._text.style.inlineHeight = "100px";
		this.style.width = "100%";
		this.style.height = "100%";
	};

p._addedToStageHandler = function () {
	};

global.DisplayRotateSprite = DisplayRotateSprite;

}(this));

/**
 * Created with JetBrains WebStorm.
 * User: asou
 * Date: 12/09/14
 * Time: 14:49
 * To change this template use File | Settings | File Templates.
 */

(function (global) {
	'use strict';
	var LevelUpText, p;
	LevelUpText = function () {
		this.initialize();
	};
	p = LevelUpText.prototype = new global.CanvasSprite();

p._CanvasSprite_initialize = p.initialize;

p.initialize = function () {
		this._CanvasSprite_initialize();
		this.canvasWidth = 180;
		this.canvasHeight = 86;
		this._ctx = this._element.getContext("2d");
		this._asset = global.MyPreloader.getImageObject('http://jsrun.it/assets/o/A/D/p/oADp9.png');
		this._mask = new global.CanvasSprite(this._asset.width, this._asset.height);
		this._maskCtx = this._mask.element.getContext("2d");
		this._pos = 0;
		this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
		this._count = 0;
	};

p.effect = function () {
		if (++this._count % 4 === 0) {
			this._pos = -60;
			global.pm.Motion.serial(
				global.pm.Motion.prop(this).scale(0.2),
				global.pm.Motion.tween(this, 0.4, global.Ease.BACK_OUT).scale(1.2)
			).play();
		}
	};

p._enterFrameHandler = function () {
		this._pos += 20;
		var grad = this._maskCtx.createLinearGradient(this._pos, this._pos, this._pos + 30, this._pos + 30);
		grad.addColorStop(0, 'rgba(255,255,200,0)');
		grad.addColorStop(0.5, 'rgba(255,255,200,1)');
		grad.addColorStop(0.4, 'rgba(255,255,200,1)');
		grad.addColorStop(1, 'rgba(255,255,200,0)');
		this._maskCtx.clearRect(0, 0, 70, 84);
		this._maskCtx.globalCompositeOperation = 'source-over';
		this._maskCtx.drawImage(this._asset, 0, 0);
		this._maskCtx.globalCompositeOperation = 'source-in';
		this._maskCtx.fillStyle = grad;
		this._maskCtx.fillRect(0, 0, 180, 86);

this._ctx.clearRect(0, 0, 180, 86);
		this._ctx.globalAlpha = 1;
		this._ctx.drawImage(this._asset, 0, 0);
		this._ctx.globalAlpha = 0.6;
		this._ctx.globalCompositeOperation = 'lighter';
		this._ctx.drawImage(this._mask._element, 0, 0);
	};

global.LevelUpText = LevelUpText;

}(this));

(function (global) {

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}
	var Arrow, p;
	Arrow = function () {
		this.initialize();
	};
	p = Arrow.prototype = new global.CanvasSprite();
	p._CanvasSprite_initialize = p.initialize;
	p.initialize = function () {
		this._imageObject = global.MyPreloader.getImageObject('http://jsrun.it/assets/1/F/w/L/1FwLF.png');
		this.canvasWidth = 70;
		this.canvasHeight = 84;
		this._pos = 0;
		this.ctx = this._element.getContext('2d');
		this._createMask();
		this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
	};

p._createMask = function () {
		this._maskLayer = global.document.createElement('canvas');
		this._maskLayer.width = 70;
		this._maskLayer.height = 84;
		this._maskCtx = this._maskLayer.getContext('2d');
	};

p._enterFrameHandler = function () {
		var grad, ctx;
		grad = this._maskCtx.createLinearGradient(0, this._pos, 0, this._pos + 80);
		grad.addColorStop(0, 'rgba(255,255,200,0)');
		grad.addColorStop(0.5, 'rgba(255,255,100,1)');
		grad.addColorStop(0.4, 'rgba(255,200,200,1)');
		grad.addColorStop(1, 'rgba(255,255,200,0)');
		this._maskCtx.clearRect(0, 0, 70, 84);

this._maskCtx.globalCompositeOperation = 'source-over';
		this._maskCtx.drawImage(this._imageObject, 0, 0);
		this._maskCtx.globalCompositeOperation = 'source-in';
		this._maskCtx.fillStyle = grad;
		this._maskCtx.fillRect(0, 0, 70, 84);

ctx = this.ctx;
		ctx.clearRect(0, 0, 70, 84);
		ctx.globalAlpha = 1;
		ctx.drawImage(this._imageObject, 0, 0);
		ctx.globalAlpha = 0.6;
		ctx.globalCompositeOperation = 'lighter';
		ctx.drawImage(this._maskLayer, 0, 0);

this._pos -= 20;
		if (this._pos < -100) {
			this._pos = 80;
		}
	};
	global.Arrow = Arrow;

}(this));

//======================================================================================
// BrightSprite トゥイーン用の明度拡張
//======================================================================================
(function (global) {
	'use strict';
	//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var BrightSprite, p;

//---------------------------------------------------------------------------------
	// constructor
	//---------------------------------------------------------------------------------
	BrightSprite = function (width, height) {
		this.initialize();
		this._element.width = width;
		this._element.height = height;
		this.width = width;
		this.height = height;
	};

//継承
	p = BrightSprite.prototype = new global.Sprite();
	p._Sprite_initialize = p.initialize;

//---------------------------------------------------------------------------------
	// public getter setter
	//---------------------------------------------------------------------------------
	//明度プロパティ(-1～1) 
	p.__defineGetter__('bright', function () { return this._bright; });
	p.__defineSetter__('bright', function (value) {
		this._bright = value > 1 ? 1 : (value < -1 ? -1 : value);
		this._updateBright();
	});

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

p.initialize = function () {
		this._Sprite_initialize('canvas', 'BrightSprite');
		this._bright = 0;
		this._ctx = this._element.getContext('2d');
	};

p.setImage = function (image) {
		this._image = image;
		this._createLighterLayer();
		this._createDarkerLayer();
		this._updateBright();
	};

p.toString = function () {
		return '[object BrightSprite]';
	};

//---------------------------------------------------------------------------------
	// private function
	//---------------------------------------------------------------------------------
	//明るさを更新
	p._updateBright = function () {
		var color = this._bright;
		this._ctx.globalAlpha = 1;
		this._ctx.clearRect(0, 0, this._image.width, this._image.height);
		this._ctx.drawImage(this._image, 0, 0);
		this._ctx.globalAlpha = Math.abs(color);
		if (color > 0) {
			this._ctx.globalCompositeOperation = 'lighter';
			this._ctx.drawImage(this._lighterLayer, 0, 0);
		} else {
			this._ctx.globalCompositeOperation = 'darker';
			this._ctx.drawImage(this._darkerLayer, 0, 0);
		}
	};
	//乗算用のレイヤー
	p._createDarkerLayer = function () {
		this._darkerLayer = global.document.createElement('canvas');
		this._darkerLayer.width = this._image.width;
		this._darkerLayer.height = this._image.height;
		var ctx = this._darkerLayer.getContext('2d');
		ctx.drawImage(this._image, 0, 0);
		ctx.globalCompositeOperation = 'source-in';
		ctx.fillStyle = 'rgb(0,0,0)';
		ctx.fillRect(0, 0, this._image.width, this._image.height);
	};
	//スクリーン用のレイヤー
	p._createLighterLayer = function () {
		this._lighterLayer = global.document.createElement('canvas');
		this._lighterLayer.width = this._image.width;
		this._lighterLayer.height = this._image.height;
		var ctx = this._lighterLayer.getContext('2d');
		ctx.drawImage(this._image, 0, 0);
		ctx.globalCompositeOperation = 'source-in';
		ctx.fillStyle = 'rgb(255,255,255)';
		ctx.fillRect(0, 0, this._image.width, this._image.height);
	};

global.BrightSprite = BrightSprite;

}(this));

//======================================================================================
// カード
//======================================================================================
(function (global) {

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

//変数定義
	var Card, p;

//---------------------------------------------------------------------------------
	// constructor
	//---------------------------------------------------------------------------------
	Card = function () {
		this.initialize();
		this.canvasWidth = 120;
		this.canvasHeight = 160;
	};

//継承
	p = Card.prototype = new global.CanvasSprite();
	p._CanvasSprite_initialize = p.initialize;

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

//初期化
	p.initialize = function () {
		this._CanvasSprite_initialize('canvas', 'Card');
		this.scaleX = this._scaleY = 0.9;
		this._state = 0;
		this.width = 120;
		this.height = 160;
	};

//アクティブ状態にする
	p.activeEffect = function () {
		this._isActive = true;
		this.scaleX = this._scaleY = 1.2;
		this._activeTween();
	};

//アクティブ状態のトゥイーンを走らせる
	p._activeTween = function () {
		this._state = 1;
		this._tween = this._getActiveTween();
		this._tween.play();
	};

//非アクティブ状態にする
	p.deactiveEffect = function () {
		this._state = 0;
		this.y = 0;
		this.scaleX = this._scaleY = 0.9;
		if (this._tween) {
			this._tween.stop();
		}
	};

//セレクト状態にする
	p.selectEffect = function () {
		this._state = 2;
		if (this._tween) {
			this._tween.stop();
		}
	};

//画像を転写
	p.setData = function (data) {
		this._data = data;
		var ctx = this._element.getContext('2d');
		ctx.clearRect(0, 0, 120, 160);
		ctx.drawImage(global.MyPreloader.getImageObject(this._data.url), 0, 0);
	};

//---------------------------------------------------------------------------------
	// private function
	//---------------------------------------------------------------------------------

//アクティブ状態のトゥイーンオブジェクトを取得する。
	p._getActiveTween = function () {
		return global.pm.Motion.serial(
			global.pm.Motion.tween(this, 0.4, global.Ease.SINE_OUT).y(-10),
			global.pm.Motion.tween(this, 0.4, global.Ease.SINE_OUT).y(0),
			global.pm.Motion.func(this, function () {
				if (this._state === 1) {
					this._activeTween();
				}
			})
		);
	};

global.Card = Card;

}(this));

//======================================================================================
// カードスライダー
//======================================================================================
(function (global) {

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var CardSlider, p;

//継承
	p = CardSlider.prototype = new global.Sprite();
	p._Sprite_initialize = p.initialize;
	p._Sprite_dispose = p.dispose;

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

//初期化
	p.initialize = function () {
		var model, card, i, len;

this._Sprite_initialize('div', 'CardSlider');

//座標
		this.x = 150 - 70;
		this.y = 200;
		this.rotation = -35;
		this.bgColor = 0x333333;
		this._selectedIndex = 0;
		this.orignX = this.orignY = 0;
		this._state = -1;
		this._scrollStartX = 0;
		this._scrollX = 0;
		this._px = 0;

this._arrow = this.addChild(new global.Arrow());
		this._arrow.x = -35 + 60;
		this._arrow.y  = -87;

//コンテナを作成
		this._container = this.addChild(new global.DisplayObjectContainer());//カードを入れるコンテナを作成
		this._container.height = 160;

//実際のカード
		this._cards = [];//カードを入れておく配列
		len = global.datas.length;
		for (i = 0; i < len; i++) {
			card = this._container.addChild(new global.Card());
			card.setData(global.datas[i]);
			this._cards.push(card);
		}

//前のダミーカード
		this._frontDammy = [];

//後ろのダミーカード
		this._rearDammy = [];

//カードを作成
		this._createCards();

//カードの座標を設定
		this._updatePos();

//リスナーを登録
		this._touchEndHandler = global.Util.delegate(this, this.__touchEndHandler);
		this.addEventListener(global.PTouchEvent.TOUCH_START, this._touchStartHandler);
		this.addEventListener(global.PTouchEvent.TOUCH_MOVE, this._touchMoveHandler);
		this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);

this._selectedCardsHandler = global.Util.delegate(this, this._selectedCardsHandler);
		this._clear = global.Util.delegate(this, this._clear);

model = global.SpecModel.getInstance();
		model.addEventListener('selectedCards', this._selectedCardsHandler);
		model.addEventListener('clear', this._clear);
	};

//---------------------------------------------------------------------------------
	// private function
	//---------------------------------------------------------------------------------

p._clear = function () {
		var i, len, card, model;
		this._scrollX = 0;
		this._selectedIndex = -1;
		model = global.SpecModel.getInstance();
		while (model.selectedCards.length) {
			model.selectedCards.shift();
		}
		while (this._cards.length) {
			this._container.removeChild(this._cards.shift());
		}
		len = global.datas.length;
		for (i = 0; i < len; i++) {
			card = this._container.addChild(new global.Card());
			card.setData(global.datas[i]);
			this._cards.push(card);
		}
		this._updatePos();
	};

p._updateDammyCard = function () {
		var card, i, len, j, loop;

//ダミーを削除
		while (this._frontDammy.length) {
			this._frontDammy.shift().dispose();
		}
		while (this._rearDammy.length) {
			this._rearDammy.shift().dispose();
		}
		len = this._cards.length;
		if (len > 1) {
			loop = len === 1 ? 1 : 2;
			j = len - loop;
			//先頭のダミー
			for (i = 0; i < loop; i++) {
				card = this._container.addChild(new global.Card());
				card.isDammy = true;
				card.setData(this._cards[j++]._data);
				this._frontDammy.push(card);
			}
			j = 0;
			//後ろのダミー
			for (i = 0; i < loop; i++) {
				card = this._container.addChild(new global.Card());
				card.isDammy = true;
				card.setData(this._cards[j]._data);
				this._rearDammy.push(card);
				++j;
			}
		}
	};

//カードを作成
	p._createCards = function () {
		var i, len;
		//メイン
		for (i = 0; i < len; i++) {
			this._container.addChild(this._cards[i]);
		}
		this._cards[0].activeEffect();
	};

//カードの座標を設定する
	p._updatePos = function () {
		var i, px, len;

this._updateDammyCard();

if (this._cards.length > 2) {
			px = -280;
		} else if (this._cards.length > 1) {
			px = -280;
		} else {
			px = 0;
			this._arrow.alpha = 0;
		}

len = this._frontDammy.length;
		for (i = 0; i < len; i++) {
			this._container.addChild(this._frontDammy[i]);
			this._frontDammy[i].x = px;
			px += 140;
		}
		len = this._cards.length;
		for (i = 0; i < len; i++) {
			this._container.addChild(this._cards[i]);
			this._cards[i].x = px;
			px += 140;
		}
		len = this._rearDammy.length;
		for (i = 0; i < len; i++) {
			this._container.addChild(this._rearDammy[i]);
			this._rearDammy[i].x = px;
			px += 140;
		}
		this._container.width = px;
		this.cardLength = this._cards.length;
		this._scrollWidth = this.cardLength * 140;
	};

//アクティブなカードを選択状態にする。
	p._selectCard = function () {
		var card, nextActiveCard, magicCircle, model;
		model = global.SpecModel.getInstance();
		magicCircle = model.magicCircle;
		if (this._cards) {
			card = this._cards[this._selectedIndex];
		}
		if (card && card._state === 1) {
			this.mouseEnabled = false;
			this._cards.splice(this._selectedIndex, 1);
			card.selectEffect();
			model.selectedCards.push(card);
			model.dispatch('selectedCard');

if (model.selectedCards.length >= 10) {
				model.dispatch('confirmation');
			}

global.Motion.parallel(
				global.Motion.tween(card, 0.4,	global.Ease.EXPO_OUT).y(-320),
				global.Motion.tween(card, 0.4, global.Ease.EXPO_OUT).rotation(360).delay(0.05),
				global.Motion.func(magicCircle, magicCircle.createCard, card._data).delay(0.3),
				global.Motion.func(card, function () {
					this.parent.removeChild(this);
				}).delay(0.3)
			).play();

if (this._cards.length <= this._selectedIndex) {
				nextActiveCard = this._cards[0];
			} else {
				nextActiveCard = this._cards[this._selectedIndex];
			}
			if (nextActiveCard) {
				global.Motion.parallel(
					global.Motion.func(nextActiveCard, nextActiveCard.activeEffect),
					global.Motion.func(this, this._updatePos)
				).delay(0.2).play();
			}
		}
	};

//演出に移る時に消す
	p._selectedCardsHandler = function () {

global.Motion.serial(
			global.Motion.parallel(
				global.Motion.tween(this, 0.8, global.Ease.EXPO_IN).$xy(70, 90),
				global.Motion.tween(this, 0.6, global.Ease.EXPO_IN).alpha(0).delay(0.1)
			),
			global.Motion.func(this, this.removeEventListenerAll),
			global.Motion.func(this, this.dispose).delay(0.1)
		).play();
	};

//タッチ開始
	p._touchStartHandler = function (e) {
		this._isTouchDown = true;
		this._scrollStartX = this._scrollX;
		this._startX = e.touches[0].clientX;
		this._startY = e.touches[0].clientY;
		this.stage.addEventListener(global.PTouchEvent.TOUCH_END, this._touchEndHandler);
	};

//タッチ＆移動
	p._touchMoveHandler = function (e) {
		var rot, deltaX, deltaY;

deltaX = e.touches[0].clientX - this._startX;
		deltaY = e.touches[0].clientY - this._startY;

if (this._arrow.alpha > 0) {
            this._arrow.alpha = 0;
		}

//動いた角度で縦横を判別
		if (this._state === -1) {
			rot = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
			if ((rot > 90 && rot < 180) || (rot < 10 && rot > -80)) {//横
				if (this._cards.length > 1) {
					this._state = 0;
				}
			} else {//縦
				this._state = 1;
			}
		}

//横の場合はスクロール処理
		if (this._state === 0) {
			this._scrollX = (deltaX << 1) + this._scrollStartX;
		}

//縦の場合はカード選択処理
		if (this._state === 1) {
			rot = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
			if (Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) > 60 && (rot > 135 || rot < -35)) {
				this._selectCard();
				this._state = -1;
			}
		}

};

//タッチ終了
	p.__touchEndHandler = function () {
		this._isTouchDown = false;
		this._state = -1;
		if (this._arrow.alpha < 1) {
			global.Motion.tween(this._arrow, 0.2).alpha(1).play();
		}
		this.stage.removeEventListener(global.PTouchEvent.TOUCH_END, this._touchEndHandler);

};

//カードのスクロールを監視、アクティブ、非アクティブのエフェクトを叩く。
	p._enterFrameHandler = function () {
		var index, activeCard, px, scrollTargetX, containerX, indexTargetX, indexX, i, card, len;

scrollTargetX = Math.ceil(this._scrollX / 140) * 140;
		this._px += (scrollTargetX - this._px) * 0.75;
		px = this._px >> 0;
		if (px < 0) {
			containerX = px % this._scrollWidth;
		} else {
			containerX = (px % this._scrollWidth) - this._scrollWidth;
		}
		if (containerX < -this._scrollWidth + 120) {
			containerX += this._scrollWidth;
		}
		this._container.x = containerX;

indexTargetX = this._scrollX;
		if (indexTargetX < 0) {
			indexX = (indexTargetX % this._scrollWidth) / 140;
		} else {
			indexX = ((indexTargetX % this._scrollWidth) - this._scrollWidth) / 140;
		}
		if (indexX < -this.cardLength - 1) {
			indexX = 0;
		}
		index = -indexX >> 0;
		if (index === this.cardLength) {
			index = 0;
		}
		if (this._selectedIndex !== index) {

len = this._cards.length;
			for (i = 0; i < len; i++) {
				card = this._cards[i];
				card.deactiveEffect();
			}
			activeCard = this._cards[index];
			if (activeCard) {
				activeCard.activeEffect();
				global.SpecModel.getInstance().status.setData(activeCard._data);
			}
		}
		this._selectedIndex = index;
	};

p.dispose = function () {
		var model;
		model = global.SpecModel.getInstance();
		model.removeEventListener('selectedCards', this._selectedCardsHandler);
		model.removeEventListener('clear', this._clear);
		this.removeEventListener(global.PTouchEvent.TOUCH_START, this._touchStartHandler);
		this.removeEventListener(global.PTouchEvent.TOUCH_MOVE, this._touchMoveHandler);
		this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
		this._Sprite_dispose();
	};

global.CardSlider = CardSlider;

}(this));

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var CardStatus, p;
	CardStatus = function () {
		this.initialize();
	};
	p = CardStatus.prototype = new global.DisplayObjectContainer();
	p._DisplayObjectContainer_initialize = p.initialize;
	p.initialize = function () {
		this._DisplayObjectContainer_initialize('div', 'CardStatus');
		this._bg = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/d/o/k/n/doknr.png'));
		this._bg.width = 168;
		this._bg.height =  98;
		this._bg.alpha = 0.8;

this._title = this.addChild(new global.DisplayObject());
		this._param = this.addChild(new global.DisplayObject());
		this._skil = this.addChild(new global.DisplayObject());
		this.width = 168;
		this.height =  98;
		this.x = 150;
		this.y = 317;

this.mouseEnabled = false;
		this._title.mouseEnabled = false;
		this._param.mouseEnabled = false;
		this._skil.mouseEnabled = false;

this._title.fontSize = 16;
		this._param.fontSize = 12;
		this._skil.fontSize = 12;

this._title.color = 0xDFDFDF;
		this._param.color = 0xDFDFDF;
		this._skil.color = 0xDFDFDF;

this._title.x = this._param.x = this._skil.x = 25;
		this._title.y = 15;
		this._param.y = 40;
		this._skil.y = 55;

this._title.width = this._param.width = this._skil.width = 150;

this._title.height = 20;
		this._param.height = this._skil.height =  20;

this.setData(global.datas[0]);

global.SpecModel.getInstance().addEventListener('selectedCards', global.Util.delegate(this, this._selectedCardsHandler));

};

p._selectedCardsHandler = function () {
		global.Motion.serial(
			global.Motion.parallel(
				global.Motion.tween(this, 0.4, global.Ease.EXPO_IN).$y(40),
				global.Motion.tween(this, 0.4).alpha(0)
			),
			global.Motion.func(this, this.dispose)
		).play();
	};

p.setData = function (data) {
		this._title.innerHTML = data.name;
		this._param.innerHTML = 'Lv.' + data.level + ' AT:' + data.attack + ' DF' + data.defense + '';
		this._skil.innerHTML = 'スキル：' + data.skill;
	};

global.CardStatus = CardStatus;

}(this));

//======================================================================================
// ヘッダー
//======================================================================================
(function (global) {
	'use strict';
	var ConformButton, p;
	ConformButton = function () {
		this.initialize();
	};
	p = ConformButton.prototype = new global.Sprite();
	p._Sprite_initialize = p.initialize;

p.initialize = function () {
		var scale, bg, model;
		scale = (320 / 480);

this.x = 200;
		this.y  = 60;

bg = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/z/E/g/e/zEgeJ.png'));
		bg.width *= scale;
		bg.height *= scale;

this.width = bg.width;
		this.height = bg.height;

this._canvas = this.addChild(new global.CanvasSprite());
		this._canvas.x = 0;
		this.ctx = this._canvas.element.getContext('2d');
		this._pos = 0;
		this._button  = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/l/Q/g/K/lQgK3.png'));
		this._button.width *= scale;
		this._button.height *=  scale;
		this._button.x = 3;

this._canvas.width = this._canvas.canvasWidth = this._button.width + 7;
		this._canvas.height = this._canvas.canvasHeight = this._button.height + 7;

this._canvas.y = 0;
		this._button.y = 3;

this.visible = false;

this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
		model = global.SpecModel.getInstance();
		model.addEventListener('selectedCard', global.Util.delegate(this, this._selectedCardHandler));
		model.addEventListener('selectedCards', global.Util.delegate(this, this._selectedCardsHandler));
		model.addEventListener('closeConfirmation', global.Util.delegate(this, this._closeConfirmationHandler));
		model.addEventListener('confirmation', global.Util.delegate(this, this._confirmationHandler));
		model.addEventListener('clear', global.Util.delegate(this, this._clear));

this.addEventListener(global.PEvent.MOUSE_DOWN, this._downHandler);

/*
		global.Motion.serial(
			global.Motion.prop(this).$y(-40).alpha(0).visible(false),
			global.Motion.wait(0.6),
			global.Motion.prop(this).visible(true),
			global.Motion.tween(this, 0.4, global.Ease.EXPO_OUT).$y(0).alpha(1)
		).play();
		*/

};

p._clear = function () {
		this.visible = false;
	};

p._confirmationHandler = function () {
		this.visible = false;
	};

p._closeConfirmationHandler = function () {
		this.visible = global.SpecModel.getInstance().selectedCards.length > 1;
	};

p._downHandler = function () {
		global.SpecModel.getInstance().dispatch('confirmation');
	};

p._selectedCardHandler = function () {
		this.ctx.clearRect(0, 0, this._canvas.canvasWidth, this._canvas.canvasHeight);
		this.visible = global.SpecModel.getInstance().selectedCards.length > 1;
	};
	p._selectedCardsHandler = function () {
		this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
		this.visible = false;
		this.removeEventListenerAll();
	};

p.update = function () {
		var w, h, pi, r, ctx;
		if (!this.visible) {
			return;
		}
		this.grad = this.ctx.createLinearGradient(this._pos + 60, 0, this._pos + 124, 64);
		this.grad.addColorStop(0, 'rgba(255,255,255,0)');
		this.grad.addColorStop(0.4, 'rgba(255,255,255,1)');
		this.grad.addColorStop(0.6, 'rgba(255,255,255,1)');
		this.grad.addColorStop(1, 'rgba(255,255,255,0)');
		pi = Math.PI;
		w = this._canvas.canvasWidth;
		h = this._canvas.canvasHeight;
		r = 10;
		ctx = this.ctx;
		ctx.clearRect(0, 0, w, h);
		ctx.globalAlpha = 0.6;
		this.ctx.fillStyle = this.grad;
		ctx.globalCompositeOperation = 'lighter';
		ctx.beginPath();
		ctx.arc(r, r, r, -pi, -0.5 * pi, false);
		ctx.arc(w - r, r, r, -0.5 * pi, 0, false);
		ctx.arc(w - r, h - r, r, 0, 0.5 * pi, false);
		ctx.arc(r, h - r, r, 0.5 * pi, pi, false);
		ctx.closePath();
		ctx.fill();
	};

p._enterFrameHandler = function () {
		if (this._pos % 40 !== 0) {
			return;
		}
		this._pos  += 40;
		if (this._pos > 240) {
			this._pos = -240;
		}
		this.update();
	};

global.ConformButton = ConformButton;

}(this));

//======================================================================================
// コンテキストエフェクト
//======================================================================================

(function (global) {
	'use strict';
	var ContextEffect, p;

ContextEffect = function () {
		this.initialize();
	};
	p = ContextEffect.prototype = new global.Sprite();
	p._Sprite_initialize = p.initialize;
	p.initialize = function () {
		var scale;
		scale = 320 / 480;
		this._Sprite_initialize('div', 'ContextEffect');
		this._bg = this.addChild(new global.DisplayObject());
		this._bg.bgColor = 0;
		this._bg.height = 374;
		this._bg.width = 320;
		this._mask = this.addChild(new global.DisplayObjectContainer());
		this._mask.overflow = "hidden";
		this._mask.x = 10;
		this._mask.y = 120;
		this._asset = this._mask.addChild(global.MyPreloader.get('http://jsrun.it/assets/w/x/c/1/wxc1Y.png'));

this.y = 44;
		this.addEventListener(global.PEvent.MOUSE_DOWN, this.close);

global.SpecModel.getInstance().addEventListener('selectedCard', global.Util.delegate(this, this._selectedCardHandler));
		global.SpecModel.getInstance().addEventListener('clear', global.Util.delegate(this, this._clear));

this.openMotion = global.Motion.parallel(
			global.Motion.prop(this._mask).scale(3).alpha(1),
			global.Motion.prop(this._bg).bgColor(0x999999),
			global.Motion.tween(this._bg, 0.4).bgColor(0),
			global.Motion.tween(this._mask, 0.4, global.Ease.EXPO_OUT).scale(1)
		);
	};

p._clear = function () {
		global.Motion.func(this, this.open, 0).delay(0.4).play();
	};

p._selectedCardHandler = function () {
		var state;
		switch (global.SpecModel.getInstance().selectedCards.length) {
		case 1:
			state = 1;
			break;
		case 2:
			state = 2;
			break;
		default:
			return;
		}
		global.Motion.func(this, this.open, state).delay(0.4).play();
	};

p.open = function (state) {
		if (!global.contextEffectEnabled) {
			return;
		}
		if (this.openMotion.playing) {
			this.openMotion.stop();
		}
		this.isOpen = true;
		var stage = global.SpecModel.getInstance().stage;
		this._bg.alpha = 0.6;
		switch (state) {
		case 0:
			this._mask.x = -143 + 160;
			this._mask.width = 286;
			this._mask.height = 100;
			this._asset.y = 0;
			break;
		case 1:
			this._mask.x = -143 + 160;
			this._mask.width = 286;
			this._mask.height = 100;
			this._asset.y = -100;
			break;
		case 2:
			this._mask.x = -143 + 160;
			this._mask.width = 286;
			this._mask.height = 100;
			this._asset.y = -200;
			break;
		}
		this._mask.rotation = -15;
		stage.addChild(this);
		this.openMotion.play();
		global.Motion.func(this, this.close).delay(0.8).play();
	};
	p.close = function () {
		if (!global.contextEffectEnabled) {
			return;
		}
		if (!this.isOpen) {
			return;
		}

if (this.openMotion.isPlaying) {
			this.openMotion.stop();
		}

if (!this.closeMotion) {
			this.closeMotion = global.Motion.parallel(
				global.Motion.tween(this._mask, 0.4, global.Ease.EXPO_IN).scale(3),
				global.Motion.tween(this._mask, 0.4).alpha(0).delay(0.2),
				global.Motion.tween(this._bg, 0.4, global.Ease.EXPO_IN).alpha(0),
				global.Motion.func(this.parent, this.parent.removeChild, this).delay(0.4)
			);
		}

this.isOpen = false;
		this.closeMotion.play();
	};

global.ContextEffect = ContextEffect;

}(this));

(function (global) {

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var MagicCircle, p;

//継承
	p = MagicCircle.prototype = new global.DisplayObjectContainer();
	p._DisplayObjectContainer_initialize = p.initialize;

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

//初期化
	p.initialize = function () {
		this._DisplayObjectContainer_initialize('div', 'MagicCircle');
		this._rv = 1;
		this._asset = global.MyPreloader.getImageObject('http://jsrun.it/assets/1/X/T/S/1XTSd.png');
		this._container = this.addChild(new global.DisplayObjectContainer('div', 'DisplayObjectContainer'));
		this._canvas = this._container.addChild(new global.CanvasSprite());
		this._canvas.canvasWidth = this._asset.width << 1;
		this._canvas.canvasHeight = this._asset.height << 1;
		this._canvas.x = this._canvas.y = -208;

this._ctx = this._canvas.element.getContext('2d');
		this._ctx.scale(2, 2);
		this._ctx.drawImage(this._asset, 0, 0);
		this.mouseEnabled = false;
		this._container.mouseEnabled = false;
		this._canvas.mouseEnabled = false;

this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler);
		global.SpecModel.getInstance().addEventListener('selectedCards', global.Util.delegate(this, this._selectedCardsHandler));
		global.SpecModel.getInstance().addEventListener('clear', global.Util.delegate(this, this._clear));
	};

p._clear = function () {
		this._ctx.clearRect(0, 0, this._canvas.canvasWidth, this._canvas.canvasHeight);
		this._ctx.drawImage(this._asset, 0, 0);
	};

p._selectedCardsHandler = function () {
		var model, wing, inazuma;
		global.Tango.fps = 12;
		model = global.SpecModel.getInstance();
		wing = model.backgroundWing;
		inazuma = model.inazuma;
		this._rv = 60;
		global.Motion.serial(
			global.Motion.wait(0.6),
			global.Motion.parallel(
				global.Motion.tween(this, 1.2, global.Ease.EXPO_IN_OUT).xy(160, 300).scale(2),
				global.Motion.tween(this, 1.2, global.Ease.EXPO_OUT).scaleX(0.7).scaleY(0.3).delay(0.6),
				global.Motion.func(wing, wing.play).delay(0.6)
			),
			global.Motion.func(inazuma, inazuma.effect),
			global.Motion.wait(0.8),
			global.Motion.parallel(
				global.Motion.tween(this, 0.4, global.Ease.BACK_IN).scale(0).delay(0.8),
				global.Motion.func(inazuma, inazuma.effect2).delay(1.1)
			)
		).play();
	};

p.createCard = function (data) {
		var card = global.MyPreloader.getImageObject(data.url);
		this._ctx.save();
		this._ctx.translate(104, 104);
		this._ctx.rotate((-35 - this._container.rotation) * Math.PI / 180);
		this._ctx.scale(0.6, 0.6);
		this._ctx.translate(-60, -80);
		this._ctx.globalAlpha = 0.6;
		this._ctx.globalCompositeOperation = 'lighter';
		this._ctx.drawImage(card, 0, 0);
		this._ctx.restore();
	};

//---------------------------------------------------------------------------------
	// private function
	//---------------------------------------------------------------------------------

//自転のエンターフレーム
	p._enterFrameHandler = function () {
		this._container.rotation += this._rv;
	};

global.MagicCircle = MagicCircle;

}(this));

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var MyHeader, p;

//継承
	p = MyHeader.prototype = new global.DisplayObjectContainer();
	p._DisplayObjectContainer_initialize = p.initialize;
	p._DisplayObjectContainer_dispose = p.dispose;

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

//初期化
	p.initialize = function () {
		var scale, model;
		scale = 320 / 480;
		this._DisplayObjectContainer_initialize('div', 'header');
		this._asset = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/t/5/v/f/t5vfi.png'));
		this._asset.width = 320;
		this._asset.height = 204 * scale;
		this.width = this._asset.width;
		this.height = this._asset.height / 3;
		this.overflow = 'hidden';
		this.setState(0);

this._selectedCardHandler = global.Util.delegate(this, this._selectedCardHandler);
		this._selectedCardsHandler = global.Util.delegate(this, this._selectedCardsHandler);
		this._clear = global.Util.delegate(this, this._clear);

model = global.SpecModel.getInstance();
		model.addEventListener('selectedCard', this._selectedCardHandler);
		model.addEventListener('selectedCards', this._selectedCardsHandler);
		model.addEventListener('clear', this._clear);
	};
	p._clear = function () {
		this.setState(0);
	};
    p._selectedCardsHandler = function () {
        global.Motion.tween(this, 0.4, global.Ease.EXPO_IN).y(-this.height).play();
    };
	p._selectedCardHandler = function () {
		var len = global.SpecModel.getInstance().selectedCards.length;
		if (len === 0) {
			this.setState(0);
		}
		if (len === 1) {
			this.setState(1);
		}
		if (len === 2) {
			this.setState(2);
		}
	};

p.dispose = function () {
		var model;
		model = global.SpecModel.getInstance();
		model.removeEventListener('selectedCard', this._selectedCardHandler);
		model.removeEventListener('clear', this._clear);
		this._DisplayObjectContainer_dispose();
	};

//Stateを切り替える(0:ベースカード選択、1:素材カード選択、2:カードの確認)
	p.setState = function (value) {
		this._asset.y = -this._asset.height / 3 * value;
	};

global.MyHeader = MyHeader;

}(this));

(function (global) {

'use strict';

//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var WingDisplayObject, p;

//継承
	p = WingDisplayObject.prototype = new global.DisplayObjectContainer();
	p._DisplayObjectContainer_initialize = p.initialize;

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

//初期化
	p.initialize = function () {
		var scale, ctx;
		scale = 0;

this._DisplayObjectContainer_initialize('div');

this.bg = this.addChild(new global.CanvasSprite());
		this.bg.canvasWidth = 240;
		this.bg.canvasHeight = 350;
		this.bg.bgColor = 0x001632;
		ctx = this.bg.element.getContext('2d');
		ctx.globalCompositeOperation = 'lighter';
		ctx.globalAlpha = 1;
		this.bg.alpha = 0;
		this.wingLeft = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/5/q/H/e/5qHe1.png'));
		this.wingLeft.x = 6  + 60;
		this.wingLeft.y = 20 + 80;
		this.wingLeft.rotation = 60;
		this.wingLeft.scaleX = -scale;
		this.wingLeft.scaleY = scale;
		this.wingLeft.alpha = 0;

this.wingRight = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/5/q/H/e/5qHe1.png'));
		this.wingRight.x = 128 - 60;
		this.wingRight.y = 20 + 80;
		this.wingRight.rotation = -60;
		this.wingRight.scaleX = scale;
		this.wingRight.scaleY = scale;
		this.wingRight.alpha = 0;

this.scaleY = this.scaleX = 320 / 240;
		this._count = 0;
	};

//再生する
	p.play = function () {
		global.Motion.prop(this.bg).alpha(0).play();
		global.Motion.tween(this.bg, 0.2).bgColor(0x19344c).play();
		global.Motion.parallel(
			global.Motion.tween(this.wingLeft, 0.4).alpha(1).delay(0.1),
			global.Motion.tween(this.wingRight, 0.4).alpha(1).delay(0.1),

global.Motion.tween(this.wingLeft, 1.2, global.Ease.BACK_OUT).xy(6, 20),
			global.Motion.tween(this.wingRight, 1.2, global.Ease.BACK_OUT).xy(128, 20),

global.Motion.tween(this.wingLeft, 1.2, global.Ease.BACK_OUT).scaleX(-1).scaleY(1).rotation(0).xy(6, 20),
			global.Motion.tween(this.wingRight, 1.2, global.Ease.BACK_OUT).scale(1).rotation(0).xy(128, 20),

global.Motion.tween(this.wingLeft, 1.2, global.Ease.BACK_OUT).rotation(0).delay(0.3),
			global.Motion.tween(this.wingRight, 1.2, global.Ease.BACK_OUT).rotation(0).delay(0.3),

global.Motion.prop(this.bg).alpha(1).delay(3.2)
		).delay(0.2).play();
	};

p.toString = function () {
		return '[object WingDisplayObject]';
	};

global.WingDisplayObject = WingDisplayObject;

}(this));

//======================================================================================
// Model [Singleton]
//======================================================================================
(function (global) {
	'use strict';
	//非対応端末はスルー
	if (!global.pm.isSupport) {
		return;
	}

var SpecModel, p;

//---------------------------------------------------------------------------------
	// constructor
	//---------------------------------------------------------------------------------
	SpecModel = function () {
		if (global.SpecModel._instance) {
			throw new global.SingletonError();
		}
		global.SpecModel._instance = this;
		this.initialize();
	};

//継承
	p = SpecModel.prototype = new global.EventDispatcher();
	p._EventDispatcher_initialize = p.initialize;

//---------------------------------------------------------------------------------
	// static public function
	//---------------------------------------------------------------------------------

//インスタンスを取得します。
	SpecModel.getInstance = function () {
		if (!SpecModel._instance) {
			new global.SpecModel();
		}
		return global.SpecModel._instance;
	};

//---------------------------------------------------------------------------------
	// public function
	//---------------------------------------------------------------------------------

//初期化
	p.initialize = function () {
		this._EventDispatcher_initialize();
		this.selectedCards = [];//選択されたカード。[0]がベース、[1]以降が素材。
		this.header = new global.MyHeader();//ヘッダーを作成
		this.slider = new global.CardSlider();//スライダーを作成
		this.backgroundWing =  new global.WingDisplayObject();//背景のウィングを作成
		this.magicCircle = new global.MagicCircle();//魔法陣
		this.status = new global.CardStatus();
		this.contextEffect = new global.ContextEffect();
		this.inazuma = new global.Inauzuma();
		this.rotateDisplay = new global.DisplayRotateSprite();
		this.confirmationSprite = new global.ConfirmationSprite();
	};

//---------------------------------------------------------------------------------
	// public property
	//---------------------------------------------------------------------------------

//選択中のカードインデックス
	p.selectedIndex = -1;

//選択されたカード。[0]がベース、[1]以降が素材。
	p.selectedCards = null;

//ヘッダー
	p.header = null;

//スライダー
	p.slider = null;

//背景の翼
	p.backgroundWing = null;

//魔法陣
	p.magicCircle = null;

//途中に出てくる文言
	p.contextEffect = null;

global.SpecModel = SpecModel;

}(this));

斜めにスライドする　( SPEC vol.5 投稿用コード)

スマートフォン向けのソーシャルゲームを想定して作成しました。 カードはスライドで選んで選択します。 <del>PCからは見れない&操作できないです。</del> PCからはマウスホイールとクリックで無理やり再現しておきました。 お手数ですがドメインをjsrun.itに書き直すか、下のQRを使ってアクセスしてください。 http://jsrun.it/asou_jp/ehbU UI 　・タッチパネル、手にあったUIかどうか。 　・電車の中など不自由なシチュエーションでも片手で操作できるか。 　・一般的なカード選択UIから突出しすぎていないか。 演出 　・合成にワクワク感、ご褒美感があるか。 　・ゲームの主体となっているカードが引き立てられているか。 　・コンテキストは美しいか。 このへんを意識したつもりです。 //====================================================================================================================== // iPhoneでぼけてたので追加 //====================================================================================================================== var viewportMeta = this.document.createElement('meta'); viewportMeta.setAttribute('name', 'viewport'); viewportMeta.setAttribute('content', 'width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'); this.document.getElementsByTagName('head')[0].appendChild(viewportMeta); //====================================================================================================================== // 動的な情報 //====================================================================================================================== //カードの情報 var datas = [ {url : 'http://jsdo.it/img/event/spec/vol5/material_js/1.jpg', name : 'カード１', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/2.jpg', name : 'カード２', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/3.jpg', name : 'カード３', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/4.jpg', name : 'カード４', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/5.jpg', name : 'カード５', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/6.jpg', name : 'カード６', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/7.jpg', name : 'カード７', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/8.jpg', name : 'カード８', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/9.jpg', name : 'カード９', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/10.jpg', name : 'カード１０', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/11.jpg', name : 'カード１１', level : 2, attack : 1000, defense : 1000, skill : '特になし'} ]; //操作の途中に挟んだ演出の有無。　 var contextEffectEnabled = true; //====================================================================================================================== //====================================================================================== // preprocess //====================================================================================== (function (global) { 'use strict'; //非サポートブラウザは停止 if (!global.pm.isSupport) { //簡易的に文言を突っ込んどく。 global.document.write('非対応端末です。'); return; } //pm.* に入ってるものをごっそり直下に複製。 global.pm.Tango.copyToGlobal(true); //12FPSに設定。（FlashLite基準） global.Tango.fps = 12; //documentのタッチイベントをなかったことにする。あんなことやこんなことも無かったことにしたいです。 global.document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); }(this)); //====================================================================================== // Application Init !! //====================================================================================== (function (global) { 'use strict'; var stage, model, preloadCompleteHandler, appInit, debugInit, inited; //非対応端末はスルー if (!global.pm.isSupport) { return; } //onload時にプリロード開始 global.Tango.atReady = function () { var len, i; global.MyPreloader = new global.PPreloader(); global.MyPreloader.add( 'http://jsrun.it/assets/t/5/v/f/t5vfi.png', 'http://jsrun.it/assets/1/8/n/f/18nfr.png', 'http://jsrun.it/assets/1/X/T/S/1XTSd.png', 'http://jsrun.it/assets/o/A/D/p/oADp9.png', 'http://jsrun.it/assets/5/q/H/e/5qHe1.png', 'http://jsrun.it/assets/i/a/A/r/iaAre.png', 'http://jsrun.it/assets/1/F/w/L/1FwLF.png', 'http://jsrun.it/assets/k/E/w/5/kEw53.png', 'http://jsrun.it/assets/z/G/8/N/zG8NP.png', 'http://jsrun.it/assets/q/g/l/2/qgl2S.png', 'http://jsrun.it/assets/7/f/M/H/7fMHM.png', 'http://jsrun.it/assets/d/o/k/n/doknr.png', 'http://jsrun.it/assets/l/Q/g/K/lQgK3.png', 'http://jsrun.it/assets/z/E/g/e/zEgeJ.png', 'http://jsrun.it/assets/w/x/c/1/wxc1Y.png' ); len = global.datas.length; for (i = 0; i < len; i++) { global.MyPreloader.add(global.datas[i].url); } global.MyPreloader.addEventListener(global.PEvent.COMPLETE, preloadCompleteHandler); global.MyPreloader.load(); }; //プリロード完了 preloadCompleteHandler = function () { //Stageを作成 stage = new global.Stage(); stage._displayRotateHandler = function () { if (!inited && this.displayRotate === 0) { appInit(); } }; stage.addEventListener(global.PEvent.DISPLAY_ROTATE, stage._displayRotateHandler); stage._displayRotateHandler(); //appInit();//アプリケーションを開始 //debugInit();//開発用 }; //アプリケーションを開始 appInit = function () { var wheelHandler = function (e) { var slider, model; slider = global.SpecModel.getInstance().slider; model = global.SpecModel.getInstance(); if (model.contextEffect.stage || model.confirmationSprite.stage) { return; } slider._scrollX += e.wheelDelta; } inited = true; stage.scaleX = stage.scaleY = stage.globalWidth / 320; if (global.PSystem.isIOS || global.PSystem.isAndroid || (global.PSystem.agent.toLowerCase().indexOf('kindle') > -1)) { //stage.scaleX = stage.scaleY = stage.globalWidth / 320; } else { global.addEventListener('mousewheel', wheelHandler, false); global.SpecModel.getInstance().slider.addEventListener(global.PEvent.CLICK, function () { var model, slider; model = global.SpecModel.getInstance(); if (model.contextEffect.stage || model.confirmationSprite.stage) { return; } slider = global.SpecModel.getInstance().slider; slider._selectCard(); }); } stage.width = 320; stage.height = 417; stage.originX = 0; stage.originY = 0; stage.overflow = 'hidden'; //Stageに追加 model = global.SpecModel.getInstance(); stage.addChild(model.backgroundWing);//背景の翼 stage.addChild(model.magicCircle);//魔法陣 stage.addChild(model.inazuma); stage.addChild(model.slider);//スライダー stage.addChild(model.status);//ステータスボード stage.addChild(model.header);//ヘッダー stage.addChild(new global.ConformButton()); model.stage = stage; //stage.addChild(global.SpecModel.getInstance().backgroundWing); global.Motion.serial( global.Motion.prop(model.magicCircle).$x(160).$y(230).$scaleX(1.2).$scaleY(1.2), global.Motion.prop(model.slider).$x(500).$y(-350), global.Motion.prop(model.slider._arrow).alpha(0), global.Motion.prop(model.status).alpha(0).$y(80), global.Motion.parallel( global.Motion.tween(model.slider, 0.4, global.Ease.EXPO_OUT).$x(0).$y(0).delay(0.4), global.Motion.tween(model.slider._arrow, 0.4, global.Ease.EXPO_OUT).alpha(1).delay(0.8), global.Motion.tween(model.magicCircle, 0.5, global.Ease.EXPO_IN).$x(0).$y(0).$scaleX(0).$scaleY(0), global.Motion.tween(model.status, 0.4, global.Ease.EXPO_OUT).$y(0).delay(0.6), global.Motion.tween(model.status, 0.4).alpha(1).delay(0.6), global.Motion.func(model.contextEffect, model.contextEffect.open, 0).delay(1) ) ).play(); //アドレスバーを隠す global.setTimeout(global.scrollTo, 100, 0, 1); }; //開発用 debugInit = function () { //テスト用 global.debugText = new global.DisplayObject('p'); global.debugText.color = 0xFFFFFF; stage.addChild(global.debugText); //フレームレートを表示 var p = new global.PProfiler(); p.mouseEnabled = false; stage.addChild(p).y = 350; }; }(this)); (function (global) { 'use strict'; var ConfirmationSprite, p; ConfirmationSprite = function () { this.initialize(); }; p = ConfirmationSprite.prototype = new global.Sprite(); p._Sprite_initialize = p.initialize; p.initialize = function () { var asset, scale; scale = (320 / 480); this._Sprite_initialize('div', 'ConfirmationSprite'); this.width = 320; this.height = 417; this.container = this.addChild(new global.DisplayObjectContainer()); this.bg = this.container.addChild(new global.DisplayObject()); this.bg.y = 45; this.bg.width = 320; this.bg.height = 417 - 45; this.bg.bgColor = 0; this.bg.alpha = 0.6; this.bg.mouseEnabled = false; this._canvas = this.container.addChild(new global.CanvasSprite()); this._canvas.mouseEnabled = false; this._canvas.x = 25; this._canvas.y = 120; this._canvas.canvasWidth = 270; this._canvas.canvasHeight = 160; this._ctx = this._canvas.element.getContext('2d'); this.label0 = this.container.addChild(new global.DisplayObject("p")); this.label1 = this.container.addChild(new global.DisplayObject("p")); this.label0.color = 0xFFFFFF; this.label1.color = 0xFFFFFF; this.label0.y = this.label1.y = 290; this.label0.width = this.label1.width = 120; this.label0.height = this.label1.height = 40; this.label0.mouseEnabled = false; this.label1.mouseEnabled = false; this.label0.x = 25; this.label1.x = 175; this.label0.fontSize = this.label1.fontSize = 16; this.label0.style.textAlign = this.label1.style.textAlign = 'center'; this.label0.innerHTML = "ベースカード"; this.label1.innerHTML = "素材カード"; this.button0 = this.addChild(new global.Sprite()); this.button1 = this.addChild(new global.Sprite()); this.button2 = this.addChild(new global.Sprite()); this.button0.overflow = this.button1.overflow = this.button2.overflow = "hidden"; asset = this.button0.addChild(global.MyPreloader.get('http://jsrun.it/assets/k/E/w/5/kEw53.png')); asset.width *= scale; asset.height *= scale; this.button0.width = asset.width; this.button0.height = asset.height >> 1; this.button0.getChildAt(0).y = -this.button0.height; this.button0.mouseEnabled = false; asset = this.button1.addChild(global.MyPreloader.get('http://jsrun.it/assets/q/g/l/2/qgl2S.png')); asset.width *= scale; asset.height *= scale; this.button1.width = asset.width; this.button1.height = asset.height; asset = this.button2.addChild(global.MyPreloader.get('http://jsrun.it/assets/z/G/8/N/zG8NP.png')); asset.width *= scale; asset.height *= scale; this.button2.width = asset.width; this.button2.height = asset.height >> 1; this.button0.x = 20; this.button0.y = 330; this.button1.x = 20; this.button1.y = 60; this.button2.x = 200; this.button2.y = 60; this.button0.addEventListener(global.PEvent.MOUSE_DOWN, global.Util.delegate(this, this.fix)); this.button2.addEventListener(global.PEvent.MOUSE_DOWN, global.Util.delegate(this, this._close)); this.button1.addEventListener(global.PEvent.MOUSE_DOWN, global.Util.delegate(this, this.clear)); global.SpecModel.getInstance().addEventListener('confirmation', global.Util.delegate(this, this._confirmationHandler)); global.SpecModel.getInstance().addEventListener('selectedCard', global.Util.delegate(this, this._selectedCardHandler)); }; p._close = function () { if (this.button2.getChildAt(0).y !== 0) { return; } this.close(); }; p._selectedCardHandler = function () { var model = global.SpecModel.getInstance(); if (model.selectedCards.length > 1) { this.button0.getChildAt(0).y = 0; } else { this.button0.getChildAt(0).y = -this.button0.height; } if (model.selectedCards.length < 10) { this.button2.getChildAt(0).y = 0; } else { this.button2.getChildAt(0).y = -this.button2.height; } }; p.clear = function () { if (!this.flg) { return; } this.button0.getChildAt(0).y = -this.button0.height; this.button2.getChildAt(0).y = 0; this.close(); global.SpecModel.getInstance().dispatch('clear'); }; p.fix = function () { if (this.button0.getChildAt(0).y !== 0) { return; } if (!this.flg) { return; } this.close(); global.SpecModel.getInstance().dispatch('selectedCards'); }; p.close = function () { if (!this.flg) { return; } this.flg = false; global.SpecModel.getInstance().dispatch('closeConfirmation'); global.Motion.serial( global.Motion.tween(this.container, 0.3).alpha(0), global.Motion.func(this.parent, this.parent.removeChild, this) ).play(); }; p._confirmationHandler = function () { var model, defaultCard, baseCard, px, py, len, i; model = global.SpecModel.getInstance(); defaultCard = global.MyPreloader.getImageObject('http://jsrun.it/assets/i/a/A/r/iaAre.png'); this._ctx.clearRect(0, 0, 320, 320); this._ctx.save(); if (model.selectedCards.length > 0) { baseCard = model.selectedCards[0].element; } else { baseCard = defaultCard; } this._ctx.drawImage(baseCard, 0, 0); len = model.selectedCards.length; px = 0; py = 0; this._ctx.scale(0.3, 0.3); for (i = 1; i < 10; i++) { if (i < len) { this._ctx.drawImage(model.selectedCards[i].element, px + 500, py); } else { this._ctx.drawImage(defaultCard, px + 500, py); } px += 140; if (px >= 360) { px = 0; py += 185; } } this._ctx.restore(); model.stage.addChild(this); global.Motion.parallel( global.Motion.prop(this.button0).y(340).visible(false), global.Motion.prop(this.button0).visible(true).delay(0.4), global.Motion.tween(this.button0, 0.4, global.Ease.BACK_OUT).y(330).delay(0.4) ).play(); global.Motion.serial( global.Motion.prop(this.container).alpha(0), global.Motion.tween(this.container, 0.2).alpha(1).delay(0.1), global.Motion.prop(this, {flg : true}) ).play(); }; global.ConfirmationSprite = ConfirmationSprite; }(this)); /** * Created with JetBrains WebStorm. * User: User * Date: 12/09/14 * Time: 0:15 * To change this template use File | Settings | File Templates. */ (function (global) { 'use strict'; var Inauzuma, p; Inauzuma = function () { this.initialize(); }; p = Inauzuma.prototype = new global.DisplayObjectContainer(); p._DisplayObjectContainer_initialize = p.initialize; p.initialize = function () { this._DisplayObjectContainer_initialize('div', 'Inazuma'); this._kira = global.MyPreloader.getImageObject('http://jsrun.it/assets/1/8/n/f/18nfr.png'); this._asset = global.MyPreloader.getImageObject('http://jsrun.it/assets/7/f/M/H/7fMHM.png'); this.width = 320; this.height = 416; this._canvas = this.addChild(new global.CanvasSprite()); this._canvas.canvasWidth = 320; this._canvas.canvasHeight = 416; this._ctx = this._canvas.element.getContext('2d'); this._pos = 0; this._ctx.globalCompositeOperation = 'lighter'; this._count = 0; this._brightLayer = this.addChild(new global.DisplayObject()); this._brightLayer.bgColor = 0xFFFFFF; this._brightLayer.width = 320; this._brightLayer.height = 416; this._brightLayer.alpha = 0; this._brightLayer.mouseEnabled = false; this._canvas.mouseEnabled = false; this.mouseEnabled = false; }; p.createBaseCard = function () { this._effectCard = this.addChild(new global.BrightSprite(120, 160)); this._effectCard.setImage(global.MyPreloader.getImageObject(global.SpecModel.getInstance().selectedCards[0]._data.url)); this._effectCard.bright = 0.8; this._effectCard.x += 100; this._effectCard.y += 120; this._effectCard.rotation = 360; this._effectCard.scaleX = this._effectCard.scaleY = 0.5; }; p.effect = function () { this._repeat = 20; this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); }; p.effect2 = function () { this._circleSize = 0; var motion = global.Motion.parallel( global.Motion.tween(this, 1.2, global.Ease.EXPO_OUT, {_circleSize : 500}), global.Motion.func(this, this.effect3).delay(0.8) ); motion.play(); this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler2); }; p.effect3 = function () { this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler2); this._brightLayer.alpha = 1; this._ctx.clearRect(0, 0, 320, 416); this.createBaseCard(); this.effect4(); global.Motion.tween(this._brightLayer, 0.8, global.Ease.EXPO_IN_OUT).alpha(0).play(); global.Motion.tween(this._effectCard, 0.8, global.Ease.EXPO_IN, {bright : 0}).play(); global.Motion.tween(this._effectCard, 0.8, global.Ease.EXPO_IN_OUT).scale(1.5).rotation(0).play(); this._levelUp = this.addChild(new global.LevelUpText()); this._levelUp.x = 70; this._levelUp.y = 270; this._levelUp.scaleX = this._levelUp.scaleY = 0; global.Motion.tween(this._levelUp, 0.8, global.Ease.BACK_OUT).scale(1.2).delay(0.6).play(); global.Motion.serial( global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(-70), global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(115), global.Motion.func(this, this._cardMotion) ).play(); }; p._cardMotion = function () { this._getActiveTween().play(); }; p._getActiveTween = function () { return global.pm.Motion.serial( global.pm.Motion.func(this._levelUp, this._levelUp.effect), global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(125), global.pm.Motion.tween(this._effectCard, 0.4, global.Ease.SINE_OUT).y(115), global.pm.Motion.func(this, function () { this._cardMotion(); }) ); }; p.effect4 = function () { var i, index, obj; this._kiras = []; this._r = 0; this._lineSize = 0; this._RADIAN = Math.PI / 180; this._lines = []; for (i = 0; i < 16; i++) { obj = { size : 20 + Math.random() * 20, v: Math.random() * 5 - 2.5, r: Math.random() * 360 }; index = Math.floor(Math.random() * 4); switch (index) { case 0: obj.color = 'rgba(' + 60 + ',' + 100 + ',' + 255 + ',' + 0.4 + ')'; break; case 1: obj.color = 'rgba(' + 140 + ',' + 80 + ',' + 255 + ',' + 0.4 + ')'; break; case 2: obj.color = 'rgba(' + 180 + ',' + 200 + ',' + 120 + ',' + 0.4 + ')'; break; default: obj.color = 'rgba(' + 255 + ',' + 255 + ',' + 255 + ',' + 1 + ')'; obj.size *= 0.5; break; } this._lines.push(obj); } this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler3); this._enterFrameHandler3(); }; p._enterFrameHandler3 = function () { var crateCount, len, i, r, obj, tx, ty, n, px, py, grad; this._ctx.clearRect(0, 0, 320, 416); this._ctx.globalCompositeOperation = 'source-over'; grad = this._ctx.createRadialGradient(160, 200, 80, 160, 200, 150); grad.addColorStop(0, 'rgba(255, 255, 255, 1)'); grad.addColorStop(0.5, 'rgba(200, 220, 255, 1)'); grad.addColorStop(0.6, 'rgba(200, 255, 255, 1)'); grad.addColorStop(0.7, 'rgba(200, 220, 255, 0.3)'); grad.addColorStop(1, 'rgba(200, 220, 255, 0)'); this._ctx.fillStyle = grad; this._ctx.fillRect(0, 0, 320, 416); this._ctx.fill(); // this._ctx.globalCompositeOperation = 'lighter'; n = 0; for (i = 0; i < 16; i++) { obj = this._lines[i]; obj.r += obj.v; this._ctx.beginPath(); this._ctx.moveTo(160, 230); this._ctx.fillStyle = obj.color; tx = Math.cos(obj.r % 360 * this._RADIAN) * 400; ty = Math.sin(obj.r % 360 * this._RADIAN) * 400; this._ctx.lineTo(tx + 160, ty + 230); tx = Math.cos((obj.r + obj.size) % 360 * this._RADIAN) * 400; ty = Math.sin((obj.r + obj.size) % 360 * this._RADIAN) * 400; this._ctx.lineTo(tx + 160, ty + 230); this._ctx.closePath(); this._ctx.fill(); n += 45; } this._r += 1; crateCount = 3; while (--crateCount) { r = (Math.random() * 360); obj = {}; obj.x = 140; obj.y = 150; obj.scale = Math.random(); obj.alpha = 1 / obj.scale; obj.vx = Math.cos(r * this._RADIAN) * 10; obj.vy = Math.sin(r * this._RADIAN) * 16; obj.r = Math.random() * 180; this._kiras.push(obj); } len = this._kiras.length; for (i = len - 1; i >= 0; i--) { obj = this._kiras[i]; obj.x += obj.vx; obj.y += obj.vy; obj.alpha *= 0.95; obj.scale *= 1.01; if (obj.x < -70 || obj.x > 320 || obj.y < -70 || obj.y > 416) { this._kiras.splice(i, 1); } } len = this._kiras.length; for (i = 0; i < len; i++) { obj = this._kiras[i]; px = obj.x / obj.scale; py = obj.y / obj.scale; this._ctx.save(); this._ctx.globalAlpha = obj.alpha; this._ctx.scale(obj.scale, obj.scale); this._ctx.translate(px, py); this._ctx.rotate(obj.r); this._ctx.translate(-px, -py); this._ctx.drawImage(this._kira, px, py); this._ctx.restore(); } }; p._enterFrameHandler2 = function () { this._ctx.clearRect(0, 0, 320, 416); this._ctx.save(); this._ctx.fillStyle = "rgb(255,255,255)"; this._ctx.shadowColor = 'rgb(255, 255, 255)'; this._ctx.shadowBlur = 30; this._ctx.scale(1, 0.50); this._ctx.beginPath(); this._ctx.arc(160, 600, this._circleSize, 0, 360 * Math.PI / 180, false); this._ctx.fill(); this._ctx.restore(); if (this._circleSize > 250) { this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler2); this._ctx.clearRect(0, 0, 320, 416); this._brightLayer.alpha = 1; } }; p._enterFrameHandler = function () { var s, loop, wingbg; wingbg = global.SpecModel.getInstance().backgroundWing.bg; wingbg.alpha *= 0.5; if (--this._repeat === 0) { this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); return; } this._ctx.clearRect(0, 0, 320, 416); ++this._count; if (this._count % 4 === 0) { this._brightLayer.alpha = 0.5; wingbg.alpha = 1; loop = 5; while (--loop) { if (++this._pos === 5) { this._pos = 0; } this._ctx.save(); this._ctx.translate(160, 290); s = Math.random() + 1; this._ctx.scale(s, s); this._ctx.rotate((Math.random() * 180 - 90) * Math.PI / 180); this._ctx.translate(-85 / 2, -160); this._ctx.drawImage(this._asset, 0, 0); this._ctx.restore(); } } this._brightLayer.alpha *= 0.4; }; global.Inauzuma = Inauzuma; }(this)); (function (global) { 'use strict'; var DisplayRotateSprite, p; DisplayRotateSprite = function () { this.initialize(); }; p = DisplayRotateSprite.prototype = new global.Sprite(); p._Sprite_initialize = p.initialize; p.initialize = function () { this._Sprite_initialize('div', 'DisplayRotateSprite'); this.addEventListener(global.PEvent.ADDED_TO_STAGE, this._addedToStageHandler); this.bgColor = 0; this._text = this.addChild(new global.DisplayObject('p')); this._text.position = "static"; this._text.innerHTML = "ごめんなさい、画面を縦にして下さい。"; this._text.color = 0xFFFFFF; this._text.fontSize = 16; this._text.style.textAlign = "center"; this._text.style.width = "100%"; this._text.style.inlineHeight = "100px"; this.style.width = "100%"; this.style.height = "100%"; }; p._addedToStageHandler = function () { }; global.DisplayRotateSprite = DisplayRotateSprite; }(this)); /** * Created with JetBrains WebStorm. * User: asou * Date: 12/09/14 * Time: 14:49 * To change this template use File | Settings | File Templates. */ (function (global) { 'use strict'; var LevelUpText, p; LevelUpText = function () { this.initialize(); }; p = LevelUpText.prototype = new global.CanvasSprite(); p._CanvasSprite_initialize = p.initialize; p.initialize = function () { this._CanvasSprite_initialize(); this.canvasWidth = 180; this.canvasHeight = 86; this._ctx = this._element.getContext("2d"); this._asset = global.MyPreloader.getImageObject('http://jsrun.it/assets/o/A/D/p/oADp9.png'); this._mask = new global.CanvasSprite(this._asset.width, this._asset.height); this._maskCtx = this._mask.element.getContext("2d"); this._pos = 0; this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); this._count = 0; }; p.effect = function () { if (++this._count % 4 === 0) { this._pos = -60; global.pm.Motion.serial( global.pm.Motion.prop(this).scale(0.2), global.pm.Motion.tween(this, 0.4, global.Ease.BACK_OUT).scale(1.2) ).play(); } }; p._enterFrameHandler = function () { this._pos += 20; var grad = this._maskCtx.createLinearGradient(this._pos, this._pos, this._pos + 30, this._pos + 30); grad.addColorStop(0, 'rgba(255,255,200,0)'); grad.addColorStop(0.5, 'rgba(255,255,200,1)'); grad.addColorStop(0.4, 'rgba(255,255,200,1)'); grad.addColorStop(1, 'rgba(255,255,200,0)'); this._maskCtx.clearRect(0, 0, 70, 84); this._maskCtx.globalCompositeOperation = 'source-over'; this._maskCtx.drawImage(this._asset, 0, 0); this._maskCtx.globalCompositeOperation = 'source-in'; this._maskCtx.fillStyle = grad; this._maskCtx.fillRect(0, 0, 180, 86); this._ctx.clearRect(0, 0, 180, 86); this._ctx.globalAlpha = 1; this._ctx.drawImage(this._asset, 0, 0); this._ctx.globalAlpha = 0.6; this._ctx.globalCompositeOperation = 'lighter'; this._ctx.drawImage(this._mask._element, 0, 0); }; global.LevelUpText = LevelUpText; }(this)); (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var Arrow, p; Arrow = function () { this.initialize(); }; p = Arrow.prototype = new global.CanvasSprite(); p._CanvasSprite_initialize = p.initialize; p.initialize = function () { this._imageObject = global.MyPreloader.getImageObject('http://jsrun.it/assets/1/F/w/L/1FwLF.png'); this.canvasWidth = 70; this.canvasHeight = 84; this._pos = 0; this.ctx = this._element.getContext('2d'); this._createMask(); this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); }; p._createMask = function () { this._maskLayer = global.document.createElement('canvas'); this._maskLayer.width = 70; this._maskLayer.height = 84; this._maskCtx = this._maskLayer.getContext('2d'); }; p._enterFrameHandler = function () { var grad, ctx; grad = this._maskCtx.createLinearGradient(0, this._pos, 0, this._pos + 80); grad.addColorStop(0, 'rgba(255,255,200,0)'); grad.addColorStop(0.5, 'rgba(255,255,100,1)'); grad.addColorStop(0.4, 'rgba(255,200,200,1)'); grad.addColorStop(1, 'rgba(255,255,200,0)'); this._maskCtx.clearRect(0, 0, 70, 84); this._maskCtx.globalCompositeOperation = 'source-over'; this._maskCtx.drawImage(this._imageObject, 0, 0); this._maskCtx.globalCompositeOperation = 'source-in'; this._maskCtx.fillStyle = grad; this._maskCtx.fillRect(0, 0, 70, 84); ctx = this.ctx; ctx.clearRect(0, 0, 70, 84); ctx.globalAlpha = 1; ctx.drawImage(this._imageObject, 0, 0); ctx.globalAlpha = 0.6; ctx.globalCompositeOperation = 'lighter'; ctx.drawImage(this._maskLayer, 0, 0); this._pos -= 20; if (this._pos < -100) { this._pos = 80; } }; global.Arrow = Arrow; }(this)); //====================================================================================== // BrightSprite トゥイーン用の明度拡張 //====================================================================================== (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var BrightSprite, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- BrightSprite = function (width, height) { this.initialize(); this._element.width = width; this._element.height = height; this.width = width; this.height = height; }; //継承 p = BrightSprite.prototype = new global.Sprite(); p._Sprite_initialize = p.initialize; //--------------------------------------------------------------------------------- // public getter setter //--------------------------------------------------------------------------------- //明度プロパティ(-1～1) p.__defineGetter__('bright', function () { return this._bright; }); p.__defineSetter__('bright', function (value) { this._bright = value > 1 ? 1 : (value < -1 ? -1 : value); this._updateBright(); }); //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- p.initialize = function () { this._Sprite_initialize('canvas', 'BrightSprite'); this._bright = 0; this._ctx = this._element.getContext('2d'); }; p.setImage = function (image) { this._image = image; this._createLighterLayer(); this._createDarkerLayer(); this._updateBright(); }; p.toString = function () { return '[object BrightSprite]'; }; //--------------------------------------------------------------------------------- // private function //--------------------------------------------------------------------------------- //明るさを更新 p._updateBright = function () { var color = this._bright; this._ctx.globalAlpha = 1; this._ctx.clearRect(0, 0, this._image.width, this._image.height); this._ctx.drawImage(this._image, 0, 0); this._ctx.globalAlpha = Math.abs(color); if (color > 0) { this._ctx.globalCompositeOperation = 'lighter'; this._ctx.drawImage(this._lighterLayer, 0, 0); } else { this._ctx.globalCompositeOperation = 'darker'; this._ctx.drawImage(this._darkerLayer, 0, 0); } }; //乗算用のレイヤー p._createDarkerLayer = function () { this._darkerLayer = global.document.createElement('canvas'); this._darkerLayer.width = this._image.width; this._darkerLayer.height = this._image.height; var ctx = this._darkerLayer.getContext('2d'); ctx.drawImage(this._image, 0, 0); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0, 0, this._image.width, this._image.height); }; //スクリーン用のレイヤー p._createLighterLayer = function () { this._lighterLayer = global.document.createElement('canvas'); this._lighterLayer.width = this._image.width; this._lighterLayer.height = this._image.height; var ctx = this._lighterLayer.getContext('2d'); ctx.drawImage(this._image, 0, 0); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'rgb(255,255,255)'; ctx.fillRect(0, 0, this._image.width, this._image.height); }; global.BrightSprite = BrightSprite; }(this)); //====================================================================================== // カード //====================================================================================== (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } //変数定義 var Card, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- Card = function () { this.initialize(); this.canvasWidth = 120; this.canvasHeight = 160; }; //継承 p = Card.prototype = new global.CanvasSprite(); p._CanvasSprite_initialize = p.initialize; //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- //初期化 p.initialize = function () { this._CanvasSprite_initialize('canvas', 'Card'); this.scaleX = this._scaleY = 0.9; this._state = 0; this.width = 120; this.height = 160; }; //アクティブ状態にする p.activeEffect = function () { this._isActive = true; this.scaleX = this._scaleY = 1.2; this._activeTween(); }; //アクティブ状態のトゥイーンを走らせる p._activeTween = function () { this._state = 1; this._tween = this._getActiveTween(); this._tween.play(); }; //非アクティブ状態にする p.deactiveEffect = function () { this._state = 0; this.y = 0; this.scaleX = this._scaleY = 0.9; if (this._tween) { this._tween.stop(); } }; //セレクト状態にする p.selectEffect = function () { this._state = 2; if (this._tween) { this._tween.stop(); } }; //画像を転写 p.setData = function (data) { this._data = data; var ctx = this._element.getContext('2d'); ctx.clearRect(0, 0, 120, 160); ctx.drawImage(global.MyPreloader.getImageObject(this._data.url), 0, 0); }; //--------------------------------------------------------------------------------- // private function //--------------------------------------------------------------------------------- //アクティブ状態のトゥイーンオブジェクトを取得する。 p._getActiveTween = function () { return global.pm.Motion.serial( global.pm.Motion.tween(this, 0.4, global.Ease.SINE_OUT).y(-10), global.pm.Motion.tween(this, 0.4, global.Ease.SINE_OUT).y(0), global.pm.Motion.func(this, function () { if (this._state === 1) { this._activeTween(); } }) ); }; global.Card = Card; }(this)); //====================================================================================== // カードスライダー //====================================================================================== (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var CardSlider, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- CardSlider = function () { this.initialize(); }; //継承 p = CardSlider.prototype = new global.Sprite(); p._Sprite_initialize = p.initialize; p._Sprite_dispose = p.dispose; //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- //初期化 p.initialize = function () { var model, card, i, len; this._Sprite_initialize('div', 'CardSlider'); //座標 this.x = 150 - 70; this.y = 200; this.rotation = -35; this.bgColor = 0x333333; this._selectedIndex = 0; this.orignX = this.orignY = 0; this._state = -1; this._scrollStartX = 0; this._scrollX = 0; this._px = 0; this._arrow = this.addChild(new global.Arrow()); this._arrow.x = -35 + 60; this._arrow.y = -87; //コンテナを作成 this._container = this.addChild(new global.DisplayObjectContainer());//カードを入れるコンテナを作成 this._container.height = 160; //実際のカード this._cards = [];//カードを入れておく配列 len = global.datas.length; for (i = 0; i < len; i++) { card = this._container.addChild(new global.Card()); card.setData(global.datas[i]); this._cards.push(card); } //前のダミーカード this._frontDammy = []; //後ろのダミーカード this._rearDammy = []; //カードを作成 this._createCards(); //カードの座標を設定 this._updatePos(); //リスナーを登録 this._touchEndHandler = global.Util.delegate(this, this.__touchEndHandler); this.addEventListener(global.PTouchEvent.TOUCH_START, this._touchStartHandler); this.addEventListener(global.PTouchEvent.TOUCH_MOVE, this._touchMoveHandler); this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); this._selectedCardsHandler = global.Util.delegate(this, this._selectedCardsHandler); this._clear = global.Util.delegate(this, this._clear); model = global.SpecModel.getInstance(); model.addEventListener('selectedCards', this._selectedCardsHandler); model.addEventListener('clear', this._clear); }; //--------------------------------------------------------------------------------- // private function //--------------------------------------------------------------------------------- p._clear = function () { var i, len, card, model; this._scrollX = 0; this._selectedIndex = -1; model = global.SpecModel.getInstance(); while (model.selectedCards.length) { model.selectedCards.shift(); } while (this._cards.length) { this._container.removeChild(this._cards.shift()); } len = global.datas.length; for (i = 0; i < len; i++) { card = this._container.addChild(new global.Card()); card.setData(global.datas[i]); this._cards.push(card); } this._updatePos(); }; p._updateDammyCard = function () { var card, i, len, j, loop; //ダミーを削除 while (this._frontDammy.length) { this._frontDammy.shift().dispose(); } while (this._rearDammy.length) { this._rearDammy.shift().dispose(); } len = this._cards.length; if (len > 1) { loop = len === 1 ? 1 : 2; j = len - loop; //先頭のダミー for (i = 0; i < loop; i++) { card = this._container.addChild(new global.Card()); card.isDammy = true; card.setData(this._cards[j++]._data); this._frontDammy.push(card); } j = 0; //後ろのダミー for (i = 0; i < loop; i++) { card = this._container.addChild(new global.Card()); card.isDammy = true; card.setData(this._cards[j]._data); this._rearDammy.push(card); ++j; } } }; //カードを作成 p._createCards = function () { var i, len; //メイン for (i = 0; i < len; i++) { this._container.addChild(this._cards[i]); } this._cards[0].activeEffect(); }; //カードの座標を設定する p._updatePos = function () { var i, px, len; this._updateDammyCard(); if (this._cards.length > 2) { px = -280; } else if (this._cards.length > 1) { px = -280; } else { px = 0; this._arrow.alpha = 0; } len = this._frontDammy.length; for (i = 0; i < len; i++) { this._container.addChild(this._frontDammy[i]); this._frontDammy[i].x = px; px += 140; } len = this._cards.length; for (i = 0; i < len; i++) { this._container.addChild(this._cards[i]); this._cards[i].x = px; px += 140; } len = this._rearDammy.length; for (i = 0; i < len; i++) { this._container.addChild(this._rearDammy[i]); this._rearDammy[i].x = px; px += 140; } this._container.width = px; this.cardLength = this._cards.length; this._scrollWidth = this.cardLength * 140; }; //アクティブなカードを選択状態にする。 p._selectCard = function () { var card, nextActiveCard, magicCircle, model; model = global.SpecModel.getInstance(); magicCircle = model.magicCircle; if (this._cards) { card = this._cards[this._selectedIndex]; } if (card && card._state === 1) { this.mouseEnabled = false; this._cards.splice(this._selectedIndex, 1); card.selectEffect(); model.selectedCards.push(card); model.dispatch('selectedCard'); if (model.selectedCards.length >= 10) { model.dispatch('confirmation'); } global.Motion.parallel( global.Motion.tween(card, 0.4, global.Ease.EXPO_OUT).y(-320), global.Motion.tween(card, 0.4, global.Ease.EXPO_OUT).rotation(360).delay(0.05), global.Motion.func(magicCircle, magicCircle.createCard, card._data).delay(0.3), global.Motion.func(card, function () { this.parent.removeChild(this); }).delay(0.3) ).play(); if (this._cards.length <= this._selectedIndex) { nextActiveCard = this._cards[0]; } else { nextActiveCard = this._cards[this._selectedIndex]; } if (nextActiveCard) { global.Motion.parallel( global.Motion.func(nextActiveCard, nextActiveCard.activeEffect), global.Motion.func(this, this._updatePos) ).delay(0.2).play(); } } }; //演出に移る時に消す p._selectedCardsHandler = function () { global.Motion.serial( global.Motion.parallel( global.Motion.tween(this, 0.8, global.Ease.EXPO_IN).$xy(70, 90), global.Motion.tween(this, 0.6, global.Ease.EXPO_IN).alpha(0).delay(0.1) ), global.Motion.func(this, this.removeEventListenerAll), global.Motion.func(this, this.dispose).delay(0.1) ).play(); }; //タッチ開始 p._touchStartHandler = function (e) { this._isTouchDown = true; this._scrollStartX = this._scrollX; this._startX = e.touches[0].clientX; this._startY = e.touches[0].clientY; this.stage.addEventListener(global.PTouchEvent.TOUCH_END, this._touchEndHandler); }; //タッチ＆移動 p._touchMoveHandler = function (e) { var rot, deltaX, deltaY; deltaX = e.touches[0].clientX - this._startX; deltaY = e.touches[0].clientY - this._startY; if (this._arrow.alpha > 0) { this._arrow.alpha = 0; } //動いた角度で縦横を判別 if (this._state === -1) { rot = Math.atan2(deltaY, deltaX) * 180 / Math.PI; if ((rot > 90 && rot < 180) || (rot < 10 && rot > -80)) {//横 if (this._cards.length > 1) { this._state = 0; } } else {//縦 this._state = 1; } } //横の場合はスクロール処理 if (this._state === 0) { this._scrollX = (deltaX << 1) + this._scrollStartX; } //縦の場合はカード選択処理 if (this._state === 1) { rot = Math.atan2(deltaY, deltaX) * 180 / Math.PI; if (Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) > 60 && (rot > 135 || rot < -35)) { this._selectCard(); this._state = -1; } } }; //タッチ終了 p.__touchEndHandler = function () { this._isTouchDown = false; this._state = -1; if (this._arrow.alpha < 1) { global.Motion.tween(this._arrow, 0.2).alpha(1).play(); } this.stage.removeEventListener(global.PTouchEvent.TOUCH_END, this._touchEndHandler); }; //カードのスクロールを監視、アクティブ、非アクティブのエフェクトを叩く。 p._enterFrameHandler = function () { var index, activeCard, px, scrollTargetX, containerX, indexTargetX, indexX, i, card, len; scrollTargetX = Math.ceil(this._scrollX / 140) * 140; this._px += (scrollTargetX - this._px) * 0.75; px = this._px >> 0; if (px < 0) { containerX = px % this._scrollWidth; } else { containerX = (px % this._scrollWidth) - this._scrollWidth; } if (containerX < -this._scrollWidth + 120) { containerX += this._scrollWidth; } this._container.x = containerX; indexTargetX = this._scrollX; if (indexTargetX < 0) { indexX = (indexTargetX % this._scrollWidth) / 140; } else { indexX = ((indexTargetX % this._scrollWidth) - this._scrollWidth) / 140; } if (indexX < -this.cardLength - 1) { indexX = 0; } index = -indexX >> 0; if (index === this.cardLength) { index = 0; } if (this._selectedIndex !== index) { len = this._cards.length; for (i = 0; i < len; i++) { card = this._cards[i]; card.deactiveEffect(); } activeCard = this._cards[index]; if (activeCard) { activeCard.activeEffect(); global.SpecModel.getInstance().status.setData(activeCard._data); } } this._selectedIndex = index; }; p.dispose = function () { var model; model = global.SpecModel.getInstance(); model.removeEventListener('selectedCards', this._selectedCardsHandler); model.removeEventListener('clear', this._clear); this.removeEventListener(global.PTouchEvent.TOUCH_START, this._touchStartHandler); this.removeEventListener(global.PTouchEvent.TOUCH_MOVE, this._touchMoveHandler); this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); this._Sprite_dispose(); }; global.CardSlider = CardSlider; }(this)); //====================================================================================== // カードスライダー //====================================================================================== (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var CardStatus, p; CardStatus = function () { this.initialize(); }; p = CardStatus.prototype = new global.DisplayObjectContainer(); p._DisplayObjectContainer_initialize = p.initialize; p.initialize = function () { this._DisplayObjectContainer_initialize('div', 'CardStatus'); this._bg = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/d/o/k/n/doknr.png')); this._bg.width = 168; this._bg.height = 98; this._bg.alpha = 0.8; this._title = this.addChild(new global.DisplayObject()); this._param = this.addChild(new global.DisplayObject()); this._skil = this.addChild(new global.DisplayObject()); this.width = 168; this.height = 98; this.x = 150; this.y = 317; this.mouseEnabled = false; this._title.mouseEnabled = false; this._param.mouseEnabled = false; this._skil.mouseEnabled = false; this._title.fontSize = 16; this._param.fontSize = 12; this._skil.fontSize = 12; this._title.color = 0xDFDFDF; this._param.color = 0xDFDFDF; this._skil.color = 0xDFDFDF; this._title.x = this._param.x = this._skil.x = 25; this._title.y = 15; this._param.y = 40; this._skil.y = 55; this._title.width = this._param.width = this._skil.width = 150; this._title.height = 20; this._param.height = this._skil.height = 20; this.setData(global.datas[0]); global.SpecModel.getInstance().addEventListener('selectedCards', global.Util.delegate(this, this._selectedCardsHandler)); }; p._selectedCardsHandler = function () { global.Motion.serial( global.Motion.parallel( global.Motion.tween(this, 0.4, global.Ease.EXPO_IN).$y(40), global.Motion.tween(this, 0.4).alpha(0) ), global.Motion.func(this, this.dispose) ).play(); }; p.setData = function (data) { this._title.innerHTML = data.name; this._param.innerHTML = 'Lv.' + data.level + ' AT:' + data.attack + ' DF' + data.defense + ''; this._skil.innerHTML = 'スキル：' + data.skill; }; global.CardStatus = CardStatus; }(this)); //====================================================================================== // ヘッダー //====================================================================================== (function (global) { 'use strict'; var ConformButton, p; ConformButton = function () { this.initialize(); }; p = ConformButton.prototype = new global.Sprite(); p._Sprite_initialize = p.initialize; p.initialize = function () { var scale, bg, model; scale = (320 / 480); this.x = 200; this.y = 60; bg = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/z/E/g/e/zEgeJ.png')); bg.width *= scale; bg.height *= scale; this.width = bg.width; this.height = bg.height; this._canvas = this.addChild(new global.CanvasSprite()); this._canvas.x = 0; this.ctx = this._canvas.element.getContext('2d'); this._pos = 0; this._button = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/l/Q/g/K/lQgK3.png')); this._button.width *= scale; this._button.height *= scale; this._button.x = 3; this._canvas.width = this._canvas.canvasWidth = this._button.width + 7; this._canvas.height = this._canvas.canvasHeight = this._button.height + 7; this._canvas.y = 0; this._button.y = 3; this.visible = false; this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); model = global.SpecModel.getInstance(); model.addEventListener('selectedCard', global.Util.delegate(this, this._selectedCardHandler)); model.addEventListener('selectedCards', global.Util.delegate(this, this._selectedCardsHandler)); model.addEventListener('closeConfirmation', global.Util.delegate(this, this._closeConfirmationHandler)); model.addEventListener('confirmation', global.Util.delegate(this, this._confirmationHandler)); model.addEventListener('clear', global.Util.delegate(this, this._clear)); this.addEventListener(global.PEvent.MOUSE_DOWN, this._downHandler); /* global.Motion.serial( global.Motion.prop(this).$y(-40).alpha(0).visible(false), global.Motion.wait(0.6), global.Motion.prop(this).visible(true), global.Motion.tween(this, 0.4, global.Ease.EXPO_OUT).$y(0).alpha(1) ).play(); */ }; p._clear = function () { this.visible = false; }; p._confirmationHandler = function () { this.visible = false; }; p._closeConfirmationHandler = function () { this.visible = global.SpecModel.getInstance().selectedCards.length > 1; }; p._downHandler = function () { global.SpecModel.getInstance().dispatch('confirmation'); }; p._selectedCardHandler = function () { this.ctx.clearRect(0, 0, this._canvas.canvasWidth, this._canvas.canvasHeight); this.visible = global.SpecModel.getInstance().selectedCards.length > 1; }; p._selectedCardsHandler = function () { this.removeEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); this.visible = false; this.removeEventListenerAll(); }; p.update = function () { var w, h, pi, r, ctx; if (!this.visible) { return; } this.grad = this.ctx.createLinearGradient(this._pos + 60, 0, this._pos + 124, 64); this.grad.addColorStop(0, 'rgba(255,255,255,0)'); this.grad.addColorStop(0.4, 'rgba(255,255,255,1)'); this.grad.addColorStop(0.6, 'rgba(255,255,255,1)'); this.grad.addColorStop(1, 'rgba(255,255,255,0)'); pi = Math.PI; w = this._canvas.canvasWidth; h = this._canvas.canvasHeight; r = 10; ctx = this.ctx; ctx.clearRect(0, 0, w, h); ctx.globalAlpha = 0.6; this.ctx.fillStyle = this.grad; ctx.globalCompositeOperation = 'lighter'; ctx.beginPath(); ctx.arc(r, r, r, -pi, -0.5 * pi, false); ctx.arc(w - r, r, r, -0.5 * pi, 0, false); ctx.arc(w - r, h - r, r, 0, 0.5 * pi, false); ctx.arc(r, h - r, r, 0.5 * pi, pi, false); ctx.closePath(); ctx.fill(); }; p._enterFrameHandler = function () { if (this._pos % 40 !== 0) { return; } this._pos += 40; if (this._pos > 240) { this._pos = -240; } this.update(); }; global.ConformButton = ConformButton; }(this)); //====================================================================================== // コンテキストエフェクト //====================================================================================== (function (global) { 'use strict'; var ContextEffect, p; ContextEffect = function () { this.initialize(); }; p = ContextEffect.prototype = new global.Sprite(); p._Sprite_initialize = p.initialize; p.initialize = function () { var scale; scale = 320 / 480; this._Sprite_initialize('div', 'ContextEffect'); this._bg = this.addChild(new global.DisplayObject()); this._bg.bgColor = 0; this._bg.height = 374; this._bg.width = 320; this._mask = this.addChild(new global.DisplayObjectContainer()); this._mask.overflow = "hidden"; this._mask.x = 10; this._mask.y = 120; this._asset = this._mask.addChild(global.MyPreloader.get('http://jsrun.it/assets/w/x/c/1/wxc1Y.png')); this.y = 44; this.addEventListener(global.PEvent.MOUSE_DOWN, this.close); global.SpecModel.getInstance().addEventListener('selectedCard', global.Util.delegate(this, this._selectedCardHandler)); global.SpecModel.getInstance().addEventListener('clear', global.Util.delegate(this, this._clear)); this.openMotion = global.Motion.parallel( global.Motion.prop(this._mask).scale(3).alpha(1), global.Motion.prop(this._bg).bgColor(0x999999), global.Motion.tween(this._bg, 0.4).bgColor(0), global.Motion.tween(this._mask, 0.4, global.Ease.EXPO_OUT).scale(1) ); }; p._clear = function () { global.Motion.func(this, this.open, 0).delay(0.4).play(); }; p._selectedCardHandler = function () { var state; switch (global.SpecModel.getInstance().selectedCards.length) { case 1: state = 1; break; case 2: state = 2; break; default: return; } global.Motion.func(this, this.open, state).delay(0.4).play(); }; p.open = function (state) { if (!global.contextEffectEnabled) { return; } if (this.openMotion.playing) { this.openMotion.stop(); } this.isOpen = true; var stage = global.SpecModel.getInstance().stage; this._bg.alpha = 0.6; switch (state) { case 0: this._mask.x = -143 + 160; this._mask.width = 286; this._mask.height = 100; this._asset.y = 0; break; case 1: this._mask.x = -143 + 160; this._mask.width = 286; this._mask.height = 100; this._asset.y = -100; break; case 2: this._mask.x = -143 + 160; this._mask.width = 286; this._mask.height = 100; this._asset.y = -200; break; } this._mask.rotation = -15; stage.addChild(this); this.openMotion.play(); global.Motion.func(this, this.close).delay(0.8).play(); }; p.close = function () { if (!global.contextEffectEnabled) { return; } if (!this.isOpen) { return; } if (this.openMotion.isPlaying) { this.openMotion.stop(); } if (!this.closeMotion) { this.closeMotion = global.Motion.parallel( global.Motion.tween(this._mask, 0.4, global.Ease.EXPO_IN).scale(3), global.Motion.tween(this._mask, 0.4).alpha(0).delay(0.2), global.Motion.tween(this._bg, 0.4, global.Ease.EXPO_IN).alpha(0), global.Motion.func(this.parent, this.parent.removeChild, this).delay(0.4) ); } this.isOpen = false; this.closeMotion.play(); }; global.ContextEffect = ContextEffect; }(this)); (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var MagicCircle, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- MagicCircle = function () { this.initialize(); }; //継承 p = MagicCircle.prototype = new global.DisplayObjectContainer(); p._DisplayObjectContainer_initialize = p.initialize; //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- //初期化 p.initialize = function () { this._DisplayObjectContainer_initialize('div', 'MagicCircle'); this._rv = 1; this._asset = global.MyPreloader.getImageObject('http://jsrun.it/assets/1/X/T/S/1XTSd.png'); this._container = this.addChild(new global.DisplayObjectContainer('div', 'DisplayObjectContainer')); this._canvas = this._container.addChild(new global.CanvasSprite()); this._canvas.canvasWidth = this._asset.width << 1; this._canvas.canvasHeight = this._asset.height << 1; this._canvas.x = this._canvas.y = -208; this._ctx = this._canvas.element.getContext('2d'); this._ctx.scale(2, 2); this._ctx.drawImage(this._asset, 0, 0); this.mouseEnabled = false; this._container.mouseEnabled = false; this._canvas.mouseEnabled = false; this.addEventListener(global.PEvent.ENTER_FRAME, this._enterFrameHandler); global.SpecModel.getInstance().addEventListener('selectedCards', global.Util.delegate(this, this._selectedCardsHandler)); global.SpecModel.getInstance().addEventListener('clear', global.Util.delegate(this, this._clear)); }; p._clear = function () { this._ctx.clearRect(0, 0, this._canvas.canvasWidth, this._canvas.canvasHeight); this._ctx.drawImage(this._asset, 0, 0); }; p._selectedCardsHandler = function () { var model, wing, inazuma; global.Tango.fps = 12; model = global.SpecModel.getInstance(); wing = model.backgroundWing; inazuma = model.inazuma; this._rv = 60; global.Motion.serial( global.Motion.wait(0.6), global.Motion.parallel( global.Motion.tween(this, 1.2, global.Ease.EXPO_IN_OUT).xy(160, 300).scale(2), global.Motion.tween(this, 1.2, global.Ease.EXPO_OUT).scaleX(0.7).scaleY(0.3).delay(0.6), global.Motion.func(wing, wing.play).delay(0.6) ), global.Motion.func(inazuma, inazuma.effect), global.Motion.wait(0.8), global.Motion.parallel( global.Motion.tween(this, 0.4, global.Ease.BACK_IN).scale(0).delay(0.8), global.Motion.func(inazuma, inazuma.effect2).delay(1.1) ) ).play(); }; p.createCard = function (data) { var card = global.MyPreloader.getImageObject(data.url); this._ctx.save(); this._ctx.translate(104, 104); this._ctx.rotate((-35 - this._container.rotation) * Math.PI / 180); this._ctx.scale(0.6, 0.6); this._ctx.translate(-60, -80); this._ctx.globalAlpha = 0.6; this._ctx.globalCompositeOperation = 'lighter'; this._ctx.drawImage(card, 0, 0); this._ctx.restore(); }; //--------------------------------------------------------------------------------- // private function //--------------------------------------------------------------------------------- //自転のエンターフレーム p._enterFrameHandler = function () { this._container.rotation += this._rv; }; global.MagicCircle = MagicCircle; }(this)); //====================================================================================== // ヘッダー //====================================================================================== (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var MyHeader, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- MyHeader = function () { this.initialize('div', 'header'); }; //継承 p = MyHeader.prototype = new global.DisplayObjectContainer(); p._DisplayObjectContainer_initialize = p.initialize; p._DisplayObjectContainer_dispose = p.dispose; //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- //初期化 p.initialize = function () { var scale, model; scale = 320 / 480; this._DisplayObjectContainer_initialize('div', 'header'); this._asset = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/t/5/v/f/t5vfi.png')); this._asset.width = 320; this._asset.height = 204 * scale; this.width = this._asset.width; this.height = this._asset.height / 3; this.overflow = 'hidden'; this.setState(0); this._selectedCardHandler = global.Util.delegate(this, this._selectedCardHandler); this._selectedCardsHandler = global.Util.delegate(this, this._selectedCardsHandler); this._clear = global.Util.delegate(this, this._clear); model = global.SpecModel.getInstance(); model.addEventListener('selectedCard', this._selectedCardHandler); model.addEventListener('selectedCards', this._selectedCardsHandler); model.addEventListener('clear', this._clear); }; p._clear = function () { this.setState(0); }; p._selectedCardsHandler = function () { global.Motion.tween(this, 0.4, global.Ease.EXPO_IN).y(-this.height).play(); }; p._selectedCardHandler = function () { var len = global.SpecModel.getInstance().selectedCards.length; if (len === 0) { this.setState(0); } if (len === 1) { this.setState(1); } if (len === 2) { this.setState(2); } }; p.dispose = function () { var model; model = global.SpecModel.getInstance(); model.removeEventListener('selectedCard', this._selectedCardHandler); model.removeEventListener('clear', this._clear); this._DisplayObjectContainer_dispose(); }; //Stateを切り替える(0:ベースカード選択、1:素材カード選択、2:カードの確認) p.setState = function (value) { this._asset.y = -this._asset.height / 3 * value; }; global.MyHeader = MyHeader; }(this)); (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var WingDisplayObject, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- WingDisplayObject = function () { this.initialize(); }; //継承 p = WingDisplayObject.prototype = new global.DisplayObjectContainer(); p._DisplayObjectContainer_initialize = p.initialize; //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- //初期化 p.initialize = function () { var scale, ctx; scale = 0; this._DisplayObjectContainer_initialize('div'); this.bg = this.addChild(new global.CanvasSprite()); this.bg.canvasWidth = 240; this.bg.canvasHeight = 350; this.bg.bgColor = 0x001632; ctx = this.bg.element.getContext('2d'); ctx.globalCompositeOperation = 'lighter'; ctx.globalAlpha = 1; this.bg.alpha = 0; this.wingLeft = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/5/q/H/e/5qHe1.png')); this.wingLeft.x = 6 + 60; this.wingLeft.y = 20 + 80; this.wingLeft.rotation = 60; this.wingLeft.scaleX = -scale; this.wingLeft.scaleY = scale; this.wingLeft.alpha = 0; this.wingRight = this.addChild(global.MyPreloader.get('http://jsrun.it/assets/5/q/H/e/5qHe1.png')); this.wingRight.x = 128 - 60; this.wingRight.y = 20 + 80; this.wingRight.rotation = -60; this.wingRight.scaleX = scale; this.wingRight.scaleY = scale; this.wingRight.alpha = 0; this.scaleY = this.scaleX = 320 / 240; this._count = 0; }; //再生する p.play = function () { global.Motion.prop(this.bg).alpha(0).play(); global.Motion.tween(this.bg, 0.2).bgColor(0x19344c).play(); global.Motion.parallel( global.Motion.tween(this.wingLeft, 0.4).alpha(1).delay(0.1), global.Motion.tween(this.wingRight, 0.4).alpha(1).delay(0.1), global.Motion.tween(this.wingLeft, 1.2, global.Ease.BACK_OUT).xy(6, 20), global.Motion.tween(this.wingRight, 1.2, global.Ease.BACK_OUT).xy(128, 20), global.Motion.tween(this.wingLeft, 1.2, global.Ease.BACK_OUT).scaleX(-1).scaleY(1).rotation(0).xy(6, 20), global.Motion.tween(this.wingRight, 1.2, global.Ease.BACK_OUT).scale(1).rotation(0).xy(128, 20), global.Motion.tween(this.wingLeft, 1.2, global.Ease.BACK_OUT).rotation(0).delay(0.3), global.Motion.tween(this.wingRight, 1.2, global.Ease.BACK_OUT).rotation(0).delay(0.3), global.Motion.prop(this.bg).alpha(1).delay(3.2) ).delay(0.2).play(); }; p.toString = function () { return '[object WingDisplayObject]'; }; global.WingDisplayObject = WingDisplayObject; }(this)); //====================================================================================== // Model [Singleton] //====================================================================================== (function (global) { 'use strict'; //非対応端末はスルー if (!global.pm.isSupport) { return; } var SpecModel, p; //--------------------------------------------------------------------------------- // constructor //--------------------------------------------------------------------------------- SpecModel = function () { if (global.SpecModel._instance) { throw new global.SingletonError(); } global.SpecModel._instance = this; this.initialize(); }; //継承 p = SpecModel.prototype = new global.EventDispatcher(); p._EventDispatcher_initialize = p.initialize; //--------------------------------------------------------------------------------- // static public function //--------------------------------------------------------------------------------- //インスタンスを取得します。 SpecModel.getInstance = function () { if (!SpecModel._instance) { new global.SpecModel(); } return global.SpecModel._instance; }; //--------------------------------------------------------------------------------- // public function //--------------------------------------------------------------------------------- //初期化 p.initialize = function () { this._EventDispatcher_initialize(); this.selectedCards = [];//選択されたカード。[0]がベース、[1]以降が素材。 this.header = new global.MyHeader();//ヘッダーを作成 this.slider = new global.CardSlider();//スライダーを作成 this.backgroundWing = new global.WingDisplayObject();//背景のウィングを作成 this.magicCircle = new global.MagicCircle();//魔法陣 this.status = new global.CardStatus(); this.contextEffect = new global.ContextEffect(); this.inazuma = new global.Inauzuma(); this.rotateDisplay = new global.DisplayRotateSprite(); this.confirmationSprite = new global.ConfirmationSprite(); }; //--------------------------------------------------------------------------------- // public property //--------------------------------------------------------------------------------- //選択中のカードインデックス p.selectedIndex = -1; //選択されたカード。[0]がベース、[1]以降が素材。 p.selectedCards = null; //ヘッダー p.header = null; //スライダー p.slider = null; //背景の翼 p.backgroundWing = null; //魔法陣 p.magicCircle = null; //途中に出てくる文言 p.contextEffect = null; global.SpecModel = SpecModel; }(this)); * { margin:0px; padding:0px; } body { background-color: #000512; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

asou_jp

URL
http://asou.jp

Twitter: http://twitter.com/asou_jp Facebook: https://www.facebook.com/asou.jp

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/ehbU/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

kavao_jp:

animation html5 html5_elements&apiかこいい

Forked

sort by

forked: 斜めにスライドする　( SPEC vol.5

Cornelius.En

2151/1/3

forked: 斜めにスライドする　( SPEC vol.5

012

0
0
1244

2151/1/3

forked: 斜めにスライドする　( SPEC vol.5

tuki0918

2151/1/3
- user_interface

斜めにスライドする　( SPEC vol.5 投稿用コード)

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked