Question

单击后，我试图更改单元格上的img，但是这种情况不会发生，解释和解决方案都很好。

我手动将gBoard [0] [0] .isFlagged设置为true，然后单击该单元格，img不变。

html

<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <link href="css/game.css" rel="stylesheet">
</head>
<body onload="init()">
    <h1>Welcome to minesweeper</h1>
    <div class="board-container"></div><button class="restart-Btn" onclick="restartGame(this)">restartGame</button> 
    <script src="js/utils.js">
    </script> 
    <script src="js/game.js">
    </script>
</body>
</html>

脚本

const TILE = '<img src="/img/tile.png" >'
const TWO = '<img src="/img/2.png" >'

function printMat(mat, selector) {
    var strHTML = '<table border="1"><tbody>';
    for (var i = 0; i < mat.length; i++) {
        strHTML += '<tr>';
        for (var j = 0; j < mat[0].length; j++) {
            var className = `cell-${i}-${j}`
            strHTML +=
                `<td class="${className}" 
              onclick="cellClicked(this, ${i}, ${j})">
                <img src="${mat[i][j].image}" >
            </td>`
        }
        strHTML += '</tr>'
    }
    strHTML += '</tbody></table>';
    var elContainer = document.querySelector(selector);
    elContainer.innerHTML = strHTML;
}

function createBoard(size) {
    var board = []
    for (var i = 0; i < size; i++) {
        board[i] = []
        for (var j = 0; j < size; j++) {
            board[i][j] = creatCell()
        }
    }
    return board
}

function creatCell() {
    return {
        isBomb: false,
        isFlagged: false,
        isClicked: false,
        isOpen: false,
        image: "/img/tile.png"
    }
}
function cellClicked(elCell, i, j) {

    if (gBoard[i][j].image === TILE && gBoard[i][j].isFlagged === true) {

        elCell.innerHTML = TWO
    }
}

Answer 1

如果签出cellClicked()函数，则第一次比较不正确。 TILE包含一个带有整个<img>元素的字符串，但是gBoard[i][j].image只是src属性的值，因此，此比较：

gBoard[i][j].image === TILE

我真的在比较：

'<img src="/img/tile.png" >' === '/img/tile.png'

永远不会是真的。

我通过设置一个新变量tileSrc使它起作用：

const TILE = '<img src="/img/tile.png" >'
const tileSrc = '/img/tile.png';

然后在cellClicked()中的条件中进行测试：

if (gBoard[i][j].image === tileSrc && gBoard[i][j].isFlagged === true)

您可以看到它在这里工作：Tiles App

Answer 2

确保在控制台中正在调用该函数。

没有HTML，我不能确定这是问题所在，但是图像没有更新，但是后来我发现必须通过添加时间戳来“强制刷新”图像。

也许尝试：

function cellClicked(elCell, i, j) {
    if (gBoard[i][j].image === TILE && gBoard[i][j].isFlagged === true) {
        var timestamp = new Date().getTime();
        elCell.innerHTML = TWO + '?' + timestamp
    }
}

试图更改单元格图像，一旦单击，单击后不会更改

2 个答案: