因为我一直在忙于寻找工作并做我最近做的其他事情，所以很容易忘记，但是代码仍然每天。在熟悉公司建筑代码一段时间后，我在业余时间差距上做了这一点。游戏。在那个时候只是简短的演讲。如果您仍然必须考虑一下，就无法当场解释任何事情。只能说思想不是敏捷和毫无意义的。我总是觉得我已经做过的印象。事实上的战斗和笔迹将逐步实现，它肯定会忘记它不会花很长时间。我问了一些我面对面的问题。我也觉得他们互相看不见，所以我不会提到，但是我记得他带走的游戏。就在几天前，我在几天里刷了简短的视频，我看到了这个小程序，让我想起了前几集，过去几天我和五月的一天一起写了这部小游戏。
首先看封面的封面并了解游戏的内容；
尝试上述需求和想法，您可以尝试编写它。
面对上述问题，我只是做了一定的需求，因此写作时不会有任何想法。首先要考虑的是该游戏的核心内容是替代和变化，但实际上是阵列之间的测试和获取。不难知道这实际上很困难。
在游戏开始时，生成一个数组以维护多个测试管（图片中有四个，三种颜色之一），然后根据固定颜色（可以在外部传递，也可以通过将其写成固定的多种颜色）以生成十二种颜色，当然，这种颜色需要四个或四种，再加上最后十二种透明颜色（用于运动图片），然后破坏所有颜色并在切割数字后形成四个副本您可以在获取数据时进行周期渲染。在渲染过程中，添加每个元素的监视事件和事件。当您单击瓶子时，您可以做出判断。单击时，进行数组替换并更改渲染页面。整体几乎相同，并且在下面详细介绍了特定功能处理。
在这里，我使用ES6的插头，具体取决于代码；
根据分析，有必要在渲染前随机获取颜色数据操作。每种颜色都是随机分布并分布在三瓶中的。获得的数据可以渲染。
获取随机颜色操作，根据水平创建多个瓶子，并确保最后一瓶是空的，通过方法创建随机颜色，然后破坏颜色。
在受到破坏后，根据瓶中使用多少颜色数（NUM为4），并且切割后切割该方法。可以在此处说一个知识点。您获得的数组需要避免数据污染的副本或方法，但是如果有参考类型，则可以将其用作副本，然后返回到新的重组。
重组后的值也缺少一个空数据瓶，因此您需要稍后添加一个空瓶。数据处理后，请开始以下页面渲染。
首先使该区域穿过该区域，然后将其插入该区域，最后将其插入传球。
在渲染之前先考虑一个问题。
实际上，这很简单。可以通过获取当前周期指数来获得剩余数量的剩余数量。当结果等于0时，您可以执行外部变量。当然，未计算第一个索引。该法案的偏移计算是在下面查看特定的实现。
在上图上也可以看到，在颜色过程中，有一个动画效果，这是“瓶子水减少和增加”动画的隐喻。我没有考虑当我这样做时，太多了，使用定位，然后在瓶中添加一种颜色，根据该值进行定位安排，但是在这样做之后，我发现在制作动画时，它更麻烦了。解决方案是创建一个覆盖颜色的新元素，将原始颜色设置为透明或删除，然后按高度减少。
您可以通过将位置添加到底部来写入高度，然后足以降低高度。查看下图的解释效果。
这样，需要更改相应的第一高高度以实现动画效果。如果使用第一个解决方案，则操作相对麻烦。
最后，将动态添加到其父级中的中间，向下，左和右，当然，父级还添加了以下CSS代码。
创建瓶子时，处理了绑定事件。接下来，我开始进行单击开关数据的操作。首先单击，第二次点击进行不同的治疗方法。
分析要求并单击操作：
在处理第二次点击时，可以单击一种条件。在第二次点击中可以单击的瓶中透明色块的数量必须大于或等于第一次点击的第一次点击。数量和颜色的数量相同。此外，所有情况都可以单击。当然，它不包括边界条件（动画或成功之后）。
如果要处理颜色之间的转换，则需要找到从上到下的色块的位置，即颜色块的索引值，相同的颜色块的数量和颜色块的颜色，三个关键颜色，三个键数据。
简而言之，如何在组中找到相同数据的第一个数据？
例如，找出数组中有多少个索引，遵循多少个数字以及此颜色。
使用上述工具功能，您可以执行以下数据操作
在这一点上，与操作相关的所有开关数据都已完成，然后添加瓶子运动的动画和0的动画过程。
可以第二次点击的瓶子的状况是必须有一个或多个颜色块。第二个瓶子中有三种情况要添加到第二瓶中。
第一个方法的方法很简单，即在第二瓶中找到第一个颜色块，并且可以给予高度的变化。更改颜色的第二个不正确。因此，第三个需要重置颜色和高度。因此，全面的考虑仍然希望直接转到瓶中的第一个将其设置为0，然后设置颜色，然后延迟设置高度以更改动画。
动画完成后，返回到初始位置，因为该值已在首次单击时记录下来，因此您只需要在返回时重新启动和平。特定的代码实现可以看到源代码。
最后，添加一个历史记录操作，只要您第二次保存数据值，将其放入缓存数组中，等待上一步删除最后一个数据，然后删除最后一个数据，重新启动值的价值给予
它被认为具有上面的基本功能。
核心想法是更改数据，然后在数据值更改后呈现瓶子和颜色。瓶子抬起和倾斜的动画被用来理所当然。在瓶动画的过程中，您无法继续下一次点击，这将导致点击的判断，因此添加了判断，并进行了色彩块高度和处理细节瓶中的颜色块，让彩色瓶装，将其使用到usethe属性，然后在高度更改为0的动画中，最后几个功能是调整难度调整的难度并返回上一步。
该项目本身并不复杂，但是这样做很有趣。如果您有任何疑问和错误，请在下面留言。
原始：https：//juejin.cn/post/7096330273305919501