重新加載頁面之前顯示圖像

我想創建一個使用jquery的tic tac腳趾遊戲。重新加載頁面之前顯示圖像

這是我的代碼：

var i, j, m, k; 
 
$(document).ready(function() { 
 
    i = 0; 
 
    m = new Array(3); 
 
    for (var l = 0; l < 3; l++) { 
 
    m[l] = new Array(3); 
 
    for (k = 0; k < 3; k++) 
 
     m[l][k] = null; 
 
    } 
 
}); 
 
$(".game").click(function() { 
 

 
    var img; 
 
    var col = $(this).index(); 
 
    var row = $(this).closest('tr').index(); 
 
    if (i % 2 == 0) { 
 
    img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe"/>'; 
 
    m[row][col] = 'O'; 
 
    } else { 
 
    img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeX.jpe"/>'; 
 
    m[row][col] = 'X'; 
 
    } 
 
    $(this).prepend(img); 
 
    $(this).off(); 
 
    i++; 
 
    var col = $(this).index(); 
 
    var row = $(this).closest('tr').index(); 
 
    if (i <= 8) { 
 
    if (winhor(row, col)) { 
 
     alert(m[row][col] + " Won!"); 
 
     location.reload(); 
 
    } 
 
    if (winver(row, col)) { 
 
     alert(m[row][col] + " Won!"); 
 
     location.reload(); 
 
    } 
 
    if (windiag(row, col)) { 
 
     alert(m[row][col] + " Won!Diag"); 
 
     location.reload(); 
 
    } 
 
    } else { 
 
    alert("Draw"); 
 
    location.reload(); 
 
    } 
 
}); 
 

 
function winhor(row, col) { 
 
    var sym = m[row][col]; 
 
    var val; 
 
    var check = true; 
 
    for (val = 0; val < 3; val++) { 
 
    if (sym != m[row][val]) { 
 
     check = false; 
 
     break; 
 
    } 
 
    } 
 
    return check; 
 
} 
 

 
function winver(row, col) { 
 
    var sym = m[row][col]; 
 
    var val; 
 
    var check = true; 
 
    for (val = 0; val < 3; val++) { 
 
    if (sym != m[val][col]) { 
 
     check = false; 
 
     break; 
 
    } 
 
    } 
 
    return check; 
 
} 
 

 
function windiag(row, col) { 
 
    var sym = m[row][col]; 
 
    var valr, valc; 
 
    var check = true; 
 
    if ((row != col) && (row + col != 2)) { 
 
    //alert("not 0 or 3 or 2"); 
 
    return false; 
 
    } else if (row == col) { 
 
    for (valr = 0, valc = 0; valr < 3; valr++) { 
 
     if (sym != m[valr][valc]) { 
 
     //alert("not equal at "+valr+" "+valc); 
 
     check = false; 
 
     break; 
 
     } 
 
     valc++; 
 
    } 
 
    } 
 
    if (row + col == 2) { 
 
    check = true; 
 
    for (valr = 0, valc = 2; valr < 3; valr++) { 
 
     if (sym != m[valr][valc]) { 
 
     //alert("not equal at "+valr+" "+valc); 
 
     check = false; 
 
     break; 
 
     } 
 
     valc--; 
 
    } 
 
    } 
 
    return check; 
 
}

