0
点赞
收藏
分享

微信扫一扫

JS实现飞机大战

效果

请添加图片描述

素材

请添加图片描述
请添加图片描述
请添加图片描述

方法

  1. 构造函数方式创建敌方飞机,定义移动函数(每次top值为上次top值加速度)
  2. 计时器固定时间调用构造函数,构造函数传入的值用随机数传入,构造的新敌方飞机加入敌方飞机数组
  3. 通过循环遍历所有敌方飞机,如果top值大于650,删除子节点,删除对应敌方飞机
  4. 背景图动画,用计数器改变背景图定位实现动画效果(判定如果位置等于840时,重新从0开始)
  5. 创建我方飞机,当鼠标移动时将坐标赋值给我方飞机(注意边界判定,飞机不要除动画外)
  6. 判定游戏结束,敌方飞机X坐标>=我方飞机X坐标&&敌方飞机X坐标<=我方飞机坐标+我方飞机宽度&&敌方飞机Y坐标>=我方飞机Y坐标&&敌方飞机Y坐标<=我方飞机Y坐标+我方飞机宽度(这4个条件必须都满足才碰撞)
  7. 构造函数创建子弹,并加入到子弹数组里,定义属性,定位应定位于我方飞机正前方,定义移动函数(每次top值为上次top值-速度值)
  8. 计时器创建子弹速度,移动时创建子弹,判定如果子弹top值小于-650,删除子弹节点及对应子弹数组
  9. 写碰撞函数子弹X坐标>=敌方飞机X坐标&&子弹X坐标<=敌方飞机X坐标+敌方飞机宽度&&子弹Y坐标>=敌方飞机Y坐标&&子弹Y坐标<=敌方飞机Y坐标+敌方飞机高度
  10. 碰撞函数如果生效,移除子弹和敌方飞机,并且分数加一
  11. 当点击结束界面初始化界面(刷新界面)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        #main{
            width: 600px;
            height: 650px;
            margin: 10px auto;
            overflow: hidden;
            position: relative;
            background-image: url(images/background.webp);
        }
        #start{
            width: 100px;
            height: 50px;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 300px;
            left: 250px;
        }
        #score{
            width: 45px;
            height: 50px;
            background-color: orangered;
            position: absolute;
            top: 0px;
            left: 550px;
            opacity: 0.5;
           
        }
        #end{
            width: 100px;
            height: 50px;
            background-color: rgb(237, 11, 23);
            text-align: center;
            line-height: 50px;
            margin: 300px auto;
            /* display: none; */
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="start">开始</div>
        <div id="score">得分:<br><span class="score">0</span></div>
        
    </div>
    <div id="end">又菜又爱玩</div>
    <script>
        var mainEle=document.querySelector('#main')
        var startEle=document.querySelector('#start')
        var scoreEle=document.querySelector('.score')
        var endEle=document.querySelector('#end')
//敌方飞机数组
        var enemyarry=[]
