Making a math game for my kids; how do I switch images based on their selection?

Question

I'm building a simple little math flashcards game for my kids. Part of the appeal for them to play is the ability for them to "choose" a videogame character that will animate when the get a problem right or wrong.

Currently, my flashcards and code work fine. I have saved some animated GIFs for one videogame character in an /images folder for different scenarios.

My kids would ostensibly choose their character from a select element, then start the game and watch the magic happen.

I'm not a professional programmer, but it seems like there should be a more elegant way to call the appropriate set of GIFs based on the select. Rather than code a bunch of if/else conditions for the 10 various characters they could choose.

Is there a way to put the src path for the various GIFs in an array or object that could be called only for a specific character? Can someone help nudge me with some ideas?

I was thinking something like:

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

then

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

UPDATED SOLUTION: Based on @runcom's suggestion, I set up an object thusly:

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'
    }

};

and updated the img.src attribute with this:

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;
    }

});

Here is the example fiddle: http://jsfiddle.net/z17LgyLn/1/.

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

You can create a Map(technically speaking an Object) for holding/storing the image path and then manipulate it to fetch the correct src,

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

And, On change event of select you can fetch the data from map by simply using,

 img.src=mapOfSource['key1']

For Other Alternatives see this Q/A.

edited May 23 '17 at 12:12

Community

1
1

answered Feb 16 '15 at 17:56

Runcorn

5,144
5
34
52

And also look this Q/A for different approaches : http://stackoverflow.com/questions/4246980/how-to-create-a-simple-map-using-javascript-jquery – Runcorn Feb 16 '15 at 18:00
Thanks, I fooled around with this idea and it worked for me. I'm updating my question with what I did to get it to work. Thanks. – user1837608 Feb 16 '15 at 20:16

Making a math game for my kids; how do I switch images based on their selection?

1 Answers1