Forked from: jsdo.it_team's 【終了しました】SPEC vol.5 投稿用コード View Diff (2648) 斜めにスライドする ( SPEC vol.5 投稿用コード) asou_jp Follow 2013-09-13 11:45:10 License: MIT License Fork3 Fav12 View7222 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 : 'カード1', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/2.jpg', name : 'カード2', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/3.jpg', name : 'カード3', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/4.jpg', name : 'カード4', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/5.jpg', name : 'カード5', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/6.jpg', name : 'カード6', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/7.jpg', name : 'カード7', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/8.jpg', name : 'カード8', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/9.jpg', name : 'カード9', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/10.jpg', name : 'カード10', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/11.jpg', name : 'カード11', level : 2, attack : 1000, defense : 1000, skill : '特になし'} ]; //操作の途中に挟んだ演出の有無。 var contextEffectEnabled = true; //====================================================================================================================== //====================================================================================== // preprocess //====================================================================================== (function (global) { 'use strict'; //非サポートブラウザは停止 if (!global.pm.isSupport) { //簡易的に文言を突っ込んどく。 global.document.write('<p>非対応端末です。</p>'); 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 = '<span>Lv.' + data.level + '</span> <span>AT:' + data.attack + '</span> <span>DF' + data.defense + '</span>'; 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)); 斜めにスライドする ( SPEC vol.5 投稿用コード) * { margin:0px; padding:0px; } body { background-color: #000512; } スマートフォン向けのソーシャルゲームを想定して作成しました。<br/> カードはスライドで選んで選択します。<br/> <del>PCからは見れない&操作できないです。</del> PCからはマウスホイールとクリックで無理やり再現しておきました。<br/> <br/> お手数ですがドメインをjsrun.itに書き直すか、下のQRを使ってアクセスしてください。<br/> http://jsrun.it/asou_jp/ehbU<br/> <br/> UI<br/> ・タッチパネル、手にあったUIかどうか。<br/> ・電車の中など不自由なシチュエーションでも片手で操作できるか。<br/> ・一般的なカード選択UIから突出しすぎていないか。<br/> <br/> 演出<br/> ・合成にワクワク感、ご褒美感があるか。<br/> ・ゲームの主体となっているカードが引き立てられているか。<br/> ・コンテキストは美しいか。<br/> <br/> このへんを意識したつもりです。<br/> //====================================================================================================================== // 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 : 'カード1', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/2.jpg', name : 'カード2', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/3.jpg', name : 'カード3', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/4.jpg', name : 'カード4', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/5.jpg', name : 'カード5', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/6.jpg', name : 'カード6', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/7.jpg', name : 'カード7', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/8.jpg', name : 'カード8', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/9.jpg', name : 'カード9', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/10.jpg', name : 'カード10', level : 2, attack : 1000, defense : 1000, skill : '特になし'}, {url : 'http://jsdo.it/img/event/spec/vol5/material_js/11.jpg', name : 'カード11', level : 2, attack : 1000, defense : 1000, skill : '特になし'} ]; //操作の途中に挟んだ演出の有無。 var contextEffectEnabled = true; //====================================================================================================================== //====================================================================================== // preprocess //====================================================================================== (function (global) { 'use strict'; //非サポートブラウザは停止 if (!global.pm.isSupport) { //簡易的に文言を突っ込んどく。 global.document.write('<p>非対応端末です。</p>'); 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 = '<span>Lv.' + data.level + '</span> <span>AT:' + data.attack + '</span> <span>DF' + data.defense + '</span>'; 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? スマートフォン向けのソーシャルゲームを想定して作成しました。<br/> カードはスライドで選んで選択します。<br/> <del>PCからは見れない&操作できないです。</del> PCからはマウスホイールとクリックで無理やり再現しておきました。<br/> <br/> お手数ですがドメインをjsrun.itに書き直すか、下のQRを使ってアクセスしてください。<br/> http://jsrun.it/asou_jp/ehbU<br/> <br/> UI<br/> ・タッチパネル、手にあったUIかどうか。<br/> ・電車の中など不自由なシチュエーションでも片手で操作できるか。<br/> ・一般的なカード選択UIから突出しすぎていないか。<br/> <br/> 演出<br/> ・合成にワクワク感、ご褒美感があるか。<br/> ・ゲームの主体となっているカードが引き立てられているか。<br/> ・コンテキストは美しいか。<br/> <br/> このへんを意識したつもりです。<br/> Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author asou_jp URLhttp://asou.jp Twitter: http://twitter.com/asou_jp Facebook: https://www.facebook.com/asou.jp Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/ehbU/js"></script> Discussion Questions on this code? Tags animation html5 html5_elements&api Favorite by shikisakuras fallen mochi_Flappe asou_jp siouxcitizen turusuke yoshikikojim akm2 mongchang tikitikipoo demouth kavao_jp: animationhtml5html5_elements&apiかこいい Forked sort by latest page views favorite forked forked: 斜めにスライドする ( SPEC vol.5 Cornelius.En 00 710 2151/1/3 forked: 斜めにスライドする ( SPEC vol.5 012 00 1244 2151/1/3 forked: 斜めにスライドする ( SPEC vol.5 tuki0918 00 693 2151/1/3 user_interface