Javascript 如何将画布中的图像更改为另一个图像一段时间，然后再更改回来

我是游戏开发新手，我正在开发一个简单的游戏，当我开车撞到怪物时，我可以得到一分。因此，现在我想改变汽车的颜色（如果红色，然后蓝色，反之亦然），当我击中怪物一段时间（5秒），然后切换回原来的颜色。我试过了

var myObj = {
    imgs: ["http://res.cloudinary.com/dfhppjli0/image/upload/c_scale,w_2048/v1492045665/road_dwsmux.png", "http://res.cloudinary.com/dfhppjli0/image/upload/c_scale,w_32/v1491958999/car_p1k2hw.png","http://res.cloudinary.com/dfhppjli0/image/upload/v1491958478/monster_rsm0po.png","http://res.cloudinary.com/dfhppjli0/image/upload/v1492579967/car_03_ilt08o.png"], 
    currentImg: 0, 
    draw: function(){
        ctx.drawImage(this.imgs[this.currentImg], this.x, this.y)
    }, 
    changeImg: function(index){
        this.currentImg = index
    }
}

然后用

images.__createImage("background","img[0]");

但它没有起作用

我的工作：

---

感谢您提供的任何帮助

您已经加载了前后更改外观所需的图像，这样就可以了，您不需要将url数组保存在英雄（汽车）对象中，并在需要时再次加载它

我已将

changeImage

属性添加到您的heroDefault（car）中，以便我可以标记需要检查图像是否需要更改回的对象，并且我还将

changeImageTime

添加到heroDefault中，我在其中存储更改后的时间，因此，当汽车撞上怪物时，我将

changeImage

设置为

true

，并将

changeImageTime

设置为

Date.now（）+5000

，这意味着我存储当前时间加上5秒（5000ms）：

然后，在默认的更新函数中，我检查是否需要更改图像，以及时间是否已过，如果需要，我将图像更改回，并通过将

changeImage

设置为false标记对象，使其不再比较时间

if(this.changeImage){
    if(Date.now() > this.changeImageTime){
        this.changeImage = false;
        this.image = (this.image === images.hero)? images.hero_other : images.hero;
    }
}

//创建画布
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=2048；
canvas.height=1024；
document.body.appendChild（画布）；
var monstersCaught=0；
var lastFrameTime；
var frameTime=0；//用于控制英雄速度的秒数
//主游戏循环
主功能（时间）{
如果（lastFrameTime！==未定义）{
frameTime=（time-lastFrameTime）/1000；//以秒为单位
}
lastFrameTime=时间
更新对象（）；
render（）；
requestAnimationFrame（主）；
};
//当所有图像都已加载时调用此函数
函数start（）{
MonstersGaught=0；
resetObjs（）；
requestAnimationFrame（主）；
}
功能显示状态（消息）{
setTransform（1,0,0,1,0,0）；//设置默认转换
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“黑色”；
ctx.font=“24px Helvetica”；
ctx.textAlign=“中心”；
ctx.textb基线=“中心”；
ctx.fillText（消息，canvas.width/2，canvas.height/2）；
}
//重置对象
函数resetObjs（）{
monsters.array.forEach（monster=>monster.reset（））；
heros.array.forEach（hero=>hero.reset（））；
}
//更新游戏对象
函数更新对象（修改器）{
monsters.array.forEach（monster=>monster.update（））；
heros.array[0]。更新（'random'）；
heros.array[1]。更新（'random'）；
数组[2]。更新（'random'）；
heros.array[3].update（'random'）；
数组[4]。更新（'random'）；
heros.array[5].update（'random'）；
heros.array[6].update（'random'）；
heros.array[7].update（'random'）；
}
函数drawObjects（修改器）{
怪物.array.forEach（怪物=>monster.draw（））；
heros.array.forEach（hero=>hero.draw（））；
}
//画一切
函数render（）{
setTransform（1,0,0,1,0,0）；//设置默认转换
ctx.drawImage（images.background，0,0）；
drawObjects（）；
//得分
setTransform（1,0,0,1,0,0）；//设置默认转换
ctx.fillStyle=“rgb（250250250）”；
ctx.font=“24px Helvetica”；
ctx.textAlign=“左”；
ctx.textb基线=“顶部”；
ctx.fillText（“点：“+monstersCaught，32,32”）；
}
//将所有图像保存在一个对象中。
const images={//double下划线_uuu是为了防止添加替换这些函数的图像
__地位：{
计数：0，
就绪：错误，
错误：false，
},
__onready:null，
__createImage（名称，src）{
var image=新图像（）；
image.src=src；
图像。uu status.count+=1；
image.onerror=函数（）{
图像。uuu status.error=true；
显示状态（“加载图像时出错：“+name+””）；
}
image.onload=函数（）{
图像。uu status.count-=1；
如果（图像。\uuuu status.count==0）{
图像。_status.ready=true；
图像；
}
如果（！images.\u状态.错误）{
显示状态（“图像重放：+图像状态.计数”）；
}
}
图像[名称]=图像；
返回图像；
}
}
//处理所有按键输入
const keys={//键输入对象
ArrowLeft:false，//仅添加要侦听的键名
右箭头：错，
箭头向下：错误，
阿罗普：错，
关键事件（事件）{
如果（keys[event.code]！==未定义）{//我们对这个键感兴趣吗
keys[event.code]=event.type==“keydown”；
event.preventDefault（）；
}
}
}
//对象的默认设置
常量objectDefault={
x:0,，
y:0，
dir:0，//图像旋转
isTouching（obj）{//如果对象接触框x、y、w、h，则返回true
返回！（this.x>obj.x+obj.w | this.y>obj.y+obj.h | this.x+this.wif(this.changeImage){
    if(Date.now() > this.changeImageTime){
        this.changeImage = false;
        this.image = (this.image === images.hero)? images.hero_other : images.hero;
    }
}