Question

我正在制作视频游戏。我有一个网格，其中有一个玩家，蓝色方块，障碍物，棕色方块。现在，玩家可以通过单击右键来移动一个正方形。我尝试过：

$( ".p-0" ).hasClass( "ob" )
alert('collision !!!')

但是，播放器进入障碍广场，仅当您再次单击时，它才会提醒碰撞。有没有办法让它在障碍物前发出警报？

Jsfiddle HERE

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 obstacles = []; 

while (obstacles.length < 10) { 
  var randomIndex = parseInt(99 * Math.random());
  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);

    var drawObstacle = document.getElementById('square' + randomIndex);
    $(drawObstacle).addClass("ob")
  }
}

var playerOne = []; 
while (playerOne.length < 1) {
  var randomIndex = parseInt(99 * Math.random());
  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);
    
    var drawPone = document.getElementById('square' + randomIndex);
    $(drawPone).addClass("p-0")
  }
}

var activePlayer = 0;

  let items = $(".ob").attr("class").split(' ');
  for (var i = 0; i<items.length; i++) {
  if (items[i] === '.p-0') {
   alert('COLLISION')
  }
}
  if ($( ".p-0" ).hasClass( "ob" )){
    alert('collision !!!') 
  }

$('#button_right').on('click', function(){
if ($( ".p-0" ).hasClass( "ob" )){
    alert('collision !!!') 
  }
  moveCounter += 1;
  //console.log(moveCounter);
  if ($( ".p-0" ).hasClass( "ob" )){
    //console.log('found ob')
  }

  if (moveCounter >3 ){
    moveCounter = 0;
  }

  $pOne = $('.p-0')
  $pOneNext = $pOne.next();
  $pOne.removeClass('p-0');
  $pOneNext.addClass('p-0');
});

body{background-color: #b4cdd4}

#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;
}
.ob{
    background-color: brown;
}
.p-0{
    background-color: blue;
}
.p-1{
    background-color: yellow;
}

.move{
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid-box"></div>
<div class="move">   
  <button id="button_right">right</button><br> 
</div>

Answer 1

您只需要更改click事件中事物的顺序-参见下文（代码中的注释）

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 obstacles = [];

while (obstacles.length < 10) {
  var randomIndex = parseInt(99 * Math.random());
  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);

    var drawObstacle = document.getElementById('square' + randomIndex);
    $(drawObstacle).addClass("ob")
  }
}

var playerOne = [];
while (playerOne.length < 1) {
  var randomIndex = parseInt(99 * Math.random());
  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);

    var drawPone = document.getElementById('square' + randomIndex);
    $(drawPone).addClass("p-0")
  }
}

var activePlayer = 0;

let items = $(".ob").attr("class").split(' ');
for (var i = 0; i < items.length; i++) {
  if (items[i] === '.p-0') {
    alert('COLLISION')
  }
}
if ($(".p-0").hasClass("ob")) {
  alert('collision !!!')
}

$('#button_right').on('click', function() {
  moveCounter += 1;      // do this first

  if (moveCounter > 3) {
    moveCounter = 0;
  }
   
  $pOne = $('.p-0')           // set your vars here
  $pOneNext = $pOne.next();
  $pOne.removeClass('p-0');
  $pOneNext.addClass('p-0');
  
  if ($pOneNext.hasClass("ob")) {  // check p1 next not p1
    alert('collision !!!')
  }
});

body {
  background-color: #b4cdd4
}

#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;
}

.ob {
  background-color: brown;
}

.p-0 {
  background-color: blue;
}

.p-1 {
  background-color: yellow;
}

.move {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid-box"></div>
<div class="move">
  <button id="button_right">right</button><br>
</div>

检查元素是否具有特定的类JQUERY

1 个答案: