jQuery 键盘相关案例

最新推荐文章于 2022-08-19 11:13:32 发布

zl_41123262

最新推荐文章于 2022-08-19 11:13:32 发布

阅读量135

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_41123262/article/details/107099534

版权

飞机大战案例

需求：
页面中存在飞机、子弹、敌机，敌机不断往下落下，飞机只在限定范围内移动，并且按下键盘中某个键值时开始发射子弹
当子弹射中敌机时，开始得分
当敌机射中飞机时，游戏结束，页面重新加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>plane</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 500px;
            height: 80vh;
            background-color: #000;
            margin: 10vh auto;
            position: relative;
            overflow: hidden;
        }
        /* 飞机 */
        .container .plane {
            width: 120px;
            height: 80px;
            background: url(./img/1.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            bottom: 20px;
            left: calc(50% - 60px);
        }
        /* 子弹 */
        .bullet {
            width: 8px;
            height: 22px;
            background-color: gold;
            border-radius: 10px 10px 0 0;
            position: absolute;
        }
        /* 敌机 */
        .enemy {
            width: 80px;
            height: 50px;
            background: url(./img/1.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 0;
        }
        /* 得分 */
        .score {
            position: absolute;
            color: red;
            top: 0;
            left: 50%;
            transform: translate(-50%);
        }
    </style>
</head>

<body>
    <h1 class="score">0</h1>
    <div class="container">
        <div class="plane">

        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 初始化得分
            let score = 0
            // 限制飞机所在范围  最大距离
            let maxLeft = $('.container').innerWidth() - $('.plane').innerWidth()
            let maxTop = $('.container').innerHeight() - $('.plane').innerHeight()
			
			// 当分别按下 上、下、左、右 四个键时，飞机分别按照相应的命令进行移动
			// 当按下 j 键时  飞机开始发射子弹
            $(window).keydown(function ({ keyCode }) 
                // 限制范围 使飞机 只能在 .container 中移动
                // 在 position() 方法中 找到 left top 值 并且给 left top 分别命名为 l t
                let { left: l, top: t } = $('.plane').position()
                switch (keyCode) {
                    case 38:
                        t -= 10
                        break;
                    case 40:
                        t += 10
                        break;
                    case 37:
                        l -= 10
                        break;
                    case 39:
                        l += 10
                        break;
                    case 74: 
                        shoot()
                        break;
                    default:
                        break;
                }

                if (t < 0) t = 0
                if (l < 0) l = 0
                if (t > maxTop) t = maxTop
                if (l > maxLeft) l = maxLeft

                // 最后给 飞机 设置 top left 值 使其移动
                $('.plane').css('top', t).css('left', l)

            })

            // 记录时间  使子弹射击时间不能过于频繁  
            let endTime = new Date()
            function shoot() {
                // 当前时间 - 上次所记录的时间 不能小于 500 ms
                if (new Date() - endTime < 500) return;
                // 当按下键盘中的某个键时  创建子弹节点 开始射击
                let bullet = $('<div/>').addClass('bullet')
                $('.container').append(bullet)
                // 使子弹的位置处于飞机的中心往上一点
                bullet.css('top', $('.plane').position().top - 20)
                bullet.css('left', $('.plane').position().left + $('.plane').innerWidth() / 2 - bullet.innerWidth() / 2)
                // 更新时间
                endTime = new Date()
            }

            // 遍历页面上所有的子弹  设置每次发射子弹的位置
            setInterval(() => {
                $('.bullet').each(function () {
                    let bullet = $(this)
                    let { top } = bullet.position()
                    if (top < 0) bullet.remove()
                    else bullet.css('top', bullet.position().top - 10)
                })
            }, 100)


            // 创建敌机 使其随机在页面中往下下落
            setInterval(() => {
                let enemy = $('<div/>').addClass('enemy')
                $('.container').append(enemy)
                enemy.css('left', Math.round(Math.random() * ($('.container').innerWidth() - enemy.innerWidth())))
            }, 2000)
			
			// 遍历敌机 设置每次敌机往下落的位置
            setInterval(() => {
                $('.enemy').each(function () {
                    let enemy = $(this)
                    let { top } = enemy.position()
                    if (top > $('.container').innerHeight()) enemy.remove()
                    else enemy.css('top', enemy.position().top + 20)
                })
            }, 200)
            
            // 判断敌机是否与子弹相撞
            setInterval(() => {
                $('.enemy').each(function(){
                    let enemy = this
                    // 敌机与飞机相撞时 重新加载
                    if(calc(enemy,$('.plane').get(0)) || calc($('.plane').get(0),enemy)){
                        console.log('GG')
                        location.reload()
                    }
                    // 敌机与子弹相撞时 子弹及敌机消失 分数加10
                    $('.bullet').each(function(){
                        let bullet = this
                        if(calc(enemy,bullet) || calc(bullet,enemy)){
                            bullet.remove()
                            enemy.remove()
                            score += 10
                            $('.score').text(score)
                        }
                    })
                })
            })

             // 获取 div 当前四边的位置
             function getLTRB(node){
                return {
                    l:node.offsetLeft,
                    t:node.offsetTop,
                    r:node.offsetLeft + node.offsetWidth,
                    b:node.offsetTop + node.offsetHeight
                }
            }
			
			// a b 相撞的四种条件
            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.t) return true
                else return false
            }
        })
    </script>
</body>

</html>

zl_41123262

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 键盘相关案例

飞机大战案例需求：页面中存在飞机、子弹、敌机，敌机不断往下落下，飞机只在限定范围内移动，并且按下键盘中某个键值时开始发射子弹当子弹射中敌机时，开始得分当敌机射中飞机时，游戏结束，页面重新加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