摘要
九宮格抽獎是在移動端常見開發功能點之一，那如何實現一個高度可復用的九宮格邏輯就顯的特別重要了。接下來我們來制作一個九宮格。

使用版本
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("抽獎出錯了！")} },

結束：
歡迎加入微信群，一起加油

總結

以上是生活随笔為你收集整理的cocos creator 如何制作九宫格抽奖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。