Question

我正在写一款名为Chomp的游戏，我已经完成了游戏本身，但是我遇到了一些我无法修复的视觉错误。每当你点击这个游戏中的一个正方形时（绿色正方形除外），包括点击的正方形在内的某些正方形应该会褪色并永远消失。

然而，目前，当用户点击一个正方形时，它会创建整个表的后映像。例如，this是单击中心方块作为第一个动作后的样子，正如您在第二个动作here中看到的那样，第一个动作中的碎片重新出现，只是很快消失再次出来。

每当广场被删除时，它们就不应该像现在一样重新出现，我不确定是什么原因引起了这种行为。但我相信这可能是因为html元素没有被正确删除。如何让褪色的方块不再显示？

这是我的 gameTable

的html

    <!--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.

擦除想要重新出现的单元格

2 个答案: