Forked from: ohisama1's forked: EaselJS & TweenJS View Diff (5) forked: EaselJS & TweenJS teruya Follow 2016-07-21 08:01:07 License: MIT License Fork0 Fav0 View921 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 93 lines HTML 7 lines CSS 10 lines forked: EaselJS & TweenJS // forked from ohisama1's "forked: EaselJS & TweenJS" http://jsdo.it/ohisama1/QwGY // forked from mikelito's "EaselJS & TweenJS" http://jsdo.it/mikelito/2BNT var numCircles = 100; var canvas, stage, circleList, isStageClick; function init() { var speedX, speedY, radius, randomNum, color, circle; canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); isStageClick = false; circleList = []; for (var i = 0; i < numCircles; i += 1) { speedX = Math.floor(Math.random() * 20 * 100) / 100 - 10; speedY = Math.floor(Math.random() * 20 * 100) / 100 - 10; radius = Math.floor(Math.random() * 20) + 5; randomNum = Math.floor(Math.random() * 0xFFFFFF); color = createjs.Graphics.getRGB(randomNum); circle = new Circle(speedX, speedY, radius, color); stage.addChild(circle); circle.x = 250; circle.y = 250; circleList.push(circle); } createjs.Ticker.useRAF = true; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener('tick', tick); stage.addEventListener("stagemousedown", onStageMouseDown); } function tick() { var circle; if (!isStageClick) { for(var i = 0; i < numCircles; i += 1) { circle = circleList[i] circle.Container__tick(); } } stage.update(); } function onStageMouseDown() { var circle; isStageClick =! isStageClick; if (isStageClick) { for (var i = 0; i < numCircles; i += 1) { circle = circleList[i]; circle.fetch(stage.mouseX, stage.mouseY, i); } } } var Circle = {}; (function() { var Circle = function(speedX, speedY, radius, color) { this.initialize(speedX, speedY, radius, color); } var prot = Circle.prototype = new createjs.Shape(); prot.speedX = 0; prot.speedY = 0; prot.radius = 5; prot.color = "#000000"; prot.Container_initialize = prot.initialize; prot.initialize = function(speedX, speedY, radius, color) { this.Container_initialize(); this.speedX = speedX; this.speedY = speedY; this.graphics.beginFill(color); this.graphics.drawCircle(0, 0, radius); } prot.Container__tick = function() { this.x += this.speedX; this.y += this.speedY; if (this.x > 500 || this.x < 0) this.speedX *= -1; if (this.y > 500 || this.y < 0) this.speedY *= -1; } prot.myTween = cretejs.Tween.get(this); prot.fetch = function(targetX, targetY, delay) { var delayMSec = delay % 250; myTween.wait(delayMSec).to({ x: targetX, y: targetY, alpha: 0.5 }, 300, createjs.Ease.elasticOut).call(onComplete); function onComplete() { this.fetch(targetX*-1, targetY*-1,5); } } this.Circle = Circle; }()); init(); <script src="http://code.createjs.com/easeljs-0.6.0.min.js"> </script> <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"> </script> <canvas id="canvas" width="450" height="450" style="background-color: #DDDDDD"> </canvas> forked: EaselJS & TweenJS * { margin: 0; padding: 0; border: 0; } body { background: #dff; font: 30px sans-serif; } // forked from ohisama1's "forked: EaselJS & TweenJS" http://jsdo.it/ohisama1/QwGY // forked from mikelito's "EaselJS & TweenJS" http://jsdo.it/mikelito/2BNT var numCircles = 100; var canvas, stage, circleList, isStageClick; function init() { var speedX, speedY, radius, randomNum, color, circle; canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); isStageClick = false; circleList = []; for (var i = 0; i < numCircles; i += 1) { speedX = Math.floor(Math.random() * 20 * 100) / 100 - 10; speedY = Math.floor(Math.random() * 20 * 100) / 100 - 10; radius = Math.floor(Math.random() * 20) + 5; randomNum = Math.floor(Math.random() * 0xFFFFFF); color = createjs.Graphics.getRGB(randomNum); circle = new Circle(speedX, speedY, radius, color); stage.addChild(circle); circle.x = 250; circle.y = 250; circleList.push(circle); } createjs.Ticker.useRAF = true; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener('tick', tick); stage.addEventListener("stagemousedown", onStageMouseDown); } function tick() { var circle; if (!isStageClick) { for(var i = 0; i < numCircles; i += 1) { circle = circleList[i] circle.Container__tick(); } } stage.update(); } function onStageMouseDown() { var circle; isStageClick =! isStageClick; if (isStageClick) { for (var i = 0; i < numCircles; i += 1) { circle = circleList[i]; circle.fetch(stage.mouseX, stage.mouseY, i); } } } var Circle = {}; (function() { var Circle = function(speedX, speedY, radius, color) { this.initialize(speedX, speedY, radius, color); } var prot = Circle.prototype = new createjs.Shape(); prot.speedX = 0; prot.speedY = 0; prot.radius = 5; prot.color = "#000000"; prot.Container_initialize = prot.initialize; prot.initialize = function(speedX, speedY, radius, color) { this.Container_initialize(); this.speedX = speedX; this.speedY = speedY; this.graphics.beginFill(color); this.graphics.drawCircle(0, 0, radius); } prot.Container__tick = function() { this.x += this.speedX; this.y += this.speedY; if (this.x > 500 || this.x < 0) this.speedX *= -1; if (this.y > 500 || this.y < 0) this.speedY *= -1; } prot.myTween = cretejs.Tween.get(this); prot.fetch = function(targetX, targetY, delay) { var delayMSec = delay % 250; myTween.wait(delayMSec).to({ x: targetX, y: targetY, alpha: 0.5 }, 300, createjs.Ease.elasticOut).call(onComplete); function onComplete() { this.fetch(targetX*-1, targetY*-1,5); } } this.Circle = Circle; }()); init(); <script src="http://code.createjs.com/easeljs-0.6.0.min.js"> </script> <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"> </script> <canvas id="canvas" width="450" height="450" style="background-color: #DDDDDD"> </canvas> * { margin: 0; padding: 0; border: 0; } body { background: #dff; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author teruya 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/GncM/js"></script> library&test CreateJS, EaselJS, TweenJS Discussion Questions on this code? Tags CreateJS, EaselJS, TweenJS library&test
