终于完成了2048小游戏的制作~
UI长这样
使用键盘的上下左右来控制数字块的活动。
下面主要是记录一下这个游戏在制作过程中遇到的一些问题。
UI的设置?如何确定每一个块的位置?
我们可以看到,其实每次移动都是块的移动或合并。所以这个过程是有一个动画的,就是块的横向或纵向地改变自己的坐标。
但是,我们看到的块的移动并不是
这个背景块在移动,而是
这个数字块。
就是说其实在背景块的上面还是悬浮着16个和背景块位置一样的数字块的。
但是转念一想,如果每次移动都改变数字块的位置,那下次移动岂不是有两个数字块会在同一位置?这样的话原本数字块的位置岂不是空着?怎么产生一个新的数字块?
因此在这里,需要设置一个函数updateGrid,这个函数的作用就是在每次移动完后对数字块进行重新分布,再对每个数字块的样式进行渲染。这样的话又是一个新的4x4的数字块了。
生成随机数字块和移动过程中的动画如何实现?
生成随机数字块动画
刚刚上面提到了那个函数updateGrid,会重新分配16个数字块的位置并改变它们的样式。
每个数字块在每一次移动中都是有值或空着的,对有值的数字块进行渲染即可,空着的数字块则令其宽高为0,位置在其应该在的背景块的位置上的正中间。
如图所示。
为什么是正中间?
为了制作生成数字的动画。代码如下
function