js,jQuery模拟飞机大战游戏

js,jQuery模拟飞机大战游戏_第1张图片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 80vh;
            margin: 10vh auto;
            background: #000;
            position: relative;
        }

        .plane {
            width: 80px;
            height: 70px;
            background: url("./1.png") no-repeat;
            background-size: cover;
            position: absolute;
            left: calc(50% - 40px);
            bottom: 20px;
        }

        .bullet{
            width: 8px;
            height: 22px;
            background-color: gold;
            position: absolute;
            border-radius: 10px 10px 0 0 ;
            box-shadow: 0 5px 5px green;
        }

        .enemy{
            width: 40px;
            height: 30px;
            background: url("./1.png") no-repeat;
            background-size: cover;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="plane"></div>
    </div>
    <script src="../JQ/JQuery.js"></script>
    <script>
        $(function () {
            let maxLeft = $('.container').innerWidth() - $('.plane').innerWidth()
            let maxTop = $('.container').innerHeight() - $('.plane').innerHeight()
            $(window).keydown(function ({keyCode}) { //获取上下左右按键的keyCode值,判断上下左右移动
                let {top : t,left : l} = $('.plane').position() //解构plane 位置top和left的值
                
                switch (keyCode) {
                    case 38:
                        t -= 10 //按上键,top减10
                        break;
                    case 40:
                    t += 10  //按下键,top加10
                        break;
                    case 37:
                    l -= 10  //按左键,left减10
                        break;
                    case 39:
                    l += 10  //按右键,left加10
                        break;
                    case 74:
                    shoot()  //按下某个键发射一次子弹
                        break;

                    default:
                        break;
                }
                //判断plane的位置不能出外盒子
                if(t < 0) t = 0
                if(t > maxTop) t = maxTop
                if(l < 0) l = 0
                if(l > maxLeft) l = maxLeft

                $('.plane').css('top',t).css('left',l)//将l和t赋值给plane的left和top
            })

            //创建子弹
            let entTime = new Date()
            function shoot(){
                if (new Date() - entTime < 500) return;
                let bullet = $('
').addClass('bullet') //创建子弹 $('.container').append(bullet) //设置bullet的位置 bullet.css('top',$('.plane').position().top - 15).css('left',$('.plane').position().left + $('.plane').innerWidth()/2 - bullet.innerWidth()/2) entTime = new Date() } //子弹飞行定时器,超出盒子销毁 setInterval(() => { $('.bullet').each(function(){ let bullet = $(this) let {top} = bullet.position() if(top < 0) bullet.remove()//超出盒子销毁 else bullet.css('top',top - 20) }) },100) setInterval(() => {//不停地检测是否有碰撞,如果敌机和子弹碰到了,敌机和子弹都销毁;如果敌机和我机碰到了 $('.enemy').each(function(){ let enemy = this //$('.plane').get(0)将JQ对象转成JS对象 if(calc(enemy,$('.plane').get(0)) || calc($('.plane').get(0),enemy)){ alert('GG') location.reload() } $('.bullet').each(function(){ let bullet = this if(calc(enemy,bullet)|| calc(bullet,enemy)) { bullet.remove() enemy.remove() } }) }) },50) //创建敌机飞行定时器,超出盒子销毁 setInterval(() => { let enemy = $('
').addClass('enemy') $('.container').append(enemy) //设置bullet的位置 enemy.css('top',0).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',top + 20) }) },200) function getLTRB(node) {//得到元素 上下边的top值和左右边的left值 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> </body> </html>

你可能感兴趣的:(js,jQuery模拟飞机大战游戏)