如何使Image（）在Javascript中消失？

TileMap2
#帆布{
外形：3倍纯黑；
}
window.onload=函数（）{
drawMap（）；
drawImage（马里奥，xpos，YPO，50,50）；
drawImage（goomba，50,50,50,50）；
}
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var-xpos=0；
var-ypos=0；
var grass=新图像（）；
var water=新图像（）；
var dirt=新图像（）；
var mario=新图像（）；
var goomba=新图像（）；
mario.src='mario.png'；
grass.src='grass1.jpg'；
water.src='water.jpg'；
dirt.src='dirt.jpg'；
goomba.src=“goomba.png”；
变量映射=[
[1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 1, 1, 1, 1, 1, 1, 1]
];
函数drawMap（）{
var localX=0；
var localY=0；
对于（变量i=0；i

创建一个用于绘图的函数。目前，您正在重复执行，这使得您的代码很难维护

但在此之前，我们应该创建一组

图像

，如下所示：

var images = {};

function addToImage(key, obj, x, y) {
    images[key] = {obj: obj, x: x, y: y, display: true};
}

初始化时，将

mario

和

goomba

添加到图像及其初始位置，然后实现绘制功能。那么，让我们使用这个函数：

function draw(images) {
    drawMap();
    for (var imageIndex in images) {
        if (images[imageIndex].display) {
            context.drawImage(images[imageIndex].obj.src, images[imageIndex].x, images[imageIndex].y, images[imageIndex].obj.width, images[imageIndex].obj.height);
        }
    }
}

window.onload = function() {
    draw(images);
}

---

杀死

goomba

时，只需将

images[“goomba”]设置为“
false”
，然后再次调用
draw（images）
。
看起来您试图通过将goomba的显示样式设置为“无”来隐藏它，就像对html元素所做的那样，但由于goomba是一个手动绘制到画布上的图像，你不能不带古姆巴就重画吗？（
if（！goombakilled）context.drawImage（goomba..etc
），其中
goombakilled
是一个全局变量。（更进一步的一步是将所有图像都放在包含图像位置和活动状态的对象中，但对于第一个项目来说，这可能有点太多了）问题的一部分也是如何检测冲突本身？我将此添加到当前代码中：var images=[mario，goomba]；function addToImage（key，obj，x，y）{images[key]={obj:obj，x:x，y:y，display:true}；}函数draw（images）{drawMap（）；for（图像中的var imageIndex）{if（图像[imageIndex].display）{context.drawImage（图像[imageIndex].obj.src，图像[imageIndex].x，图像[imageIndex].obj.width，图像[imageIndex].obj.height）；}}}}window.onload=function（）{draw（图像）；}Mario和Goomba消失…看看addToImage函数，在那里你可以将图像添加到集合中。你可以像addToImage（“Goomba”，Goomba，0，0）一样调用它，然后你可以通过图像[“Goomba”]