在JQuery中迭代数组中的新事件侦听器

费利克斯

我正在用JavaScript创建2d类似2046游戏

当用户单击一个图块时,该图块将变为白色,附近的图块也将变为白色。单击[3,4],然后将[3,3],[3,4],[3,5],[2,4],[4,4]变为白色。

但是,如果附近的块具有比被单击的块更大的索引,则事件处理程序无法进行这些更改。[3,5],[4,4]发生故障。

我曾尝试通过闭包包装处理程序,但仍然失败。什么情况会造成这种情况?

PS问题是在这种情况下发生的WAITING_USER_SELECT_BLOCKsetBlock(x,y)函数应该是blocks [y] [x]时返回null

$(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>

拉杰什

从DOM读取时,值将读取为字符串而不是数字。另外,+运算符还充当字符串的隐含运算符。

只需将其解析为数字即可。

var sx = +block.attr('data-block-at-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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

迭代数组事件和侦听器 javascript

jQuery中的单击事件侦听器

useEffect 中的多个 Firebase 侦听器并将新事件推送到状态

在jQuery中迭代数组

访问事件侦听器的 javaScript 中的数组元素

数组节点js中数据更改的事件侦听器

jQuery中的多个链接的.on('click')事件侦听器

Java 中的事件(侦听器)

类中的 Javascript 事件侦听器

事件侦听器中的匿名函数与事件侦听器中的匿名函数

如何从父级中删除jQuery事件侦听器而不删除类似的侦听器?

JQuery中的列表大小侦听器

事件侦听器以获取数组中的下一项

是否可以为数组中的每个对象定义事件侦听器?

如何将事件侦听器添加到数组中的每个元素?

在事件侦听器中的匿名函数中运行函数

如何从reactjs中的文档中删除事件侦听器

反应。如何在创建的侦听器中删除事件侦听器?

使用.on()事件的变量,自定义jQuery插件中的侦听器不会触发

使用jQuery将事件侦听器添加到动态添加的元素中

jQuery + 整页 + 移动菜单关闭 = 无法阻止被动事件侦听器中的默认值

如何在jquery的sweetalert对话框中为html按钮添加事件侦听器

无法删除Javascript中随event.data附加的jQuery事件侦听器

从自动完成的jQuery中删除标记时的事件侦听器

如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器?

为什么jQuery中的click事件侦听器会存在多种变体?

Javascript事件侦听器和数组

'this'返回键盘侦听器事件中的全局范围

异步等待函数未在事件侦听器中执行