//子弹数组
        var bulletarry=[]
        let score=0
        //封装随机数函数
        function getRandom(m,n){
            return Math.floor(Math.random()*(n-m)+m)
        }
        //开始
        startEle.onclick=function(){
            startEle.style.display='none'
        //创建敌方飞机
        function Enemy(imgsrc,x,y,speed){
            this.imgNode=document.createElement('img')
            this.imgsrc=imgsrc
            this.x=x
            this.y=y
            this.speed=speed
            this.init=function(){
                this.imgNode.src=this.imgsrc
                this.imgNode.style.position='absolute'
                this.imgNode.style.left=this.x+"px"
                this.imgNode.style.top=this.y+"px"
//加入敌方飞机到节点下                
                mainEle.appendChild(this.imgNode)
            }
            this.init()
//移动函数
            this.move=function(){
                this.imgNode.style.top=parseInt(this.imgNode.style.top) +this.speed+'px' 
                
            }
        }
        function getEnemy(){
            let newEnemy=new Enemy('images/neemy2.png',getRandom(0,560),-getRandom(0,30),getRandom(0,10)+10)
//创建的敌方飞机加入到敌方数组
            enemyarry.push(newEnemy)
        }
        setInterval(function(){
            getEnemy()
        },1000)
        function enemyMove(){
           for(let i=0;i<enemyarry.length;i++){
//执行移动函数
               enemyarry[i].move()
//判定如果超出画面,移出敌方飞机
               if(parseInt(enemyarry[i].imgNode.style.top)>650){
                mainEle.removeChild(enemyarry[i].imgNode)
                enemyarry.splice(i,1)
                }
           }
        }
        setInterval(enemyMove,50)
        //背景图动画
        function background(){
            
            let a=0;
            setInterval(function(){
                a=a+1
//背景图移动
                mainEle.style.background=`url(images/background.webp) 0px ${a}px`
                if(a==840){
                    a=0
                }
            },10)
        }background()
        //创建我方飞机
        function myplane(imgsrc){
            this.myplaneNode=document.createElement('img')
            // myplaneNode.src='images/myplane2png.png'
            this.imgsrc=imgsrc
           
            this.init=function(){
                this.myplaneNode.src=this.imgsrc
                this.myplaneNode.style.position='absolute'
                mainEle.appendChild(this.myplaneNode)
            }            
            this.init()
            this.move=function(){
                setInterval(function(){
//移动时执行X,Y赋值给我方飞机
                document.onmousemove=function(e){
                
                let l1=mainEle.offsetLeft
                let t1=mainEle.offsetTop
                
                let l=myplaneNode.clientWidth/2
                let t=myplaneNode.clientHeight/2
                let x=e.clientX
                let y=e.clientY
                x1=e.clientX-l-l1
                y1=e.clientY-t-t1
                if(x1<-l){
                    x1=-l
                }
                if(x1>600-t){
                    x1=600-t
                }
            
               myplaneNode.style.top=y1+'px'
               myplaneNode.style.left=x1+'px'
            getBullet(x1,y1)
        //判断游戏结束
            for(let i=0;i<enemyarry.length;i++){
//循环敌方飞机坐标
                let enTop=parseInt(enemyarry[i].imgNode.style.top)
                let enLeft=parseInt(enemyarry[i].imgNode.style.left)
                if(enLeft>=x1 && enLeft<=x1+50 &&enTop>=y1 &&enTop<=y1+60){
//弹出结束界面
                    endEle.style.display='block'
//移出画面
                    mainEle.remove()
                }
            }
            }
        },50)   
            }
            this.move()
        }
        myplane('images/myplane2png.png')
        function getBullet(x1,y1){
//创建子弹
                let newbullet=new bullet('images/20181227204057448.png',x1+21,y1-20,10)
//创建的子弹加入到子弹数组里                
                bulletarry.push(newbullet) 
            }   
        //创建子弹
        function bullet(imgsrc,x,y,speed){
            this.imgNode=document.createElement('img')
            this.imgsrc=imgsrc
            this.x=x
            this.y=y
            this.speed=speed
            this.init=function(){
                this.imgNode.src=this.imgsrc
                this.imgNode.style.position='absolute'
                this.imgNode.style.left=this.x+"px"
                this.imgNode.style.top=this.y+"px"
//子弹加入到页面中            
                mainEle.appendChild(this.imgNode)
                
            }
            this.init()
//子弹移动函数
            this.move=function(){
                this.imgNode.style.top=parseInt(this.imgNode.style.top)-this.speed+"px"
                
            }

        }
       function bulletMove(){
//遍历所有子弹判定如果超出界面,移出子弹        
           for(let i=0;i<bulletarry.length;i++){
               bulletarry[i].move()
               if(parseInt(bulletarry[i].imgNode.style.top)<-650){
                mainEle.removeChild(bulletarry[i].imgNode)
                bulletarry.splice(i,1)
              
               }
           }
       }
       setInterval(bulletMove,10)
        //碰撞函数
       function crash(){
            for(let i=0;i<bulletarry.length;i++){
                for(let j=0;j<enemyarry.length;j++){
//拿到子弹和敌方飞机X和Y坐标
                    let blTop=parseInt(bulletarry[i].imgNode.style.top)
                    let blLeft=parseInt(bulletarry[i].imgNode.style.left)
                    let enTop=parseInt(enemyarry[j].imgNode.style.top)
                    let enLeft=parseInt(enemyarry[j].imgNode.style.left)
                    if(blTop>=enTop && blTop<=enTop+30 && blLeft>=enLeft && blLeft<=enLeft+40){
//判定生效移出敌方飞机和子弹
                        mainEle.removeChild(bulletarry[i].imgNode)
                        bulletarry.splice(i,1)
                        mainEle.removeChild(enemyarry[j].imgNode)
                        enemyarry.splice(j,1)
//分数加一
                        score++
                    }
                }
            }
            scoreEle.innerHTML=score
       }
//每隔50MS判定一下是否碰撞
       setInterval(crash,50)
       
    }
//结束界面点击时重新初始化
    endEle.onclick=function(){
        location=location
    }
    </script>
</body>
</html>
举报

相关推荐

0 条评论