Forked from: mikelito's EaselJS & TweenJS View Diff (249) CreateJSでパーティクルのバウンド u8_fukuda Follow 2013-11-28 18:13:22 License: MIT License Fork2 Fav1 View7567 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 117 lines HTML 3 lines CSS 3 lines Canvas内でパーティクルのバウンド。 クリックすると、クリックしたポイントに一旦集まってばらけます。 素のCanvas APIでアニメーションを作ろうと思うと非常に手間ですが、 CreateJS(EaselJS & TweenJS)を使うとかなりシンプルに記述出来ます。 CreateJSでパーティクルのバウンド // forked from mikelito's "EaselJS & TweenJS" http://jsdo.it/mikelito/2BNT (function() { var Particle = function(canvasId, config) { // config this.config = { circleLength: 200 }; // has override config if ( config ) { var c; for ( c in config ) { if ( !c in this.config ) { break }; this.config[c] = config[c]; } } this.canvas = document.getElementById(canvasId); this.stage = new createjs.Stage(this.canvas); this.circleList = []; this.isStageClick = false; this.init(); }; Particle.prototype = { init: function() { var _this = this, speedX, speedY, radius, color, circle; // blend mode this.stage.compositeOperation = 'lighter'; // create circle for (var i = -1; ++i < this.config.circleLength;) { speedX = Math.floor(Math.random() * 20 * 10) / 10 - 10; speedY = Math.floor(Math.random() * 20 * 10) / 10 - 10; radius = Math.floor(Math.random() * 10) + 2; color = createjs.Graphics.getRGB(Math.floor(Math.random() * 0xFFFFFF)); circle = new Circle(speedX, speedY, radius, color); circle.x = this.canvas.width / 2; circle.y = this.canvas.height / 2; this.circleList.push(circle); this.stage.addChild(circle); } // animation createjs.Ticker.useRAF = true; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener('tick', function() { if (!_this.isStageClick) { for (var i = -1; ++i < _this.config.circleLength;) { _this.circleList[i].tick(); } } _this.stage.update(); }); // mousedown event this.stage.addEventListener('stagemousedown', function() { _this.isStageClick =! _this.isStageClick; if (_this.isStageClick) { for (var i = -1; ++i < _this.config.circleLength;) { _this.circleList[i].fetch( _this.stage.mouseX, _this.stage.mouseY, i, i + 1 !== _this.config.circleLength ? null: function() { _this.isStageClick = false; }); } } }); } }; var Circle = function(speedX, speedY, radius, color) { this.speedX = speedX; this.speedY = speedY; this.radius = radius; this.color = color; this.graphics = new createjs.Graphics(); this.graphics.beginFill(color); this.graphics.drawCircle(0, 0, radius); }; Circle.prototype = new createjs.Shape(); Circle.prototype.tick = function() { this.x += this.speedX; this.y += this.speedY; if (this.x > 440 || this.x < 0) { this.speedX *= -1 }; if (this.y > 440 || this.y < 0) { this.speedY *= -1 }; }; Circle.prototype.fetch = function(targetX, targetY, delay, cb) { createjs.Tween.get(this) .to({ x: targetX, y: targetY, alpha: 0.1 }, 500, createjs.Ease.sineInOut) .call(function() { this.alpha = 1; if (cb) { cb(); } }); }; window.addEventListener('load', function() { var hoge = new Particle('world', { circleLength: 500 }); }, false); }()); <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script> <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script> <canvas id="world" width="440" height="440"></canvas> CreateJSでパーティクルのバウンド #world { background: #000; } Canvas内でパーティクルのバウンド。 クリックすると、クリックしたポイントに一旦集まってばらけます。 素のCanvas APIでアニメーションを作ろうと思うと非常に手間ですが、 CreateJS(EaselJS & TweenJS)を使うとかなりシンプルに記述出来ます。 // forked from mikelito's "EaselJS & TweenJS" http://jsdo.it/mikelito/2BNT (function() { var Particle = function(canvasId, config) { // config this.config = { circleLength: 200 }; // has override config if ( config ) { var c; for ( c in config ) { if ( !c in this.config ) { break }; this.config[c] = config[c]; } } this.canvas = document.getElementById(canvasId); this.stage = new createjs.Stage(this.canvas); this.circleList = []; this.isStageClick = false; this.init(); }; Particle.prototype = { init: function() { var _this = this, speedX, speedY, radius, color, circle; // blend mode this.stage.compositeOperation = 'lighter'; // create circle for (var i = -1; ++i < this.config.circleLength;) { speedX = Math.floor(Math.random() * 20 * 10) / 10 - 10; speedY = Math.floor(Math.random() * 20 * 10) / 10 - 10; radius = Math.floor(Math.random() * 10) + 2; color = createjs.Graphics.getRGB(Math.floor(Math.random() * 0xFFFFFF)); circle = new Circle(speedX, speedY, radius, color); circle.x = this.canvas.width / 2; circle.y = this.canvas.height / 2; this.circleList.push(circle); this.stage.addChild(circle); } // animation createjs.Ticker.useRAF = true; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener('tick', function() { if (!_this.isStageClick) { for (var i = -1; ++i < _this.config.circleLength;) { _this.circleList[i].tick(); } } _this.stage.update(); }); // mousedown event this.stage.addEventListener('stagemousedown', function() { _this.isStageClick =! _this.isStageClick; if (_this.isStageClick) { for (var i = -1; ++i < _this.config.circleLength;) { _this.circleList[i].fetch( _this.stage.mouseX, _this.stage.mouseY, i, i + 1 !== _this.config.circleLength ? null: function() { _this.isStageClick = false; }); } } }); } }; var Circle = function(speedX, speedY, radius, color) { this.speedX = speedX; this.speedY = speedY; this.radius = radius; this.color = color; this.graphics = new createjs.Graphics(); this.graphics.beginFill(color); this.graphics.drawCircle(0, 0, radius); }; Circle.prototype = new createjs.Shape(); Circle.prototype.tick = function() { this.x += this.speedX; this.y += this.speedY; if (this.x > 440 || this.x < 0) { this.speedX *= -1 }; if (this.y > 440 || this.y < 0) { this.speedY *= -1 }; }; Circle.prototype.fetch = function(targetX, targetY, delay, cb) { createjs.Tween.get(this) .to({ x: targetX, y: targetY, alpha: 0.1 }, 500, createjs.Ease.sineInOut) .call(function() { this.alpha = 1; if (cb) { cb(); } }); }; window.addEventListener('load', function() { var hoge = new Particle('world', { circleLength: 500 }); }, false); }()); <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script> <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script> <canvas id="world" width="440" height="440"></canvas> #world { background: #000; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Canvas内でパーティクルのバウンド。 クリックすると、クリックしたポイントに一旦集まってばらけます。 素のCanvas APIでアニメーションを作ろうと思うと非常に手間ですが、 CreateJS(EaselJS & TweenJS)を使うとかなりシンプルに記述出来ます。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author u8_fukuda 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/74ry/js"></script> CreateJS, EaselJS, library&test TweenJS Discussion Questions on this code? Tags CreateJS, EaselJS, TweenJS library&test Favorite by mmt Forked sort by latest page views favorite forked forked: CreateJSでパーティクルのバウンド mailman66 00 1015 118/3/3 CreateJS, EaselJS, TweenJS library&test forked: CreateJSでパーティクルのバウンド hideki_a 00 1812 118/3/3 CreateJS, EaselJS, TweenJS library&test
