时间戳

首页 > 解决方案 > 在我的游戏中单击停止按钮不会按预期停止游戏

javascript - 在我的游戏中单击停止按钮不会按预期停止游戏

问题描述

游戏结束后，它会弹出按钮再次播放，如果您单击该按钮，它会将您重定向到播放按钮。

如果您单击播放游戏应该开始但是当游戏结束并且它弹出第一个具有再次播放按钮的框并且我单击它时，游戏会将我重定向到播放按钮并且在我单击播放按钮之前游戏将即使我没有点击播放按钮也开始。

我在 PLAY_Again 按钮中调用了 eggStop() 函数来停止游戏，但游戏并没有停止。我在 gameOver() 函数中调用了相同的函数，它只在 gameOver() 中有效。

如果有关于编写代码来增强它的建议，将不胜感激。

这是图像文件 https://drive.google.com/drive/folders/1vfvcxs7LHg83SLu6L2iGp5zzMWk5zbwV?usp=sharing

var egg1 = document.getElementById("egg1");
var egg2 = document.getElementById("egg2");
var egg3 = document.getElementById("egg3");
var pos1 = 0;
var pos2 = 0;
var pos3 = 0;
var basket = document.getElementById("basket");
var Y_Pos = 0;
var X_Pos = 0;
var Score = 0;
var Life = 10;
var SCORE1 = document.getElementById("SCORE");
var LIFE1 = document.getElementById("LIFE");
var speed1 = 0;
var speed2 = 0;
var speed3 = 0;
var PLAY_Div = document.getElementById("PLAY-Div");
var PLAY_Again = document.getElementById("PLAY-again");
var caption_Score = document.getElementById("caption-score");
var Play_Btn = document.getElementById("PLAY-btn");
var Home1 = document.getElementById("Home");
var basketScore = document.getElementById("basket-score");
var basket_div = document.getElementById("basket-div");
var L = ""
var S = ""



document.addEventListener("mousemove", function(e) {
  basket_div.style.left = e.clientX;
  Y_Pos = e.clientY;
  X_Pos = e.clientX;
  console.log("X_Pos" + X_Pos);
  console.log("Y_Pos" + Y_Pos);

})


function eggMove() {
  pos1 = pos1 + speed1 + 30;
  egg1.style.top = pos1+"px";
  console.log("Pos1" + pos1);
  pos2 = pos2 + speed2 + 30
  egg2.style.top = pos2;
  pos3 = pos3 + speed3 + 30;
  egg3.style.top = pos3+"px";
  floorCollision();
}

function eggStop() {
  pos1 = 30;
  egg1.style.top = pos1+"px";
  pos2 = 30
  egg2.style.top = pos2+"px";
  pos3 = 30;
  egg3.style.top = pos3+"px";
}


PLAY_Again.addEventListener("click", function() {
  eggStop(); /* it doesn't work , it can't stop the game/eggs*/
  PLAY_Div.style.display = "none";
  Home1.style.display = "block";

  Life = 10;
  speed1 = 0;
  speed2 = 0;
  speed3 = 0;
  Score = 0;
})

Play_Btn.addEventListener("click", function() {

  setInterval(eggMove, 500);
  Home1.style.display = "none";
  Life = 10;
  speed1 = 0;
  speed2 = 0;
  speed3 = 0;
  Score = 0;
})


function gameOver(Life) {
  if (Life <= 0) {
    eggStop();
    PLAY_Div.style.display = "block";
    caption_Score.innerHTML = Score;
    Life = 0;
    LIFE1.innerHTML = L + Life;

  }
}


function floorCollision() {
  gameOver(Life);

  if (pos1 >= 470) {
    if (120 <= X_Pos && X_Pos <= 275) {
      Score++;
      speed1 = speed1 + 10;
      pos1 = 30;
      egg1.style.top = pos1+"px";
      egg1.src = "imagess/Happy_Egg.svg"
      console.log(Score + "Score1");
      basketScore.innerHTML = Score;
    } else {
      egg1.src = "imagess/Broken_Egg.svg";
      setTimeout(function() {
        pos1 = 45;
        egg1.src = "imagess/Happy_Egg.svg"
        egg1.style.top = pos1+"px";
      }, 500)
      Life = Life - 0.5;
    }
  }

  if (pos2 >= 470) {
    if (530 <= X_Pos && X_Pos <= 690) {
      Score++;
      speed2 = speed2 + 10;
      pos2 = 30;
      egg2.style.top = pos2+"px";
      egg2.src = "imagess/Happy_Egg.svg"
      console.log(Score + "Score2");
      basketScore.innerHTML = Score;
    } else {
      egg2.src = "imagess/Broken_Egg.svg";
      setTimeout(function() {
        pos2 = 45;
        egg2.src = "imagess/Happy_Egg.svg"
        egg2.style.top = pos2+"px";
      }, 500)
      Life = Life - 0.5;
    }

  }
  if (pos3 >= 470) {
    if (940 <= X_Pos && X_Pos <= 1100) {
      Score++;
      speed3 = speed3 + 10;
      pos3 = 30;
      egg3.style.top = pos3+"px";
      egg3.src = "imagess/Happy_Egg.svg"
      console.log(Score + "Score3");
      basketScore.innerHTML = Score;
    } else {
      egg3.src = "imagess/Broken_Egg.svg";
      setTimeout(function() {
        pos3 = 45;
        egg3.src = "imagess/Happy_Egg.svg"
        egg3.style.top = pos3+"px";
      }, 500)
      Life = Life - 0.5;
    }
  }
  S = "SCORE "
  SCORE1.innerHTML = S + Score;
  L = "LIFE "
  LIFE1.innerHTML = L + Life;

}
body {
  background-image: url(../imagess/Background_Night.svg);
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

#chicken1 {
  /* background-color: greenyellow; */
  width: 10%;
  position: absolute;
  top: 10%;
  left: 15%;
  z-index: 1;
  animation: henMove 2s infinite;
}

