HTML、CSS、JS：如何让 div 到达某个坐标后做出响应答案

【问题标题】：HTML, CSS, JS:How to make a div respond once having reached a certain coordinateHTML、CSS、JS：如何让 div 到达某个坐标后做出响应
【发布时间】：2021-06-20 18:49:35
【问题描述】：

我目前正在编写一个视频游戏，我希望我的 div 圈在到达某个区域（例如 30、-30）时停止，我希望它停止，或者向用户发出警报。我使用了各种各样的@keyframes、div、getElementById 等等。我还创建了一个板，球通过键盘在其中移动。哦，在你看到代码之前，只要知道我是个小孩，如果解决方案很简单，我很抱歉。到目前为止，这是我的代码：

var dice = document.getElementById("dice").addEventListener("click", numChange);

function numChange() {
  alert(Math.floor(Math.random() * 6 + 1));
}

let circle = document.querySelector(".man");
let moveBy = 25;

window.addEventListener("load", () => {
  circle.style.position = "absolute";
  circle.style.left = 0;
  circle.style.top = 0;
});

window.addEventListener("keyup", (e) => {
  switch (e.key) {
    case "ArrowLeft":
      circle.style.left = parseInt(circle.style.left) - moveBy + "px";
      break;
    case "ArrowRight":
      circle.style.left = parseInt(circle.style.left) + moveBy + "px";
      break;
    case "ArrowUp":
      circle.style.top = parseInt(circle.style.top) - moveBy + "px";
      break;
    case "ArrowDown":
      circle.style.top = parseInt(circle.style.top) + moveBy + "px";
      break;
  }
});

.board {
  display: grid;
  justify-content: center;
  align-content: center;
  //grid-gap: 1rem;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
  color: grey;
  background-color: grey;
  font-family: Dosis, sans-serif;
}

.link {
  font-family: Dosis, san-serif;
}

* {
  font-family: "Dosis", "san-serif";
}

.square:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.square:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.square:nth-child(3) {
  grid-row: 1;
  grid-column: 3;
}

.square:nth-child(4) {
  grid-row: 1;
  grid-column: 4;
}

.square:nth-child(5) {
  grid-row: 1;
  grid-column: 5;
}

.square:nth-child(6) {
  grid-row: 2;
  grid-column: 5;
}

.square:nth-child(7) {
  grid-row: 3;
  grid-column: 5;
}

.square:nth-child(8) {
  grid-row: 4;
  grid-column: 5;
}

.square:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.square:nth-child(10) {
  grid-row: 5;
  grid-column: 4;
}

.square:nth-child(11) {
  grid-row: 5;
  grid-column: 3;
}

.square:nth-child(12) {
  grid-row: 5;
  grid-column: 2;
}

.square:nth-child(13) {
  grid-row: 5;
  grid-column: 1;
}

.square:nth-child(14) {
  grid-row: 4;
  grid-column: 1;
}

.square:nth-child(15) {
    grid-row: 3;
    grid-column: 1;
  }

.square:nth-child(16) {
    //grid-row: 2;
    //grid-column: 1;
  }

 Demo Specific Style
.board {
  padding: 1em 0;
}

.square {
  background: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.man {
  position: absolute;
  top: 410px;
  right: 380px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black; 
}
/* .man2 {  */ 
  position: absolute;
  top: 410px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: up 9s infinite;
  animation-delay: 8.5s;
}
 .man3 { 
  position: absolute;
  top: 100px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: right2 9s infinite;
  animation-delay: 17s;
}


@keyframes right {
  from {right: 240px;}
  to {right: 540px;}
  0% {
    background-color: black;
  }
  50% {
    background-color: black;
  }
  75% {
 
    background-color: black;
  }
  100%{
    background-color: #C0C0C0;
  }
  }


  


.dice {
  width: 50px;
  height: 50px;
  background-color: white;
  position: absolute;
  right: 440px;
  top: 320px;
}

numChange {
  
}
/*.inside-board {*/
  position: absolute;
  height: 250px;
  width: 250px;
  background-color: red;
  top: 145px;
  right: 290px;
}

<div class="man"></div.
<div class="man2" id="seen"></div>
<div class="man3" id="Seen"></div>
<div class="dice" id="dice"></div>
<div class="inside-board"></div>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap" rel="stylesheet">
<a href="https://cdpn.io/Dims09/debug/mdOXGrQ/xnMabmBRoVjr">
  <h3 class="link">Back</h3>
</a>
<div class="board">
  
  <div class="square">START</div>
  <div class="square">blank</div>
  <div class="square">guardian</div>
  <div class="square">blank</div>
  <div class="square">LAVA</div>
  <div class="square">blank</div>
  <div class="square">NATIVE</div>
  <div class="square">blank</div>
  <div class="square">blank</div>
  <div class="square">wizard</div>
  <div class="square">blank</div>
  <div class="square">king</div>
  <div class="square">bank</div>
  <div class="square">EARTH</div>
  <div class="square">guardian</div>
  <div class="square">blank</div>
  <h1 class="board">STORIE</h1>

