飞机游戏动画特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #view {
            width: 320px;
            height: 568px;
            background: url('./img/bg.png');
            margin: 0 auto;
        }

        #fly_me {
            width: 34px;
            height: 24px;
            position: absolute;
        }
    </style>

</head>

<body>
    <div id="view"></div>
</body>
<script>
    // 创建战机
    var flyEle = document.createElement('div');
    flyEle.id = 'fly_me';
    flyEle.innerHTML = '<img src = "./img/me.png" />';
    document.body.appendChild(flyEle);

    // 战机跟随鼠标
    document.onmousemove = function (e) {
        var flyEle = document.getElementById('fly_me');
        var view = document.getElementById('view');
        var flyX = e.clientX - 17;
        var flyY = e.clientY - 12;
        var xCheck = flyX > view.offsetLeft && flyX < view.offsetLeft + view.offsetWidth - 34;
        var yCheck = flyY > view.offsetTop && flyY < view.offsetTop + view.offsetHeight - 24;
        if (xCheck && yCheck) {
            flyEle.style.top = flyY + 'px';
            flyEle.style.left = flyX + 'px';
            flyEle.flag = true;
        }
    }

    // 创建子弹 
    var objB = { //子弹的相关值
        name: 'bullet',
        num: 1,
        arr: [],// ['id|top|left']
        width: 6,
        height: 14,
        path: './img/b.png'
    };
    createBullet(objB);
    function createBullet(obj) {
        setInterval(function () {
            var flyEle = document.getElementById('fly_me');
            if (flyEle.flag) {
                var ele = document.createElement('div');
                ele.id = obj.name + obj.num;
                var length = obj.arr.length;
                if (length < 50) {
                    obj.arr[length] = ele.id + '|';
                    obj.num++;
                    ele.style.width = obj.width + "px";
                    ele.style.height = obj.height + "px";
                    ele.style.position = 'absolute';
                    ele.style.background = 'url(' + obj.path + ')';

                    ele.style.top = parseInt(flyEle.style.top) + 6 + 'px';
                    obj.arr[length] = obj.arr[length] + ele.style.top + '|';
                    ele.style.left = parseInt(flyEle.style.left) + 14 + 'px';
                    obj.arr[length] = obj.arr[length] + ele.style.left;
                }
                document.body.appendChild(ele);
            }
        }, 1000)
    }
    // 让子弹运动其起来
    function moveBullet() {
        var flyEle = document.getElementById('fly_me');
        if (flyEle.flag) {
            for (var i = 0; i < objB.arr.length; i++) {
                var newArr = objB.arr[i].split('|');
                var eleB = document.getElementById(newArr[0]);
                newArr[1] = parseInt(newArr[1]) - 1;
                eleB.style.top = newArr[1] + 'px';
                objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
                if (newArr[1] < 0) {
                    objB.arr.splice(i, 1);
                    var delEle = document.getElementById(newArr[0]);
                    delEle.parentNode.removeChild(delEle);
                }
            }

        }
    }

    // 创建敌机
    var objF = {
        name: 'foe',
        num: 1,
        arr: [],// ['id|top|left']
        width: 34,
        height: 24,
        path: './img/foe.png'
    };
    createFoe(objF);
    function createFoe(obj) {
        setInterval(function () {
            var flyEle = document.getElementById('fly_me');
            if (flyEle.flag) {
                var ele = document.createElement('div');
                ele.id = obj.name + obj.num;
                var length = obj.arr.length;
                if (length < 50) {
                    obj.arr[length] = ele.id + '|';
                    obj.num++;
                    ele.style.width = obj.width + "px";
                    ele.style.height = obj.height + "px";
                    ele.style.position = 'absolute';
                    ele.style.background = 'url(' + obj.path + ')';

                    ele.style.top = 0;
                    obj.arr[length] = obj.arr[length] + ele.style.top + '|';
                    var ran = Math.random() * 286;
                    ele.style.left = view.offsetLeft + ran + 'px';
                    obj.arr[length] = obj.arr[length] + ele.style.left;
                }
                document.body.appendChild(ele);
            }
        }, 1000)
    }
    // 让敌机运动其起来
    function moveFoe() {
        var flyEle = document.getElementById('fly_me');
        if (flyEle.flag) {
            for (var i = 0; i < objF.arr.length; i++) {
                var newArr = objF.arr[i].split('|');
                var eleB = document.getElementById(newArr[0]);
                newArr[1] = parseInt(newArr[1]) + 1;
                eleB.style.top = newArr[1] + 'px';
                objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
                if (newArr[1] > view.offsetHeight - 24) {
                    objF.arr.splice(i, 1);
                    var delEle = document.getElementById(newArr[0]);
                    delEle.parentNode.removeChild(delEle);
                }
            }

        }
    }


    setInterval(function () {
        // 让子弹运动其起来
        moveBullet()
        // 让敌机运动起来
        moveFoe();
        for (var i = 0; i < objF.arr.length; i++) {
            var newArr = objF.arr[i].split('|');
            var eleF = document.getElementById(newArr[0]);
            var xFS = parseInt(newArr[2]);
            var xFE = parseInt(newArr[2]) + 34;
            var yFS = parseInt(newArr[1]);
            var yFE = parseInt(newArr[1]) + 24;
            for (var j = 0; j < objB.arr.length; j++) {
                var newArr1 = objB.arr[j].split('|');
                var eleB = document.getElementById(newArr1[0]);
                var xB = parseInt(newArr1[2]);
                var yB = parseInt(newArr1[1]);
                var xCheck = xB > xFS && xB < xFE;
                var yCheck = yB > yFS && yB < yFE;

                if (xCheck && yCheck) {
                    objF.arr.splice(i, 1);
                    eleF.parentNode.removeChild(eleF);
                    objB.arr.splice(j, 1);
                    eleB.parentNode.removeChild(eleB);
                }
            }
        }

    }, 10)







</script>


</html>



中间的图片 b

图bg

图foe

图me
飞机游戏动画特效

猜你喜欢
