1.首先我们要确定几个变量和方法的关系

变量：子弹 bullet 弹夹（用来装子弹的东西）bulletList[]

方法：装填子弹绘制子弹移动子弹

子弹发射的物理逻辑是很简单的：

生产第一个子弹，推入弹夹中，绘制弹夹（即绘制弹夹中的所有子弹)，

生产第二个子弹，同样推入弹夹，移动第一颗子弹（应该说是改变第一颗子弹的y坐标），绘制弹夹中的所有子弹

。。。。。。

生产第n个子弹，推入弹夹中，改变第n-1颗子弹的Y坐标，绘制弹夹中的所有子弹

（这是本篇最重要的思路，这个不理清楚，做着做着就寄了，）

所以我们的思路就是：

（1）生产子弹，

（2）推入弹夹，

（3）移动子弹（只有第一次生产子弹是不用移动子弹的），

（4）绘制弹夹中的所有子弹

思路理清，一切都通了

2.在类中添加方法

 class Hero {

            constructor(config) {

                this.width = config.width;

                // this.height = config.heigth;

                this.widthh = config.widthh;

                this.x = (480 - config.width) / 2;

                this.y = 650 - config.widthh;

                // this.y = 650 - config.height;

                this.frame = config.frame;

                //用死/活来控制要渲染的图片组

                this.img = null;

                this.live = true;

                //子弹上次设计的时间

                this.lastShootTime = new Date().getTime();

                //子弹射击的间隔

                this.shootInterval = 200;

                //子弹夹数组

                this.bulletList = [];

            }

            judge() {

            }

            paint(context) {

                this.img = this.frame.live[0];

                context.drawImage(this.img, this.x, this.y, this.width, this.widthh);

            }

            //英雄的子弹设计间隔

            shoot() {

                //获取当前的时间

                const currentTime = new Date().getTime();

                if (currentTime - this.lastShootTime > this.shootInterval) {

                    //初始化一个子弹对象

                    let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2 + 2, this.y - BULLET

                        .height / 2);

                    this.bulletList.push(bullet);

                    //开始绘制子弹

                    //bullet.paint(context);

                    //更新时间

                    this.lastShootTime = currentTime;

                }

            }

            move() {

                console.log("hero的move被触发");

                this.y -= 2;

            }

        }

来到我们的Hero类

 let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2 + 2, this.y - BULLET

                        .height / 2);

 this.bulletList.push(bullet);

很显然这两个就是

（1）“生产子弹”和（2）“推入弹夹”

随后是子弹类的编辑

class Bullet {

            constructor(config, x, y) {

                this.img = config.img;

                this.width = config.width;

                this.height = config.height;

                this.x = x;

                this.y = y;

            }

            //移动子弹

            move() {

                console.log("bullet的move被触发");

                this.y -= 2;

            }

            //子弹绘制方法

            paint(context) {

                context.drawImage(this.img, this.x, this.y)

            }

        }

这里就是

（3）移动子弹

（4）绘制弹夹中的所有子弹

但是这显然不够完善

我们要操作的是整个弹夹

我们要用一个for循环去遍历弹夹中的每一个子弹并

（3）移动子弹

（4）绘制弹夹中的所有子弹

3.添加全局变量

function judgeComponent() {

            console.log("judge被触发");

            for (let i = 0; i < hero.bulletList.length;i++) {

                hero.bulletList[i].move();

            }

        }

        //全局函数 来绘制所有的子弹/敌人组件

        function paintComponent() {

            for (let i = 0; i < hero.bulletList.length;i++) {

                hero.bulletList[i].paint(context);

            }

        }

在状态中添加方法的使用

case RUNNING:

                        sky.judge();

                        sky.paint(context);

                        //加载主角

                        hero.paint(context);

                        hero.shoot();

                        judgeComponent();

                        paintComponent();

                        deleteComponent();

                        // context.drawImage(hero_frame.live[0], 0, 0);

                        break;

来看看效果：

搞定

（嗯，非常nice！）