HTML5 shell game

Question

I'm creating a game, where there are three cups that need to shuffle. I created the HTML and CSS for the game but I'm stuck at moving the three cups with Javascript.

The problem is that two cups need to switch with each other, and having the shuffle effect also.(that you see the cups moving effect) I already found some information about shuffling the divs, but then you don't see the shuffeling effect.. I hope that someone can help me.

This is the code I tried, which worked but ofcource doesn't have the effect what I need.

$(document).ready(function(){
$("#start").bind('click', shuffle);        
function shuffle(){
    $(".cupBox").each(function(){
        var divs = $(this).find('div');
        for(var i = 0; i < divs.length; i++) $(divs[i]).remove();            
        //the fisher yates algorithm, from http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array
        var i = divs.length;
        if ( i == 0 ) return false;
        while ( --i ) {
           var j = Math.floor( Math.random() * ( i + 1 ) );
           var tempi = divs[i];
           var tempj = divs[j];
           divs[i] = tempj;
           divs[j] = tempi;
         }
        for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);
    });                    
}
});

Link to JsFiddle

Thanks in advance!

Please include how the "shuffling" effect should look like, as in what you are trying to achieve. — Clemens Himmer, Jan 15 '16 at 08:15
I would be happy to just see them move, and that I can adjust the speed of the movement. For example; that you can see cup 1 and cup 3 moving with each other. Doesn't have to be a fancy effect while moving. :) because now they just take the places of each other. And I don't know how I could add the effect to it. — Jordy Van Camp, Jan 15 '16 at 08:20
I've just seen you didn't include jQuery and also bound a inline click listener + bound one with jQuery. Fixed that [here](https://jsfiddle.net/Tarekis/vvrygpfe/), but first your problem is you don't want to shuffle just once, but multiple times, you know like IRL. And for the animation you can try fiddling around with [this](http://stackoverflow.com/a/25387839/3880255). I'm afraid your question is a little broad as you miss some core elements to the desired behaviour. — Clemens Himmer, Jan 15 '16 at 08:28

Poul Kruijt · Answer 1 · 2016-01-15T08:44:54.617

One way to do it is to make the cups position relative, and put a css animation on the right and left position. Then you just give one cup the position of the other cup, and the other way around.

It will look something like this:

JS:

$(document).ready(function(){
    $("#start").on('click', shuffle);        

});

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(){
   var cups = $(".cupBox").find('.cup');
   var cup1 = $(cups[getRandomInt(0,cups.length - 1)]);
   var cup2 = $(cups.not(cup1)[getRandomInt(0,cups.length - 2)]);
   var cup1Offset = cup1.offset();
   var cup2Offset = cup2.offset();
   cup1.offset(cup2Offset);
   cup2.offset(cup1Offset);                   
}

CSS:

.cup {
  position : relative;
  left : 0;
  right : 0;
  transition : all linear 2s;
}

I've updated your jsFiddle as demonstration

addendum

But because you might want multiple animations, a jQuery animation might be more suitable because you can stop this animation in its tracks. If that's what you want, you can try fiddling around with the jQuery stop function and the jQuery animate function:

That will result in something like this. The transition is removed again from the css:

JS:

$(document).ready(function(){
    $("#start").bind('click', shuffle);        

});

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(){
   //get all the cups!
   var cups = $(".cupBox").find('.cup');

   //get a random cup depending on cup length
   var cup1 = $(cups[getRandomInt(0,cups.length - 1)]);

   //get -another- random cup, and make sure it is not the same
   var cup2 = $(cups.not(cup1)[getRandomInt(0,cups.length - 2)]);

   //stop the animations and skip to the end, otherwise you might get the wrong offset
   cup1.stop(false, true);
   cup2.stop(false, true);

   //obtain both offsets
   var cup1Offset = cup1.offset();
   var cup2Offset = cup2.offset();

   //switch positions while animating for 500ms
   cup1.animate({left: '+=' + (cup2Offset.left - cup1Offset.left)}, 500);
   cup2.animate({left: '+=' + (cup1Offset.left - cup2Offset.left)}, 500);                 
}

CSS:

.cup {
  position : relative;
  left : 0;
  right : 0;
}

And here is an updated jsFiddle

I was bored and made [some kind of 'levels' thing](https://jsfiddle.net/pbjtrvxq/), it's nothing special (it shows level in console log and there should ofcourse also be a ball contained to click, which I'm not having time for haha). — Daan, Jan 15 '16 at 14:53

HTML5 shell game

1 Answers1