我正在遵循本指南: https://www.w3schools.com/graphics/game_intro.asp
我正在尝试做到这一点,所以当我的组件碰到一个对象时,图像就会改变。 现在,我对其进行了设置,以使两个图像完全重叠。当他们碰到一个物体时,将最上面的物体隐藏起来,但是它并没有消失。
`function component(width, height, color, x, y, type) {
this.type = type;
if(type == "image" || type =="background") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0.05;
this.gravitySpeed = 0;
//draws the component
this.update = function() {
ctx = myGameArea.context;
//accounting for the the component being the score and
the data being text.
if(this.type == 'text'){
ctx.font = this.width + ' ' + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else if(type =='image' || type == 'background') {
ctx.drawImage(this.image, this.x, this.y,
this.width, this.height);
if(type == 'background') {
ctx.drawImage(this.image, this.x + this.width, this.y,
this.width, this.height)
}
} else { //if it's not text draw the face icon.
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
` 这就是我要用来使图像消失的东西
function changeImage() {
for(let z=0; z < myObstacles.length; z++){
if(myGamePiece1.crashWith(myObstacles[z])){
myGamePiece1.fillStyle = 'rgba(255,0,0,0)';
}
}
}
我在这里调用此函数:
function updateGameArea() {
var x,height,gap, minHeight, maxHeight, minGap, maxGap;
for(i = 0; i < myObstacles.length; i ++) {
if(myGamePiece.crashWith(myObstacles[i])) {
changeImage();
myGameArea.stop();
这是github https://github.com/dhuang6/html-game--flappy-bird
谢谢您的帮助!