Html飞机大战(七):发射第一颗子弹
好家伙,终于到子弹了
我们先来理一理思路:
子弹由飞机射出,所以我们把发射子弹的方法写在英雄类中
当然了,子弹也必须有自己独立的类
后期会有很多子弹射出,所以一个个将子弹类实例化肯定是不对的
我们也需要一个弹夹(一个数组)去装子弹(子弹对象)
我们先把第一个子弹渲染到飞机的头上
开搞:
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录不到,但确实是有的