javascript - Can't get colour of div to change using loop / switch statement combination -
i'm trying make simple memory game, shape flashes on screen x number of times , user has remember colour.
i'm trying use loop combined switch statement change colour on each iteration. however, colour not change , i'm stuck.
can tell me i'm doing wrong?
code follows:
$(document).ready(function() { var colorarray = []; // stores colours have been generated var changecolour = function(){ var generateshape = math.floor(math.random() * 5) // generates number 0-4 switch (generateshape){ case 0: $('#shapediv').css('background-color','black'); $('#shapediv').fadeout(500); colorarray.push('b'); break; case 1: $('#shapediv').css('background-color','red'); $('#shapediv').fadeout(500); colorarray.push('r'); break; case 2: $('#shapediv').css('background-color','yellow'); $('#shapediv').fadeout(500); colorarray.push('y'); break; case 3: $('#shapediv').css('background-color','blue'); $('#shapediv').fadeout(500); colorarray.push('bl'); break; case 4: $('#shapediv').css('background-color','pink'); $('#shapediv').fadeout(500); colorarray.push('p'); break; }; } $('#subbutton').click(function(){ // make shape appear 5 times random colour while (colorarray.length<5){ $('#shapediv').fadein(500); changecolour(); }; }) });
the problem is, while loop runs , creates random numbers. fadein
, fadeout
asynchron. loop done in far under 500ms , generateshape
last generated value used in switch
.
i cant think of easy change code avoiding this. think have work out other solution asynchron nature of annimations in mind.
Comments
Post a Comment