原生js实现打飞机和静态留言表-优快云博客

本文链接：https://blog.youkuaiyun.com/gisercug/article/details/95217701

在这里插入图片描述
整个代码的主要难度是理解，js操作dom的代码，如何灵活的添加元素，删除元素，样式的改变，添加class等等，以及一些逻辑，另外则是理解定时器与计时器的创造与删除，创造的计时器必须在网页取消前删除掉。对于js还需多练。

<!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>
    <link rel="stylesheet" type="text/css" href="flycss/style.css">
</head>

<body>
    <div class="wrap" id='wrapId'>
        <!-- 飞机 -->
        <div class="airplaneDiv" id="airplaneId"></div>
    </div>
    <script>
        var doc = document;

        function gId(n) {
            return doc.getElementById(n)
        }
        gId('wrapId').onmousemove = function(e) {
                var eL = e.pageX - gId('wrapId').offsetLeft - 20;
                var eT = e.pageY - gId('wrapId').offsetTop - 30;
                gId('airplaneId').style.left = eL + 'px';
                gId('airplaneId').style.top = eT + 'px';
            }
            // 生成子弹
        function creatFire(e) {
            var _fire = doc.createElement('div');
            _fire.style.left = e.pageX - gId('wrapId').offsetLeft + 'px';
            _fire.style.top = e.pageY - 80 + 'px';
            _fire.setAttribute('class', 'bulletDiv');
            gId('wrapId').appendChild(_fire);
            // 选出x轴线上所有的目标,然后进行坐标的比对
            var _fireTarget_X = [];
            var _lis1 = gId('wrapId').querySelectorAll('li')
            for (var c = 0; c < _lis1.length; c++) {
                if ((_fire.offsetLeft > _lis1[c].offsetLeft) &&
                    (_fire.offsetLeft < (_lis1[c].offsetLeft + 30))) {
                    _fireTarget_X.push(_lis1[c]);
                }
            }
            var n = _fire.offsetTop;
            var _s = setInterval(
                function() {
                    _fire.style.top = n-- + 'px';
                    if (_fireTarget_X.length >= 0) {
                        for (var d = 0; d < _fireTarget_X.length; d++) {
                            if ((n == _fireTarget_X[d].offsetTop) &&
                                (_fireTarget_X[d].getAttribute('class') != 'targetDiv yes_boom')) {
                                _fireTarget_X[d].setAttribute('class', 'targetDiv yes_boom')
                                var _e = setTimeout(function() {
                                    gId('wrapId').removeChild(_fire);
                                    clearInterval(_s)
                                    clearTimeout(_e);
                                }, 200)
                            }
                        }
                    }
                    if (n <= 0) {
                        gId('wrapId').removeChild(_fire);
                        clearInterval(_s);
                    }
                }, 10)
        }
        // 生成敌军 列表数据
        function targetListObj() {
            var _arrs = [];
            for (var i = 0; i < 10; i++) {
                var _obj = {};
                _obj._x = Math.floor(Math.random() * 10);
                _obj._y = Math.floor(Math.random() * 10);
                _arrs.push(_obj)
            }
            creatTarget(_arrs);
        }

        // 这个方法相当于开始游戏的按钮
        targetListObj()
            // 生成各个子弹
        function creatTarget(_arrs) {
            for (var i = 0; i < _arrs.length; i++) {
                var _target = doc.createElement('li');
                _target.setAttribute('class', 'targetDiv no_boom');
                _target.style.left = _arrs[i]._x * 100 + 'px';
                gId('wrapId').appendChild(_target);
            }
            var _lis = gId('wrapId').querySelectorAll('li');
            var n = 0;
            var _t = setInterval(
                function() {
                    for (var j = 0; j < _lis.length; j++) {
                        _lis[j].style.top = (_arrs[j]._y++) * 5 + 'px';
                        n++;
                        if (n > 900) {
                            clearInterval(_t)
                            gId('wrapId').removeChild(_lis[j]);
                        }
                    }
                }, 100);
        }
        // 射击子弹
        gId('wrapId').onclick = function(e) {
            creatFire(e);
        }
    </script>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

ul,
li,
ol {
    list-style: none;
}

.wrap {
    width: 500px;
    height: 500px;
    background: #ddd;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}


/* 飞机 */

.airplaneDiv {
    width: 40px;
    height: 40px;
    position: absolute;
    cursor: pointer;
    background-image: url(飞机.png);
    background-repeat: no-repeat;
    background-size: contain;
    /* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 */
}

.targetDiv {
    width: 60px;
    height: 50px;
    position: absolute;
    top: -60px;
    font-size: 22px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: contain;
}


/* 子弹 */

.bulletDiv {
    width: 5px;
    height: 30px;
    background: #f00;
    border-radius: 100%;
    position: absolute;
}

.no_boom {
    width: 30px;
    height: 30px;
    background-image: url(飞机.png);
    background-size: contain;
}

@keyframes mymove {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* 爆炸 */

.yes_boom {
    background-image: url(爆炸.png);
    animation: mymove 0.2s;
    animation-fill-mode: forwards;
}

在这里插入图片描述

<!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>liuyan</title>
    <style>

    </style>
</head>

<body>
    <div>
        <input id='msgId' type="text" placeholder="请输入留言">
        <input id='btnId' type="button" value="提交留言">
    </div>
    <div>
        <div id='ulID'>
            --------留言列表----------
            <br>
        </div>
        <script type="text/javascript">
            var i = 0;

            function gId(n) {
                return document.getElementById(n)
            }
            gId('btnId').onclick = function() {
                console.log(gId('msgId').value)
                var _v = gId('msgId').value
                if (_v == '') {
                    alert('留言不能为空');
                    return false;
                }
                i = i + 1;
                var _li = document.createElement('span');
                var _btn = document.createElement('button');
                var _br = document.createElement('br');
                _btn.innerHTML = '删除'
                _li.id = 'i'; // _li.sstAttribute('id','i') 实现同样的功能，后者更好
                _li.innerHTML = _v;
                gId('ulID').appendChild(_li);
                gId('ulID').appendChild(_btn);
                gId('ulID').appendChild(_br);
                _btn.onclick = function() {
                    _li.remove();
                    _btn.remove();
                    _br.remove();
                }
            }
        </script>
    </div>
</body>

</html>