Javascript：如何使用onClick函数更改对象的可变颜色

我想做一个小游戏，你可以用WASD键画画。 到目前为止我所拥有的一切。在代码中，您可以看到我创建了一个碰撞函数，现在忽略它。我不再需要它了。但我的问题是：有没有可能使它有3个可点击的按钮，可以改变立方体的颜色，而无需重新加载页面？这样就有更多的颜色可以搭配。我在网上搜索了一下，看看是否能找到与我的问题相关的东西，所以我想在这里试试。最重要的部分是我指定立方体颜色的部分。这是代码，威奇有很多。。。还有，那里有一些荷兰语文本，因为英语不是我的母语

（函数（）{“使用严格”
var控制器，显示，游戏；
控制器=
{
左：错，
右：错，
上：错，
唐：错，
键向上向下：功能（事件）
{ 
var key_state=（event.type=“keydown”）？true:false；
开关（event.keyCode）
{
案例65://链接
controller.left=key_state；break；//dit是wasd，niet de pijltjes toetsen。
案例87://跳跃
controller.up=按键状态；中断；
案例68://rechts
controller.right=按键状态；中断；
案例83://naar beneden
controller.down=按键状态；中断；
}
} 
};
//所有的字都是在纸上写的。
显示=
{
缓冲区：document.createElement（“canvas”）.getContext（“2d”），
上下文：document.querySelector（“canvas”）.getContext（“2d”），
输出：document.querySelector（“p”），
render:function（）
{
for（让index=game.world.map.length-1；index>-1；--index）
{
this.buffer.fillStyle=（game.world.map[index]>1）？（“#0000”+game.world.map[index]+“100”）：“#00000”；
this.buffer.fillRect（（索引%game.world.columns）
*game.world.tile_大小、数学、楼层（索引/game.world.columns）*
游戏。世界。瓷砖大小，游戏。世界。瓷砖大小，游戏。世界。瓷砖大小）；
}
this.buffer.fillStyle=game.player.color；
this.buffer.fillRect（game.player.x，game.player.y，game.player.width，game.player.height）；
this.context.drawImage（this.buffer.canvas，1,0，this.buffer.canvas.width，this.buffer.canvas.height，0,0，this.context.canvas.width，this.context.canvas.height）；
},
调整大小：函数（事件）
{
var client_h=document.documentElement.clientHeight；
display.context.canvas.width=document.documentElement.clientWidth-20；
if（display.context.canvas.width>client_h）
{
display.context.canvas.width=client\u h；
}
display.context.canvas.height=Math.floor（display.context.canvas.width*0.625）；
display.render（）；
}
};
游戏={
玩家：
{
颜色：“红色”，
身高：10，
宽度：10，
跳跃：错，
old_x:160，
老y:160，
速度x:0，
速度y:0，
y:400，
x:400，
},
世界：／图为黑斯佩尔的麋鹿图片
{
栏目：10，
行：10，
瓷砖尺寸：100，
地图：
[0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,
5,5,5,5,5,5,5,5,5,5,0]
//瓦片地图上，麋鹿格塔尔是赫特斯佩尔（het spel，deze moet nog groter en hoger）的埃恩·布洛基（een blokje）
},
//去碰撞的沃尔·阿勒·索顿·布洛肯，0是一个名字。
//鞋跟veel tijd在gestop，nooit gebruikt oops。。。
碰撞：{
1：函数（对象、行、列）//
{
if（this.topCollision（object，row））{return；}//als-geen-top-collision
this.rightCollision（对象、列）；//doe dan侧面碰撞
},
2：函数（对象、行、列）//heeft top en left collision
{
if（this.topCollision（object，row））{return；}
this.leftCollision（对象、列）；
},
3：函数（对象、行、列）//alleen rechts冲突
{
此.rightCollision（对象、列）；
},
4：函数（对象、行、列）//heeft全局碰撞行为
{
if（this.topCollision（object，row））{return；}
if（this.leftCollision（object，column））{return；}
此.rightCollision（对象、列）；
},
5：函数（对象、行、列）//alleen碰撞als播放器门的顶部valt
{
此.topCollision（对象，行）；
},
leftCollision（对象、列）
{
如果（object.velocity_x>0）{
var left=列*game.world.tile\u大小；
如果（object.x+object.width*0.5>左&&object.old\u x=右）
{
object.velocity_x=0；
object.old_x=object.x=right-object.width*0.5；
返回true；
}
}
返回false；
},
顶部碰撞（对象，行）
{
如果（object.velocity_y>0）
{
var top=行*game.world.tile\u大小；
if（object.y+object.height>top&&object.old_y+object.height display.buffer.canvas.width）
{
game.player.velocity_x=0；
game.player.old_x=game.player.x=display.buffer.canvas.width-game.player.width；
}
if（game.player.y<0）
{
game.player.velocity_y=0；
game.player.old_y=game.player.y=0；
}else if（game.player.y+game.player.height>display.buffer.canvas.height）
{
game.player.velocity_y=0；
game.player.old_y=game.player.y=display.buffer.canvas.height-game.player.height；
}
//doe berekeningen在地图中的位置。
var tile_x=数学地板（（game.player.x+game.player.width*