鳥触手花火 jagarikin Follow 2016-07-08 08:03:03 License: MIT License Fork0 Fav3 View1343 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 280 lines HTML 1 lines CSS 0 lines もうすっかり鳥触手花火の季節ですね 鳥触手花火 var canvas,ctx,count,tama,syoku,pika,kira,kai; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,canvas.width,canvas.height); tama=[]; syoku=[]; pika=[]; kira=[]; count=kai=0; psyoku(270,160,0); psyoku(140,220,1); main(); function settama(n){ var a,b; for(a=0;a<n;a++){ b={}; b.x=50+Math.random()*(canvas.width-100); b.y=canvas.height+5; b.cou=(80+Math.random()*20)|0; b.rx=(Math.random()-0.5); b.ry=-(2+Math.random()*3); b.ban=tama.length; tama.push(b); } } function setsyoku(n,tx,ty,ban){ var a,b,c,r,kn,sk,col,ft,lt; pika.push({x:tx,y:ty,cou:0}); kn=1+Math.random()*1; sk=1+Math.random()*4; kn*=sk/3; kai++; col=(kai*37+200)%360; ft=1+Math.random()*Math.random()*3; lt=Math.random()<0.1; for(a=0;a<n;a++){ b={}; r=Math.PI*2*Math.random(); c=0.5+Math.random(); b.px=Math.cos(r)*c; b.py=Math.sin(r)*c; b.x=tx; b.y=ty; b.kn=kn; b.sk=sk; b.cou=10; b.col=col; b.ban=ban+syoku.length; b.ft=ft; b.lt=lt; b.r=r*3; syoku.push(b); } } function kune(ob){ var a,b,c,d,e,f,g,max,p,p1,r,x,y,x1,y1,len,lit,kn,sk,col; b=ob; ctx.globalCompositeOperation = "source-over"; if(b.lt)ctx.globalCompositeOperation = "lighter"; lit=1; if(b.cou>180)lit=(200-b.cou)/20; if(b.lt)lit=lit/8; r=b.r; kn=b.kn; sk=b.sk; col=b.col; g=1; if(b.ban%2==1)g=-1; max=40; p=[]; for(a=b.cou-max;a<b.cou;a++){ if(a<0)continue; if(a>175)continue; c=a/200; c*=c*50; d=Math.sin(a/max*7+r+b.ban+count/13*g)*7*kn; e=300/(a+300); e*=e; e=a*e*2; x=b.x+b.px*e*sk+b.py*d; y=b.y+b.py*e*sk+c-b.px*d; p.push([x,y]); } if(p.length<2)return; if(b.cou>20 && !b.kr && Math.random()<0.1){ if(b.x>-5 && b.y>-5 && b.x<canvas.width+5 && b.y<canvas.height+5){ if(Math.random()<0.3)b.kr=1; c={}; c.x=p[p.length-1][0]; c.y=p[p.length-1][1]; c.cou=0; c.col=b.col; c.py=0.2+Math.random()*0.6; kira.push(c); } } g=1; if(b.ban%3==1)g=-1; len=p.length; p1=[]; for(a=0;a<len-1;a++){ b=p[a]; c=p[a+1]; x=b[0]-c[0]; y=b[1]-c[1]; b=Math.atan2(-y,x)+Math.PI/2; x=Math.cos(b); y=Math.sin(b); e=Math.sin(a/11+r)+Math.sin(a/13+count/17*g-r); e*=10*kn; e*=0.5-Math.cos(a/(len-2)*Math.PI*2)/2; p1.push([p[a][0]+x*e,p[a][1]+y*e]); } len=p1.length; p2=[]; for(a=0;a<len-1;a++){ b=p1[a]; c=p1[a+1]; x=b[0]-c[0]; y=b[1]-c[1]; b=Math.atan2(-y,x)+Math.PI/2; x=Math.cos(b); y=Math.sin(b); e=0.5-Math.cos(a/(len-2)*Math.PI*2)/2; p2.push([x*e,y*e]); } for(e=0;e<3;e++){ ctx.fillStyle="hsla("+col+",80%,"+(20+e*30)+"%,"+lit+")"; f=(3-e)*ob.ft; ctx.beginPath(); for(a=0;a<len-1;a++){ b=p1[a]; c=p2[a]; ctx.lineTo(b[0]+c[0]*f,b[1]-c[1]*f); } for(a=len-2;a>=0;a--){ b=p1[a]; c=p2[a]; ctx.lineTo(b[0]-c[0]*f,b[1]+c[1]*f); } ctx.fill(); } } function kao(x,y,s,px,py,lit){ if(lit===undefined)lit=1; ctx.lineWidth=s*2; ctx.strokeStyle="rgba(100,55,11,"+lit+")"; ctx.fillStyle="hsla(44,80%,"+(50)+"%,"+lit+")"; ctx.beginPath(); ctx.arc(x,y,30*s,0,Math.PI*2,0); ctx.fill(); ctx.stroke(); x+=px*s; y+=py*s; ctx.fillStyle="rgb(0,0,0)"; ctx.beginPath(); ctx.arc(x-10*s,y-2*s,4*s,0,Math.PI*2,0); ctx.fill(); ctx.beginPath(); ctx.arc(x+10*s,y-2*s,4*s,0,Math.PI*2,0); ctx.fill(); y+=15*s; ctx.fillStyle="rgba(100,55,11,"+lit+")"; ctx.beginPath(); ctx.lineTo(x-15*s,y); ctx.lineTo(x,y+9*s); ctx.lineTo(x+15*s,y); ctx.lineTo(x,y-9*s); ctx.fill(); s*=0.8; ctx.fillStyle="hsla(44,70%,60%,"+lit+")"; ctx.beginPath(); ctx.lineTo(x-15*s,y); ctx.lineTo(x,y+9*s); ctx.lineTo(x+15*s,y); ctx.lineTo(x,y-9*s); ctx.fill(); ctx.beginPath(); ctx.lineTo(x-14.9*s,y); ctx.lineTo(x+14.9*s,y); ctx.stroke(); } function psyoku(x,y,ban){ if(Math.random()<0.8){ setsyoku((30+Math.random()*20)|0,x,y,ban); }else if(Math.random()<0.8){ setsyoku((20+Math.random()*10)|0,x,y,ban); setsyoku((15+Math.random()*5)|0,x,y,ban); setsyoku((10+Math.random()*5)|0,x,y,ban); }else{ for(var a=0;a<10;a++)setsyoku(5,x,y,ban); } } function main(){ var a,b,c; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle="rgba(0,0,0,0.025)"; ctx.fillRect(0,0,canvas.width,canvas.height); if(count%80===0)settama(1); for(a=0;a<tama.length;a++){ b=tama[a]; b.x+=b.rx; b.y+=b.ry; b.ry+=0.02; kao(b.x,b.y,0.2,b.rx*5,b.ry*5); b.cou--; if(b.cou===0){ psyoku(b.x,b.y,b.ban); tama[a]=tama[tama.length-1]; tama.pop(); a--; continue; } } for(a=0;a<syoku.length;a++){ b=syoku[a]; kune(b); b.cou+=1; if(b.cou>=200){ syoku[a]=syoku[syoku.length-1]; syoku.pop(); a--; continue; } } ctx.globalCompositeOperation = "source-over"; for(a=0;a<pika.length;a++){ b=pika[a]; kao(b.x,b.y,0.5+b.cou/90,0,0); b.cou++; if(b.cou>45){ pika[a]=pika[pika.length-1]; pika.pop(); a--; continue; } } ctx.globalCompositeOperation = "lighter"; for(a=0;a<kira.length;a++){ b=kira[a]; ctx.fillStyle="hsla("+b.col+",70%,50%,"+(Math.random()/2)+")"; ctx.beginPath(); ctx.arc(b.x,b.y,4,0,Math.PI*2,0); ctx.fill(); ctx.beginPath(); ctx.arc(b.x,b.y,1,0,Math.PI*2,0); ctx.fill(); b.y+=b.py; b.cou++; if(b.cou>70){ kira[a]=kira[kira.length-1]; kira.pop(); a--; continue; } } count++; requestAnimationFrame(main); } <canvas></canvas> 鳥触手花火 もうすっかり鳥触手花火の季節ですね var canvas,ctx,count,tama,syoku,pika,kira,kai; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,canvas.width,canvas.height); tama=[]; syoku=[]; pika=[]; kira=[]; count=kai=0; psyoku(270,160,0); psyoku(140,220,1); main(); function settama(n){ var a,b; for(a=0;a<n;a++){ b={}; b.x=50+Math.random()*(canvas.width-100); b.y=canvas.height+5; b.cou=(80+Math.random()*20)|0; b.rx=(Math.random()-0.5); b.ry=-(2+Math.random()*3); b.ban=tama.length; tama.push(b); } } function setsyoku(n,tx,ty,ban){ var a,b,c,r,kn,sk,col,ft,lt; pika.push({x:tx,y:ty,cou:0}); kn=1+Math.random()*1; sk=1+Math.random()*4; kn*=sk/3; kai++; col=(kai*37+200)%360; ft=1+Math.random()*Math.random()*3; lt=Math.random()<0.1; for(a=0;a<n;a++){ b={}; r=Math.PI*2*Math.random(); c=0.5+Math.random(); b.px=Math.cos(r)*c; b.py=Math.sin(r)*c; b.x=tx; b.y=ty; b.kn=kn; b.sk=sk; b.cou=10; b.col=col; b.ban=ban+syoku.length; b.ft=ft; b.lt=lt; b.r=r*3; syoku.push(b); } } function kune(ob){ var a,b,c,d,e,f,g,max,p,p1,r,x,y,x1,y1,len,lit,kn,sk,col; b=ob; ctx.globalCompositeOperation = "source-over"; if(b.lt)ctx.globalCompositeOperation = "lighter"; lit=1; if(b.cou>180)lit=(200-b.cou)/20; if(b.lt)lit=lit/8; r=b.r; kn=b.kn; sk=b.sk; col=b.col; g=1; if(b.ban%2==1)g=-1; max=40; p=[]; for(a=b.cou-max;a<b.cou;a++){ if(a<0)continue; if(a>175)continue; c=a/200; c*=c*50; d=Math.sin(a/max*7+r+b.ban+count/13*g)*7*kn; e=300/(a+300); e*=e; e=a*e*2; x=b.x+b.px*e*sk+b.py*d; y=b.y+b.py*e*sk+c-b.px*d; p.push([x,y]); } if(p.length<2)return; if(b.cou>20 && !b.kr && Math.random()<0.1){ if(b.x>-5 && b.y>-5 && b.x<canvas.width+5 && b.y<canvas.height+5){ if(Math.random()<0.3)b.kr=1; c={}; c.x=p[p.length-1][0]; c.y=p[p.length-1][1]; c.cou=0; c.col=b.col; c.py=0.2+Math.random()*0.6; kira.push(c); } } g=1; if(b.ban%3==1)g=-1; len=p.length; p1=[]; for(a=0;a<len-1;a++){ b=p[a]; c=p[a+1]; x=b[0]-c[0]; y=b[1]-c[1]; b=Math.atan2(-y,x)+Math.PI/2; x=Math.cos(b); y=Math.sin(b); e=Math.sin(a/11+r)+Math.sin(a/13+count/17*g-r); e*=10*kn; e*=0.5-Math.cos(a/(len-2)*Math.PI*2)/2; p1.push([p[a][0]+x*e,p[a][1]+y*e]); } len=p1.length; p2=[]; for(a=0;a<len-1;a++){ b=p1[a]; c=p1[a+1]; x=b[0]-c[0]; y=b[1]-c[1]; b=Math.atan2(-y,x)+Math.PI/2; x=Math.cos(b); y=Math.sin(b); e=0.5-Math.cos(a/(len-2)*Math.PI*2)/2; p2.push([x*e,y*e]); } for(e=0;e<3;e++){ ctx.fillStyle="hsla("+col+",80%,"+(20+e*30)+"%,"+lit+")"; f=(3-e)*ob.ft; ctx.beginPath(); for(a=0;a<len-1;a++){ b=p1[a]; c=p2[a]; ctx.lineTo(b[0]+c[0]*f,b[1]-c[1]*f); } for(a=len-2;a>=0;a--){ b=p1[a]; c=p2[a]; ctx.lineTo(b[0]-c[0]*f,b[1]+c[1]*f); } ctx.fill(); } } function kao(x,y,s,px,py,lit){ if(lit===undefined)lit=1; ctx.lineWidth=s*2; ctx.strokeStyle="rgba(100,55,11,"+lit+")"; ctx.fillStyle="hsla(44,80%,"+(50)+"%,"+lit+")"; ctx.beginPath(); ctx.arc(x,y,30*s,0,Math.PI*2,0); ctx.fill(); ctx.stroke(); x+=px*s; y+=py*s; ctx.fillStyle="rgb(0,0,0)"; ctx.beginPath(); ctx.arc(x-10*s,y-2*s,4*s,0,Math.PI*2,0); ctx.fill(); ctx.beginPath(); ctx.arc(x+10*s,y-2*s,4*s,0,Math.PI*2,0); ctx.fill(); y+=15*s; ctx.fillStyle="rgba(100,55,11,"+lit+")"; ctx.beginPath(); ctx.lineTo(x-15*s,y); ctx.lineTo(x,y+9*s); ctx.lineTo(x+15*s,y); ctx.lineTo(x,y-9*s); ctx.fill(); s*=0.8; ctx.fillStyle="hsla(44,70%,60%,"+lit+")"; ctx.beginPath(); ctx.lineTo(x-15*s,y); ctx.lineTo(x,y+9*s); ctx.lineTo(x+15*s,y); ctx.lineTo(x,y-9*s); ctx.fill(); ctx.beginPath(); ctx.lineTo(x-14.9*s,y); ctx.lineTo(x+14.9*s,y); ctx.stroke(); } function psyoku(x,y,ban){ if(Math.random()<0.8){ setsyoku((30+Math.random()*20)|0,x,y,ban); }else if(Math.random()<0.8){ setsyoku((20+Math.random()*10)|0,x,y,ban); setsyoku((15+Math.random()*5)|0,x,y,ban); setsyoku((10+Math.random()*5)|0,x,y,ban); }else{ for(var a=0;a<10;a++)setsyoku(5,x,y,ban); } } function main(){ var a,b,c; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle="rgba(0,0,0,0.025)"; ctx.fillRect(0,0,canvas.width,canvas.height); if(count%80===0)settama(1); for(a=0;a<tama.length;a++){ b=tama[a]; b.x+=b.rx; b.y+=b.ry; b.ry+=0.02; kao(b.x,b.y,0.2,b.rx*5,b.ry*5); b.cou--; if(b.cou===0){ psyoku(b.x,b.y,b.ban); tama[a]=tama[tama.length-1]; tama.pop(); a--; continue; } } for(a=0;a<syoku.length;a++){ b=syoku[a]; kune(b); b.cou+=1; if(b.cou>=200){ syoku[a]=syoku[syoku.length-1]; syoku.pop(); a--; continue; } } ctx.globalCompositeOperation = "source-over"; for(a=0;a<pika.length;a++){ b=pika[a]; kao(b.x,b.y,0.5+b.cou/90,0,0); b.cou++; if(b.cou>45){ pika[a]=pika[pika.length-1]; pika.pop(); a--; continue; } } ctx.globalCompositeOperation = "lighter"; for(a=0;a<kira.length;a++){ b=kira[a]; ctx.fillStyle="hsla("+b.col+",70%,50%,"+(Math.random()/2)+")"; ctx.beginPath(); ctx.arc(b.x,b.y,4,0,Math.PI*2,0); ctx.fill(); ctx.beginPath(); ctx.arc(b.x,b.y,1,0,Math.PI*2,0); ctx.fill(); b.y+=b.py; b.cou++; if(b.cou>70){ kira[a]=kira[kira.length-1]; kira.pop(); a--; continue; } } count++; requestAnimationFrame(main); } <canvas></canvas> 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 jagarikin じゃがじゃが 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/mSrT/js"></script> application art&design html5_elements&api user_interface Discussion Questions on this code? Tags application art&design html5_elements&api user_interface Favorite by moonblogger yungcloud: :))))) makkii_bcr: 鳥爆発