擦除想要重新出现的细胞

Question

我正在编写一个名为 Chomp 的游戏，我已经完成了游戏本身，但是我有一些视觉错误，我无法修复。每当您在此游戏中点击一个方块（绿色方块除外）时，某些方块（包括被点击的方块）应该会淡化并永远消失。

但是，目前，当用户单击一个正方形时，它会创建整个 table 的残像。例如，this is how a piece looks after clicking the center square as a first move, and as you can see in my second move here第一步中的棋子短暂地重新出现，但很快又淡出。

只要方块被擦除，它们就永远不会像现在这样重新出现，我不确定是什么导致了这种行为。但我相信这可能是由于 html 元素没有被正确删除。怎样才能让褪色的方块不再出现？

这是我的 html gameTable

    <!--game table-->
<table id="gameTable"> 
</table>

和我的 javascript 处理单元格点击和淡化元素的函数

   fadeOut = function fadeOut(state) {
      // Make fadeOut unavailable until the whole fade-out is finished.
      fadeOut.isAvailableToRun = false;
      // Update the distance moved and apply it to the element.
      state.distance += state.distanceIncrement;
      state.element.style.top = state.distance + 'px'; //move up by pixels
      // Update the opacity and apply it to the element.
      state.opacity += state.opacityIncrement;
      state.element.style.opacity = state.opacity;
      //if opacity is > 0 , fade it out into the ethers
      if (state.opacity > 0) {
         // If the element is still showing, wait a bit and then continue fading it.
         setTimeout(function () {
            fadeOut(state);
         }, state.timeIncrement);
      }
   };

   //contains values to use for fadeOut
   cellClick = function (cell) {
      var a, x, y;

      //make all cells above, to the right, and inbetween fade a clicked cell fade
      for (a = 0; a < tableData.length; a += 1) {
         //get x,y coordinates from tableData
         x = cell.pos.x;
         y = cell.pos.y;
         //erase position in index compared to the clicked position
         if (tableData[a].pos.x <= x && tableData[a].pos.y >= y) {
            //remove clickability of cells other than clicked cell
            tableData[a].onclick = null;
            //apply fadeOut effect to cells other than clicked cell
            fadeOut({
               distance: 0, // initial distance from start
               distanceIncrement: 1, // number of pixels to move each timer tick
               element: tableData[a], // element to move and fade (cell, element passed as a parameter to the click cell function)
               opacity: 1, // initial opacity
               opacityIncrement: -0.01, // how much to fade each timer tick
               pause: 1000, // milliseconds to pause after completed fade
               timeIncrement: 10 // milliseconds for each timer tick
            });
         }
      }

Here 是我的完整代码，带有现场演示，因此您可以轻松地自己查看问题。

Answer 1

这是因为您正在使用 state.opacity += state.opacityIncrement;。这将采用您在 (1) 中传递的不透明度的初始状态，然后正确地递减它。即使正方形不可见，您也可以使第一次迭代基本上从 1 - 0.01.

开始

与其将其硬编码为 1，不如获取现有正方形的不透明度。

Answer 2

发生这种情况是因为您要告诉该区域中的所有单元格再次淡出，即使它们已经淡出也是如此。我更改了您的代码，现在检查单元格的 opacity CSS 属性是否已设置。如果已经设置了不透明度，则单元格已经淡出，我们避免再次调用 fadeOut。否则，我们继续调用该方法。这似乎解决了您的问题。

Here's a link to my fork of your code.

擦除想要重新出现的细胞

Erasing cells that want to reappear

html

javascript

frontend