问题描述
我有一个带有播放器，黄色框，障碍物（ .ob ）和黑色框的网格。
当我单击“向上”按钮时，我不希望玩家进入障碍物方块。
我在想检查下一个班是否有.ob ，不要去那里。
有什么建议么？
let moveCounter = 0; var grid = document.getElementById("grid-box"); for (var i = 1; i <= 50; i++) { var square = document.createElement("div"); square.className = 'square'; square.id = 'square' + i; grid.appendChild(square); } var obstacles = []; while (obstacles.length < 20) { var randomIndex = parseInt(49 * Math.random()); if (obstacles.indexOf(randomIndex) === -1) { obstacles.push(randomIndex); var drawObstacle = document.getElementById('square' + randomIndex); $(drawObstacle).addClass("ob") } } var playerTwo = []; while (playerTwo.length < 1) { var randomIndex = parseInt(49 * 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; } .ob { background-color: black; }
<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>
1楼
Firoz Tennali
1
2019-02-25 09:55:22
使用以下代码
$('#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;
if($('#' + idUpMove).hasClass('ob')){
return false;
}
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
在这里，我们检查下一个具有“ .ob”类的下一个选定类，如果其返回true，则停止过程，如果其返回false，则过程继续
if($('#' + idUpMove).hasClass('ob')){
return false;
}