JS, 外部ファイルの読み込み

JSでの外部ファイルの読み込みと外部Funcitonの呼びだし

経緯

今まで作ったshooting.html

kaede0902.github.io

では200行近く全部HTMLに記述していたが、ファイルを分けてリファタリングをしたくなった。

MOBを const player = { x: midX, y: endY-60, w: 40, h: 60, spd: 12, hp: 50, clr: '#0095DD', }; const enemy = { x: endX/2.5, y: endY/3.0, w: 60, h: 120, spd: 10, hp: 200, clr: '#D00', drc: 1, }; const bullet = { player: { x: player.x, y: player.y, r: 10, spd: 48, clr: '#BBB', },

のようにsetするのは失敗したが、今回はcontext = canvas.getContext('2d')...などの お決まりの宣言と、円や線を楽に描画する関数をメインファイル仮の外に移すことに成功した

わかってる人にはあたりまえなのだろうが、私は初めてできて感動している。

手順

まずHTMLでは宣言のJS, 関数のJSの順で読み込む。 これで一つのファイルに上から書いたと同じように読み込まれる。

真っ先にcanvasタグがないと書き込む先がない。

次に各ファイルの内容を記述すればOKだ。 私のbaseは let cvs,ctx,endX,endY,midX,midY;

cvs = document.querySelector('canvas'); ctx = cvs.getContext('2d');

endX = cvs.width = window.innerWidth; endY = cvs.height = window.innerHeight; midX = endX/2; midY = endY/2;

ctx.lineWidth = 3; ctx.strokeStyle = ctx.fillStyle = '#FFF';

になっている。あとCSSで背景を黒にする。

それでfuncのファイルを書き込み、実行テストすればOKだ。

function drawArc(x,y,r,clr) { ctx.beginPath(); ctx.arc(x,y,r,0,2*Math.PI,true); ctx.fillStyle = '#'+ clr; ctx.fill(); } drawArc(midX,midY,50,"ddd");

結果

今回はGLAYの円を中心に書くだけにした。

glay circle

これでなんども同じ処理を書かなくても効率的に開発や勉強ができそうだ。