The content is based on " 60 lines of code, making a plane battle game ", and continues to add the function of boss battle.

The boss's blood volume is set to 100 by default, it can be adjusted for secondary development...(^_^)

It is difficult to play. Trial address: Click to try

Realize the function

Add player aircraft and control it
Boss can move left and right
Boss fires three bullets
Bullet hits player plane
The bullet hits the Boss, and the blood volume is calculated

Project source code: http://pro.youyu001.com

Functions to be optimized

1) Memory optimization, bullet pictures need to be recycled

(As the number of bullets increases, the amount of calculation keeps increasing, it will be stuck, the device will heat up,

If you want to fight the performance of the machine, you can try it for a long time)

2) Production of blood bars

(According to the blood volume value, control the width of the blood bar image)

3) Collision between laser and player plane

(The area where the laser is located, you cannot go here)

code description

1) Calculate time correlation by frame rate

Define two variables for recording frame rate

var fireSpeed1 = 30;//boss发射子弹的间隔帧数
var fireSpeedSub1 = 0;//记录发射子弹后的帧数

In the frame rate function, execute the following code. Fires a bullet every 0.5 seconds

//boss定时发射子弹（方式1）
if(fireSpeedSub1 >= fireSpeed1) {
    boss_fire1();//发射子弹
    fireSpeedSub1 = 0;
}
fireSpeedSub1 ++;

2) Fire multiple bullets and control

Define an array to store bullet images

var bulletList = [];//boss子弹存放在这个数组

When the bullet is fired, push the bullet image into the array

function boss_fire1() {
    var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
    bullet.anchor.set(0.5);//设置锚点为中心
    app.stage.addChild(bullet);
    bulletList.push(bullet);
    bullet.x = boss.x;
    bullet.y = boss.y;
}

Add more attributes to the bullet image so that it can be differentiated when the bullet moves. (Javascript feature)

bullet.speedR = 0.1; //利用javascript对象的特性，临时记录下子弹旋转速度
bullet.speedY = 3; //利用javascript对象的特性，临时记录下子弹y方向的速度

In the frame rate function, let the bullets in the bulletList array move

//boss子弹移动
for(var i = 0; i < bulletList.length; i ++) {
	var bullet = bulletList[i];
    bullet.y += bullet.speedY;
    if(bullet.speedX) { //判断如果子弹有x方向速度，则进行横向移动
        bullet.x += bullet.speedX;
    }
    if(bullet.speedR) { //判断如果子弹有旋转速度，则进行旋转
        bullet.rotation += bullet.speedR;//自转
    }
}

full code

