cocos creator 如何制作九宫格抽奖

摘要
九宫格抽奖是在移动端常见开发功能点之一，那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来制作一个九宫格。

使用版本
CocosCreator 版本 2.4.3

最终效果

cocos creator目录结构：

代码：

properties: {
	draw1: cc.Node,
	draw2: cc.Node,
	draw3: cc.Node,
	draw4: cc.Node,
	draw5: cc.Node,
	draw6: cc.Node,
	draw7: cc.Node,
	draw8: cc.Node,
	drawBtn: cc.Node,
	closeN: cc.Node,
	jewelImg: cc.SpriteFrame,
	powerImg: cc.SpriteFrame,
	speed: 60, //速度
	speeds:60,//慢速度 
	drawing: false, //抽奖
	times: 6, //转6圈
	timeFlag: 0,
	startFlag: 1,
	runTimes: 1,
	giftId:0,
	drawIng:false		
},

onLoad() {
	cc.vv.add_listen_touch_end(this.closeN, this, this.closeFun);
	cc.vv.add_listen_touch_end(this.drawBtn, this, this.drawFun);
	if(cc.vv.getItem('lottery_num'))
		this.drawBtn.getChildByName('txt').getComponent(cc.Label).string="还有"+cc.vv.getItem('lottery_num')+"次";
	else{
		this.drawBtn.getChildByName('txt').getComponent(cc.Label).string="";
		this.drawBtn.getChildByName('videoDraw').active=true;
		this.setAD();
	}
},
setDraw(res) {
	for (var i = 0; i < res.length; i++) {
		var index = i + 1;
		var item = res[i];
		this['draw' + index].originalData = item;
		this['draw' + index].getChildByName('txt').getComponent(cc.Label).string = item.name;
		if (item.list.jewel && item.list.jewel > 0)
			this['draw' + index].getChildByName('img').getComponent(cc.Sprite).spriteFrame = this.jewelImg;
		if (item.list.power && item.list.power > 0)
			this['draw' + index].getChildByName('img').getComponent(cc.Sprite).spriteFrame = this.powerImg;
	}
},
closeFun() {
	this.node.active = false;
},
drawFun() {
	try{
		if(cc.vv.openid&&!this.drawIng){
			if(cc.vv.getItem('lottery_num')){
				this.drawIng=true;
				cc.http({
					url: cc.vv.baseUrl + '/lottery/draw',
					data: {						
						openid:cc.vv.openid,
						type:'0'
					},
					method: 'post'
				}).then(res => {
					if(res.code==1){
						this.giftId=res.data.gift;
						this.drawing = true;
					}else{
						this.drawIng=false;
						cc.vv.message(res.msg);
					}										
				});
			}else{
				this.drawIng=true;
				cc.vv.request_id = Date.parse(new Date()).toString() + cc.vv.getRandomRange(10000, 99999);
				cc.http({
					url: cc.vv.baseUrl + '/lottery/video',
					data: {						
						request_id:cc.vv.request_id
					},
					method: 'post'
				}).then(res => {
					cc.vv.jewelVideo=4;
					cc.vv.showAdVideo();										
				});
			}				
		}else{
			console.log("请先微信登录！")
		}			
	}catch(e){
		console.log("抽奖出错了！")
	}		
},

结束：
欢迎加入微信群，一起加油