Question

我正在为我的孩子们制作一个简单的小数学抽认卡游戏。他们发挥的部分吸引力在于他们能够“选择”一个视频游戏角色，当问题对错时会激活。

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

我的孩子表面上会从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/。

为我的孩子们制作数学游戏;如何根据选择切换图像？

0 个答案: