From b665c9dbaa80a070eaa37156ae2e1e9cd265ed46 Mon Sep 17 00:00:00 2001 From: leo <907600065@qq.com> Date: Thu, 26 Mar 2020 18:35:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=EF=BC=8C=E6=8A=8A=E5=87=BD=E6=95=B0=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- RollingNumber/assets/scene/test.fire | 172 ++++++++++++++- RollingNumber/assets/script/RollingBase.js | 162 ++++++++++++++ .../assets/script/RollingBase.js.meta | 9 + RollingNumber/assets/script/RollingModel.js | 19 ++ .../assets/script/RollingModel.js.meta | 9 + RollingNumber/assets/script/RollingNumber.js | 1 + RollingNumber/assets/script/RollingNumber3.js | 205 ++++++++++++++++++ .../assets/script/RollingNumber3.js.meta | 9 + RollingNumber/assets/script/test.js | 14 ++ 9 files changed, 591 insertions(+), 9 deletions(-) create mode 100644 RollingNumber/assets/script/RollingBase.js create mode 100644 RollingNumber/assets/script/RollingBase.js.meta create mode 100644 RollingNumber/assets/script/RollingModel.js create mode 100644 RollingNumber/assets/script/RollingModel.js.meta create mode 100644 RollingNumber/assets/script/RollingNumber3.js create mode 100644 RollingNumber/assets/script/RollingNumber3.js.meta diff --git a/RollingNumber/assets/scene/test.fire b/RollingNumber/assets/scene/test.fire index 2325830..b6174a7 100644 --- a/RollingNumber/assets/scene/test.fire +++ b/RollingNumber/assets/scene/test.fire @@ -81,16 +81,19 @@ }, { "__id__": 42 + }, + { + "__id__": 45 } ], "_tag": -1, "_active": true, "_components": [ { - "__id__": 45 + "__id__": 49 }, { - "__id__": 46 + "__id__": 50 } ], "_prefab": null, @@ -696,7 +699,7 @@ } ], "_tag": -1, - "_active": false, + "_active": true, "_components": [ { "__id__": 21 @@ -732,8 +735,8 @@ "_scaleY": 1, "_position": { "__type__": "cc.Vec2", - "x": -176, - "y": 54 + "x": 273, + "y": -6 }, "_skewX": 0, "_skewY": 0, @@ -803,14 +806,14 @@ }, "_enabled": true, "_useOriginalSize": false, - "_actualFontSize": 40, + "_actualFontSize": 20, "_fontSize": 20, "_lineHeight": 40, "_enableWrapText": false, "_N$file": null, "_isSystemFontUsed": true, "_spacingX": 0, - "_N$string": "位数", + "_N$string": "滚动", "_N$horizontalAlign": 1, "_N$verticalAlign": 1, "_N$fontFamily": "Arial", @@ -915,8 +918,8 @@ "target": { "__id__": 2 }, - "component": "", - "handler": "onClick", + "component": "test", + "handler": "onEventClicked2", "customEventData": "fixed" }, { @@ -1731,6 +1734,11 @@ "frameSpeedOffset": 0.04, "lap": 2, "finallyNumber": 0, + "offset": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, "prefab": { "__uuid__": "4639edfe-5f74-45f9-9fe3-65a79e365fd3" }, @@ -1767,6 +1775,149 @@ } ] }, + { + "__type__": "cc.Node", + "_name": "Rolling", + "_objFlags": 0, + "_parent": { + "__id__": 2 + }, + "_children": [], + "_tag": -1, + "_active": true, + "_components": [ + { + "__id__": 46 + }, + { + "__id__": 47 + }, + { + "__id__": 48 + } + ], + "_prefab": null, + "_id": "a5h4CTcz9Ai4soBe15Mb/r", + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_cascadeOpacityEnabled": true, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 26, + "height": 36 + }, + "_rotationX": 0, + "_rotationY": 0, + "_scaleX": 1, + "_scaleY": 1, + "_position": { + "__type__": "cc.Vec2", + "x": 88, + "y": 0 + }, + "_skewX": 0, + "_skewY": 0, + "_localZOrder": 0, + "_globalZOrder": 0, + "_opacityModifyRGB": false, + "groupIndex": 0 + }, + { + "__type__": "cc.Mask", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 45 + }, + "_enabled": true, + "_type": 0, + "_segements": 64, + "_N$spriteFrame": null, + "_N$alphaThreshold": 1, + "_N$inverted": false + }, + { + "__type__": "55881U56qZAU5XddPHd1QyV", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 45 + }, + "_enabled": true, + "offset": { + "__type__": "cc.Vec2", + "x": 0, + "y": 2 + }, + "prefab": { + "__uuid__": "4639edfe-5f74-45f9-9fe3-65a79e365fd3" + } + }, + { + "__type__": "518e9EgIzFM3Lka4q1/ErXu", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 45 + }, + "_enabled": true, + "direction": 0, + "rollingBase": { + "__id__": 47 + }, + "speedNormal": 1, + "offsetElastic": { + "__type__": "cc.Vec2", + "x": 0, + "y": 2 + }, + "timeBack": 0.4, + "showCount": 1, + "rollingCount": 13, + "spriteFrames": [ + { + "__uuid__": "187189c9-582f-4213-a754-1c33a9512de9" + }, + { + "__uuid__": "8f1c5e92-c9a1-4d23-bc65-dd6d43a0aa33" + }, + { + "__uuid__": "4490822e-9312-49ac-8771-d7c0a3efeb9b" + }, + { + "__uuid__": "2f6db5a8-c805-44cd-8952-904323d03081" + }, + { + "__uuid__": "161c849c-248e-4c24-b6be-3c0ad93f875d" + }, + { + "__uuid__": "32663112-ad42-4e3f-bbad-74d8466d3aa7" + }, + { + "__uuid__": "435cc795-491d-4683-ad4e-9497e2dfca39" + }, + { + "__uuid__": "bd1c6114-80cb-488f-9240-3f19ebce5786" + }, + { + "__uuid__": "abf1a450-4e37-496f-8197-2a4b902dbc1a" + }, + { + "__uuid__": "7f70d486-1fdd-42ad-91df-e729d7eacce3" + } + ] + }, { "__type__": "cc.Canvas", "_name": "", @@ -1794,6 +1945,9 @@ "rolling": { "__id__": 42 }, + "rolling3": { + "__id__": 45 + }, "editBox": { "__id__": 39 } diff --git a/RollingNumber/assets/script/RollingBase.js b/RollingNumber/assets/script/RollingBase.js new file mode 100644 index 0000000..5a161e6 --- /dev/null +++ b/RollingNumber/assets/script/RollingBase.js @@ -0,0 +1,162 @@ +const RollingModel = require('RollingModel'); + +const Direction = cc.Enum({ + 'Vertical': 0, + 'Horizontal': 1, +}); + +cc.Class({ + extends: cc.Component, + + properties: { + offset: cc.Vec2, //偏移值 + prefab: cc.Prefab, //显示item + }, + + onLoad() { + this.node.model = new RollingModel(); + }, + + start() { + this.direction = this.node.model.direction; + }, + + //清除item + initClearItem() { + this.node.children.forEach((node) => { + node.destroy(); + }); + }, + + //初始化需要滚动的item 个数为count+1 + initItem(count) { + let len = count, height, width, posStart; + this.node.model.items = []; + + let node = cc.instantiate(this.prefab); + height = node.height + this.offset.y; + width = node.width + this.offset.x; + + if (this.direction == Direction.Vertical) { + posStart = cc.v2(0, -height * 0.5 * (len - 1)); + } else if (this.direction == Direction.Horizontal) { + posStart = cc.v2(-width * 0.5 * (len - 1), 0); + } + //确定边界 + this.initBorder(posStart, width, height, count); + this.node.model.posStart = posStart; + + function initNode(node, i) { + if (this.direction == Direction.Vertical) { + node.y = posStart.y + i * height; + } else if (this.direction == Direction.Horizontal) { + node.x = posStart.x += i * width; + } + this.node.model.items.push(node); + this.node.addChild(node); + } + + initNode.bind(this)(node, 0); + //添加count+1个 + for (let i = 1; i < len + 1; i++) { + let node = cc.instantiate(this.prefab); + initNode.bind(this)(node, i); + } + }, + + //初始化边界 + initBorder(posStart, width, height, index) { + + if (this.direction == Direction.Vertical) { + this.node.model.borderUp = cc.v2(0, posStart.y + height * index); + this.node.model.borderDown = cc.v2(0, posStart.y - height); + } else { + this.node.model.borderLeft = cc.v2(posStart.x - width, 0); + this.node.model.borderRight = cc.v2(posStart.x + width * index, 0); + } + + }, + + //移动item + onMoveItem(node, delta) { + if (this.direction == Direction.Vertical) { + node && (node.y += delta); + } else if (this.direction == Direction.Horizontal) { + node && (node.x += delta); + } + }, + + //是否越界 + onCheckBorder(node, borderPos) { + if (this.direction == Direction.Vertical) { + if (node.y < borderPos.y) { + return true; + } else { + return false; + } + } else if (this.direction == Direction.Horizontal) { + if (node.x > borderPos.x) { + return true; + } else { + return false; + } + } + }, + + //设置新位置， + setStartPos(node, startPos, borderPos) { + //得到偏移 + if (this.direction == Direction.Vertical) { + let offset = node.y - borderPos.y; + node.y = startPos.y + offset; + } else if (this.direction == Direction.Horizontal) { + let offset = node.x - borderPos.x; + node.x = startPos.x + offset; + } + }, + + //接近终点 + getNearZeroNode(items) { + let result = items[0]; + if (this.direction == Direction.Vertical) { + for (let i = 1; i < items.length; i++) { + let item = items[i]; + if (item.y < result.y) { + result = item; + } + } + return result; + } else if (this.direction == Direction.Horizontal) { + for (let i = 1; i < items.length; i++) { + let item = items[i]; + if (item.x > result.x) { + result = item; + } + } + return result; + } + }, + + //接近起点 + getNearUpNode(items) { + let result = items[0]; + if (this.direction == Direction.Vertical) { + for (let i = 1; i < items.length; i++) { + let item = items[i]; + if (item.y > result.y) { + result = item; + } + } + return result; + } else if (this.direction == Direction.Horizontal) { + for (let i = 1; i < items.length; i++) { + let item = items[i]; + if (item.x < result.x) { + result = item; + } + } + return result; + } + }, + +}); \ No newline at end of file diff --git a/RollingNumber/assets/script/RollingBase.js.meta b/RollingNumber/assets/script/RollingBase.js.meta new file mode 100644 index 0000000..3a0230a --- /dev/null +++ b/RollingNumber/assets/script/RollingBase.js.meta @@ -0,0 +1,9 @@ +{ + "ver": "1.0.5", + "uuid": "55881539-eaa6-4053-95dd-74f1ddd50c95", + "isPlugin": false, + "loadPluginInWeb": true, + "loadPluginInNative": true, + "loadPluginInEditor": false, + "subMetas": {} +} \ No newline at end of file diff --git a/RollingNumber/assets/script/RollingModel.js b/RollingNumber/assets/script/RollingModel.js new file mode 100644 index 0000000..b3f07ce --- /dev/null +++ b/RollingNumber/assets/script/RollingModel.js @@ -0,0 +1,19 @@ + + +class RollingModel { + constructor() { + this.direction = 0; + this.time = 0; + this.curIndex = 0; + this.items = []; + this.posStart = null; + this.borderUp = null; + this.borderDown = null; + this.borderLeft = null; + this.borderRight = null; + this.rollNumbers = []; + } + +} + +module.exports = RollingModel; \ No newline at end of file diff --git a/RollingNumber/assets/script/RollingModel.js.meta b/RollingNumber/assets/script/RollingModel.js.meta new file mode 100644 index 0000000..daf4679 --- /dev/null +++ b/RollingNumber/assets/script/RollingModel.js.meta @@ -0,0 +1,9 @@ +{ + "ver": "1.0.5", + "uuid": "fa7ec7df-cefb-4016-baa0-c4a443c3baa7", + "isPlugin": false, + "loadPluginInWeb": true, + "loadPluginInNative": true, + "loadPluginInEditor": false, + "subMetas": {} +} \ No newline at end of file diff --git a/RollingNumber/assets/script/RollingNumber.js b/RollingNumber/assets/script/RollingNumber.js index 9d9ced8..337a476 100644 --- a/RollingNumber/assets/script/RollingNumber.js +++ b/RollingNumber/assets/script/RollingNumber.js @@ -30,6 +30,7 @@ cc.Class({ this.finallyNumber = data * 1; this.initRollNumbers(this.lap, this.finallyNumber); + this.onRemoveItem(); this.initItme(); for (let i = 0; i < this.items.length; i++) { let item = this.items[i]; diff --git a/RollingNumber/assets/script/RollingNumber3.js b/RollingNumber/assets/script/RollingNumber3.js new file mode 100644 index 0000000..85e9146 --- /dev/null +++ b/RollingNumber/assets/script/RollingNumber3.js @@ -0,0 +1,205 @@ + +const Direction = cc.Enum({ + 'Vertical': 0, + 'Horizontal': 1, +}); +const RollingBase = require('RollingBase'); + +//返回int +Math.randomInt = function (min, max) { + let numb = Math.random() * (max - min + 1); + return min + parseInt(numb); +}; +cc.Class({ + extends: cc.Component, + + properties: { + direction: { + default: Direction.Vertical, + type: Direction + }, //Vertical or Horizontal + rollingBase: RollingBase, + speedNormal: 10, //移动时速度 + offsetElastic: cc.Vec2, + timeBack: 0.4, + showCount: 1, + rollingCount: 13, + spriteFrames: [cc.SpriteFrame], //切换item的texture + }, + + onLoad() { + this.isOver = true; + }, + + // + init(data) { + this.state = 0; + this.time = 0; + this.curIndex = 0; + this.isOver = true; + this.speed = this.speedNormal; + this.direction = this.rollingBase.direction; + + this.rollingBase.initClearItem(); + this.rollingBase.initItem(this.showCount); + this.initRollNumbers(this.showCount, true); + + for (let i = 0; i < this.showCount; i++) { + let item = this.node.model.items[i]; + this.onSwithSpriteFrame(item, this.rollNumbers[this.curIndex++]); + } + }, + + //滚动显示结果 data=[] + initResult(data, soundFn, fn) { + this.state = 0; + this.time = 0; + this.curIndex = 0; + this.isOver = false; + this.speed = this.speedNormal; + this.direction = this.node.model.direction; + + this.fn = fn; + this.soundFn = soundFn; + //初始化要显示数据， + this.initRollNumbers(this.rollingCount - this.showCount, true, data); + + let item = this.rollingBase.getNearUpNode(this.node.model.items); + this.onSwithSpriteFrame(item, this.rollNumbers[this.curIndex++]); + }, + + //初始化滚动数据 + initRollNumbers(count, isClear = false, list = []) { + if (isClear) { + this.rollNumbers = []; + } + let i = 0, len = count, spriteCount = this.spriteFrames.length; + for (i = 0; i < len; i++) { + this.rollNumbers.push(Math.randomInt(0, spriteCount - 1)); + } + for (i = 0; i < list.length; i++) { + this.rollNumbers.push(list[i]); + } + }, + + //清除item + initClearItem() { + this.node.children.forEach((node) => { + node.destroy(); + }); + }, + + //当前滚动的数字 + getCurIndex() { + return this.rollNumbers[this.curIndex++]; + }, + + //结果后回弹，然后回调 + resetLocation() { + let zeroNode = this.rollingBase.getNearZeroNode(this.node.model.items), v2; + if (this.direction == Direction.Vertical) { + let offset = this.node.model.posStart.y - zeroNode.y; + v2 = cc.v2(0, offset); + } else if (this.direction == Direction.Horizontal) { + let offset = this.node.model.posStart.x - zeroNode.x; + v2 = cc.v2(offset, 0); + } + for (let i = 0; i < this.node.model.items.length; i++) { + let item = this.node.model.items[i]; + item.runAction(cc.moveBy(this.timeBack, v2).easing(cc.easeElasticOut(0.4))); + } + //结果回调 + this.scheduleOnce(() => { + this.fn && this.fn(); + }, this.timeBack); + }, + + onSwithSpriteFrame(node, index) { + let sprite = node.getComponent(cc.Sprite); + sprite.spriteFrame = this.spriteFrames[index] || null; + }, + + setSpeed() { + //状态1下，减速 + if (this.state == 1) { + if (this.direction == Direction.Vertical) { + if (this.speed - this.offsetElastic.y > 0.01) { + this.speed = this.offsetElastic.y; + } else { + this.speed = 0; + } + } else if (this.direction == Direction.Horizontal) { + if (this.speed - this.offsetElastic.x > 0.01) { + this.speed = this.offsetElastic.x; + } else { + this.speed = 0; + } + } + this.soundFn && this.soundFn(); + } + }, + + //如果结果了，回弹 + onCheckRollingOver() { + if (this.speed == 0) { + if (this.isOver == false) { + // console.log('time=', this.time); + this.resetLocation(); + } + this.isOver = true; + + return; + } + }, + + //当移动到最后一个时， + judgeRollingOver() { + if (this.curIndex == this.rollNumbers.length + 1) { + this.state = 1; + } + }, + + update(dt) { + if (this.isOver) { + return; + } + this.time += dt; + //状态为1时时，减速到0 + this.setSpeed(); + //结束后，回弹 + this.onCheckRollingOver(); + + let i = 0; + //移动 + for (i = 0; i < this.node.model.items.length; i++) { + let item = this.node.model.items[i]; + this.rollingBase.onMoveItem(item, -this.speed); + } + + //是否过界 + for (i = 0; i < this.node.model.items.length; i++) { + let item = this.node.model.items[i], isBorder; + if (this.direction == Direction.Vertical) { + isBorder = this.rollingBase.onCheckBorder(item, this.node.model.borderDown); + } else if (this.direction == Direction.Horizontal) { + isBorder = this.rollingBase.onCheckBorder(item, this.node.model.borderRight); + } + if (isBorder) { + if (this.direction == Direction.Vertical) { + this.rollingBase.setStartPos(item, this.node.model.borderUp, this.node.model.borderDown); + } else if (this.direction == Direction.Horizontal) { + this.rollingBase.setStartPos(item, this.node.model.borderLeft, this.node.model.borderRight); + } + let index = this.getCurIndex(); + this.onSwithSpriteFrame(item, index); + //是否结束，设置state=1 减速状态 + this.judgeRollingOver(); + } + } + + }, + + onDestroy() { + + } +}); \ No newline at end of file diff --git a/RollingNumber/assets/script/RollingNumber3.js.meta b/RollingNumber/assets/script/RollingNumber3.js.meta new file mode 100644 index 0000000..20ef00b --- /dev/null +++ b/RollingNumber/assets/script/RollingNumber3.js.meta @@ -0,0 +1,9 @@ +{ + "ver": "1.0.5", + "uuid": "518e9120-2331-4cdc-b91a-e2ad7f12b5ee", + "isPlugin": false, + "loadPluginInWeb": true, + "loadPluginInNative": true, + "loadPluginInEditor": false, + "subMetas": {} +} \ No newline at end of file diff --git a/RollingNumber/assets/script/test.js b/RollingNumber/assets/script/test.js index ffef7e6..cbbce56 100644 --- a/RollingNumber/assets/script/test.js +++ b/RollingNumber/assets/script/test.js @@ -3,11 +3,19 @@ cc.Class({ properties: { rolling: cc.Node, + rolling3: cc.Node, editBox: cc.EditBox, }, onLoad() { this.rollingNubmer = this.rolling.getComponent('RollingNumber'); + this.rollingNumber3 = this.rolling3.getComponent('RollingNumber3'); + + }, + + start() { + this.rollingNumber3.init(); + }, registerEvent() { @@ -24,6 +32,12 @@ cc.Class({ this.rollingNubmer.init(number * 1); }, + onEventClicked2() { + let number = this.editBox.string; + console.log(number); + this.rollingNumber3.initResult([number * 1]); + }, + update(dt) { },