前端学习笔记day18 飞机大战

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #box {
            width: 320px;
            height: 568px;
            background: url('./images/bg.png') no-repeat;
            position: relative;
            left: 640px;
            overflow: hidden;
        }
        #me {
            width: 32px;
            height: 32px;
            background: url('./images/me.png') no-repeat;
            position: absolute;
            top: 570px;
            left: -640px;
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='me'></div>
    </div>

    <script>
        var box = document.getElementById('box');
        var me = document.getElementById('me');
        var bulletsBox = document.createElement('div');
        bulletsBox.id = 'bulletsBox';
        box.appendChild(bulletsBox);

        var foesBox = document.createElement('div');
        foesBox.id = 'foesBox';
        box.appendChild(foesBox);

        var num = 0;
        var flag;
        var arr = []; // 存放子弹的相关信息 'id|left|top'
        var arrF = []; //存放敌机的相关信息；
        box.onmousemove = function(e) {
            flag = true;
            // 鼠标进入背景区，飞机跟着鼠标移动
            var x = e.pageX - box.offsetLeft - parseInt(me.offsetWidth / 2);
            var y = e.pageY;
            x = (x < 0) ? 0 :x;
            x = (x > box.offsetWidth - me.offsetWidth) ? box.offsetWidth - me.offsetWidth : x;
            y = (y < 0) ? 0 : y; 
            y = (y > box.offsetHeight - me.offsetHeight) ? box.offsetHeight - me.offsetHeight: y;
            me.style.left = x + 'px';
            me.style.top = y + 'px';
        }
        
        // 创建子弹
        setInterval(function() {
            if(flag) {
                // 创建子弹
                var x = me.style.left;
                var y = me.style.top;
                
                if(num < 50) {
                    var div = document.createElement('div');
                    div.id = 'bullet' + num;
                    div.index = num;
                    div.className = 'bullets';
                    div.style.width = 10 + 'px';
                    div.style.height = 10 + 'px';
                    div.style.background = 'url('+ './images/b.png' +') no-repeat';
                    div.style.position = 'absolute';
                    div.style.left = parseInt(x) + 10 + 'px';
                    div.style.top = y;
                    arr.push(div.id + '|' + parseInt(x) + '|' + parseInt(y));  // "bullet0|167|385"
                    // console.log(arr);
                    bulletsBox.appendChild(div);
                    // console.log(num);

                    // 创建敌机
                    var xF = getRandom(0,box.offsetWidth-me.offsetWidth);
                    var yF = 10;
                    var div = document.createElement('div');
                    div.id = 'foe' + num;
                    div.index = num;
                    div.className = 'foes';
                    div.style.width = 32 + 'px';
                    div.style.height = 32 + 'px';
                    div.style.background = 'url('+ './images/foe.png' +') no-repeat';
                    div.style.position = 'absolute';
                    div.style.left =  xF + 'px';
                    div.style.top = yF + 'px';
                    arrF.push(div.id + '|' + xF + '|' + yF);  // "bullet0|167|385"
                    // console.log(arrF);
                    foesBox.appendChild(div);
                    // console.log(num);

                }

                num++;
            }             
        },700)    

        


        // 让子弹运动
        setInterval(function() {
            // 让子弹运动
            
            for(var i = 0; i < arr.length; i++) {
                 var step = 10;
                 var newArr = arr[i].split('|');
                 var id = newArr[0];
                 var top = newArr[2];
                 var bullet = document.getElementById(id);
                 top -= step;
                 bullet.style.top = top + 'px';
                 arr[i] = id + '|' + newArr[1] + '|' + top;

                 if(parseInt(bullet.style.top) < 0) {    
                    arr.splice(i,1);
                    bullet.parentNode.removeChild(bullet);                    
                }

             }
             // 让敌机运动
             for(var i = 0; i < arrF.length; i++) {
                 var step = 10;
                 var newArrF = arrF[i].split('|');
                 var id = newArrF[0];
                 var top = newArrF[2];   // 字符串 
                 var foe = document.getElementById(id);
                 top = parseInt(top) + step;
                 foe.style.top = top + 'px';
                 arrF[i] = id + '|' + newArrF[1] + '|' + top;

                 if(parseInt(foe.style.top) > box.offsetHeight - foe.offsetHeight) {    
                    arrF.splice(i,1);
                    foe.parentNode.removeChild(foe);                    
                }
             }

             
             for(var i = 0;i < arr.length; i++) {
                var newArr = arr[i].split('|');
                var id = newArr[0];
                var top = parseInt(newArr[2]);
                var bullet = document.getElementById(id);

                for(var j = 0; j < arrF.length;j++) {
                    var newArrF = arrF[j].split('|');
                    var idF = newArrF[0];
                    var topF = parseInt(newArrF[2]);
                    var foe = document.getElementById(idF);
                    
                    if(parseInt(bullet.style.top) > parseInt(foe.style.top) - foe.offsetHeight && parseInt(bullet.style.top) < parseInt(foe.style.top) && parseInt(bullet.style.left) > parseInt(foe.style.left) && parseInt(bullet.style.left) < parseInt(foe.style.left) + foe.offsetWidth) {
                        
                        arr.splice(i,1);
                        bullet.parentNode.removeChild(bullet);
                        arrF.splice(j,1);
                        foe.parentNode.removeChild(foe);
                        
                    }
                }
            }


        },100)

        

        // removeBF();
        // function removeBF() {

        //     for(var i = 0;i < arr.length; i++) {
        //         var newArr = arr[i].split('|');
        //         var id = newArr[0];
        //         var top = parseInt(newArr[2]);
        //         var bullet = document.getElementById(id);

        //         for(var j = 0; j < arrF.length;j++) {
        //             var newArrF = arrF[j].split('|');
        //             var idF = newArrF[j];
        //             var topF = parseInt(newArrF[2]);
        //             var foe = document.getElementById(idF);
        //             console.log('薰铉');
        //             if(parseInt(bullet.style.top) > parseInt(foe.style.top) - foe.offsetHeight && parseInt(bullet.style.top) < parseInt(foe.style.top) && parseInt(bullet.style.left) > parseInt(foe.style.left) && parseInt(bullet.style.left) < parseInt(foe.style.left) + foe.offsetWidth) {
        //                 console.log('238239');
        //                 bullet.parentNode.removeChild(bullet);
        //                 arr.splice(i,1);
        //                 foe.parentNode.removeChild(foe);
        //                 arrF.splice(j,1);
        //             }
        //         }
        //     }
        // }



        function getRandom(min,max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }


    </script>
</body>
</html>
运行结果：
posted @ 2019-01-13 13:06 写的BUG代码少阅读(189) 评论(0) 编辑收藏举报
刷新页面返回顶部
null

前端学习笔记day18 飞机大战

公告