【问题讨论】：

标签： javascript html css positioning

【解决方案1】：

添加一个验证您需要的限制的函数。我给你举个例子：在这种情况下，如果它位于位置 0,0，它会发出警报

var dice = document.getElementById("dice").addEventListener("click", numChange);

function numChange() {
  alert(Math.floor(Math.random() * 6 + 1));
}


let circle = document.querySelector(".man");
let moveBy = 25;

window.addEventListener("load", () => {
  circle.style.position = "absolute";
  circle.style.left = 0;
  circle.style.top = 0;
});

function verifyPosition(circleLeftPosition,circleRightPosition, moveBy ){
  console.log(circleLeftPosition, circleRightPosition )
  if(circleLeftPosition =='0px' && circleRightPosition=='0px'){
    alert('INVALID POSITION')
    //ADDED YOUR LIMITS!
  }
}
window.addEventListener("keyup", (e) => {
  switch (e.key) {
    case "ArrowLeft":
    verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.left = parseInt(circle.style.left) - moveBy + "px";
      break;
    case "ArrowRight":
    verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.left = parseInt(circle.style.left) + moveBy + "px";
      break;
    case "ArrowUp":
    verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.top = parseInt(circle.style.top) - moveBy + "px";
      break;
    case "ArrowDown":
     verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.top = parseInt(circle.style.top) + moveBy + "px";
      break;
  }
});

.board {
  display: grid;
  justify-content: center;
  align-content: center;
  //grid-gap: 1rem;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
  color: grey;
  background-color: grey;
  font-family: Dosis, sans-serif;
}

.link {
  font-family: Dosis, san-serif;
}

* {
  font-family: "Dosis", "san-serif";
}

.square:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.square:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.square:nth-child(3) {
  grid-row: 1;
  grid-column: 3;
}

.square:nth-child(4) {
  grid-row: 1;
  grid-column: 4;
}

.square:nth-child(5) {
  grid-row: 1;
  grid-column: 5;
}

.square:nth-child(6) {
  grid-row: 2;
  grid-column: 5;
}

.square:nth-child(7) {
  grid-row: 3;
  grid-column: 5;
}

.square:nth-child(8) {
  grid-row: 4;
  grid-column: 5;
}

.square:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.square:nth-child(10) {
  grid-row: 5;
  grid-column: 4;
}

.square:nth-child(11) {
  grid-row: 5;
  grid-column: 3;
}

.square:nth-child(12) {
  grid-row: 5;
  grid-column: 2;
}

.square:nth-child(13) {
  grid-row: 5;
  grid-column: 1;
}

.square:nth-child(14) {
  grid-row: 4;
  grid-column: 1;
}

.square:nth-child(15) {
    grid-row: 3;
    grid-column: 1;
  }

.square:nth-child(16) {
    //grid-row: 2;
    //grid-column: 1;
  }

 Demo Specific Style
.board {
  padding: 1em 0;
}

.square {
  background: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.man {
  position: absolute;
  top: 410px;
  right: 380px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black; 
}
/* .man2 {  */ 
  position: absolute;
  top: 410px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: up 9s infinite;
  animation-delay: 8.5s;
}
 .man3 { 
  position: absolute;
  top: 100px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: right2 9s infinite;
  animation-delay: 17s;
}


@keyframes right {
  from {right: 240px;}
  to {right: 540px;}
  0% {
    background-color: black;
  }
  50% {
    background-color: black;
  }
  75% {
 
    background-color: black;
  }
  100%{
    background-color: #C0C0C0;
  }
  }


  


.dice {
  width: 50px;
  height: 50px;
  background-color: white;
  position: absolute;
  right: 440px;
  top: 320px;
}

numChange {
  
}
/*.inside-board {*/
  position: absolute;
  height: 250px;
  width: 250px;
  background-color: red;
  top: 145px;
  right: 290px;
}

<div class="man"></div.
<div class="man2" id="seen"></div>
<div class="man3" id="Seen"></div>
<div class="dice" id="dice"></div>
<div class="inside-board"></div>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap" rel="stylesheet">
<a href="https://cdpn.io/Dims09/debug/mdOXGrQ/xnMabmBRoVjr">
  <h3 class="link">Back</h3>
</a>
<div class="board">
  
  <div class="square">START</div>
  <div class="square">blank</div>
  <div class="square">guardian</div>
  <div class="square">blank</div>
  <div class="square">LAVA</div>
  <div class="square">blank</div>
  <div class="square">NATIVE</div>
  <div class="square">blank</div>
  <div class="square">blank</div>
  <div class="square">wizard</div>
  <div class="square">blank</div>
  <div class="square">king</div>
  <div class="square">bank</div>
  <div class="square">EARTH</div>
  <div class="square">guardian</div>
  <div class="square">blank</div>
  <h1 class="board">STORIE</h1>

【讨论】：

你的代码应该可以正常工作，但是verifyPosition() 只能调用一次，并且应该在定位之后，否则它不会在第一次交叉时不触发而不再次按下箭头。可以在切换之后。