1.子弹的配置项和类编辑

//子弹配置项

        const BULLET = {

            img: b,

            width: 9,

            height: 21,

        }

        //子弹类编辑

        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() {}

            paint(context) {

                console.log(this.img, this.x, this.y)

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

            }

        }

2.补充图片的src

const b = new Image();

b.src = "img/bullet.jpg"

网上偷图,妙啊

3.我们为Hero类添加新的方法

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();

                console.log(currentTime - this.lastShootTime);

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

                    //初始化一个子弹对象

                    console.log("测试shoot");

                    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;

                }

            }

        }

3.1.属性说明

//子弹上次射击的时间

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

//子弹射击的间隔

this.shootInterval = 200;

//子弹夹数组

this.bulletList = [];

lastShootTime时间用于判断子弹更新的时机

shootInterval用于控制子弹刷新的间隔

bulletList后面的多次渲染子弹会用到

3.2.方法说明

shoot() {

                //获取当前的时间

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

                console.log(currentTime - this.lastShootTime);

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

                    //初始化一个子弹对象

                    console.log("测试shoot");

                    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;

                }

            }

同样的用控制时间差的原理来保证刷新速率

还是那条公式:当前时间 - 创建实例时的时间 > 我规定的时间间隔

子弹的绘制,想想怎么把它渲染在飞机的正上方

BULLET, this.x + this.width / 2 - BULLET.width / 2 + 2, this.y - BULLET.height / 2

x,y是渲染飞机的坐标

横坐标:x加上一般的飞机宽度再减去一半的子弹宽度

纵坐标:y减去一般的子弹高度

(canvas的纵坐标是向下的哟)

(最后再调整一下,加一加二之类的)

ok,来看看效果

gif录不到,但确实是有的

巴特西

Html飞机大战(七):发射第一颗子弹

1.子弹的配置项和类编辑

2.补充图片的src

3.我们为Hero类添加新的方法

3.1.属性说明

3.2.方法说明

最新文章

热门文章