<body></body>
<script src="pixi.js"></script>     
<script>

    //####### boss战 帧频控制 数组循环
    //散发子弹
    //1、boss左右移动
    //2、间隔一段时间发射子弹（两种子弹：直线、散弹）
    //3、利用数组循环处理多子弹
    //4、计算血量

    //创建应用
    var app = new PIXI.Application(512,768);
    document.body.appendChild(app.view);
    app.view.style.height = "100%";

    //添加背景
    var bg = new PIXI.Sprite.fromImage("res/bg/img_bg_level_3.jpg");
    app.stage.addChild(bg);

    //创建飞机图片
    var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
    app.stage.addChild(plane); //将图片放置到舞台
    plane.anchor.x = 0.5; //设置图片锚点为图片中心
    plane.anchor.y = 0.5;
    plane.x = 200; //设置图片的位置
    plane.y = 600;

    var planeBullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_13.png");
    app.stage.addChild(planeBullet);
    planeBullet.anchor.x = 0.5;   //设置飞机图片锚点为图片中心
    planeBullet.anchor.y = 0.5;

    bg.interactive = true;//背景图片允许接受控制信息
    bg.on("pointermove", movePlane); //滑动控制
    function movePlane(event) {
        var pos = event.data.getLocalPosition(app.stage); //获取鼠标当前位置
        plane.x = pos.x;
        plane.y = pos.y;
    }

    //创建boss图片
    var boss = new PIXI.Sprite.fromImage("res/plane/main/img_plane_boss_12.png");
    app.stage.addChild(boss); //将图片放置到舞台
    boss.anchor.x = 0.5; //设置图片锚点为图片中心
    boss.anchor.y = 0.5;
    boss.x = 300; //设置图片的位置
    boss.y = 150;

    //Boss血量
    var bossHp = 100; 
    var bossHpTxt = new PIXI.Text("Boss HP:" + bossHp);
    app.stage.addChild(bossHpTxt); //将文本添加到舞台

    var bossSpeed = 2;//boss左右移动速度

    var isGameOver = false; //是否游戏结束
    app.ticker.add(animate); //指定帧频函数
    function animate() {
        if(isGameOver == true) { //如果游戏结束，则不执行下面动画
            return;
        }

        //背景移动
        bg.y += 2;
        if(bg.y >= 0) {
            bg.y = -768;
        }

        //子弹移动
        planeBullet.y -= 40;
        if(planeBullet.y < -50) {
            planeBullet.x = plane.x;
            planeBullet.y = plane.y;
        }

        //击中Boss判断
        var pos = (planeBullet.x - boss.x) * (planeBullet.x - boss.x) + (planeBullet.y - boss.y) * (planeBullet.y - boss.y);
        if(pos < 100 * 100) { 
            planeBullet.x = plane.x;
            planeBullet.y = plane.y;
            //boss -hp
            bossHp --;
            bossHpTxt.text = "Boss HP:" + bossHp;
            if(bossHp <= 0) {
                isGameOver = true;
                //通关
                if (confirm("Success!, restart?")==true){  
                    window.location.reload();
                } 
            }
        }

        //boss左右移动
        boss.x += bossSpeed;
        if(boss.x > 400) {
            bossSpeed = -2;
        }
        if(boss.x < 100) {
            bossSpeed = 2;
        }

        //boss定时发射子弹（方式1）
        if(fireSpeedSub1 >= fireSpeed1) {
            boss_fire1();//发射子弹
            fireSpeedSub1 = 0;
        }
        fireSpeedSub1 ++;

        //boss定时发射子弹（方式2）
        if(fireSpeedSub2 >= fireSpeed2) {
            boss_fire2();//发射子弹
            fireSpeedSub2 = 0;
        }
        fireSpeedSub2 ++;

        //boss定时发射子弹（方式3）
        if(fireSpeedSub3 >= fireSpeed3) {
            boss_fire3();//发射子弹
            fireSpeedSub3 = 0;
        }
        fireSpeedSub3 ++;
        //如果激光已经发射
        if(bulletLeft.visible == true) {
            if(fire3TimeSub >= fire3Time) {
                bulletLeft.visible = false;
                bulletRight.visible = false;
                fire3TimeSub = 0;
            }
            fire3TimeSub ++;
        }
        
        //boss子弹移动
        for(var i = 0; i < bulletList.length; i ++) {
            var bullet = bulletList[i];
            bullet.y += bullet.speedY;
            
            if(bullet.speedX) { //判断如果子弹有x方向速度，则进行横向移动
                bullet.x += bullet.speedX;
            }
            if(bullet.speedR) { //判断如果子弹有旋转速度，则进行旋转
                bullet.rotation += bullet.speedR;//自转
            }
        }

        //碰撞子弹Game Over
        for(var i = 0; i < bulletList.length; i ++) {
            var bullet = bulletList[i];
            var pos = (bullet.x - plane.x) * (bullet.x - plane.x) + (bullet.y - plane.y) * (bullet.y - plane.y);
            if(pos < 30 * 30) { //这里调小一点，变的更简单
                //游戏结束标记
                isGameOver = true;
                //是否重玩
                if (confirm("Game Over, restart?")==true){  
                    window.location.reload();
                }
            }
        }

    }



    var bulletList = [];//boss子弹存放在这个数组

    //子弹1
    var fireSpeed1 = 30;//boss发射子弹的间隔帧数
    var fireSpeedSub1 = 0;//记录发射子弹后的帧数
    //boss子弹发射方式1
    function boss_fire1() {
        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x;
        bullet.y = boss.y;
        bullet.speedR = 0.1; //利用javascript对象的特性，临时记录下子弹旋转速度
        bullet.speedY = 3; //利用javascript对象的特性，临时记录下子弹y方向的速度

        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x;
        bullet.y = boss.y;
        bullet.speedX = 1; //利用javascript对象的特性，临时记录下子弹x方向的速度
        bullet.speedR = 0.1; //利用javascript对象的特性，临时记录下子弹旋转速度
        bullet.speedY = 3; //利用javascript对象的特性，临时记录下子弹y方向的速度

        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x;
        bullet.y = boss.y;
        bullet.speedX = -1; //利用javascript对象的特性，临时记录下子弹x方向的速度
        bullet.speedR = 0.1; //利用javascript对象的特性，临时记录下子弹旋转速度
        bullet.speedY = 3; //利用javascript对象的特性，临时记录下子弹y方向的速度
    }

    //boss子弹发射方式2
    var fireSpeed2 = 60;//boss发射子弹的间隔帧数
    var fireSpeedSub2 = 0;//记录发射子弹后的帧数
    function boss_fire2() {
        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_15.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        bullet.rotation = Math.PI;
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x + 100;
        bullet.y = boss.y + 60;
        bullet.speedY = 8; //利用javascript对象的特性，临时记录下子弹y方向的速度

        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_15.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        bullet.rotation = Math.PI;
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x - 100;
        bullet.y = boss.y + 60;
        bullet.speedY = 8; //利用javascript对象的特性，临时记录下子弹y方向的速度
    }

    //boss子弹发射方式3 激光
    var fireSpeed3 = 600;//boss发射子弹的间隔帧数
    var fireSpeedSub3 = 0;//记录发射子弹后的帧数
    var fire3Time = 300;//激光发射时长
    var fire3TimeSub = 0;//记录激光发射后的帧数

    var bulletLeft = new PIXI.Sprite.fromImage("res/bullet/img_bullet_laser_01.png");
    bulletLeft.anchor.x = 0.5;//设置锚点为中心
    bulletLeft.anchor.y = 1;//设置锚点为中心
    bulletLeft.scale.x = 2;
    bulletLeft.scale.y = 2;
    bulletLeft.rotation = Math.PI;
    boss.addChild(bulletLeft); //添加到boss图片上
    bulletLeft.x = 180;
    //隐藏激光图片
    bulletLeft.visible = false;

    var bulletRight = new PIXI.Sprite.fromImage("res/bullet/img_bullet_laser_01.png");
    bulletRight.anchor.x = 0.5;//设置锚点为中心
    bulletRight.anchor.y = 1;//设置锚点为中心
    bulletRight.scale.x = 2;
    bulletRight.scale.y = 2;
    bulletRight.rotation = Math.PI;
    boss.addChild(bulletRight); //添加到boss图片上
    bulletRight.x = -180;
    //隐藏激光图片
    bulletRight.visible = false;

    function boss_fire3() {
        bulletRight.visible = true;
        bulletLeft.visible = true;
    }



</script>

Production of Html5 version of aircraft war game (Boss battle)