#chicken2 {
  /* background-color: greenyellow; */
  width: 10%;
  position: absolute;
  top: 10%;
  left: 45%;
  z-index: 2;
  animation: henMove 2s infinite;
}

#chicken3 {
  /* background-color: greenyellow; */
  width: 10%;
  position: absolute;
  top: 10%;
  left: 75%;
  z-index: 3;
  animation: henMove 2s infinite;
}

#hen1,
#hen2,
#hen3 {
  width: 85%;
}

#egg1,
#egg2,
#egg3 {
  position: absolute;
  left: 35px;
  top: 45px;
  z-index: -1;
  width: 30%;
}

@keyframes henMove {
  0% {
    width: 150px;
  }
  50% {
    width: 160px;
  }
  100% {
    width: 150px;
  }
}

#PLAY-Div {
  width: 40%;
  /* position: absolute; */
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  height: 300px;
  top: 30%;
  left: 30%;
  z-index: 100;
  border-radius: 20%;
  display: none;
}

#PLAY-Div h2 {
  font-size: 80px;
}

#PLAY-Div button {
  font-size: 30px;
}

#Home {
  width: 40%;
  /* position: absolute; */
  background-color: rgba(100, 100, 0, 0.5);
  position: absolute;
  height: 300px;
  top: 30%;
  left: 30%;
  z-index: 102;
  border-radius: 20%;
  display: block;
}

#Home h2 {
  font-size: 80px;
}

#Home button {
  font-size: 30px;
}

#basket-div {
  position: relative;
  width: 10%;
  height: 10%;
  top: 550px;
  /* background-color: tomato; */
}

#basket {
  width: 100%;
  position: absolute;
  bottom: 50px;
}

#basket-div h3 {
  width: 100%;
  position: absolute;
  color: white;
  left: 45%;
  bottom: 75%;
  z-index: 9999;
}
<!-- Home -->
<div id="Home" class="text-center">
  <h2>HAPPY EGGS</h2>
  <button id="PLAY-btn" class="btn btn-danger w-25 my-5">PLAY </button>
</div>



<!-- Play-Again -->
<div id="PLAY-Div" class="text-center">
  <h2>HAPPY EGGS</h2>
  <h2 id="caption-score"></h2>
  <button id="PLAY-again" class="btn btn-danger w-25 my-5">PLAY AGAIN</button>
</div>


<!-- Score And Life -->
<div id="dashboard" class="text-white d-flex justify-content-between mx-5">
  <h2 id="SCORE">SCORE 0</h2>
  <h2 id="LIFE">LIFE 10</h2>
</div>

<!-- Chicken and Egg -->
<!-- <div class="d-flex justify-content-center align-items-center">   -->
<div id="chicken1">
  <img id="hen1" src="imagess/Happy_hen.svg">
  <img id="egg1" src="imagess/Happy_Egg.svg">
</div>

<div id="chicken2">
  <img id="hen2" src="imagess/Happy_hen.svg">
  <img id="egg2" src="imagess/Happy_Egg.svg">

</div>

<div id="chicken3">
  <img id="hen3" src="imagess/Happy_hen.svg">
  <img id="egg3" src="imagess/Happy_Egg.svg">

</div>
<!-- </div> -->
<div id="basket-div">
  <h3 id="basket-score">0</h3>
  <img id="basket" src="imagess/Basket.svg">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.0/cjs/popper.min.js"></script>

标签： javascript

解决方案

您遇到的问题是您没有停止运行间隔，因此它会继续运行。

eggStop重置位置，但移动函数不断被调用。

要解决此问题，您需要引入一个全局变量来跟踪间隔，并在eggStop.

将此变量与其他全局变量放在一起。

var intervalID = 0;

然后在事件处理程序中添加Play_Btn点击：

intervalID = setInterval(eggMove, 500);

然后eggStop添加：

clearInterval(intervalID);

推荐阅读