[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

Posted 2020-10-04

整体展示：

    上一讲实现了诸多对象，这次我们就需要实现许多逻辑方法，如控制飞机移动，判断子弹击中敌机，敌机与英雄飞机相撞等等。并且我们在实现这些功能的时候需要计时器去调用这些方法。setInterval(fun,ms)

    在调用setInterval()会返回一个类似id的字段，该字段在clearInterval（id）可以指定相应的计时器并清除

一、开始游戏

/**
 * 面板441*632
 * 飞机 66*80
 */
/**
 * 开始游戏
 */
function startGame() {
    var welcome = document.getElementById("welcome");

    myPlane = new createPlane("img/own.png", 190, 550, 5, 5);
    welcome.style.visibility = "hidden";    //将进入欢迎界面隐藏
//    ctrlMove();
/*
 * 启动定时器
 */
    ctrlmove = setInterval(ctrlMove,20);
    ctrlshot = setInterval(ctrlShot,200);
    bulletfly = setInterval(bulletFly,20);
    createenemy = setInterval(enemy,200);
    enemymove = setInterval(enemyMove,20);
    hitplane = setInterval(hitPlane,30);
    exist = setInterval(isexist,20);
}

 

二、控制英雄飞机移动

/*
     * 键盘监听，用于判断英雄的动作 wasd移动方向，j射击，k必杀
     * 放在开始游戏方法中
     */
    document.body.onkeydown = function(code){
        if(code.keyCode == 65){
            leftbtn = true;
        }
        if(code.keyCode == 68){
            rightbtn = true;
        }
        if(code.keyCode == 87){
            topbtn = true;
        }
        if(code.keyCode == 83){
            bottombtn = true;
        }
        if(code.keyCode == 74){
            shot = true;
        }
        if(code.keyCode == 75){
            shotboom = true;
        }
    }
    document.body.onkeyup=function(code){
        if(code.keyCode==65){
            leftbtn=false;
        }
        if(code.keyCode == 68){
            rightbtn = false;
        }
        if(code.keyCode == 87){
            topbtn = false;
        }
        if(code.keyCode == 83){
            bottombtn = false;
        }
        if(code.keyCode == 74){
            shot = false;
        }
        if(code.keyCode == 75){
            shotboom = false;
        }
    }

 

/**
 * 控制英雄移动的函数
 */
function ctrlMove(){
    if(leftbtn==true){
        myPlane.leftMove()
    }
    if(rightbtn==true){
        myPlane.rightMove()
    }
    if(topbtn==true){
        myPlane.topMove()
    }
    if(bottombtn==true){
        myPlane.botoomMove()
    }
    //获取玩家参数
    getInfo();
}

三、子弹击中对象

/**
 * 子弹击中对象
 */
function hitPlane(){
    /*
     * 英雄子弹打中敌机
     */
    for(i=0;i<bulletList.length;i++){    //遍历英雄子弹集合
        for(j=0;j<enemyList.length;j++){    //遍历敌军集合
            //获取子弹坐标和敌军坐标
            var btop = parseInt(bulletList[i].bulletNode.style.top);
            var bleft = parseInt(bulletList[i].bulletNode.style.left);
            var etop = parseInt(enemyList[j].enemyNode.style.top);
            var eleft = parseInt(enemyList[j].enemyNode.style.left);
            if(!enemyList[j].isdead){
                if(bleft>=eleft-5&&bleft<eleft+34&&btop>etop&&btop<etop+34){
                    bulletList[i].ishit=true;    //击中把子弹状态改为true
                    if(--enemyList[j].blood<=0)    //判断敌军是否死亡
                        enemyList[j].isdead=true;
                }
            }
        }
    }
    /*
     * boos子弹打中英雄
     */
    var top = parseInt(myPlane.planeNode.style.top);
    var left = parseInt(myPlane.planeNode.style.left);
    for(i=0;i<boosBullet.length;i++){
            var btop = parseInt(boosBullet[i].bulletNode.style.top);
            var bleft = parseInt(boosBullet[i].bulletNode.style.left);
            if(myPlane.blood>=0){
                if(btop+55>=top&&btop<top+80&&bleft>=left-22&&bleft<left+40){
                    boosBullet[i].ishit=true;
                    myPlane.blood--;
                }
            }
    }
    
    /**
     *子弹打中BOOS 
     */
    for(i=0;i<bulletList.length;i++){
        var btop = parseInt(bulletList[i].bulletNode.style.top);
        var bleft = parseInt(bulletList[i].bulletNode.style.left);
        for(j=0;j<boosList.length;j++){
            var top=parseInt(boosList[j].enemyNode.style.top);
            var left=parseInt(boosList[j].enemyNode.style.left);
            if(!boosList[j].isdead){
                if(bleft-5>=left&&bleft<left+90&&btop>=top&&btop<top+80){
                    console.log(boosList[j].blood)
                    bulletList[i].ishit=true;
                    if(--boosList[j].blood<=0)
                        boosList[j].isdead=true;
                }
            }
        }
    }
}

四、对象间碰撞

/**
 * 对象相撞
 */
function strike(){
    var mleft = parseInt(myPlane.planeNode.style.left);
    var mtop = parseInt(myPlane.planeNode.style.top);
    if(myPlane.blood>0){
        for(i=0;i<enemyList.length;i++){    //遍历敌机
            if(!enemyList[i].isdead){    //敌机是否死亡
                var eleft = parseInt(enemyList[i].enemyNode.style.left);
                var etop = parseInt(enemyList[i].enemyNode.style.top);
                if(eleft>=mleft&&eleft<mleft+68&&etop>=mtop&&etop<mtop+80){    //碰撞判断
                    enemyList[i].isdead = true;    //敌机一碰撞到英雄飞机立即死亡
                    enemyList[i].enemyNode.src ="img/enemybz.png";    //切换图片，制作爆炸特效
                    myPlane.blood--;    //英雄血量减少
                }
            }
        }
    }
    /*
     * 得到道具
     */
    if(myPlane.blood>0){    //判断英雄是否死亡
        for(i=0;i<toolList.length;i++){    //遍历道具数组
            if(!toolList[i].getme){
                var tleft = parseInt(toolList[i].toolNode.style.left);
                var ttop = parseInt(toolList[i].toolNode.style.top);
                if(tleft>=mleft-15&&tleft<mleft+65&&ttop>=mtop&&ttop<mtop+80){
                    toolList[i].getme=true;
                    if(toolList[i].tooltype%2==1){    //tooltype单数为加必杀，双数为加血
                        if(myPlane.boom<5)
                            myPlane.boom++;
                    }else{
                        myPlane.blood++;
                    }
                }
            }
        }
    }
}

五、判断对象是否死亡

/*
 * 判断对象是否存在
 */
function isexist(){
    /*
     * 判断敌机是否死亡
     */
    for(i=0;i<enemyList.length;i++){
        if(enemyList[i].isdead){    //敌机死亡
            enemyList[i].enemyNode.src ="img/enemybz.png";    //将图片换成爆炸图片
            if(enemyList[i].deadtime>=0){    //移除时间，也就是飞机死亡到移除的时间，实现爆炸的特效
                enemyList[i].deadtime--;
            }else{
                score+=myPlane.level;
                killNum++;
                mainobj.removeChild(enemyList[i].enemyNode);    //先移除节点
                enemyList.splice(i,1);                            //再取消绑定
            }
        }
    }
    /*
     * 判断英雄是否死亡
     */
    if(myPlane.blood<=0){
        mainobj.removeChild(myPlane.planeNode);
        gameOver();
    }
    /*
     * 判断boos是否死亡
     */
    for(i=0;i<boosList.length;i++){
        if(boosList[i].isdead){
            if(boosList[i].deadtime<=0){
                mainobj.removeChild(boosList[i].enemyNode)
                boosList.splice(i,1);
                score+=100*myPlane.level;
                pass++;
                nextGame();
            }else{
                boosList[i].deadtime--;
                boosList[i].enemyNode.src="img/dfjbz.png";
            }
        }
    }
    /*
     * 判断道具是否存在
     */
    
    for(i=0;i<toolList.length;i++){
        if(toolList[i].getme){
            mainobj.removeChild(toolList[i].toolNode);
            toolList.splice(i,1);
        }
    }
}

===============================================================================================================================

第二讲补充：

    我在创建对象时候（除英雄飞机对象），都将其放进Arrar中，这是为了绑定该对象，为了方面找到这个对象。方便操作。 

 以上为今天的内容，如需了解更加深入的知识，请大家进入知了堂社区：http://www.zhiliaotang.com/portal.php；