ページをリロードする前にイメージを表示する

jqueryを使ってtic tac toeゲームを作成しようとしています。画像をセルに入れされる前に、ページをリロードする前にイメージを表示する

プレイヤーがalertメッセージを受賞

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メッセージが表示される前に画像が表示されます。どうすればいいですか？

出典

2016-07-25 Narayanasami N

user3845646 @私はjqueryの中でそれを必要とする同じページ –

あなただけ怒鳴る例を確認し、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

それは問題ではありません。セルがクリックされると、**警告**が表示される前に画像**を表示します。 –

まさに私のスニペットで何が起こるのか、それでなぜ私は死んだ時間を追加したのですか...再確認してください。 –

ええ、それを見ました。あなたの時間を無駄にして申し訳ありません。 –

あなたが画像を待つためにあなたのコードを依頼する必要があり

は警告メッセージを表示する前にロードする：あなたは勝利のテストを行う場所

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で動作しています。あなたがしたようにイメージを文字列で宣言するのではなく、私はDOMを使って 'onload'プロパティにアクセスできました。他のすべては同じです。 – HarmonicTons

より完全な例で私の答えを編集しました。多分それは私が何を意味したのか理解する助けになるでしょう。 – HarmonicTons

ページをリロードする前にイメージを表示する

答えて

関連する問題