Html飞机大战(五):主角登场(英雄类编辑)
好家伙,
遇到了一些非常奇怪的bug
index.html:179
Uncaught TypeError: Failed to execute 'drawImage' on
'CanvasRenderingContext2D': The provided value is not of type
'(CSSImageValue or HTMLCanvasElement or HTMLImageElement or
HTMLVideoElement or ImageBitmap or OffscreenCanvas or
SVGImageElement or VideoFrame)'.
179的代码:
paint(context) {
this.img=this.frame[this.frameIndex];
context.drawImage(this.img, this.x, this.y, this.width, this.height)
}
这里的能够正常渲染,然后后面hero英雄类的却不能渲染了
(一头雾水了)
一切都还是那样
1.正常的图片数组配置
const hero_frame = {
live: [],
death: []
}
hero_frame.live[0] = new Image();
hero_frame.live[0].src = "img/hero1.jpg"
hero_frame.live[1] = new Image();
hero_frame.live[1].src = "img/hero2.jpg"
hero_frame.death[0] = new Image();
hero_frame.death[0].src = "img/hero_blowup_n1.jpg"
hero_frame.death[1] = new Image();
hero_frame.death[1].src = "img/hero_blowup_n2.jpg"
hero_frame.death[2] = new Image();
hero_frame.death[2].src = "img/hero_blowup_n3.jpg"
hero_frame.death[3] = new Image();
hero_frame.death[3].src = "img/hero_blowup_n4.jpg"
这次在网上弄了些好看的图片过来
2.正常的配置项和类编辑
const HERO = {
frame: hero_frame,
width: 99,
x: 0,
y: 0,
speed: 10,
}
//英雄类配置
class Hero {
constructor(config) {
this.width = config.width;
this.height = config.heigth;
this.x = (480 - config.width) / 2;
this.y = 650 - config.height;
this.frame = config.frame;
//用死/活来控制要渲染的图片组
this.img = null;
this.live = true;
}
judge() {
}
paint(context) {
this.img = this.frame.live[0];
context.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
3.正常的实例化类
const hero = new Hero(HERO);
4.正常的方法调用
hero.paint(context);
一切都是那么的正常,但结果是他并没有渲染出来
(bug搜了很久也没有找到解决方案)
暂时先用个假代码:
context.drawImage(hero_frame.live[0], 0, 0);
最后发现,我是傻逼
配置项里面没写height属性
height: 148,
艹
行了,能跑就行,不用管报错