文章/答案/技术大牛

发布

社区首页 >问答首页 >瓷砖的转换是否错误？

问瓷砖的转换是否错误？
EN

Stack Overflow用户

提问于 2022-03-13 08:15:51

回答 2查看 60关注 0票数 0

我正在开发一个15益智游戏的版本，由于某种原因，点击瓷砖可以工作90%的时间，但有时单击瓷砖移动到相邻的白色(空)瓷砖并不能工作/做任何事情。

其设计是将网格视为数组，然后在需要时转换为坐标。问题是转换，但不确定确切的是哪个部分。

下面是HTML、CSS和JavaScript：

Html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <center>
            <div id="table" style="display: table;">
                <div id="row0" style="display: table-row;">
                    <div id="cell0" class="tile0" onClick="clickTile(0);"></div>
                    <div id="cell1" class="tile1" onClick="clickTile(1);"></div>
                    <div id="cell2" class="tile2" onClick="clickTile(2);"></div>
                    <div id="cell3" class="tile3" onClick="clickTile(3);"></div>
                </div>  
                <div id="row1" style="display: table-row;">
                    <div id="cell4" class="tile4" onClick="clickTile(4);"></div>
                    <div id="cell5" class="tile5" onClick="clickTile(5);"></div>
                    <div id="cell6" class="tile6" onClick="clickTile(6);"></div>
                    <div id="cell7" class="tile7" onClick="clickTile(7);"></div>
                </div>
                <div id="row2" style="display: table-row;">
                    <div id="cell8" class="tile8" onClick="clickTile(8);"></div>
                    <div id="cell9" class="tile9" onClick="clickTile(9);"></div>
                    <div id="cell10" class="tile10" onClick="clickTile(10);"></div>
                    <div id="cell11" class="tile11" onClick="clickTile(11);"></div>
                </div>
                <div id="row" style="display: table-row;">
                    <div id="cell12" class="tile12" onClick="clickTile(12);"></div>
                    <div id="cell13" class="tile13" onClick="clickTile(13);"></div>
                    <div id="cell14" class="tile14" onClick="clickTile(14);"></div>
                    <div id="cell15" class="tile15" onClick="clickTile(15);"></div>
                </div>
            </div>
            <br>
        </center>
        <script src="./script.js"></script>
    </body>
</html>

CSS：

.tile0, .tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8, .tile9, .tile10, .tile11, .tile12, .tile13, .tile14, .tile15, .tile16 {
    display: table-cell;
    width: 120px;
    height: 120px;
    border: 1px solid white;
    background-color: darkcyan;
    cursor: pointer;
}

.tile0:after {background-position: 0px 0px; content:"0";}
.tile1:after {background-position: -90px 0px; content:"1";}
.tile2:after {background-position: -180px 0px; content:"2";}
.tile3:after {background-position: -270px 0px; content:"3";}
.tile4:after {background-position: 0px -90px; content:"4";}
.tile5:after {background-position: -90px -90px; content:"5";}
.tile6:after {background-position: -180px -90px; content:"6";}
.tile7:after {background-position: -270px -90px; content:"7";}
.tile8:after {background-position: 0px -180px; content:"8";}
.tile9:after {background-position: -90px -180px; content:"9";}
.tile10:after {background-position: -180px -180px; content:"10";}
.tile11:after {background-position: -270px -180px; content:"11";}
.tile12:after {background-position: 0px -270px; content:"12";}
.tile13:after {background-position: -90px -270px; content:"13";}
.tile14:after {background-position: -180px -270px; content:"14";}
.tile15 {background: white; cursor: default;}

JavaScript代码：

let moves = 0;      // Tracks number of moves

function swapTiles(cell1, cell2) {
    try {
        let tempTile = document.getElementById(cell1).className;
        document.getElementById(cell1).className = document.getElementById(cell2).className;
        document.getElementById(cell2).className = tempTile;
    } catch(err){
        console.log(err)
    }

} 

function clickTile(cellID) {
    
    // Derive (X,Y) coords
    let row = ((cellID-1) % 4);
    let column = Math.ceil((cellID-1) / 4);

    // Get the tile that is in the cell
    let tile = document.getElementById("cell"+cellID).className;

    if(tile != "tile15") {
        //check if the empty tile is on the right
        if(column < 3) {
            if(document.getElementById("cell"+(cellID+1)).className=="tile15") {
                swapTiles("cell"+cellID, "cell"+(cellID+1));
                // Incriment move count
                moves = moves += 1;
                return;
            }
        }

        //check if the empty tile is on the left
        if(column > 0) {
            if(document.getElementById("cell"+(cellID-1)).className=="tile15") {
                swapTiles("cell"+cellID,"cell"+(cellID-1));
                // Incriment move count
                moves = moves += 1;
                return;
            }
        }

        //check if the empty tile is above
        if(row > 0) {
            if(document.getElementById("cell"+(cellID-4)).className=="tile15") {
                swapTiles("cell"+cellID, "cell"+(cellID-4));
                // Increment move count
                moves = moves += 1;
                return;
            }
        }

        //check if the empty tile is below
        if(row < 3) {
            if(document.getElementById("cell"+(cellID+4)).className=="tile15") {
                swapTiles("cell"+cellID, "cell"+(cellID+4));
                // Incriment move count
                moves = moves += 1;
                return;
            }
        }
    }
}

