在重新加载页面之前显示图像

Question

我正在尝试使用 jquery 创建井字游戏。

这是我的代码：

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 消息之前出现。我应该怎么做？

Answer 1

您必须要求您的代码在显示警告消息之前等待图像加载：

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

Answer 2

您只需稍等片刻，然后显示 alert() 框，您可以使用 setTimeout() by 100ms 例如，查看以下示例：

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>

在重新加载页面之前显示图像

Display image before reloading the page

javascript

jquery

tic-tac-toe