HTML5 Canvas マルチレイヤー クリック イベント監視_html5 チュートリアル スキルの好例

最近、HTML5 ゲームフレームワークを書きました。今日はマルチレイヤーのクリックイベント監視について書きました。かなり楽しいと思います。したがって、モジュールから抽出されました。次のコードは単なるアイデアです。具体的な実装は確かにそれほど醜いものではありません

コードをコピーします

コードは次のとおりです:

;ドキュメント

function getRect(obj) {
var x1 = obj.offsetLeft;
var y1 = obj.offsetTop;
var x2 = x1 obj.offsetWidth;
var y2 = y1 obj.offsetHeight ;
return {
x1: x1,
y1: y1,
x2: x2,
y2: y2
}
関数 inside(x, y, rect) {
if(x>rect.x1 && xrect.y1 && yreturn

else {
return false;
}
}
var トリガー = {};
trigger.listen = function() {
var list =trigger.list;
document.addEventListener('click',function(evt) {
for(var i=0; ilist[ i](evt);
}
};
var l1 = document.getElementById('layer1'); = document.getElementById('layer2');
var dl1 = function(evt) {
if(inside(evt.clientX, evt.clientY, getRect(l1))) {
console.log( 'クリック');
}
}
trigger.list.push(dl1);
var dl2 = function(evt) {
if(inside(evt.clientX, evt.clientY) , getRect(l2)) ) {
console.log('click2');
}
}
trigger.list.push(dl2); >