有可能是因为让吗？但它不可能，因为它的作用域是函数，而且它在大部分情况下都在工作。

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-03-13 08:33:35

计算row和column值的方法是错误的：

你不应该减去1，因为在你的ceil

row中最小的cellID值是0，而不是1。需要floor的

，而不是floor和column应该反转

。

它应该是：

let column = cellID % 4;
let row = Math.floor(cellID / 4);

票数 2

Stack Overflow用户

发布于 2022-03-13 08:41:35

行和列公式是错误的。有关更正的代码，请参阅下面。

let moves = 0;      // Tracks number of moves

function swapTiles(cell1, cell2) {
    try {
        let tempTile = document.getElementById(cell1).className;
        document.getElementById(cell1).className = document.getElementById(cell2).className;
        document.getElementById(cell2).className = tempTile;
    } catch(err){
        console.log(err)
    }

} 

function clickTile(cellID) {
    
    // Derive (X,Y) coords
    let row = Math.floor((cellID) / 4);
    let column = (cellID) % 4;
    console.log(row, column)

    // Get the tile that is in the cell
    let tile = document.getElementById("cell"+cellID).className;

    if(tile != "tile15") {
        //check if the empty tile is on the right
        if(column < 3) {
            if(document.getElementById("cell"+(cellID+1)).className=="tile15") {
                swapTiles("cell"+cellID, "cell"+(cellID+1));
                // Incriment move count
                moves = moves += 1;
                return;
            }
        }

        //check if the empty tile is on the left
        if(column > 0) {
            if(document.getElementById("cell"+(cellID-1)).className=="tile15") {
                swapTiles("cell"+cellID,"cell"+(cellID-1));
                // Incriment move count
                moves = moves += 1;
                return;
            }
        }

        //check if the empty tile is above
        if(row > 0) {
            if(document.getElementById("cell"+(cellID-4)).className=="tile15") {
                swapTiles("cell"+cellID, "cell"+(cellID-4));
                // Increment move count
                moves = moves += 1;
                return;
            }
        }

        //check if the empty tile is below
        if(row < 3) {
            if(document.getElementById("cell"+(cellID+4)).className=="tile15") {
                swapTiles("cell"+cellID, "cell"+(cellID+4));
                // Incriment move count
                moves = moves += 1;
                return;
            }
        }
    }
}

.tile0, .tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8, .tile9, .tile10, .tile11, .tile12, .tile13, .tile14, .tile15, .tile16 {
    display: table-cell;
    width: 120px;
    height: 120px;
    border: 1px solid white;
    background-color: darkcyan;
    cursor: pointer;
}

.tile0:after {background-position: 0px 0px; content:"0";}
.tile1:after {background-position: -90px 0px; content:"1";}
.tile2:after {background-position: -180px 0px; content:"2";}
.tile3:after {background-position: -270px 0px; content:"3";}
.tile4:after {background-position: 0px -90px; content:"4";}
.tile5:after {background-position: -90px -90px; content:"5";}
.tile6:after {background-position: -180px -90px; content:"6";}
.tile7:after {background-position: -270px -90px; content:"7";}
.tile8:after {background-position: 0px -180px; content:"8";}
.tile9:after {background-position: -90px -180px; content:"9";}
.tile10:after {background-position: -180px -180px; content:"10";}
.tile11:after {background-position: -270px -180px; content:"11";}
.tile12:after {background-position: 0px -270px; content:"12";}
.tile13:after {background-position: -90px -270px; content:"13";}
.tile14:after {background-position: -180px -270px; content:"14";}
.tile15 {background: white; cursor: default;}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <center>
            <div id="table" style="display: table;">
                <div id="row0" style="display: table-row;">
                    <div id="cell0" class="tile0" onClick="clickTile(0);"></div>
                    <div id="cell1" class="tile1" onClick="clickTile(1);"></div>
                    <div id="cell2" class="tile2" onClick="clickTile(2);"></div>
                    <div id="cell3" class="tile3" onClick="clickTile(3);"></div>
                </div>  
                <div id="row1" style="display: table-row;">
                    <div id="cell4" class="tile4" onClick="clickTile(4);"></div>
                    <div id="cell5" class="tile5" onClick="clickTile(5);"></div>
                    <div id="cell6" class="tile6" onClick="clickTile(6);"></div>
                    <div id="cell7" class="tile7" onClick="clickTile(7);"></div>
                </div>
                <div id="row2" style="display: table-row;">
                    <div id="cell8" class="tile8" onClick="clickTile(8);"></div>
                    <div id="cell9" class="tile9" onClick="clickTile(9);"></div>
                    <div id="cell10" class="tile10" onClick="clickTile(10);"></div>
                    <div id="cell11" class="tile11" onClick="clickTile(11);"></div>
                </div>
                <div id="row" style="display: table-row;">
                    <div id="cell12" class="tile12" onClick="clickTile(12);"></div>
                    <div id="cell13" class="tile13" onClick="clickTile(13);"></div>
                    <div id="cell14" class="tile14" onClick="clickTile(14);"></div>
                    <div id="cell15" class="tile15" onClick="clickTile(15);"></div>
                </div>
            </div>
            <br>
        </center>
        <script src="./script.js"></script>
    </body>
</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71454972

复制

相似问题

问瓷砖的转换是否错误？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问瓷砖的转换是否错误？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问瓷砖的转换是否错误？
EN