Felix Felix - 28 days ago 9
Javascript Question

Iterating New Event Listeners in Array in JQuery

I am creating a

2d
game like 2046 in javascript.

When a user clicks a block, the block would turn to white in color and also the blocks nearby. i.e. click [3,4] then [3,3],[3,4],[3,5],[2,4],[4,4] turn to white.

However, the event handler cannot make these changes if the blocks nearby have a bigger index than the block being clicked. i.e. [3,5],[4,4] are malfunctioned.

I had tried to wrap the handler by a closure but it is still failed. What situation would make this?

P.S. The problem happens in the case
WAITING_USER_SELECT_BLOCK
. The
setBlock(x,y)
function returns null while it supposed to be blocks[y][x]



$(document).ready(function() {
Game.init();
});

var Game = (function() {
var xNumber = 5;
var yNumber = 5;
var blocks = [];

function setBlock(x, y) {
if (blocks[y])
if (blocks[y][x]) {
console.log(blocks[y][x]);
blocks[y][x].css("background", "#FFF");
}
};

function changeStatus(status) {
switch (status) {
case "WAITING_LOGIC_NEW_GAME":
$('#plate').width(50 * xNumber);
$('#plate').height(50 * yNumber);
for (let y = 0; y < yNumber; y++) {
for (let x = 0; x < xNumber; x++) {
if (blocks[y] == null) blocks[y] = [];
blocks[y][x] = $(['<div class="plate-block" ',
'data-block-at-x="' + x + '" ',
'data-block-at-y="' + y + '"></div>'
]
.join(''));
$('#plate').append(blocks[y][x]);
}
}
break;
case "WAITING_USER_SELECT_BLOCK":
$('.plate-block').click(function() {
var block = $(this);
var sx = block.attr('data-block-at-x');
var sy = block.attr('data-block-at-y');
setBlock(sx, sy);
setBlock(sx, sy - 1);
setBlock(sx, sy + 1);
setBlock(sx - 1, sy);
setBlock(sx + 1, sy);
console.log("current block");
console.log(block);
});
break;
}
}

return {
init: function() {
changeStatus("WAITING_LOGIC_NEW_GAME");
changeStatus("WAITING_USER_SELECT_BLOCK");
}
}
})();

#plate {
width: 350px;
height: 350px;
background: #EFEFEF;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.plate-block {
width: 50px;
height: 50px;
background:#EEE;
border: 1px solid #DDD;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
overflow: hidden;
line-height: 50px;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate"></div>




Answer

When you read from DOM, value is read as string and not as number. Also, + operator acts as concatination operator for string.

Just parse it to number.

var sx = +block.attr('data-block-at-x');

Sample

$(document).ready(function() {
  Game.init();
});

var Game = (function() {
  var xNumber = 5;
  var yNumber = 5;
  var blocks = [];

  function setBlock(x, y) {
    if (blocks[y])
      if (blocks[y][x]) {
        console.log(blocks[y][x]);
        blocks[y][x].css("background", "#FFF");
      }
  };

  function changeStatus(status) {
    switch (status) {
      case "WAITING_LOGIC_NEW_GAME":
        $('#plate').width(50 * xNumber);
        $('#plate').height(50 * yNumber);
        for (let y = 0; y < yNumber; y++) {
          for (let x = 0; x < xNumber; x++) {
            if (blocks[y] == null) blocks[y] = [];
            blocks[y][x] = $(['<div class="plate-block" ',
                'data-block-at-x="' + x + '" ',
                'data-block-at-y="' + y + '"></div>'
              ]
              .join(''));
            $('#plate').append(blocks[y][x]);
          }
        }
        break;
      case "WAITING_USER_SELECT_BLOCK":
        $('.plate-block').click(function() {
          var block = $(this);
          var sx = +block.attr('data-block-at-x');
          var sy = +block.attr('data-block-at-y');
          setBlock(sx, sy);
          setBlock(sx, sy - 1);
          setBlock(sx, sy + 1);
          setBlock(sx - 1, sy);
          setBlock(sx + 1, sy);
          console.log("current block");
          console.log(block);
        });
        break;
    }
  }

  return {
    init: function() {
      changeStatus("WAITING_LOGIC_NEW_GAME");
      changeStatus("WAITING_USER_SELECT_BLOCK");
    }
  }
})();
#plate {
  width: 350px;
  height: 350px;
  background: #EFEFEF;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.plate-block {
  width: 50px;
  height: 50px;
  background: #EEE;
  border: 1px solid #DDD;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  line-height: 50px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate"></div>

Comments