我正在構建一個yatzy遊戲,我稱之爲洗牌功能來決定顯示哪個骰子。骰子動畫jQuery
$("#dice" + i).attr('src', 'img/Dice' + yatzyLogic.randomDice() + '.gif');
它的偉大工程,但我希望有一個動畫,當你扔骰子,像this。但是如果我應用這個,我必須重新編寫幾十個代碼,而我很懶惰:)。
是否有更簡單的方法將這種事情應用於我的代碼?像一個快速顯示不同圖像的計時器功能?
我正在構建一個yatzy遊戲,我稱之爲洗牌功能來決定顯示哪個骰子。骰子動畫jQuery
$("#dice" + i).attr('src', 'img/Dice' + yatzyLogic.randomDice() + '.gif');
它的偉大工程,但我希望有一個動畫,當你扔骰子,像this。但是如果我應用這個,我必須重新編寫幾十個代碼,而我很懶惰:)。
是否有更簡單的方法將這種事情應用於我的代碼?像一個快速顯示不同圖像的計時器功能?
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);
}
}
謝謝@HMarioD – bangerang
您可以創建非循環GIF動畫每個骰子值(其最終框架將是骰子值ofcourse)...
不說你應該真的這樣做(我其實暗示你不要),因爲它只是一個招數。
但是,如果你說你不能/不願意重新編碼/重新因素你當前的代碼,那麼我不能看到不同的路線..
懶惰,你應該在寫代碼之前想過它,你現在必須重構 – charlietfl
以及我是一個新手,但我聽到你.. – bangerang
如果你不得不重寫大量的代碼,你的代碼*非常非常*錯誤。該插件有一個超級簡單和舒適的API。您只需調用該函數並將任何處理骰子滾動結果的函數作爲回調函數傳遞。 – ThiefMaster