框移出网格JavaScript

Question

我在网格中有一个黄色框。单击“ UP”按钮时，黄色框将向上移一个框。黄色框到达边缘时如何停止？我不想让它脱离网格。

let moveCounter = 0;

var grid = document.getElementById("grid-box");


for (var i = 1; i <= 100; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}
var playerTwo = []; 

while (playerTwo.length < 1) { 
  var randomIndex = parseInt(99 * Math.random()); 
  
  if (playerTwo.indexOf(randomIndex) === -1) {
    playerTwo.push(randomIndex);

    var drawPtwo = document.getElementById('square' + randomIndex);
    $(drawPtwo).addClass("p-1")
  }
};

$('#button_up').on('click', function() {
  moveCounter += 1;

  $pOne = $('.p-1')
  var id = $pOne.attr('id') 
  var idNumber = +id.slice(6);
  var idMove = idNumber - 10
  var idUpMove = 'square' + idMove;
  $pOne.removeClass('p-1');
  $('#' + idUpMove).addClass('p-1');

});

#grid-box {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  font-size: 0;
  position: relative;
}

#grid-box>div.square {
  font-size: 1rem;
  vertical-align: top;
  display: inline-block;
  width: 10%;
  height: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}
.p-1{
  background-color: yellow;
}

<div id="grid-box"></div>

<div class="move">
    <button id="button_up">UP</button>
    <br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

我是Javascript / jQuery的新手。任何帮助都感激不尽 ！谢谢

Answer 1

let moveCounter = 0;

var grid = document.getElementById("grid-box");


for (var i = 1; i <= 100; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}
var playerTwo = []; 

while (playerTwo.length < 1) { 
  var randomIndex = parseInt(99 * Math.random()); 
  
  if (playerTwo.indexOf(randomIndex) === -1) {
    playerTwo.push(randomIndex);

    var drawPtwo = document.getElementById('square' + randomIndex);
    $(drawPtwo).addClass("p-1")
  }
};

$('#button_up').on('click', function() {
  moveCounter += 1;

  $pOne = $('.p-1')
  var id = $pOne.attr('id') 
  var idNumber = +id.slice(6);
  var idMove = idNumber - 10;
  if(idMove < 0){idMove +=10;}
  var idUpMove = 'square' + idMove;
  $pOne.removeClass('p-1');
  $('#' + idUpMove).addClass('p-1');

});

#grid-box {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  font-size: 0;
  position: relative;
}

#grid-box>div.square {
  font-size: 1rem;
  vertical-align: top;
  display: inline-block;
  width: 10%;
  height: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}
.p-1{
  background-color: yellow;
}

<div id="grid-box"></div>

<div class="move">
    <button id="button_up">UP</button>
    <br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

在这里，我添加了将框限制为超出网格的条件

if（idMove <0）{idMove + = 10;}

如果可移动位置为负，则再次初始化其现有位置。

Answer 2

您可以添加支票以阻止其移出方块

var idMove = idNumber - 10
if(idMove > 0){
   // do all the moving stuffs
}

Answer 3

您可以使用if语句检查idMove > 0)，如果可以，则可以移动正方形，如果不是，则不可以移动正方形。它将是undefined，因此只有在未定义pOne的{​​{1}}的情况下，您才能运行代码。

请参见以下示例：

id

let moveCounter = 0;

var grid = document.getElementById("grid-box");


for (var i = 1; i <= 100; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}
var playerTwo = [];

while (playerTwo.length < 1) {
  var randomIndex = parseInt(99 * Math.random());

  if (playerTwo.indexOf(randomIndex) === -1) {
    playerTwo.push(randomIndex);

    var drawPtwo = document.getElementById('square' + randomIndex);
    $(drawPtwo).addClass("p-1")
  }
};

$('#button_up').on('click', function() {
  moveCounter += 1;

  $pOne = $('.p-1')

  var id = $pOne.attr('id')

  var idNumber = +id.slice(6);
  var idMove = idNumber - 10
  if (idMove > 0) {
    var idUpMove = 'square' + idMove;
    $pOne.removeClass('p-1');
    $('#' + idUpMove).addClass('p-1');
  }
});

#grid-box {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  font-size: 0;
  position: relative;
}

#grid-box>div.square {
  font-size: 1rem;
  vertical-align: top;
  display: inline-block;
  width: 10%;
  height: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}

.p-1 {
  background-color: yellow;
}

Answer 4

$('#button_up').on('click', function() {
  moveCounter += 1;

  $pOne = $('.p-1')
  var id = $pOne.attr('id') 
  var idNumber = +id.slice(6);
  var idMove = idNumber - 10;
  if(idMove > 0) {
    var idUpMove = 'square' + idMove;
    $pOne.removeClass('p-1');
    $('#' + idUpMove).addClass('p-1');
  }
});