猜猜我在哪的小游戏

发表于 | 分类于 | 阅读次数
undefined

这次做了个需求，模仿一个简单的“猜猜我在哪”游戏的V端页面。一开始完全一脸懵逼，完全不懂如何去实现。没想到，方法总是有的，只要你敢想。

回想当时的思考思路。三个的时候如何可以实现呢？我只需要把每次随机一个<li>然后插到最前面，或者插到最后面。应该就可以实现打乱顺序了。————这样打乱顺序的思路就完成了。

最关键的步骤是如何实现这个移动的动画呢。animate函数，或者transition属性，但是很明显，这个东西动画是需要先后顺序。而且动画移动期间，<li>是不能被绑定事件的。另外，动画也可能需要开始时缩放营造出后退的视觉，然后换位置，最后缩放为原来大小。于是得出结论，动画效果需要animate来实现

那动画效果应该如何实现呢？答案已经快呼之欲出了，移动原本的定位属性，将两者进行互换位置。功能不就实现了么？那么很明显，这里的布局需要position:absolute。

得到这几个关键词后，相信你已经懂得这个东西能怎么去做啦。一开始我以为只能每次都和第一个交换，勉强实现打乱顺序的要求。但是细心一想，其实只要随机两个不重复的数字，然后交换他们的位置不就可以了么。那才是真正意义上的，猜猜我是谁

小tips：由于位置打乱了，然而dom结构中的顺序是不变的。所以需要注意添加一些类名去确保能抓到正确的位置。（这个tips感觉如果采用两个随机数就不会有用啊）

很开心，接到需求时候的一脸懵逼，在认真思考后解决了一个看似简单，却好像没那么容易实现的功能。突然想起来，迅雷小哥有一次做demo时候说的一句话：先别怂，思路很重要

DEMO:
这里的demo还有若干细节问题需要解决。但是为了避免代码太过长，细节部分大家自行完善。

  • 1
  • 2
  • 3
点击开始
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var time = 10; // 换位置的次数
var now = 0;
var ranNum;
var obj = ['first', 'second', 'last']; //输入li对应的类名
changePos();
function changePos() {
  var left;
  var duration = 1000;
  if (now < time) {
    // 取 0 1 2 三个数
    ranNum = Math.ceil(Math.random() * (2 - -1)) + -1;
    classN = obj[ranNum];
    if (!$('.on').hasClass(classN)) {
      now++;
      var $moveLi = $('.' + classN);
      left = $moveLi.css('left');
      $('.on').animate({
        left: left
      }, duration).removeClass('on');
      $moveLi.animate({
        left: 0
      }, duration, changePos).addClass('on')
    } else {
      changePos()
    }
  }
}