td { 
 
    height: 100px; 
 
    width: 50px; 
 
    font-size=30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<table border="1"> 
 
    <tr> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    </tr> 
 
</table>

當玩家贏得alert消息放置在小區前的圖像首先顯示。我想要在顯示alert消息之前顯示圖像。我應該怎麼做？

來源

2016-07-25 Narayanasami N

@ user3845646重新加載在同一頁 –

你剛纔等待了一會兒，然後顯示alert()中，您可以通過100ms例如使用setTimeout()，檢查波紋管的例子：

setTimeout(function(){ 
    if (winhor(row, col)) { 
    alert(m[row][col] + " Won!"); 
    location.reload(); 
    } 
    if (winver(row, col)) { 
    alert(m[row][col] + " Won!"); 
    location.reload(); 
    } 
    if (windiag(row, col)) { 
    alert(m[row][col] + " Won!Diag"); 
    location.reload(); 
    } 
},100)

希望這幫助。

var i, j, m, k; 
 
$(document).ready(function() { 
 
    i = 0; 
 
    m = new Array(3); 
 
    for (var l = 0; l < 3; l++) { 
 
    m[l] = new Array(3); 
 
    for (k = 0; k < 3; k++) 
 
     m[l][k] = null; 
 
    } 
 
}); 
 
$(".game").click(function() { 
 

 
    var img; 
 
    var col = $(this).index(); 
 
    var row = $(this).closest('tr').index(); 
 
    if (i % 2 == 0) { 
 
    img = '<img src="http://hhscp.org/programming/static/exemplars/tictactoe/X.png"/>'; 
 
    m[row][col] = 'O'; 
 
    } else { 
 
    img = '<img src="http://www.dreamincode.net/forums/uploads/post-97990-1260678636.png"/>'; 
 
    m[row][col] = 'X'; 
 
    } 
 
    $(this).prepend(img); 
 
    $(this).off(); 
 
    i++; 
 
    var col = $(this).index(); 
 
    var row = $(this).closest('tr').index(); 
 

 
    if (i <= 8) { 
 
    setTimeout(function(){ 
 
     if (winhor(row, col)) { 
 
     alert(m[row][col] + " Won!"); 
 
     location.reload(); 
 
     } 
 
     if (winver(row, col)) { 
 
     alert(m[row][col] + " Won!"); 
 
     location.reload(); 
 
     } 
 
     if (windiag(row, col)) { 
 
     alert(m[row][col] + " Won!Diag"); 
 
     location.reload(); 
 
     } 
 
    },100); 
 
    } else { 
 
    alert("Draw"); 
 
    location.reload(); 
 
    } 
 
}); 
 

 
function winhor(row, col) { 
 
    var sym = m[row][col]; 
 
    var val; 
 
    var check = true; 
 
    for (val = 0; val < 3; val++) { 
 
    if (sym != m[row][val]) { 
 
     check = false; 
 
     break; 
 
    } 
 
    } 
 
    return check; 
 
} 
 

 
function winver(row, col) { 
 
    var sym = m[row][col]; 
 
    var val; 
 
    var check = true; 
 
    for (val = 0; val < 3; val++) { 
 
    if (sym != m[val][col]) { 
 
     check = false; 
 
     break; 
 
    } 
 
    } 
 
    return check; 
 
} 
 

 
function windiag(row, col) { 
 
    var sym = m[row][col]; 
 
    var valr, valc; 
 
    var check = true; 
 
    if ((row != col) && (row + col != 2)) { 
 
    //alert("not 0 or 3 or 2"); 
 
    return false; 
 
    } else if (row == col) { 
 
    for (valr = 0, valc = 0; valr < 3; valr++) { 
 
     if (sym != m[valr][valc]) { 
 
     //alert("not equal at "+valr+" "+valc); 
 
     check = false; 
 
     break; 
 
     } 
 
     valc++; 
 
    } 
 
    } 
 
    if (row + col == 2) { 
 
    check = true; 
 
    for (valr = 0, valc = 2; valr < 3; valr++) { 
 
     if (sym != m[valr][valc]) { 
 
     //alert("not equal at "+valr+" "+valc); 
 
     check = false; 
 
     break; 
 
     } 
 
     valc--; 
 
    } 
 
    } 
 
    return check; 
 
}

td { 
 
    height: 50px; 
 
    width: 50px; 
 
    font-size=30px; 
 
} 
 

 
img{ 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<table border="1"> 
 
    <tr> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    <td class="game"></td> 
 
    </tr> 
 
</table>

來源

2016-07-25 15:53:02

不，這不是問題。當單擊一個單元格時，我想在顯示'alert'之前顯示圖像**。 –

這正是我的代碼片段中發生的事情，也是爲什麼我添加了一段時間的死亡時間...請再次檢查 –

是的，看到了它。對不起，浪費你的時間。 –

你要問你的代碼，以等待圖像顯示警告信息之前加載：

var img = document.createElement("img"); 
img.src = "file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe"; 
img.onload = function() { 
    checkIfYouWon(); 
} 
$(this).prepend(img);

的checkIfYouWon()功能是你做勝利的測試。下面是代碼：

$(".game").click(function() { 

    var img = document.createElement("img"); 
    img.onload = function() { 
     checkIfYouWon(); 
    } 
    var col = $(this).index(); 
    var row = $(this).closest('tr').index(); 
    if (i % 2 == 0) { 
    img.src = "file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe"; 
    m[row][col] = 'O'; 
    } else { 
    img.src = "file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeX.jpe"; 
    m[row][col] = 'X'; 
    } 
    $(this).prepend(img); 
    $(this).off(); 
    i++; 
    function checkIfYouWon(){ 
     var col = $(this).index(); 
     var row = $(this).closest('tr').index(); 
     if (i <= 8) { 
     if (winhor(row, col)) { 
      alert(m[row][col] + " Won!"); 
      location.reload(); 
     } 
     if (winver(row, col)) { 
      alert(m[row][col] + " Won!"); 
      location.reload(); 
     } 
     if (windiag(row, col)) { 
      alert(m[row][col] + " Won!Diag"); 
      location.reload(); 
     } 
     } else { 
     alert("Draw"); 
     location.reload(); 
     } 
    } 
});

來源

2016-07-25 15:35:12 HarmonicTons

我需要它在jQuery中。 –

這是在jQuery中工作。我沒有像你那樣用一個字符串聲明圖像，而是使用DOM來訪問'onload'屬性。其他一切都是一樣的。 – HarmonicTons

我用一個更完整的例子編輯了我的答案。也許它會幫助你理解我的意思。 – HarmonicTons

重新加載頁面之前顯示圖像

回答

相關問題