石头剪刀布功能：界面一打开，石头剪刀布三个图标就会循环滚动。点击挺就会对比下标，计算结果
游戏界面：
代码实现：
1import UI_Base from "./UI_Base"; 2import { SlideCell } from "../Common/UI/LoopSlide"; 3import { G_TurntableData } from "../Data/TurntableData"; 4import { SmallGameType, SmallGameResType } from "../Net/MsgDefine"; 5import { ConfigManger } from "../Manager/ConfigManager"; 6import { Util } from "../Common/Util"; 7 8const { ccclass, property } = cc._decorator; 9 10@ccclass 11export default class UI_ShiTouJIanDao extends UI_Base { 12 slotList: UI_ShiTouJIanDaoItem[] = new Array<UI_ShiTouJIanDaoItem>() 13 button: cc.Button 14 curSprite: cc.Sprite 15 playerIcon: cc.Sprite 16 item_icon: cc.Sprite 17 fansName: cc.Label 18 19 private speed: number = 1000 20 private btnArr: cc.Node[] = []; 21 private hRange: cc.Vec2 22 private yMax: number = -88 23 private yMin: number = -616 24 private size: cc.Vec2 = new cc.Vec2(176, 176) 25 private isRun: boolean = false 26 private isPause: boolean = false 27 28 finishedCallBack: Function 29 // 1石头 2剪刀 3布 30 slotDataList: number[] = [1, 2, 3, 1, 1, 2, 3, 2, 3, 1, 3, 3, 2, 2, 1, 2, 3, 2, 2, 1, 2, 3, 3, 2, 1] 31 spriteFrame = {} 32 targetType: number = 2 33 onLoad() { 34 this.item_icon = this.findSpriteByName(this.node, "item_icon") 35 this.playerIcon = this.findSpriteByName(this.node, "playIcon") 36 this.curSprite = this.findSpriteByName(this.node, "Result/icon") 37 this.button = this.findButtonByName(this.node, "okButton") 38 this.addButtonClick(this.button, () => { 39 this.OnStop() 40 }) 41 this.fansName = this.findLabelByName(this.node, "fensi_expdi/fansName") 42 for (let i = 1; i <= 4; i++) { 43 let node = this.findChildByName(this.node, "view/content/item_" + i) 44 let slotItem = node.addComponent(UI_ShiTouJIanDaoItem) 45 slotItem.OnInit(node, this) 46 slotItem.index = i 47 this.slotList.push(slotItem) 48 this.btnArr.push(node) 49 } 50 51 this.spriteFrame[1] = this.slotList[0].img.spriteFrame 52 this.spriteFrame[2] = this.slotList[1].img.spriteFrame 53 this.spriteFrame[3] = this.slotList[2].img.spriteFrame 54 55 //随机一个目标 56 this.targetType = Util.getRandomInt(1, 3) 57 this.curSprite.spriteFrame = this.spriteFrame[this.targetType] 58 59 } 60 61 start() { 62 let film_random_config = ConfigManger.GetTable("film_random_portrait") 63 let array = [] 64 for (var v in film_random_config) { 65 let item = film_random_config[v] 66 let iconImage: string = item.portrait 67 if (iconImage.search("woman") > 0) { 68 array.push(item) 69 } 70 } 71 72 let index = Util.getRandomInt(0, array.length - 1) 73 this.loadTextureByName(this.playerIcon, "sprites/wxusericon/" + array[index].portrait) 74 75 let configTable = ConfigManger.GetTable("game_fingleguess") 76 let config; 77 for (let v in configTable) { 78 config = configTable[v] 79 } 80 81 //计算奖励数量 82 let itemId: number = 0 83 let itenNum: number = 0 84 for (var v in config.currencyAward) { 85 itemId = Number(v) 86 } 87 let itemConfig = ConfigManger.GetTableConfigByKey("item_base", itemId) 88 this.loadTextureByName(this.item_icon, itemConfig.icon) 89 this.RandomFansName() 90 } 91 92 RandomFansName() { 93 this.fansName.string = ConfigManger.GetTableConfigRandom("nickname_female").name; 94 } 95 96 curY: number = 0 97 waitTime: number = 0 98 update(dt) { 99 if (this.isRun) { 100 if (this.waitTime <= 0) { 101 this.curY += 22 102 this.movePosition(22) 103 if (this.curY % this.size.y == 0) { 104 if (this.isPause) { 105 this.isRun = false 106 this.ShowSelectItem() 107 return 108 } 109 this.waitTime = 0.13 110 } 111 } 112 else { 113 this.waitTime -= dt 114 } 115 } 116 } 117 118 ShowSelectItem() { 119 for (let i = 0; i < this.btnArr.length; i++) { 120 if (this.btnArr[i].y == -264) { 121 let ui_item: UI_ShiTouJIanDaoItem = this.btnArr[i].getComponent(UI_ShiTouJIanDaoItem) 122 let curType = this.slotDataList[ui_item.index - 1] 123 ui_item.OnSelect() 124 let result = SmallGameResType.FG_RES_FAIL 125 console.error(this.targetType, curType) 126 127 if (this.targetType == 1) { 128 //石头 129 if (curType == 1) //石头 平局 130 { 131 result = SmallGameResType.FG_RES_DRAW 132 } 133 else if (curType == 2) { //剪刀 失败 134 result = SmallGameResType.FG_RES_FAIL 135 } 136 else if (curType == 3) { //布 胜利 137 result = SmallGameResType.FG_RES_SUCCESS 138 } 139 } 140 else if (this.targetType == 2) { 141 //剪刀 142 if (curType == 1) //石头 胜利 143 { 144 result = SmallGameResType.FG_RES_SUCCESS 145 } 146 else if (curType == 2) { //剪刀 平局 147 result = SmallGameResType.FG_RES_DRAW 148 } 149 else if (curType == 3) { //布 失败 150 result = SmallGameResType.FG_RES_FAIL 151 } 152 } 153 else if (this.targetType == 3) { 154 //布 155 if (curType == 1) //石头 失败 156 { 157 result = SmallGameResType.FG_RES_FAIL 158 } 159 else if (curType == 2) { //剪刀 胜利 160 result = SmallGameResType.FG_RES_SUCCESS 161 } 162 else if (curType == 3) { //布 平局 163 result = SmallGameResType.FG_RES_DRAW 164 } 165 } 166 167 if (result == SmallGameResType.FG_RES_SUCCESS) { 168 console.error("胜利") 169 } 170 else if (result == SmallGameResType.FG_RES_DRAW) { 171 console.error("平局") 172 } 173 else if (result == SmallGameResType.FG_RES_FAIL) { 174 console.error("失败") 175 } 176 G_TurntableData.RequestGameAward(SmallGameType.GAME_FINGLEGUESS, result) 177 178 //延迟两秒 179 this.scheduleOnce(() => { 180 if (this.finishedCallBack != null) { 181 this.finishedCallBack() 182 } 183 }, 1) 184 } 185 } 186 } 187 188 private movePosition(y: number) { 189 190 if (y == 0) return 191 this.btnArr.forEach(element => { 192 element.setPositionY(element.position.y + y) 193 }); 194 195 let maxidx: number = 0; 196 let minidx: number = 0; 197 let miny: number = this.btnArr[0].position.y 198 let maxy: number = this.btnArr[0].position.y 199 200 if (y > 0) { //向上移动 201 for (let index = 1; index < this.btnArr.length; index++) { 202 let element = this.btnArr[index]; 203 if (miny > element.y) { 204 miny = element.y; 205 } 206 if (maxy < element.y) { 207 maxy = element.y; 208 maxidx = index; 209 } 210 } 211 if (maxy > this.yMax) { 212 this.btnArr[maxidx].setPositionY(miny - this.size.y); 213 let operationcell: SlideCell = this.btnArr[maxidx].getComponent(UI_ShiTouJIanDaoItem) 214 let idx: number = operationcell.index; 215 idx = idx + 1; 216 if (idx > this.slotDataList.length) { 217 idx = 1; 218 } 219 operationcell.refreshCellData(idx); 220 } 221 } 222 else if (y < 0) { //向下移动 223 for (let index = 1; index < this.btnArr.length; index++) { 224 let element = this.btnArr[index]; 225 if (miny > element.y) { 226 miny = element.y; 227 minidx = index; 228 } 229 if (maxy < element.y) { 230 maxy = element.y; 231 } 232 } 233 234 if (miny < this.yMin) { 235 this.btnArr[minidx].setPositionY(maxy + this.size.y); 236 let operationcell: UI_ShiTouJIanDaoItem = this.btnArr[minidx].getComponent(UI_ShiTouJIanDaoItem) 237 let idx: number = operationcell.index; 238 idx = idx - 1; 239 if (idx < 1) { 240 idx = this.slotDataList.length; 241 } 242 operationcell.refreshCellData(idx); 243 } 244 } 245 } 246 247 Play(callback) { 248 this.finishedCallBack = callback 249 this.node.active = true 250 this.isRun = true 251 this.isPause = false 252 this.unscheduleAllCallbacks() 253 } 254 255 OnStop() { 256 if (this.isPause == false) { 257 this.isRun = true 258 this.isPause = true 259 } 260 } 261 262 // update (dt) {} 263} 264 265class UI_ShiTouJIanDaoItem extends SlideCell { 266 node: cc.Node 267 ui: UI_ShiTouJIanDao 268 curPosition 269 targetPosition 270 img: cc.Sprite 271 272 isPlay = false 273 274 OnInit(_node: cc.Node, _ui: UI_ShiTouJIanDao) { 275 this.node = _node 276 this.ui = _ui 277 this.img = _ui.findSpriteByName(this.node, "icon") 278 this.curPosition = new cc.Vec2(0, -50) 279 this.targetPosition = new cc.Vec2(0, 0) 280 } 281 282 OnSelect() { 283 let action1 = cc.scaleTo(0.5, 1.2) 284 let action2 = cc.scaleTo(0.2, 0.8) 285 let action3 = cc.scaleTo(0.3, 1) 286 287 this.img.node.runAction(cc.sequence(action1, action2, action3)) 288 } 289 290 refreshCellData(p_index: number) { 291 super.refreshCellData(p_index) 292 this.img.spriteFrame = this.ui.spriteFrame[this.ui.slotDataList[p_index - 1]] 293 } 294} 295 296export class SlideCell extends cc.Component { 297 index: number 298 299 refreshCellData(p_index: number) { 300 this.index = p_index 301 } 302}
大 ``