为我的孩子们做一个数学游戏；我如何根据他们的选择来转换图片？

Question

我正在为我的孩子们做一个简单的数学卡片游戏。吸引他们玩游戏的部分原因是他们有能力“选择”一个游戏角色，当问题是正确或错误的时候，这个角色就会活跃起来。

目前，我的闪存卡和代码工作正常。我已经为一个视频游戏角色保存了一些动画GIF，并将其保存在/images文件夹中，用于不同的场景。

我的孩子们表面上会从一个select元素中选择他们的角色，然后开始游戏并观看魔术的发生。

我不是一个专业的程序员，但似乎应该有一个更优雅的方式来调用适当的GIF基于选择。而不是为他们可以选择的10个不同字符编写一堆if/else条件。

是否有一种方法将各种GIF的src路径放置在只能为特定字符调用的数组或对象中？有人能帮我提点主意吗？

我在想：

var chars = {
char1_right: "/path/to/this GIF",
char1_wrong: "/path/to/this GIF",
char2 etc...
}

然后

var img = new Image();
var img.src = chars.??? // changed based on the select box selection

更新解决方案:基于@runcom的建议，我设置了一个对象：：

var img_map = {
    ken: {
        win: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=KenPalette.bin&pcolornum=0&pname=ken/ken-fireball.gif',
        lose: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=KenPalette.bin&pcolornum=0&pname=ken/ken-twist.gif'
    },
    ryu: {
        win: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=RyuPalette.bin&pcolornum=0&pname=ryu/ryu-shoryuken.gif',
        lose: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=RyuPalette.bin&pcolornum=0&pname=ryu/ryu-twist.gif'
    },
    dhal: {
        win: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=OroPalette.bin&pcolornum=0&pname=oro/oro-uppercut.gif',
        lose: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=OroPalette.bin&pcolornum=0&pname=oro/oro-twist.gif'
    }

};

并使用以下内容更新了img.src属性：

var img_win = new Image();
var img_lose = new Image();
img_win.src = img_map.ken.win;
img_lose.src = img_map.ken.lose;
$('#charac').on('change', function () {
    var sel = $(this).val();
    if (sel in img_map) {
        img_win.src = img_map[sel].win;
        img_lose.src = img_map[sel].lose;
    }

});

下面是小提琴示例：http://jsfiddle.net/z17LgyLn/1/。

Answer 1

您可以创建一个说对象的Map(technically )，用于保存/存储图像路径，然后对其进行操作以获取正确的src，

var mapOfSource = {};
mapOfSource['key1'] = 'src1';
mapOfSource['key2'] = 'src2';

而且，在select的更改事件中，您可以简单地使用

 img.src=mapOfSource['key1']

有关其他备选方案，请参阅此Q/A。