夜桜 fukusuke8gou Follow 2012-04-10 01:53:15 License: MIT License Fork0 Fav0 View318 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 87 lines HTML 3 lines CSS 3 lines 参加登録してないけど、作ってみようと思う。 blur が使いたかったので、ひきつらない程度に数を減らしつつ・・・ まだまだ勉強が足りないですね。 とにかく幻想的にしてみたけど、どうかな？ ・setTransform はFirefox はダメなのかな？ 今のところ、Chromeでしか確認できてない 夜桜 var img = new Image(); img.src = 'http://jsrun.it/assets/b/C/O/y/bCOyE.png'; window.addEventListener('load',function(){ var _W = window.innerWidth; var _H = window.innerHeight; //Canvas Init. var canvas = document.getElementById('world'), ctx = canvas.getContext('2d'); canvas.width = _W; canvas.height = _H; ctx.globalCompositeOperation = 'lighter'; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowColor = '#c03070'; // var bg_canvas = document.getElementById('bg'), bg_ctx = bg_canvas.getContext('2d'); bg_canvas.width = _W; bg_canvas.height = _H; bg_ctx.beginPath(); bg_ctx.fillStyle = '#000000'; bg_ctx.fillRect(0,0,_W,_H); var tm = bg_ctx.createRadialGradient(0,0,0,0,0,_W); tm.addColorStop(0.0, '#800030'); tm.addColorStop(1.0, '#000000'); bg_ctx.fillStyle = tm; bg_ctx.arc(0,0,_W,0,2*Math.PI/180,true); bg_ctx.fill(); //Buffer Init. var buf_canvas = document.getElementById('buffer'), buf_ctx = buf_canvas.getContext('2d'); buf_ctx.drawImage(img,0,0,38,38); // var max = 50; var _cnt = 0; // var CB = function(x,y){ this.x = x; this.y = y; var depth = Math.round(Math.random()*4); this.size = depth*6+12; this.vec = ((Math.random()*36)+14)/100; this.cnt = Math.random()*20; }; CB.prototype = { flow: function(){ var r = this.size/4; this.x += Math.cos(this.vec)*r + (3-Math.sin(_cnt)*4); this.y += Math.sin(this.vec)*r + (1-Math.sin(_cnt)*2); ctx.shadowBlur = this.size*2; //-------------- ctx.save(); var l = _cnt * this.cnt; ctx.setTransform(0, -Math.sin(l), Math.sin(l), -Math.cos(l), this.x,this.y); ctx.drawImage(buf_canvas,0,0,38,38,-(this.size/2),-(this.size/2),this.size,this.size); ctx.restore(); if((this.x > _W)||(this.y > _H)) return false; return true; } }; //初めに散らし var flake = new Array(); for( var i=0;i<max;i++ ) { flake.push(new CB(Math.round(Math.random()*_W),Math.round(Math.random()*_H))); } //舞う setInterval(function(){ //Clear ctx.save(); ctx.globalAlpha = 0.4; ctx.globalCompositeOperation = 'source-over'; ctx.drawImage(bg_canvas,0,0); ctx.restore(); //Loop for( var i=0;i<max;i++ ){ if(!flake[i].flow()) { if((Math.random()*100)<50 ){ flake[i] = new CB(-10,Math.round(Math.random()*_H)); }else { flake[i] = new CB(Math.round(Math.random()*_W),-10); } } } _cnt+=0.02; },50); },false); <canvas id='world'></canvas> <canvas id='bg' style='display:none'></canvas> <canvas id='buffer' style='display:none'></canvas> 夜桜 * { margin: 0px; padding: 0px; } body { background-color: #000000; } 参加登録してないけど、作ってみようと思う。 blur が使いたかったので、ひきつらない程度に数を減らしつつ・・・ まだまだ勉強が足りないですね。 とにかく幻想的にしてみたけど、どうかな？ ・setTransform はFirefox はダメなのかな？ 今のところ、Chromeでしか確認できてない var img = new Image(); img.src = 'http://jsrun.it/assets/b/C/O/y/bCOyE.png'; window.addEventListener('load',function(){ var _W = window.innerWidth; var _H = window.innerHeight; //Canvas Init. var canvas = document.getElementById('world'), ctx = canvas.getContext('2d'); canvas.width = _W; canvas.height = _H; ctx.globalCompositeOperation = 'lighter'; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowColor = '#c03070'; // var bg_canvas = document.getElementById('bg'), bg_ctx = bg_canvas.getContext('2d'); bg_canvas.width = _W; bg_canvas.height = _H; bg_ctx.beginPath(); bg_ctx.fillStyle = '#000000'; bg_ctx.fillRect(0,0,_W,_H); var tm = bg_ctx.createRadialGradient(0,0,0,0,0,_W); tm.addColorStop(0.0, '#800030'); tm.addColorStop(1.0, '#000000'); bg_ctx.fillStyle = tm; bg_ctx.arc(0,0,_W,0,2*Math.PI/180,true); bg_ctx.fill(); //Buffer Init. var buf_canvas = document.getElementById('buffer'), buf_ctx = buf_canvas.getContext('2d'); buf_ctx.drawImage(img,0,0,38,38); // var max = 50; var _cnt = 0; // var CB = function(x,y){ this.x = x; this.y = y; var depth = Math.round(Math.random()*4); this.size = depth*6+12; this.vec = ((Math.random()*36)+14)/100; this.cnt = Math.random()*20; }; CB.prototype = { flow: function(){ var r = this.size/4; this.x += Math.cos(this.vec)*r + (3-Math.sin(_cnt)*4); this.y += Math.sin(this.vec)*r + (1-Math.sin(_cnt)*2); ctx.shadowBlur = this.size*2; //-------------- ctx.save(); var l = _cnt * this.cnt; ctx.setTransform(0, -Math.sin(l), Math.sin(l), -Math.cos(l), this.x,this.y); ctx.drawImage(buf_canvas,0,0,38,38,-(this.size/2),-(this.size/2),this.size,this.size); ctx.restore(); if((this.x > _W)||(this.y > _H)) return false; return true; } }; //初めに散らし var flake = new Array(); for( var i=0;i<max;i++ ) { flake.push(new CB(Math.round(Math.random()*_W),Math.round(Math.random()*_H))); } //舞う setInterval(function(){ //Clear ctx.save(); ctx.globalAlpha = 0.4; ctx.globalCompositeOperation = 'source-over'; ctx.drawImage(bg_canvas,0,0); ctx.restore(); //Loop for( var i=0;i<max;i++ ){ if(!flake[i].flow()) { if((Math.random()*100)<50 ){ flake[i] = new CB(-10,Math.round(Math.random()*_H)); }else { flake[i] = new CB(Math.round(Math.random()*_W),-10); } } } _cnt+=0.02; },50); },false); <canvas id='world'></canvas> <canvas id='bg' style='display:none'></canvas> <canvas id='buffer' style='display:none'></canvas> * { margin: 0px; padding: 0px; } body { background-color: #000000; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 参加登録してないけど、作ってみようと思う。 blur が使いたかったので、ひきつらない程度に数を減らしつつ・・・ まだまだ勉強が足りないですね。 とにかく幻想的にしてみたけど、どうかな？ ・setTransform はFirefox はダメなのかな？ 今のところ、Chromeでしか確認できてない Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author fukusuke8gou URLhttp://hwopt.spaaqs.ne.jp/range-de-tin/ へっぽこはへっぽこなりにへっぽこです jQueryは使ったことがないです auのWindowsPhone IS12T を使ってます。 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/lDDH/js"></script> art&design DEMO Tweet Twitter Discussion Questions on this code? Tags DEMO art&design
