javascript - 如何让我的重置功能在按下后停止计数?
问题描述
我正在研究一个滑块拼图,偶然发现了一个问题。我一直在尝试使我的重置功能在按下时停止计算页面上的移动但没有运气。我的开始功能启动计数器并在游戏结束时结束,那么我的计数器如何在用户按下重置按钮之前结束计数但仍保持显示的移动数?
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>
推荐阅读
- ios - 如何使配音只读取可见的表格视图单元格
- android - 不要在 DialogFragment Android7 中显示 MaterialButton
- sql - 合并同一张表中的两行并计算总数
- twilio - 有没有办法使用 twilio 自动驾驶仪发送自定义参数以及重定向操作?
- javascript - 如何删除数组中的空格和空字符串
- r - 通过 R 的 SECR 场合列:如何为序列中的每个日期指定一个数字,但如果某个日期不在该列中,则跳过一个数字?
- python - Python和openCV数组IndexError:列表分配索引超出范围
- php - 如何将数字四舍五入到最接近的 0.45 或 0.95?
- php - 如何根据 Laravel 8 中的用户角色或权限重定向到不同的视图?
- javascript - 这个表达式 {item_1.name: req.body.item } 或者这个 {[item_1.name]: req.body.item } 有问题吗?