我正在制作 slider 拼图并偶然发现了一个问题。我一直在尝试使重置功能在按下时停止计算页面上的移动次数，但没有成功。我的开始函数启动计数器并在游戏结束时结束，那么我的计数器如何结束计数但仍保留用户按下重置按钮之前显示的移动数？
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>最佳答案
我添加了一个 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>关于javascript - 如何让重置功能在按下后停止计数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62547596/