Iterating New Event Listeners in Array in JQuery

Question

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>

yes. it is 2048. I forgot its name – Felix Nov 05 '16 at 11:47 — Felix, Nov 05 '16 at 11:47

score 0 · Accepted Answer · answered Nov 05 '16 at 11:49

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>

Oh thank you!! I thought it was caused by iteration while I did not check any type conversion problems! — Felix, Nov 05 '16 at 11:52
@Felix just a pointer, instead of calling `setBlocks` 5 times, send click position to it and update all 5 blocks from there. — Rajesh, Nov 05 '16 at 11:54
Even though the answer is correct, I personally would always prefer `Number(block.attr('data-block-at-x'))` or `parseInt(block.attr('data-block-at-x'), 10)` over `+block.attr('data-block-at-x')`, because prefixing with `+` often looks like an error leftover and the others are more verbose about what you do. `Number(x)` behaves like `+x` while `parseInt(x, 10)` has a different results depending on the input, see the answer to [parseInt vs unary plus - when to use which](http://stackoverflow.com/a/17106702/1960455) @Felix — t.niese, Nov 05 '16 at 11:58

Iterating New Event Listeners in Array in JQuery

1 Answers1

Sample