我正在尝试使用jquery创建一个tic tac toe游戏。
这是我的代码:
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>
&#13;
alert
&#13;
当玩家获胜时,在将图像放入单元格之前,首先显示alert
消息。我想在显示from corenlp import *
corenlp = StanfordCoreNLP()
corenlp.parse("Every cat loves a dog")
消息之前显示图像。我应该怎么做?
答案 0 :(得分: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();
}
}
});
答案 1 :(得分:1)
您只需等待一段时间然后显示alert()
框,您可以setTimeout()
使用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;
}
&#13;
td {
height: 50px;
width: 50px;
font-size=30px;
}
img{
width: 50px;
height: 50px;
}
&#13;
<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>
&#13;