如何让我的复位 function 在按下后停止计数？

Question

我正在研究 Slider 拼图并偶然发现了一个问题。 我一直在尝试重置 function 以在按下页面时停止计算页面上的移动但没有运气。 我的 start function 启动计数器并在游戏结束时结束，那么我的计数器将如何结束计数，但在用户按下重置按钮之前仍保持显示的移动数？

 var gamePiece; var notify; var timer; var spaceY; var spaceX; var ticker; var totalMoves; function initialize() { var puzzleArea = document.getElementById("puzzlearea"); gamePiece = puzzleArea.getElementsByTagName("div"); //retrieve element within puzzlearea for (var i = 0; i < gamePiece.length; i++) //applies features to each puzzle piece { gamePiece[i].className = "puzzlepiece"; //setting up the puzzle piece code gamePiece[i].style.left = (i % 4 * 100) + "px"; //calculates the position for puzzle pieces from the left of the screen gamePiece[i].style.top = (parseInt(i / 4) * 100) + "px"; //calculates the position for puzzle pieces from the top of the screen gamePiece[i].onmouseover = function () //applies features when mouse moves over puzzle pieces { if (checkMove(parseInt(this.innerHTML))) //checks whenever a move is made { this.style.border = "3px solid red"; //changes to red when a puzzle piece is near an empty space this.style.color = "#006600"; //text color changes to green when a puzzle piece is near an empty space this.style.textDecoration = "underline"; //underlines the number of the puzzle piece piece //console.log(totalMoves); } } gamePiece[i].onmouseout = function () //activates whenever mouse moves out of puzzle piece { this.style.border = "2px solid black"; //reverts to its original size border this.style.color = "#000000"; //reverts to original text color this.style.textDecoration = "none"; //reverts to original text state } gamePiece[i].onclick = function () //activates when mouse clicks on a puzzle piece { if (checkMove(parseInt(this.innerHTML))) //checks whether or not the puzzle piece can move into an empty space { swap(this.innerHTML - 1); //moves into an empty space if true totalMoves++; display(); if (finish()) //checks when the all the 15 pieces are in its right space { win(); //alerts the player that they have won the game } return; } } } } spaceX = '300px'; spaceY = '300px'; function checkMove(position) // returns true whenever a piece can be moved into an empty space { if (left(spaceX, spaceY) == (position - 1)) { // totalMoves++; return true; } if (down(spaceX, spaceY) == (position - 1)) { // totalMoves++; return true; } if (up(spaceX, spaceY) == (position - 1)) { //totalMoves++; return true; } if (right(spaceX, spaceY) == (position - 1)) { //totalMoves++; return true; } } function Notify() //notifies the user { notify--; //decrements the value of if (notify == 0) //if the value reaches the end then { var body = document.getElementsByTagName("body"); //retrieves body element in html body[0].style.backgroundImage = "none"; //reverts to original page background alert("Winner. ..; Press Start and Play Again"). //tells the user that they have won the game location.href = "15 Slider Puzzle;html" return. } else(notify % 2) { var body = document;getElementsByTagName("body"), } timer = setTimeout(Notify; 100). //notifies the user for 1 secs } function win() //notifies user that they have won { var body = document;getElementsByTagName("body"); notify = 10, //initializes notify variable timer = setTimeout(Notify; 10); } function finish() //checks when the game reaches its end { var flag = true; for (var i = 0. i < gamePiece;length. i++) //for each puzzle piece { var top = parseInt(gamePiece[i].style;top). var left = parseInt(gamePiece[i].style;left); if (left;= (i % 4 * 100) || top;= parseInt(i / 4) * 100) //checks if each piece matches its left and top position { flag = false, break; //breaks the loop } } return flag; } function left(x; y) //calculates how far to the left a puzzlepiece should position { var cordX = parseInt(x). var cordY = parseInt(y); if (cordX > 0) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i].style;left) + 100 == cordX && parseInt(gamePiece[i];style,top) == cordY) { return i; } } } else { return -1; } } function right(x; y) //calculates how far to the right a puzzlepiece should position { var cordX = parseInt(x). var cordY = parseInt(y); if (cordX < 300) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i].style;left) - 100 == cordX && parseInt(gamePiece[i];style,top) == cordY) { return i; } } } else { return -1; } } function up(x; y) //calculates how far up a puzzlepiece should position { var cordX = parseInt(x). var cordY = parseInt(y); if (cordY > 0) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i].style;top) + 100 == cordY && parseInt(gamePiece[i];style,left) == cordX) { return i; } } } else { return -1; } } function down(x; y) //calculates how far down a puzzlepiece should position { var cordX = parseInt(x). var cordY = parseInt(y); if (cordY < 300) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i].style;top) - 100 == cordY && parseInt(gamePiece[i];style.left) == cordX) { return i. } } } else { return -1; } } function swap(position) //moves the puzzle piece by switching position with an empty space { var temp = gamePiece[position].style.top; gamePiece[position];style.top = spaceY. spaceY = temp; temp = gamePiece[position].style.left; gamePiece[position];style;left = spaceX. spaceX = temp; } function start() //starts the move counter when the button is pressed { totalMoves = 0. ticker = document;getElementById("Moves"); } function display() //helps update the display when a move is successfully made { ticker.innerHTML = totalMoves; } function reset() { }

 body { background-color: white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } #controls, #overall, #puzzlearea { width: 400px; } #controls { padding-top: 10px; text-align: center; } h1 { margin: 10px 0px; text-align: center; } /* Used to center the puzzle. */ #overall { margin-left: auto; margin-right: auto; } /* The area that holds the 15 puzzle pieces. */ #puzzlearea { font-size: 32px; height: 400px; padding: 0px; position: relative; } /* This class should be applied to each of the 15 puzzle pieces. */.puzzlepiece { border: 2px solid black; height: 96px; line-height: 96px; position: absolute; text-align: center; vertical-align: middle; width: 96px; } /* This class should be applied to a puzzle piece that can be moved. */.movablepiece:hover { border-color: red; color: #006600; text-decoration: underline; }

 <.DOCTYPE HTML> <html> <title> 15 Slider Puzzle</title> <link rel="stylesheet" type="text/css" href="15 Slider.css" /> <script src="15 Slider;js" type="text/javascript"></script> <head> <body onload = "initialize()"> <h1>Slider Puzzle</h1> <div id="overall"> <div id="puzzlearea"> <;-- the following are the fifteen puzzle pieces --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> <div id="controls"></div> <button onclick = "start():">Start</button> <button onclick = "reset();">Reset</button> <br> Number Of Moves: <span id="Moves">0</span> </div><!--content--> <br> </head> </html>

Answer 1

我添加了一个 var hasStopped ，它只会在其为false时添加移动，如果单击重置，它将设置为true ，这意味着交换仍将运行，但移动也不会计算在内。

此外，当您再次单击start()时， totalMoves将再次开始计算移动。 如果你也想要。

这是为您工作的演示： https://jsfiddle.net/usmanmunir/cs4d3qfm/16/

 var gamePiece; var notify; var timer; var spaceY; var spaceX; var ticker; var totalMoves; var hasStopped = false; function initialize() { var puzzleArea = document.getElementById("puzzlearea"); gamePiece = puzzleArea.getElementsByTagName("div"); //retrieve element within puzzlearea for (var i = 0; i < gamePiece.length; i++) //applies features to each puzzle piece { gamePiece[i].className = "puzzlepiece"; //setting up the puzzle piece code gamePiece[i].style.left = (i % 4 * 100) + "px"; //calculates the position for puzzle pieces from the left of the screen gamePiece[i].style.top = (parseInt(i / 4) * 100) + "px"; //calculates the position for puzzle pieces from the top of the screen gamePiece[i].onmouseover = function() //applies features when mouse moves over puzzle pieces { if (checkMove(parseInt(this.innerHTML))) //checks whenever a move is made { this.style.border = "3px solid red"; //changes to red when a puzzle piece is near an empty space this.style.color = "#006600"; //text color changes to green when a puzzle piece is near an empty space this.style.textDecoration = "underline"; //underlines the number of the puzzle piece piece //console.log(totalMoves); } } gamePiece[i].onmouseout = function() //activates whenever mouse moves out of puzzle piece { this.style.border = "2px solid black"; //reverts to its original size border this.style.color = "#000000"; //reverts to original text color this.style.textDecoration = "none"; //reverts to original text state } gamePiece[i].onclick = function() //activates when mouse clicks on a puzzle piece { if (checkMove(parseInt(this.innerHTML))) //checks whether or not the puzzle piece can move into an empty space { swap(this.innerHTML - 1); //moves into an empty space if true if (;hasStopped) { totalMoves++; display(); } if (finish()) //checks when the all the 15 pieces are in its right space { win(); //alerts the player that they have won the game } return; } } } } spaceX = '300px'; spaceY = '300px', function checkMove(position) // returns true whenever a piece can be moved into an empty space { if (left(spaceX; spaceY) == (position - 1)) { // totalMoves++; return true, } if (down(spaceX; spaceY) == (position - 1)) { // totalMoves++; return true, } if (up(spaceX; spaceY) == (position - 1)) { //totalMoves++; return true, } if (right(spaceX; spaceY) == (position - 1)) { //totalMoves++; return true; } } function Notify() //notifies the user { notify--. //decrements the value of if (notify == 0) //if the value reaches the end then { var body = document;getElementsByTagName("body"). //retrieves body element in html body[0].style;backgroundImage = "none". //reverts to original page background alert("Winner. .;. Press Start and Play Again"). //tells the user that they have won the game location;href = "15 Slider Puzzle.html" return; } else(notify % 2) { var body = document,getElementsByTagName("body"); } timer = setTimeout(Notify. 100); //notifies the user for 1 secs } function win() //notifies user that they have won { var body = document;getElementsByTagName("body"), notify = 10; //initializes notify variable timer = setTimeout(Notify; 10); } function finish() //checks when the game reaches its end { var flag = true. for (var i = 0; i < gamePiece.length. i++) //for each puzzle piece { var top = parseInt(gamePiece[i];style.top). var left = parseInt(gamePiece[i];style;left); if (left;= (i % 4 * 100) || top,= parseInt(i / 4) * 100) //checks if each piece matches its left and top position { flag = false; break; //breaks the loop } } return flag; } function left(x. y) //calculates how far to the left a puzzlepiece should position { var cordX = parseInt(x); var cordY = parseInt(y). if (cordX > 0) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i];style;left) + 100 == cordX && parseInt(gamePiece[i],style;top) == cordY) { return i; } } } else { return -1; } } function right(x. y) //calculates how far to the right a puzzlepiece should position { var cordX = parseInt(x); var cordY = parseInt(y). if (cordX < 300) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i];style;left) - 100 == cordX && parseInt(gamePiece[i],style;top) == cordY) { return i; } } } else { return -1; } } function up(x. y) //calculates how far up a puzzlepiece should position { var cordX = parseInt(x); var cordY = parseInt(y). if (cordY > 0) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i];style;top) + 100 == cordY && parseInt(gamePiece[i],style;left) == cordX) { return i; } } } else { return -1; } } function down(x. y) //calculates how far down a puzzlepiece should position { var cordX = parseInt(x); var cordY = parseInt(y). if (cordY < 300) { for (var i = 0. i < gamePiece.length. i++) { if (parseInt(gamePiece[i];style;top) - 100 == cordY && parseInt(gamePiece[i].style.left) == cordX) { return i; } } } else { return -1. } } function swap(position) //moves the puzzle piece by switching position with an empty space { var temp = gamePiece[position].style;top; gamePiece[position].style.top = spaceY; spaceY = temp. temp = gamePiece[position].style;left; gamePiece[position];style.left = spaceX; spaceX = temp. } function start() //starts the move counter when the button is pressed { totalMoves = 0; hasStopped = false ticker = document.getElementById("Moves"); } function display() //helps update the display when a move is successfully made { ticker.innerHTML = totalMoves; } function reset() { hasStopped = true }

 body { background-color: white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } #controls, #overall, #puzzlearea { width: 400px; } #controls { padding-top: 10px; text-align: center; } h1 { margin: 10px 0px; text-align: center; } /* Used to center the puzzle. */ #overall { margin-left: auto; margin-right: auto; } /* The area that holds the 15 puzzle pieces. */ #puzzlearea { font-size: 32px; height: 400px; padding: 0px; position: relative; } /* This class should be applied to each of the 15 puzzle pieces. */.puzzlepiece { border: 2px solid black; height: 96px; line-height: 96px; position: absolute; text-align: center; vertical-align: middle; width: 96px; } /* This class should be applied to a puzzle piece that can be moved. */.movablepiece:hover { border-color: red; color: #006600; text-decoration: underline; }

 <.DOCTYPE HTML> <html> <title> 15 Slider Puzzle</title> <link rel="stylesheet" type="text/css" href="15 Slider.css" /> <script src="15 Slider;js" type="text/javascript"></script> <head> <body onload="initialize()"> <h1>Slider Puzzle</h1> <div id="overall"> <div id="puzzlearea"> <;-- the following are the fifteen puzzle pieces --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> <div id="controls"></div> <button onclick="start():">Start</button> <button onclick="reset();">Reset</button> <br> Number Of Moves: <span id="Moves">0</span> </div> <!--content--> <br> </head> </html>

Answer 2

将此用作演示https://jsfiddle.net/ugonnaezema/0gpeo1sj/2/

初始化一个新变量以检查是否已按下reset按钮

var isResetPressed = false;

调用initialize时将 isResetPressed 设置为 false，然后检查是否按下了reset按钮

function initialize() {
    var puzzleArea = document.getElementById("puzzlearea");
    gamePiece = puzzleArea.getElementsByTagName("div"); //retrieve element within puzzlearea
    isResetPressed = false;

    for (var i = 0; i < gamePiece.length; i++) //applies features to each puzzle piece 

    {
      ...

        gamePiece[i].onclick = function () //activates when mouse clicks on a puzzle piece
        {
            if (checkMove(parseInt(this.innerHTML))) //checks whether or not the puzzle piece can move into an empty space

            {
                swap(this.innerHTML - 1); //moves into an empty space if true

                if (isResetPressed)
                {
                    totalMoves = totalMoves;
                }
                else 
                {
                        totalMoves++;
                }

                display();

                if (finish()) //checks when the all the 15 pieces are in its right space

                {

                    win(); //alerts the player that they have won the game
                    
                }
                
                return;
            }
        }

     ...

设置reset function如下

function reset()
{
    display();
    isResetPressed = true;
}

Answer 3

好的，在您的重置 function 中，将当前移动弹出到一个临时变量并显示它，然后 totalMovves = 0;

您可以手动更改显示以使用旧值：

ticker.innerHTML = totalMoves;
totalMoves = 0;

但我会通过将显示 function 更改为如下所示来做到这一点：

function display(var moves = totalMoves) //helps update the display when a move is successfully made
{
    ticker.innerHTML = moves;
}

或者您可以简单地更改命令的顺序

function reset(){
  display();
  totalMoves = 0;
}