骰子动画jQuery

时间:2012-12-22 14:14:39

标签: javascript jquery animation

我正在构建一个yatzy游戏,我在其中调用一个shuffle函数来决定要显示哪个骰子。

$("#dice" + i).attr('src', 'img/Dice' + yatzyLogic.randomDice() + '.gif');

效果很好,但是当你掷骰子时我想要一个动画,比如 this 。但是,如果我应用这个,我必须重写几十个代码,而且我很懒:)。

有没有更简单的方法将这种东西应用到我的代码中?像一个快速显示不同图像的计时器功能?

2 个答案:

答案 0 :(得分:0)

http://pannonicaquartet.com/test/ej_010_R.html (404)

<script language="javascript" type="text/javascript">
var spnResultado, imgDado, numero, timerReference, timeoutReference;
function init(){
 try{
    imgDado = document.getElementById("imgDado");
    spnResultado = document.getElementById("spnResultado");
 }catch(er){
    if(console.log)console.log("Error in init: " + er);
    if(spnResultado)spnResultado.innerText = "Error in init: " + er;
 }
}

function btnStartOnClick(){
 try{
    if(!timerReference){
        numero = Math.floor(Math.random()*6) + 1;
        timerReference = setInterval(timerFunction,13);
        var rnd = Math.floor(Math.random()*901)+800;
        setTimeout(timeoutFunction,rnd);
        spnResultado.innerText = "rnd " + rnd;
    }
 }catch(er){
    if(console.log)console.log("Error in btnStartOnClick: " + er);
    spnResultado.innerText = "Error in btnStartOnClick: " + er;
 }
}

function timerFunction(){
 try{
    numero++;
    if(numero > 6) numero = 1;
    var offsetImagen = -(numero-1) * 80;
    imgDado.style.marginLeft = offsetImagen + "px";
 }catch(er){
    if(console.log)console.log("Error in fnTimer:\n" + er);
 }
}

function timeoutFunction(){
 try{
    clearInterval(timerReference);
    timerReference = null;
    spnResultado.innerText = "Número: " + numero;
 }catch(er){
    if(console.log)console.log("Error in fnTimer:\n" + er);
 }
}

答案 1 :(得分:0)

您可以为每个骰子值创建非循环动画GIF(,其最终帧将是课程的骰子值)...

不是说你应该这样做( 我实际上建议你不要 ),因为这只是一个伎俩..
但如果你说你不能/不愿意重新编码/重新考虑你当前的代码,那么我看不到不同的路线..