事件（碰撞检测）

碰撞

function isCrash(a, b) {
    var l1 = a.offsetLeft;
    var t1 = a.offsetTop;
    var r1 = l1 + a.offsetWidth;
    var b1 = t1 + a.offsetHeight;

    var l2 =b.offsetLeft;
    var t2 =b.offsetTop;
    var r2 = l2 + b.offsetWidth;
    var b2 = t2 + b.offsetHeight;

    if (r2<l1 || b2<t1 || r1<l2 || b1<t2) {
        // 不碰撞
        return false;
    } else {
        // 碰撞
        return true;
    }
}
     

案例  飞机大战

var dHero = document.getElementById('hero');
var dEnemy = document.getElementById('enemy');
var dBullet = document.getElementById('bullet');
var dScore = document.getElementById('score');
var score = 0;

// 碰撞
function isCrash(a, b) {
    var l1 = a.offsetLeft;
    var t1 = a.offsetTop;
    var r1 = l1 + a.offsetWidth;
    var b1 = t1 + a.offsetHeight;

    var l2 =b.offsetLeft;
    var t2 =b.offsetTop;
    var r2 = l2 + b.offsetWidth;
    var b2 = t2 + b.offsetHeight;

    if (r2<l1 || b2<t1 || r1<l2 || b1<t2) {
        // 不碰撞
        return false;
    } else {
        // 碰撞
        return true;
    }
}
// 检测
function check() {
    var es = dEnemy.children;
    var bs = dBullet.children;
    // enemy和hero
    for (var i=0; i<es.length; i++) {
        var e = es[i];
        if (isCrash(dHero, e)) {
            alert('gameover!')
        }
        // enemy和bullet
        for (var j=0; j<bs.length; j++) {
            var b = bs[j];
            if (isCrash(e, b)) {
                // 子弹消失
                dBullet.removeChild(b);
                // 敌机消失
                dEnemy.removeChild(e);
                score ++;
                dScore.innerHTML = '得分:' + score;
                // 处理数据
                i --;
                break;
            }
        }
    }
}