Javascript 单击屏幕上的图像时，如何更改画布中的精灵

我目前正在制作一个基于画布的基本游戏，我目前将我的角色精灵设置为目录中的特定图像。在画布的外部，我有几个其他的图像（也保存在目录中），我希望能够单击这些图像将精灵更改为单击的图像

我试过玩一些onclick函数，但没有成功。我试过玩onclick函数

var Player=function（）{
this.sprite='images/char-boy.png'；
这个.x=300；
这个y=550；
}

把它改成

var Player=function（）{
this.sprite=函数char\u select（）{
var-toon=document.getElementById（这个）；
返回香椿；
};
这个.x=300；
这个y=550；
}

这就是html的外观

<img src="images/char-boy.png" id="boy" onclick="char_select()">

我从未使用过JSFIDLE，但我很快复制并粘贴了我所拥有的内容，并得出了这个结论。

---

图像的

onclick

属性不起任何作用，因为代码错误-函数名为

sprite

，而不是

char\u select

。它还需要是

Player

实例的一部分

试试这个：（现在图像上不需要

onclick

属性）

---

请向我们展示您迄今为止所做的尝试，向jsfiddle.net添加一些代码。

var myPlayer;

//Define Player object
var Player = function() {
    this.sprite = 'path/to/image.png';        
    this.char_select = function(clicked_img) {
        //Set sprite to clicked_img's src attribute
        this.sprite = clicked_img.src;
    };
    this.x = 300;
    this.y = 550;
}      

window.onload = function() {
    //Create a new player instance
    myPlayer = new Player();

    //Add click listener for the image(s)
    document.getElementById('boy').addEventListener('click', function() {
        //Call the char_select function with the clicked image as an parameter
        myPlayer.char_select(this);
    });

    //Add more event listeners as required...
}