前端飞机大战练习

Posted 2020-11-16 solaris-wwf

css

    /* 显示区域 */
    #contenter{height: 768px;width: 512px;position: relative;left: 350px;overflow: hidden;}
    /* 背景 */
    .bg{height: 768px;width: 512px;position: absolute;background: url("../img/fjbg.jpg")}
    #bg2{top: -768px;}
    /* 飞机 */
    .fj{height: 61px;width: 79px;background: url("../img/fj.png");left: 200px;top: 680px;position: absolute}
    /* 子弹 */
    .bullet{height: 10px; width: 5px;background: #fff;border: 1px solid #333;position: absolute;}
    /* 敌军 */
    .dj{height: 80px;width: 80px;background: #333;position: absolute;top: 150px;}
    .xs{display: none;}

html

    <div id="contenter"> 
        <div id="bg1" class="bg"></div>
        <div id="bg2" class="bg"></div>
        <div id="fj" class="fj"></div>
    </div>

javascript

    var curX,curY,moveX,moveY;
    var bg1 = document.getElementById(‘bg1‘);
    var bg2 = document.getElementById(‘bg2‘);
    var contenter = document.getElementById(‘contenter‘);
    var fj = document.getElementById(‘fj‘);
    var bullet = document.getElementsByClassName(‘bullet‘);
    var dj = document.getElementsByClassName(‘dj‘);

    

//让背景滚动起来
    var timer = setInterval(function(){
        bg1.style.top = bg1.offsetTop + 1 +‘px‘;//让第一张图片慢慢向下移动
        bg2.style.top = bg2.offsetTop + 1 +‘px‘;
        if(bg1.offsetTop >= 768){//如果图片距离顶部的高度超过图片的高度，则设置第一张图片和第二张图片复位，来让图片不断的重复显示
            bg1.style.top = ‘0px‘;
            bg2.style.top = ‘-768px‘;
        }
    },20);
//产生子弹
    var t2 = setInterval(function() {
        var bullet = document.createElement(‘div‘);//创建子弹节点
        bullet.className = ‘bullet‘;
        bullet.id = ‘bullet‘;
        contenter.appendChild(bullet);//将子弹节点加入到DOM父元素中
        bullet.style.left = fj.offsetLeft + 35  + ‘px‘;//放置子弹到飞机顶部的合适位置
        bullet.style.top = fj.offsetTop + ‘px‘;
        var timeBulletFLY = setInterval(function(){//设置一个定时器，让子弹飞
            bullet.style.top = bullet.offsetTop - 20 + ‘px‘;
            if(bullet.offsetTop <= -20){//如果子弹超出页面的最顶部，删除相应的子弹节点和清除相应的定时器
                contenter.removeChild(bullet);
                clearInterval(timeBulletFLY);
            }
        bullet.timer = timeBulletFLY;//将此时定时器赋值给子弹的timer，用来判断子弹和敌军碰撞的时候清除相应的定时器
        },50);
        
    }, 1000);
//产生敌军
    var y = 450;var x = 0;//设置一个0-450的随机数函数的参数定义
    var t3 = setInterval(function() {
        var dj = document.createElement(‘div‘);
        dj.className = ‘dj‘;
        dj.id = ‘dj‘;
        contenter.appendChild(dj);
        dj.style.left = Math.random() * (y - x + 1) + x  + ‘px‘;//设置敌军的left为0-450的随机数
        dj.style.top = 0 + ‘px‘;
        //让敌军飞
        var timeDjtFLY = setInterval(function(){
            dj.style.top = dj.offsetTop + 10 + ‘px‘;
            if(dj.offsetTop >= 800){//如果这颗子弹超过了画布，则移除这个元素和清除这个定时器。
                contenter.removeChild(dj);
                clearInterval(timeDjtFLY);
            }
        dj.timer = timeDjtFLY;//将定时器的值赋值给dj.timer，用来判断子弹和敌军相撞时候的
        },50);
        /* */
    }, 1500);
    //判断鼠标事件，左键按下的时候，飞机跟随到鼠标的位置。
    contenter.addEventListener(‘mousedown‘,function(e){
        var ev = e || event;
        curX = ev.pageX;
        curY = ev.pageY;
        fj.style.left = curX - contenter.offsetLeft - fj.offsetWidth / 2 + ‘px‘;
        fj.style.top = curY - fj.offsetHeight / 2 + ‘px‘;
        
//鼠标移动事件，让飞机跟随。
        contenter.addEventListener(‘mousemove‘,function(e){
            var evt = e || event;
            moveX = evt.pageX - curX;
            curX = evt.pageX;
            moveY = evt.pageY - curY;
            curY = evt.pageY;
            fj.style.left = fj.offsetLeft + moveX + ‘px‘;
            fj.style.top = fj.offsetTop + moveY + ‘px‘;
            
        });
    })
    

//子弹和敌军检测碰撞
var timePz = setInterval(function(){
        for(var i = 0 ; i < bullet.length; i++){
            for(var j = 0; j < dj.length; j++){
                if(check_conllision(bullet[i],dj[j])){//如果敌军和子弹碰撞
                    clearInterval(bullet[i].timer);//清除掉相应的子弹定时器
                    clearInterval(dj[j].timer);//清除掉相应的敌军的定时器
                    contenter.removeChild(bullet[i]);//清除相应的DOM节点
                    contenter.removeChild(dj[j]);
                   
                } 
            }
        }
    },50);
//飞机和敌军检测碰撞
var timeDie = setInterval(function(){
    for(var j = 0; j < dj.length; j++){
        if(check_conllision(fj,dj[j])){
            for(var i = 0; i < 100; i++){
                clearInterval(i);//让所有定时器都停止
            }
            
        } 
    }
},50);

//检测两个盒子相撞

function check_conllision(el,el2){

    var style1 = window.getComputedStyle(el);

    var style2 = window.getComputedStyle(el2);

    var left1 = parseInt(style1.left);

    var left2 = parseInt(style2.left);

    var top1 = parseInt(style1.top);

    var top2 = parseInt(style2.top);

    var w1 = parseInt(style1.width);

    var w2 = parseInt(style2.width);

    var h1 = parseInt(style1.height);

    var h2 = parseInt(style2.height);

    var style1Zx = {x:left1 + w1 / 2,y:top1 + h1 / 2};//箱子1的中心点位置

    var style2Zx = {x:left2 + w2 / 2,y:top2 + h2 / 2};//箱子2的中心点位置

    var leftc = Math.abs(style1Zx.x - style2Zx.x);//取绝对值

    var topc = Math.abs(style1Zx.y - style2Zx.y);

    if(leftc <= (w1 + w2)/2 && topc <= (h1 + h2)/2){//如果箱子的中心点小于他们的高度和宽度一半之和，我们判断为相撞

        return true;

    }

    return false;

}