ベイブレードバーストにおけるベイのポテンシャルを理解する上で、商品として組み合わされたベイには、レーダーチャートが示されている。
逆に言えば、商品化されていない組み合わせのレーダーチャートがないということでもある。
ということで、レイヤー、ディスク、ドライバーをプルダウンメニューで切り替えることで、レーダーチャートを描くプログラムを書いてみました。
(function(){function bbb_chart() {var canvas = document.getElementById('cvs');if ( ! canvas || ! canvas.getContext ) return false;var ctx = canvas.getContext('2d');ctx.clearRect(0, 0, 600, 600);var r = 24;ctx.lineJoin = 'round';ctx.lineWidth = 26.0;eval('ctx.fillSty'+'le = \'#220066\';');eval('ctx.strokeSty'+'le = \'#220066\';');ctx.beginPath();ctx.moveTo(300+10*r*Math.sin(0*Math.PI/180.0), 300-10*r*Math.cos(0*Math.PI/180.0));for (j=1; j!=6; j++) {ctx.lineTo(300+10*r*Math.sin(60*j*Math.PI/180.0), 300-10*r*Math.cos(60*j*Math.PI/180.0));}ctx.closePath();ctx.fill();ctx.stroke();var ly = parseInt(document.getElementById('layer').value,16);var di = parseInt(document.getElementById('disk').value,16);var dr = parseInt(document.getElementById('driver').value,16);var n = ly+di+dr;ctx.lineWidth = 13.0;eval('ctx.fillSty'+'le = \'#ffff00\';');eval('ctx.strokeSty'+'le = \'#ffff00\';');ctx.translate(300,300);for (var i=0, j=Math.floor(n/0x100000); i!=6; i++) {ctx.beginPath();ctx.moveTo(0, -r*j);ctx.rotate(300*Math.PI/180.0);ctx.lineTo(0, -r*(n%16));ctx.lineTo(0, 0);ctx.closePath();ctx.fill();ctx.stroke();j = n%16;n = Math.floor(n/16);}ctx.setTransform(1, 0, 0, 1, 0, 0);ctx.lineWidth = 3.0;ctx.font = '25pt sans-serif';ctx.textAlign = 'center';ctx.textBaseline = 'middle';var s=new Array('攻撃力','防御力','持久力','重量','機動力','バースト力');ctx.translate(300,300);for (var i=0; i!=6; i++) {eval('ctx.fillSty'+'le = \'#000000\';');ctx.beginPath();for (var k=0; k!=25; k++) ctx.fillText(s[i],-1+Math.floor(k/5),-276+k%5);ctx.closePath();ctx.fill();eval('ctx.fillSty'+'le = \'#ffffff\';');ctx.beginPath();ctx.fillText(s[i],0,-275);ctx.closePath();ctx.fill();eval('ctx.strokeSty'+'le = \'#00ff00\';');ctx.beginPath();ctx.moveTo(0,-10*r);ctx.lineTo(0,0);ctx.closePath();ctx.stroke();for (var j=1; j!=11; j++) {ctx.beginPath();ctx.moveTo(-10,-r*j);ctx.lineTo(+10,-r*j);ctx.closePath();ctx.stroke();}ctx.rotate(60*Math.PI/180.0);}ctx.setTransform(1, 0, 0, 1, 0, 0);};bbb_chart();onchange=function() { bbb_chart(); };onkeyup=function() { bbb_chart(); };onkeydown=function() { bbb_chart(); };})();
・・
それぞれのパーツのデータは、タカラトミーの公式ページにあるものを使用してはいますが、実際の商品のレーダーチャートと異なる可能性もありますので、参考程度にお考えください。
また、このデータを使用したことによるトラブルは、当方は一切の責任を追わないものとします。
自己責任でご利用ください。