HTML5 shell遊戲

Question

我正在創建一個遊戲，其中有三個需要洗牌的杯子。 我爲遊戲創建了HTML和CSS，但我一直在用Javascript移動三個杯子。

問題是兩個杯子需要互相切換，並且還有洗牌效果（你看到杯子移動的效果）我已經找到了關於洗牌div的一些信息，但是你沒有看到shuffeling效果.. 我希望有人能幫助我。

這是我試過的代碼，雖然工作但ofcource沒有我需要的效果。

$(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); 
    });      
} 
}); 

鏈接JsFiddle

提前感謝！

Answer 1

做到這一點的一種方法是使杯子的位置相對，並將右側和左側位置的CSS動畫。然後，你只要給另一個杯子的位置一杯，反之亦然。

它會是這個樣子：

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

我已經更新了你的jsFiddle作爲示範

編

但是，因爲你可能需要多個動畫，jQuery的動畫可能更適合，因爲你可以停止這個動畫在它的軌道。如果這就是你想要的，你可以嘗試擺弄jQuery stop函數和jQuery animate函數：

這將導致類似這樣的事情。

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

，這裏是一個更新jsFiddle