###前提
Canvasでゲームの制作をしようとしています。Canvasを重ねてレイヤーとすることで複雑動きを可能にしようと思っていますが、クリックの判定処理についてアドバイスをいただきたいです。
JavaScript
1//Canvas1の下にCanvas2が存在する 2function button1(x, y, width, height){ 3 ctx1.rect(x, y, width, height); 4 ctx1.stroke(); 5 canvas1.addEventListener('click', function(e){ 6 var button = e.target.getBoundingClientRect(); 7 mouseX = e.clientX - button.left; 8 mouseY = e.clientY - button.top; 9 if(x < mouseX && mouseX < x + width){ 10 if(y < mouseY && mouseY < y + height){ 11 *ここに処理を書く 12 } 13//反応しない 14function button2(x, y, width, height){ 15 ctx2.rect(x, y, width, height); 16 ctx2.stroke(); 17 canvas2.addEventListener('click', function(e){ 18 var button = e.target.getBoundingClientRect(); 19 mouseX = e.clientX - button.left; 20 mouseY = e.clientY - button.top; 21 if(x < mouseX && mouseX < x + width){ 22 if(y < mouseY && mouseY < y + height){ 23 *ここに処理を書く 24 }
現在理解していることは、
①キャンバスのクリックされた相対座標の取得方法
②Canvasを重ねた場合、クリックイベントは一番上にあるキャンバスしか反応しない
③if関数を用いて、クリックの範囲を指定することで、ボタンやキャラクターなどにクリック判定を擬似的につけることができる。
④Canvasのイベントリスナーは一番上のCanvasしか反応しない。
ということです。
しかしながら、ボタンの実装とキャラクターの描画をそれぞれ別のレイヤーにかき分けた場合、反応するのは「一番上のCanvas」だけなので、ボタンがクリックに反応するようにすると、別レイヤーに描画したキャラクターをクリックしてもイベントが発火しなくなってしまいます。
###実現したいこと
こちらがしたいこととしては、ボタンもキャラクターもクリック判定を実装したいのですが、これはCanvasの技術的に不可能なことなのでしょうか?
自らの技術力を上げたいため、できればライブラリーを使用しないようにしたいです。
回答1件
あなたの回答
tips
プレビュー