6_30 事件委托&简易版飞机大战小游戏

最新推荐文章于 2024-07-25 10:45:42 发布

忙着剪视频

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量110

点赞数

分类专栏：语法知识点自习知识点文章标签： css javascript jquery html5

本文链接：https://blog.csdn.net/weixin_44159921/article/details/107082618

版权

自习知识点同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

语法知识点

12 篇文章 0 订阅

订阅专栏

1.事件委托
1.1 概念

当页面元素不存在的时候，而此时想先给未知的元素绑定事件，但是单纯的绑定事件又不能触发，那是因为未找到的绑定的对象，所以此时你需要将事件委托给其祖先元素。

1.2 例子

//css部分
<link rel="stylesheet" href="https://www.bootcss.com/p/buttons/css/buttons.css">
    <style>
        .button {
            margin-right: 10px;
        }
    </style>
    //body内的内容
<body>
    <div class="container">
        <button class="button button-primary button-pill button-small">ADD a Button</button>
    </div>

    <script src="./js/jquery.js"></script>
    <script>
        $(".container").on("click", "button", function () {
            let bt = $("<button/>").html("ADD a Button").addClass(
                "button button-primary button-pill button-small");
            $(".container").append(bt)
        })
    </script>
</body>

1.3 例子的运行结果

初始图

点击添加后的结果在这里插入图片描述
2.简易版飞机大战小游戏
2.1 css代码

<style>
        .container {
            width: 500px;
            height: 80vh;
            margin: 10vh auto;
            background-color: black;
            position: relative;
            overflow: hidden;
        }

        .plane {
            width: 100px;
            height: 50px;
            /* background-color: red; */
            position: absolute;
            left: calc(50% - 40px);
            bottom: 10px;

        }

        .bullet {
            width: 20px;
            height: 10px;
            background-color: red;
            position: absolute;
            z-index: 99;
        }

        .enemy {
            width: 80px;
            height: 50px;
            background: url(./1.png) 0 / 100% 100%;
            position: absolute;
            top: 0;
        }

        .score {
            position: absolute;
            color: red;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
        }

        .stop {
            font-size: 2px;
            font-weight: '楷体';
            position: absolute;
            color: red;
            top: 25px;
            left: 60%;
            transform: translateX(-50%);
        }
    </style>

2.2 html代码

<h1 class="score">0</h1>
    <div class="stop">
        暂停
    </div>
    <div class="container">
        <img src="1.png" alt="" class="plane">

    </div>

2.3 jQuery代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//引入jq
<script>
        $(function () {
            $(window).keydown(function ({
                keyCode
            }) {
                let {
                    left: l,
                    top: t
                } = $(".plane").position();
                let maxleft = $(".container").innerWidth() - $(".plane").innerWidth();
                let maxtop = $(".container").innerHeight() - $(".plane").innerHeight();
                // console.log(keyCode);

                switch (keyCode) {
                    case 87:
                        t -= 10;
                        break;
                    case 65:
                        l -= 10;
                        break;
                    case 83:
                        t += 10;
                        break;
                    case 68:
                        l += 10;
                        break;
                    case 74:
                        shoot();
                        break;
                    case 32:
                        stop();
                        break;
                }
                t < 0 ? t = 0 : false;
                l < 0 ? l = 0 : false;
                t > maxtop ? t = maxtop : false;
                l > maxleft ? l = maxleft : false;
                $(".plane").css("top", t).css("left", l);
            })
            let endtime = new Date();
            // 射击
            function shoot() {
                if (new Date() - endtime < 500)
                    return false;
                else {
                    $(".container").append($("<div/>").addClass("bullet").css({
                        top: $(".plane").position().top - 20,
                        left: $(".plane").position().left + ($(".plane").innerWidth() / 2 - $(
                            ".bullet").innerWidth() / 2),
                    }));
                    endtime = new Date();
                }


            }

            let score = 0;
            let sign = true;

            function fun1() {
                $('.enemy').each(function () {
                    let enemy = this

                    if (calc(enemy, $('.plane').get(0)) || calc($('.plane').get(0),
                            enemy)) {
                        console.log('GG');
                        location.reload()
                    }

                    $('.bullet').each(function () {
                        let bullet = this;


                        if (calc(enemy, bullet) || calc(bullet, enemy)) {
                            bullet.remove()
                            enemy.remove()
                            score += 10
                            $('.score').text(score)
                        }
                        // console.log($('.score').html());
                    })
                })


            }

            function fun2() {
                let enemy = $('<div/>').addClass('enemy')
                $('.container').append(enemy)
                enemy.css('left', Math.round(Math.random() * ($('.container').innerWidth() - enemy
                    .innerWidth())))
            }

            function fun3() {
                $('.enemy').each(function () {
                    let enemy = $(this)
                    let {
                        top
                    } = enemy.position();
                    // console.log(top);

                    if (top > $('.container').innerHeight()) enemy.remove()
                    else enemy.css('top', enemy.position().top + 20)
                })
            }

            function fun4() {
                $(".bullet").each(function () {
                    let bullet = $(this);
                    let {
                        top
                    } = bullet.position();
                    if (top < 5) bullet.remove();
                    else bullet.css("top", bullet.position().top - 10);
                })
            }

            // 检测撞击事件
            let cash = setInterval(fun1, 50);
            // 创建大量敌人
            let enem = setInterval(fun2, 2000);
            // 让敌人由上而下移动
            let move_to_bottom = setInterval(fun3, 300);
            // 子弹
            let move_to_top = setInterval(fun4, 100);

            // 暂停
            function stop() {
                if (sign) {
                    // console.log(sign);
                    $(".stop").html("开始");
                    clearInterval(cash)
                    clearInterval(enem)
                    clearInterval(move_to_bottom)
                    clearInterval(move_to_top)
                    sign = false;
                } else {
                    $(".stop").html("暂停");
                    // 检测撞击事件
                    cash = setInterval(fun1, 50);
                    // 创建大量敌人
                    enem = setInterval(fun2, 2000);
                    // 让敌人由上而下移动
                    move_to_bottom = setInterval(fun3, 300);
                    // 子弹
                    move_to_top = setInterval(fun4, 100);
                    sign = true;
                }
            }


            // 返回目标的值
            function getLTRB(node) {
                return {
                    l: node.offsetLeft,
                    t: node.offsetTop,
                    r: node.offsetLeft + node.offsetWidth,
                    b: node.offsetTop + node.offsetHeight
                }
            }
            // 检测碰撞
            function calc(a, b) {
                a = getLTRB(a)
                b = getLTRB(b)

                if (b.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true
                else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true
                else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true
                else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true
                else return false
            }

        })
    </script>

忙着剪视频

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6_30 事件委托&简易版飞机大战小游戏

1.事件委托1.1 概念当页面元素不存在的时候，而此时想先给未知的元素绑定事件，但是单纯的绑定事件又不能触发，那是因为未找到的绑定的对象，所以此时你需要将事件委托给其祖先元素。1.2 例子//css部分<link rel="stylesheet" href="https://www.bootcss.com/p/buttons/css/buttons.css"> <style> .button { margin-right:
复制链接

扫一扫