使用cocos2d-js写抽奖游戏

临近年底，各种需求纷纷接踵而至，根本就是应接不暇，只能抽个空写一下了（摸了两个月）。

先说一个之前遇到的问题，cocos在现在的很多安卓手机上，都特别模糊，查了一下，应该是分辨率在安卓下还是按照低分辨率来做的，只需要找到源代码中的像素比的那里：

var devicePixelRatio = view._devicePixelRatio = 1;

修改为下面这个就可以了

var devicePixelRatio = view._devicePixelRatio = window.devicePixelRatio || 1;

最近接到了一个抽奖游戏的需求，还是使用了cocos进行开发。类似小时候在街机厅看到的大转盘，走格子的那种。布局什么的就不谈了，照着设计图来就好，主要说一下抽奖这部分。

首先声明抽奖格子对象PrizeItem，自身提供几个方法，供主界面调用，包括自身的点亮和熄灭方法，还有中奖后的效果展示功能等。其中中奖效果是从当前中奖的格子向表示金币数量的文字区飞一些钻石，所以中奖效果展示的方法还要接受不了一个目标点的坐标，作为效果终点。

var
PrizeItem = cc.Node.extend({
  ...
  ...
  ctor: function(itemtype){
    var self = this;
    self._super();
    self.itemtype = itemtype;
    if(!typePrice[itemtype] && typePrice[itemtype] !== 0){
    console.log("奖品类型无效！");
      return;
    }
    self.itemPrice = typePrice[itemtype];
    self.initUI();
  },
  ...
  ...
  itemSelectedOn: function(){
    var self = this;
    self.itemSelectBorder.setVisible(true);
    self.itemStarShow();
  },
  itemSelectedOff: function(){
    var self = this;
    self.itemSelectBorder.setVisible(false);
    self.itemStarHide();
  },
  itemStarShow: function(){
    var self = this;
    for(var i in self.itemstars){
      (self.itemstars)[i].startEffet();
    }
  },
  itemStarHide: function(){
    var self = this;
    for(var i in self.itemstars){
      (self.itemstars)[i].stopEffet();
    }
  },
  showDiamonds: function(pos, callback){
    var self = this;
    self.diamondEffect.setVisible(true);
    self.diamondEffect.showEffect(cc.pSub(pos, self.getPosition()), callback);
  },
  ...
  ...
});

剩下的就没什么了，主要还剩一个抽奖的展示这里，思路就是点击抽奖之后，格子依次点亮，同时发出请求，请求回来之后，根据当前亮的格子，计算还需要再走几格，进行最后的奖品步骤。还有一点是，格子我设置为了默认必定要先走完两圈再进行之后的动画，以防止如果回传太快，体验不太好。

var
PrizeItem = cc.Node.extend({
  ...
  ...
  doGameSlot: function(){
    var
    self = this,
    list = self.plist,
    stopcount = 0,
    index = 0;
    if(!!self.sb){
      return;
    }
    if(self.gold_coin_num < self.userNum){
      PageAlert.showAlert("游戏币余额不足！");
      return;
    }
    if(self.selectedItem){
      self.selectedItem.setItemZOrderDown();
      self.selectedItem.itemActiveOff();
      self.selectedItem.itemSelectedOff();
    }
    self.sb = true;
    var row = 0;
    var timer = setInterval(function(){
      if(index == 0){
        list[list.length-1].itemActiveOff();
      }else{
        list[index-1].itemActiveOff();
      }
      list[index].itemActiveOn();
      index++;
      if(index > list.length-1){
        row++;
        index = 0;
      }
    }, 50);

    Util.sendPost(api.getAPIURL("PLAY_THE_GAME"), {
      token: self.userInfo.token,
      multiple: self.double
    }, function(data){
      if(data.error == 0){
        stopcount = data.data.point;
        doStopSlot();
      }else{
        PageAlert.showAlert(data.msg);
      }
    }, function(error){
    	//错误处理
    });

    function doStopSlot(){
      if(row >= 2){
        clearInterval(timer);
        var allcount = 0;
        if(stopcount < index){
          allcount = 18 - (index - stopcount);
        }else{
          allcount = 18 + (stopcount - index);
        }
        self.endGameSlot(allcount, index);
      }else{
        setTimeout(doStopSlot, 1000);
      }
    }
  },
  endGameSlot:function(stopcount, startidx){
    var
    self = this,
    list = self.plist,
    movecount = 0,
    movefps = 50,
    index = startidx;

    setTimeout(lastItemMove, movefps);

    function lastItemMove(){
      if(index == 0){
        list[list.length-1].itemActiveOff();
      }else{
        list[index-1].itemActiveOff();
      }
      list[index].itemActiveOn();//开启选中状态
      if(movecount >= stopcount){
        self.selectedItem = list[index];
        setTimeout(function(){
          var dia_num = self.selectedItem.getItemPrice();
          if(dia_num != 0){
            self.selectedItem.itemActiveOn();//开启选中状态
            self.selectedItem.itemSelectedOn();//开启中奖状态
            self.selectedItem.setItemZOrderUp();
            self.selectedItem.showDiamonds({x: 500, y: -80}, function(){//钻石效果
            ...
            ...
          }else{
            self.sb = false;
          }
        },1000);
      }else{
        index++;
        movecount++;
        if(index == list.length){
          index = 0;
        }
        if(stopcount - movecount <= 1){
          movefps = 500;
        }else if(stopcount - movecount <= 3){
          // movefps = 700;
        }else if(stopcount - movecount <= 6){
          movefps = 250;
        }else if(stopcount - movecount <= 10){
          // movefps = 300;
        }
        setTimeout(lastItemMove, movefps);
      }
    }
  },
  ...
  ...
});

最后停在中奖格这里，做了一个缓动的效果，根据剩余的格子数量，改变下次调用的时间间隔。