action-jump.vue 50 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924
  1. <!-- 新版本跳区域部分文件 -->
  2. <template>
  3. <view style="width: 750rpx;">
  4. <view class="flex justify-center" style="margin-top: 68rpx;">
  5. <!-- 目前格子数量不代表数字,显示完成度而已 -460rpx;-->
  6. <view class="grid-progress-vertical-container" style="top:-376rpx;">
  7. <view class="grid-progress-vertical-bar">
  8. <view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
  9. v-if="index!==0">
  10. <view
  11. :class="showCurCount>=index? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
  12. </view>
  13. <view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
  14. class="grid-progress-vertical-text" style="position: absolute;right: 0;top: -4px;">
  15. {{Math.floor(taskSignCount / 26 * index)}}
  16. </view>
  17. </view>
  18. </view>
  19. <view class="grid-progress-vertical-bar">
  20. <view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
  21. v-if="index!==0">
  22. <view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
  23. class="grid-progress-vertical-text" style="position: absolute;left: 0;top: -4px;">
  24. {{Math.floor(taskSignCount / 26 * index)+taskSignCount/2}}
  25. </view>
  26. <!-- 设置空位 -->
  27. <view></view>
  28. <view
  29. :class="showCurCount>=index+13? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view style="position: relative;">
  36. <!-- <image class="position-absolute-left-top" style="width: 86.12px;height:55.96px; left: 146rpx;top:-100rpx;"
  37. src="../../../static/modal/action-jump/progress-tip-add.png"></image> -->
  38. <view class="position-absolute-left-top flex justify-center align-center " style="width: 86.12px;height:55.96px;
  39. left: 146rpx;top:-90rpx; ">
  40. <view style="transform: scale(0.5);">
  41. <view class="sprite-yellow-arrow " :class="bRuning?'animation-play-state-play':''"></view>
  42. </view>
  43. </view>
  44. <view class="position-absolute-right-bottom flex justify-center align-center "
  45. style="width: 317rpx; height:138px; right: 46rpx; bottom: 15rpx;">
  46. <view class="flex flex-direction justify-between" style="transform: scale(0.5); height: 276px; ">
  47. <block v-if="bJumpPlay">
  48. <view class="sprite-rightToLeftArrow" :class="bJumpPlay?'sprite-rightToLeftArrow-play':''">
  49. </view>
  50. <view class="sprite-rightToLeftArrow" :class="bJumpPlay?'sprite-rightToLeftArrow-play':''">
  51. </view>
  52. </block>
  53. <block v-else>
  54. <image style="width: 317px; height: 42px;"
  55. src="../../../static/modal/action-jump/progress-tip.png"></image>
  56. <image style="width: 317px; height: 42px;"
  57. src="../../../static/modal/action-jump/progress-tip.png"></image>
  58. </block>
  59. </view>
  60. </view>
  61. <!-- class="position-absolute-center" -->
  62. <canvas canvas-id="actionJumpCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
  63. </view>
  64. <view style="position: absolute;
  65. top: 30px;
  66. bottom: 0;
  67. left: 0;
  68. right: 0;
  69. justify-content: center;
  70. align-items: center;">
  71. <canvas canvas-id="effectCanvas" :style="{ width: canvasW + 'px', height: '164px' }"></canvas>
  72. </view>
  73. <view class="flex align-center justify-center" style="font-size: 14px; width:750rpx;">
  74. <view style="position: relative;">
  75. <image style="width: 135px;height: 75px;" src="../../../static/modal/action-jump/Fill.png"></image>
  76. <view class="mid-absolute flex flex-direction align-center justify-center text-white">
  77. <view class="flex align-center">
  78. <image style="width: 22rpx;height: 28rpx;"
  79. src="../../../static/modal/action-jump/jumpSpeed.png"></image>
  80. <view style="margin-left: 6rpx;">平均速度</view>
  81. </view>
  82. <view style="margin-top: 12rpx;">{{averageSpeed}}</view>
  83. </view>
  84. </view>
  85. <view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
  86. <image style="width: 110px;height: 110px;"
  87. src="../../../static/modal/action-jump/mid-button-orange@2x.png">
  88. </image>
  89. <image v-if="!bJumpPlay" class="mid-absolute" style="left:12rpx; width: 56rpx;height: 70rpx;"
  90. src="../../../static/play.png">
  91. </image>
  92. <image v-else class="mid-absolute" style="width: 100rpx;height: 100rpx;"
  93. src="../../../static/e-pause.png">
  94. </image>
  95. </view>
  96. <view style="position: relative;">
  97. <image style="width: 135px;height: 75px; transform: scaleX(-1);"
  98. src="../../../static/modal/action-jump/Fill.png"></image>
  99. <view class="mid-absolute flex flex-direction align-center justify-center text-white">
  100. <view class="flex align-center">
  101. <image style="width: 22rpx;height: 28rpx;"
  102. src="../../../static/modal/action-jump/jumpCalorie.png"></image>
  103. <view style="margin-left: 6rpx;">卡路里</view>
  104. </view>
  105. <view style="margin-top: 12rpx;">{{Math.floor(jumpCalorie)}}</view>
  106. </view>
  107. </view>
  108. </view>
  109. <view class="flex align-center justify-center" style="width: 750rpx;margin-top: 16rpx;">
  110. <view class="flex justify-center align-center" style="height: 120rpx; width: 444rpx; ">
  111. <view class="text-12px text-white text-center">
  112. {{taskDescribe}}
  113. </view>
  114. </view>
  115. </view>
  116. <!-- <view style="height: 41px;"></view> -->
  117. <!-- 测试按钮 -->
  118. <!-- <view style="display: flex;justify-content: space-between;">
  119. <view>{{isY?'Y':'X'}}</view>
  120. <button @click="onChangeY">Y为旋转轴</button>
  121. <button @click="onChangeX">X为旋转轴</button>
  122. </view> -->
  123. <!-- #ifdef H5 -->
  124. <view style="display: flex;justify-content: space-between;" class="margin-top margin-bottom">
  125. <button @click="onJumpType(0)">jump</button>
  126. <button @click="onJumpType(1)">left</button>
  127. <button @click="onJumpType(2)">right</button>
  128. <button @click="onJumpType(3)">rLeft</button>
  129. <button @click="onJumpType(4)">rRight</button>
  130. </view>
  131. <!-- #endif -->
  132. <!-- <view style="display: flex;justify-content: space-around; padding-bottom: 100rpx;">
  133. <view style="font-size: 14px;">t:{{countdown}}</view>
  134. <view style="font-size: 14px;">e:{{eliminationCount}}</view>
  135. <view style="font-size: 14px;">f:{{faultCount}}</view>
  136. </view> -->
  137. </view>
  138. </template>
  139. <script>
  140. import ActionJump from "@/util/util-js/action/jump-0.3.js"
  141. import {
  142. CONDITIONPASSED
  143. } from "@/util/util-js/enum.js"
  144. import Firework from "@/util/util-js/effect/firework.js"
  145. import Animation from "@/util/util-js/Animation.js"
  146. import puchConfig from "@/util/util-js/puchConfig.js"
  147. import {
  148. mapState,
  149. mapMutations
  150. } from 'vuex';
  151. export default {
  152. computed: mapState(['systemInfo', 'bOldDeviceType']),
  153. components: {
  154. },
  155. props: {
  156. showTime: {
  157. type: Number,
  158. default: 0
  159. },
  160. levelData: {
  161. type: Object,
  162. default: null
  163. },
  164. currentMode: {
  165. type: String,
  166. default: ''
  167. }
  168. },
  169. data() {
  170. return {
  171. isY: true,
  172. canvasW: 0, // 画布宽
  173. canvasH: 0, // 画布高
  174. // SystemInfo: {}, // 设备信息
  175. directionJumpRight: null,
  176. directionJumpLeft: null,
  177. midJump: null,
  178. rotateJumpRight: null,
  179. rotateJumpLeft: null,
  180. directionJumpWhiteRight: null,
  181. directionJumpWhiteLeft: null,
  182. midJumpWhite: null,
  183. rotateJumpWhiteRight: null,
  184. rotateJumpWhiteLeft: null,
  185. //参考图片
  186. cankao: null,
  187. jumpTipImage: null,
  188. JumpTipOrange: null,
  189. jumpNormalLine: null,
  190. jumpNormalRect: null,
  191. jumpNormalWidth: 70,
  192. jumpNormalHeight: 164,
  193. jumpProgressTip: null,
  194. jumpTypeArray: [{
  195. jumpName: 'NORMAL',
  196. jumpCode: 0,
  197. icon: 'midJump',
  198. scaleX: 1,
  199. bTrigger: false,
  200. bShow: true,
  201. }, {
  202. jumpName: 'LEFT',
  203. jumpCode: 1,
  204. icon: 'directionJump',
  205. scaleX: 1,
  206. bTrigger: false,
  207. bShow: true,
  208. }, {
  209. jumpName: 'RIGHT',
  210. jumpCode: 2,
  211. icon: 'directionJump',
  212. scaleX: 1,
  213. bTrigger: false,
  214. bShow: true,
  215. }, {
  216. jumpName: 'LEFT_ROTATE',
  217. jumpCode: 3,
  218. icon: 'rotateJump',
  219. scaleX: 1,
  220. bTrigger: false,
  221. bShow: true,
  222. }, {
  223. jumpName: 'RIGHT_ROTATE',
  224. jumpCode: 4,
  225. icon: 'rotateJump',
  226. scaleX: 1,
  227. bTrigger: false,
  228. bShow: true,
  229. }],
  230. spawnArray: [],
  231. deleteSpawn: null, //已删除的对象
  232. deleteImage: null,
  233. /**
  234. * 生成的背景位置
  235. */
  236. spawnPos: [],
  237. spawnAnimation: null,
  238. spawnProcess: 1,
  239. //下一个生成是相反的方向
  240. bNextSpawnRightDirection: false,
  241. bNextSpawnRightRotateDirection: false,
  242. //生成预制的模板,用count 来判断生成哪一种
  243. template: [{ //原地
  244. count: 1,
  245. spawnList: [
  246. [0]
  247. ]
  248. }, {
  249. count: 2,
  250. spawnList: [
  251. [2, 1],
  252. [1, 2],
  253. [3, 4],
  254. [4, 3]
  255. ]
  256. }, {
  257. count: 3,
  258. spawnList: [
  259. [2, 0, 1],
  260. [1, 0, 2],
  261. [3, 0, 4],
  262. [4, 0, 3]
  263. ]
  264. }, ],
  265. //模板对象池,管理生成对象
  266. templatePool: [],
  267. levelType: 0,
  268. countdown: 60,
  269. countdownInterval: null,
  270. faultCount: 0,
  271. eliminationCount: 0,
  272. bJumpPlay: false,
  273. jumpCalorie: 0,
  274. averageSpeedInterval: null,
  275. averageSpeed: 0,
  276. tempHitCount: 0,
  277. //硬件设备处理
  278. BLEAccIndex: 0,
  279. xA: 0,
  280. yA: 0,
  281. zA: 0,
  282. actionJumpObj: null,
  283. /**
  284. * 交互数据处理
  285. */
  286. //当前选择的关卡信息
  287. selfLevelData: null,
  288. // 双人模式下 数据
  289. //标记块数量
  290. taskSignCount: 0, //总数
  291. taskSignCurCount: 0, //当前计数
  292. //{"type":1,"explain":"规定时间内跳完所有标志块","limitType":1}
  293. taskConditionPassed: null,
  294. taskDescribe: '',
  295. //满格的数值是 25
  296. maxShowCount: 13,
  297. addShowCountUnit: 0,
  298. showCurCount: 0,
  299. roundingCount: 0,
  300. //游戏结束
  301. isGameOver: false,
  302. //pk模式下操作
  303. leftShowCurCount: 0,
  304. rightShowCurCount: 0,
  305. isleftPlayer: true,
  306. /**
  307. * 是否允许绘制
  308. */
  309. canOnDraw: false,
  310. /**
  311. * 是否去到下一个关卡
  312. */
  313. canGoNext: false,
  314. /**
  315. * 生成的特效
  316. */
  317. canSpawnTemp: null,
  318. onLogData: '',
  319. /**
  320. * 是否显示关卡提示
  321. */
  322. bTipLevel: false,
  323. /**
  324. * 烟花相关
  325. */
  326. // firework collection
  327. fireworks: [],
  328. fireworkImage: null,
  329. loop: null,
  330. count: 100,
  331. effectCanvas: null,
  332. effectCurrentSpawn: null,
  333. effectSpawnPosX: 0,
  334. /**
  335. * 烟花特效
  336. */
  337. bDrawBoomEffect: false,
  338. //绘制箭头效果
  339. bRuning: false,
  340. bRuningInfinite: false,
  341. yellowRuningTimeout: null
  342. }
  343. },
  344. watch: {
  345. levelData(val) {
  346. //更新数据
  347. // console.log("levelData ============>"+JSON.stringify(val));
  348. if (val) {
  349. this.taskSignCount = val.signCount;
  350. this.taskConditionPassed = val.conditionPassed;
  351. this.taskDescribe = val.describe;
  352. this.addShowCountUnit = (this.maxShowCount * 2) / this.taskSignCount;
  353. // console.log("this.addShowCountUnit:", this.addShowCountUnit, this.maxShowCount * 2, this
  354. // .taskSignCount);
  355. this.showCount = 0;
  356. //用signType 做等级类型
  357. this.levelType = val.signType;
  358. // console.log(JSON.stringify(this.taskConditionPassed));
  359. }
  360. },
  361. currentMode(val) {
  362. // console.log('==========> action jump currentMode:', val);
  363. }
  364. },
  365. created() {
  366. let _self = this;
  367. this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
  368. this.effectCanvas = uni.createCanvasContext("effectCanvas", this);
  369. // this.SystemInfo = this.systemInfo; // uni.getSystemInfoSync();
  370. this.canvasW = this.systemInfo.windowWidth; // 画布宽度
  371. this.canvasH = 147.68;
  372. this.onLoadImage();
  373. setTimeout(() => {
  374. this.onListenActionJump();
  375. }, 2000)
  376. //更新一次状态
  377. const value = uni.getStorageSync('levelButtonPrompt');
  378. if (value) {
  379. _self.bTipLevel = !value.isSelected;
  380. } else {
  381. _self.bTipLevel = true;
  382. }
  383. // console.log('==========>levelButtonPrompt:', _self.bTipLevel);
  384. if (this.averageSpeedInterval) {
  385. clearInterval(this.averageSpeedInterval);
  386. this.averageSpeedInterval = null;
  387. }
  388. //计算平均速度
  389. this.averageSpeedInterval = setInterval(() => {
  390. this.averageSpeed = this.tempHitCount;
  391. this.tempHitCount = 0;
  392. }, 3000)
  393. },
  394. beforeDestroy() {},
  395. methods: {
  396. ...mapMutations(['onWriteBLEConnectionValue', 'onConvertDeviceData', "onSendSocketMessage",
  397. 'jumpIdenModule_onJump6AxisDataUpdate'
  398. ]),
  399. //更新新手状态提示
  400. onUpdateTipLevelValue(value) {
  401. this.bTipLevel = value;
  402. },
  403. onListenActionJump() {
  404. let _self = this;
  405. console.log("*****************onListenActionHit*****************************");
  406. // _self.actionJumpObj = new ActionJump();
  407. // _self.actionJumpObj.addEventListener('resultant', (e) => {
  408. // if (e.type == 'stateDataOfJump') {
  409. // //发送给game,在game里面处理判断
  410. // this.listenStateDataOfJump(e);
  411. // } else if (e.type == 'stop') {
  412. // console.log("stop");
  413. // this.onClearData();
  414. // if (this.canOnDraw) {
  415. // this.canOnDraw = false;
  416. // // //这里更新特效
  417. // // this.onDrawEffect(this.canSpawnTemp);
  418. // this.onDraw("tipHit", true);
  419. // }
  420. // if (this.canGoNext) {
  421. // this.canGoNext = false;
  422. // // //这里更新特效
  423. // // this.onDrawEffect(this.canSpawnTemp);
  424. // //绘制新触发状态
  425. // this.onDraw("normal", false);
  426. // setTimeout(() => {
  427. // this.startJumpGame();
  428. // }, 500)
  429. // }
  430. // // console.log('stop');
  431. // //这里处理生成下一个
  432. // } else if (e.type == 'log') {
  433. // if (e.logType == 'normal') {
  434. // console.log(e.data);
  435. // } else if (e.logType == 'error') {
  436. // console.error(e.data);
  437. // } else if (e.logType == 'warn') {
  438. // console.warn(e.data);
  439. // } else if (e.logType == 'socket') {
  440. // this.onSendSocketMessage(e.data);
  441. // }
  442. // }
  443. // })
  444. },
  445. //load 相关图片
  446. onLoadImage() {
  447. let _self = this;
  448. uni.getImageInfo({
  449. src: "../../../static/modal/action-jump/directionJump-left.png",
  450. success: function(image) {
  451. _self.directionJumpLeft = image;
  452. }
  453. });
  454. uni.getImageInfo({
  455. src: "../../../static/modal/action-jump/directionJump-right.png",
  456. success: function(image) {
  457. _self.directionJumpRight = image;
  458. }
  459. });
  460. uni.getImageInfo({
  461. src: "../../../static/modal/action-jump/midJump.png",
  462. success: function(image) {
  463. _self.midJump = image;
  464. }
  465. });
  466. uni.getImageInfo({
  467. src: "../../../static/modal/action-jump/rotateJump-right.png",
  468. success: function(image) {
  469. _self.rotateJumpRight = image;
  470. }
  471. });
  472. uni.getImageInfo({
  473. src: "../../../static/modal/action-jump/rotateJump-left.png",
  474. success: function(image) {
  475. _self.rotateJumpLeft = image;
  476. }
  477. });
  478. uni.getImageInfo({
  479. src: "../../../static/modal/action-jump/directionJumpWhite-right.png",
  480. success: function(image) {
  481. _self.directionJumpWhiteRight = image;
  482. }
  483. });
  484. uni.getImageInfo({
  485. src: "../../../static/modal/action-jump/directionJumpWhite-left.png",
  486. success: function(image) {
  487. _self.directionJumpWhiteLeft = image;
  488. }
  489. });
  490. uni.getImageInfo({
  491. src: "../../../static/modal/action-jump/midJumpWhite.png",
  492. success: function(image) {
  493. _self.midJumpWhite = image;
  494. }
  495. });
  496. uni.getImageInfo({
  497. src: "../../../static/modal/action-jump/rotateJumpWhite-right.png",
  498. success: function(image) {
  499. _self.rotateJumpWhiteRight = image;
  500. }
  501. });
  502. uni.getImageInfo({
  503. src: "../../../static/modal/action-jump/rotateJumpWhite-left.png",
  504. success: function(image) {
  505. _self.rotateJumpWhiteLeft = image;
  506. }
  507. });
  508. uni.getImageInfo({
  509. src: "../../../static/modal/action-jump/jumpTip.png",
  510. success: function(image) {
  511. _self.jumpTipImage = image;
  512. }
  513. });
  514. uni.getImageInfo({
  515. src: "../../../static/modal/action-jump/jump-tip-orange@2x.png",
  516. success: function(image) {
  517. _self.JumpTipOrange = image;
  518. }
  519. })
  520. uni.getImageInfo({
  521. src: "../../../static/modal/action-jump/progress-tip.png",
  522. success: function(image) {
  523. _self.jumpProgressTip = image;
  524. }
  525. })
  526. uni.getImageInfo({
  527. src: "../../../static/modal/action-jump/jumpNormal-line.png",
  528. success: function(image) {
  529. _self.jumpNormalLine = image;
  530. }
  531. });
  532. uni.getImageInfo({
  533. src: "../../../static/modal/action-jump/jumpNormal-rect.png",
  534. success: function(image) {
  535. _self.jumpNormalRect = image;
  536. _self.onDrawBg(true);
  537. }
  538. });
  539. uni.getImageInfo({
  540. src: "../../../static/modal/action-jump/cankao.png",
  541. success: function(image) {
  542. _self.cankao = image;
  543. }
  544. });
  545. /**
  546. * 烟花照片
  547. */
  548. uni.getImageInfo({
  549. src: "../../../static/modal/action-jump/boom.png",
  550. success: function(image) {
  551. _self.fireworkImage = image;
  552. }
  553. });
  554. },
  555. /**
  556. * 重置生成数组,重置倒计时
  557. */
  558. resetJumpGame() {
  559. this.spawnArray = [];
  560. this.templatePool = [];
  561. if (this.countdownInterval) {
  562. clearInterval(this.countdownInterval);
  563. this.countdownInterval = null;
  564. }
  565. // this.resetCountdown(60);
  566. },
  567. startJumpGame() {
  568. this.isGameOver = false;
  569. this.resetJumpGame();
  570. //开始游戏
  571. this.index = 0;
  572. // this.levelType = 5;
  573. let spawnCount = 7;
  574. let _ranType = Math.floor(Math.random() * 2);
  575. //生成二个占位
  576. this.addTemplatePoolFromType(false, this.template[0].spawnList[0][0]);
  577. this.addTemplatePoolFromType(false, this.template[0].spawnList[0][0]);
  578. if (this.levelType == 0) {
  579. //随便生成一组跳的数据
  580. let _spawnList = this.template[0].spawnList;
  581. for (let i = 0; i < 30; i++) {
  582. //再对象池里面生成一组对象
  583. this.addTemplatePoolFromType(true, _spawnList[0][0]);
  584. }
  585. //先生成spawnCount个
  586. for (let i = 0; i < spawnCount; i++) {
  587. this.spawnArray.push(this.templatePool[this.index]);
  588. this.index++;
  589. }
  590. } else if (this.levelType == 1) {
  591. //生成一组 左跳右跳
  592. let _spawnList = this.template[1].spawnList;
  593. for (let i = 0; i < 30; i++) {
  594. let ran = Math.floor(Math.random() * 2);
  595. for (let j = 0; j < _spawnList[ran].length; j++) {
  596. //再对象池里面生成一组对象
  597. this.addTemplatePoolFromType(true, _spawnList[ran][j]);
  598. }
  599. }
  600. //先生成spawnCount个
  601. for (let i = 0; i < spawnCount; i++) {
  602. this.spawnArray.push(this.templatePool[this.index]);
  603. this.index++;
  604. }
  605. } else if (this.levelType == 2) {
  606. //生成一组 左跳右跳原地
  607. let _spawnList = this.template[2].spawnList;
  608. for (let i = 0; i < 30; i++) {
  609. let ran = Math.floor(Math.random() * 2);
  610. for (let j = 0; j < _spawnList[ran].length; j++) {
  611. //再对象池里面生成一组对象
  612. this.addTemplatePoolFromType(true, _spawnList[ran][j]);
  613. }
  614. }
  615. //先生成spawnCount个
  616. for (let i = 0; i < spawnCount; i++) {
  617. this.spawnArray.push(this.templatePool[this.index]);
  618. this.index++;
  619. }
  620. } else if (this.levelType == 3) {
  621. //生成一组 左旋跳右旋跳
  622. let _spawnList = this.template[1].spawnList;
  623. for (let i = 0; i < 30; i++) {
  624. let ran = Math.floor(Math.random() * 2) + 2;
  625. for (let j = 0; j < _spawnList[ran].length; j++) {
  626. //再对象池里面生成一组对象
  627. this.addTemplatePoolFromType(true, _spawnList[ran][j]);
  628. }
  629. }
  630. //先生成spawnCount个
  631. for (let i = 0; i < spawnCount; i++) {
  632. this.spawnArray.push(this.templatePool[this.index]);
  633. this.index++;
  634. }
  635. } else if (this.levelType == 4) {
  636. //生成一组 左旋跳右旋跳
  637. let _spawnList = this.template[2].spawnList;
  638. for (let i = 0; i < 30; i++) {
  639. let ran = Math.floor(Math.random() * 2) + 2;
  640. for (let j = 0; j < _spawnList[ran].length; j++) {
  641. //再对象池里面生成一组对象
  642. this.addTemplatePoolFromType(true, _spawnList[ran][j]);
  643. }
  644. }
  645. //先生成spawnCount个
  646. for (let i = 0; i < spawnCount; i++) {
  647. this.spawnArray.push(this.templatePool[this.index]);
  648. this.index++;
  649. }
  650. } else if (this.levelType == 5) {
  651. for (let i = 0; i < 20; i++) {
  652. //随便生成三组数据
  653. let _newArray = [];
  654. let _spawnList2 = this.template[2].spawnList;
  655. let ran2 = Math.floor(Math.random() * 2);
  656. let ran3 = Math.floor(Math.random() * 2);
  657. if (_ranType >= 1) {
  658. ran2 += 2;
  659. ran3 += 2;
  660. }
  661. _newArray = _newArray.concat(_spawnList2[ran2]);
  662. _newArray = _newArray.concat(_spawnList2[ran3]);
  663. for (let j = 0; j < _newArray.length; j++) {
  664. this.addTemplatePoolFromType(true, _newArray[j]);
  665. }
  666. }
  667. //先生成spawnCount个
  668. for (let i = 0; i < spawnCount; i++) {
  669. this.spawnArray.push(this.templatePool[this.index]);
  670. this.index++;
  671. }
  672. }
  673. this.onDraw("tipHit", false);
  674. },
  675. /**
  676. * 生成对应预制对象
  677. * @param {Object} bShow
  678. * @param {Object} _jumpType
  679. */
  680. addTemplatePoolFromType(bShow, _jumpType) {
  681. for (let i = 0; i < this.jumpTypeArray.length; i++) {
  682. if (this.jumpTypeArray[i].jumpCode == _jumpType) {
  683. let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i], {
  684. bShow: bShow,
  685. bInit: true,
  686. position: 0,
  687. animation: null, //动画
  688. });
  689. this.templatePool.push(_jumpPrefab);
  690. break;
  691. }
  692. }
  693. },
  694. //单纯的绘制八个背景
  695. onDrawBg(bDraw) {
  696. this.spawnPos = [];
  697. if (bDraw) {
  698. this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
  699. }
  700. let _currentBgStartX = this.canvasW / 2;
  701. let count = 7;
  702. let _currentPos = -12,
  703. _addPos = 0;
  704. // this.actionJumpCanvas.drawImage(this.jumpProgressTip.path, _currentBgStartX, 5, 171, 24.66);
  705. // this.actionJumpCanvas.drawImage(this.jumpProgressTip.path, _currentBgStartX, 116, 171, 24.66);
  706. for (let i = 0; i < count; i++) {
  707. if (0 !== i) {
  708. _currentPos += this.jumpNormalWidth;
  709. } else {
  710. _currentPos -= this.jumpNormalWidth;
  711. }
  712. if (2 === i) {
  713. //结尾时候快消除完绘制一次大图背景。不然会为空白
  714. if (this.spawnArray.length < 3)
  715. this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 120, this.canvasH);
  716. if (bDraw) {
  717. this.actionJumpCanvas.drawImage(this.JumpTipOrange.path, _currentPos + 3, 7, 113, this
  718. .canvasH -
  719. 14);
  720. }
  721. // this.actionJumpCanvas.drawImage(this.midJump.path, _currentPos + 30, 46, 60, 60);
  722. //添加对应生成点
  723. this.spawnPos.push({
  724. center: _currentPos + 30
  725. })
  726. _currentPos += 50;
  727. } else {
  728. this.actionJumpCanvas.drawImage(this.jumpNormalLine.path, _currentPos, 0, this.jumpNormalWidth,
  729. this.canvasH);
  730. if (bDraw) {
  731. this.actionJumpCanvas.drawImage(this.jumpNormalRect.path, _currentPos, 0, this.jumpNormalWidth,
  732. this.canvasH);
  733. }
  734. // this.actionJumpCanvas.drawImage(this.midJump.path, _currentPos + 16, 55, 40, 40);
  735. //添加对应生成点
  736. this.spawnPos.push({
  737. center: _currentPos + 16
  738. })
  739. }
  740. }
  741. if (bDraw) {
  742. this.actionJumpCanvas.draw();
  743. }
  744. },
  745. onDraw(type, bAnimation) {
  746. let _self = this;
  747. if (bAnimation && _self.spawnAnimation == null) {
  748. _self.spawnProcess = 0;
  749. _self.spawnAnimation = new Animation({
  750. timing: 'linear',
  751. duration: 200,
  752. onProcess: function onProcess(process) {
  753. _self.spawnProcess = process;
  754. _self.onDraw('normal', true);
  755. // console.log("process=" + process);
  756. },
  757. onAnimationFinish: function onAnimationFinish() {
  758. // console.log("finish animation");
  759. _self.spawnAnimation = null;
  760. }
  761. })
  762. }
  763. this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
  764. //单纯绘制背景
  765. this.onDrawBg(false);
  766. //计算一个节点数组
  767. // let _oldRectMoveDis = 1;
  768. for (let i = 0; i < this.spawnArray.length; i++) {
  769. //默认 mid 图标
  770. let _temp = this.spawnArray[i].bTrigger ? this.midJump : this.midJumpWhite;
  771. if (this.spawnArray[i].icon == 'directionJump') {
  772. if (this.spawnArray[i].jumpName == "RIGHT") {
  773. _temp = this.spawnArray[i].bTrigger ? this.directionJumpRight : this.directionJumpWhiteRight;
  774. } else {
  775. _temp = this.spawnArray[i].bTrigger ? this.directionJumpLeft : this.directionJumpWhiteLeft;
  776. }
  777. } else if (this.spawnArray[i].icon == 'rotateJump') {
  778. if (this.spawnArray[i].jumpName == "RIGHT_ROTATE") {
  779. _temp = this.spawnArray[i].bTrigger ? this.rotateJumpRight : this.rotateJumpWhiteRight;
  780. } else {
  781. _temp = this.spawnArray[i].bTrigger ? this.rotateJumpLeft : this.rotateJumpWhiteLeft;
  782. }
  783. }
  784. this.actionJumpCanvas.save();
  785. // let _opacity = this.spawnArray[i].bTrigger ? 0.7 : 1;
  786. // this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bShow ? _opacity : 0;
  787. // this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
  788. let _currentPos = this.spawnPos[i].center;
  789. let _currentCenterPos = 0;
  790. if (2 === i) {
  791. //这里分两部分走,从小图走到大图
  792. let _spawnBiggerToLeft = this.spawnArray[i];
  793. //这里记录一个生成点,后面用于生成特效
  794. this.effectSpawnPosX = _currentPos;
  795. //大图
  796. let tempPosition = _currentPos;
  797. if (!bAnimation || _spawnBiggerToLeft.bInit) {
  798. _spawnBiggerToLeft.position = _currentPos;
  799. _spawnBiggerToLeft.bInit = false;
  800. } else {
  801. tempPosition = _spawnBiggerToLeft.position - Math.abs(_currentPos - _spawnBiggerToLeft
  802. .position) * _self.spawnProcess;
  803. }
  804. if (1 === this.spawnProcess) {
  805. _spawnBiggerToLeft.position = tempPosition;
  806. } else {
  807. //绘制一次前面方块背景前移
  808. this.actionJumpCanvas.drawImage(this.jumpNormalRect.path, tempPosition - 16, 0, this
  809. .jumpNormalWidth,
  810. this.canvasH);
  811. this.actionJumpCanvas.clearRect(this.spawnPos[i].center - 30, 0, 120, this.canvasH);
  812. }
  813. let _width = 40 + 20 * _self.spawnProcess;
  814. this.actionJumpCanvas.drawImage(_temp.path, tempPosition, 55 - 9 * _self.spawnProcess, _width,
  815. _width);
  816. //绘制多一次背景
  817. this.actionJumpCanvas.drawImage(this.jumpTipImage.path, this.spawnPos[i].center - 30, 0, 120, this
  818. .canvasH);
  819. this.actionJumpCanvas.drawImage(this.JumpTipOrange.path, this.spawnPos[i].center - 27, 7, 113, this
  820. .canvasH -
  821. 14);
  822. } else {
  823. //小图
  824. let _otherObj = this.spawnArray[i];
  825. let tempPosition = _currentPos;
  826. if (!bAnimation || _otherObj.bInit) {
  827. _otherObj.position = _currentPos;
  828. _otherObj.bInit = false;
  829. // console.log(i + " add== " + _otherObj.position + " == " + tempPosition);
  830. } else {
  831. tempPosition = _otherObj.position - Math.abs(_currentPos - _otherObj.position) * _self
  832. .spawnProcess;
  833. // if (i === 1) {
  834. // console.log(tempPosition + "==" + _otherObj.position + "==" + Math.abs(_currentPos -
  835. // _otherObj.position));
  836. // }
  837. }
  838. if (1 === this.spawnProcess) {
  839. _otherObj.position = tempPosition;
  840. }
  841. // if (1 === i) {
  842. // _oldRectMoveDis = Math.abs(_currentPos - _otherObj.position);
  843. // }
  844. this.actionJumpCanvas.drawImage(this.jumpNormalRect.path, tempPosition - 16, 0, this
  845. .jumpNormalWidth,
  846. this.canvasH);
  847. if (this.spawnArray[i].bShow) {
  848. this.actionJumpCanvas.drawImage(_temp.path, tempPosition, 55, 40, 40);
  849. }
  850. }
  851. this.actionJumpCanvas.restore();
  852. }
  853. this.actionJumpCanvas.draw();
  854. },
  855. onDrawEffect(_temp) {
  856. if (!this.bRuning) {
  857. this.bRuning = true;
  858. // console.log(this.bRuning);
  859. if (this.yellowRuningTimeout) {
  860. clearTimeout(this.yellowRuningTimeout)
  861. this.yellowRuningTimeout = null;
  862. }
  863. this.yellowRuningTimeout = setTimeout(() => {
  864. this.bRuning = false;
  865. // console.log(this.bRuning);
  866. }, 1000)
  867. }
  868. //根据当前消除的生成一个
  869. // console.log("生成的_temp:" + JSON.stringify(_temp));
  870. let spawnTemp = this.midJump;
  871. let offest = 5;
  872. if (_temp.icon == 'directionJump') {
  873. spawnTemp = _temp.jumpName == "RIGHT" ? this.directionJumpRight : this.directionJumpLeft;
  874. } else if (_temp.icon == 'rotateJump') {
  875. spawnTemp = _temp.jumpName == "RIGHT_ROTATE" ? this.rotateJumpRight : this.rotateJumpLeft;
  876. offest = _temp.jumpName == "RIGHT_ROTATE" ? 8 : 6;
  877. }
  878. let tempFirework = new Firework(this.fireworkImage,
  879. spawnTemp, _temp.scaleX, this.effectSpawnPosX, 0, this.canvasW, 164, offest);
  880. this.fireworks.push(tempFirework);
  881. this.bDrawBoomEffect = true;
  882. this.onInitFirework();
  883. },
  884. onClear() {
  885. this.resetJumpGame();
  886. this.onDrawBg(true);
  887. this.xA = 0;
  888. this.yA = 0;
  889. this.zA = 0;
  890. console.log("onClear");
  891. if (this.actionJumpObj)
  892. this.actionJumpObj.resetAll();
  893. },
  894. /**
  895. * 统一绘制 效果 背景,交互,烟花
  896. */
  897. onInitFirework() {
  898. if (this.loop != null) {
  899. return;
  900. }
  901. this.loop = setInterval(() => {
  902. if (!this.bDrawBoomEffect) {
  903. clearInterval(this.loop);
  904. this.loop = null;
  905. // console.log("结束绘制");
  906. this.effectCanvas.clearRect(0, 0, this.canvasW, 164);
  907. this.effectCanvas.draw();
  908. return;
  909. }
  910. this.effectCanvas.clearRect(0, 0, this.canvasW, 164);
  911. if (this.bDrawBoomEffect) {
  912. // loop over each firework, draw it, update it
  913. var i = this.fireworks.length;
  914. while (i--) {
  915. this.fireworks[i].draw(this.effectCanvas, () => {
  916. this.fireworks.splice(i, 1);
  917. if (this.fireworks.length == 0) {
  918. this.bDrawBoomEffect = false;
  919. }
  920. });
  921. }
  922. }
  923. this.effectCanvas.draw();
  924. }, 30)
  925. },
  926. onJumpType(event) {
  927. // console.log("onJumpType:", event);
  928. if (this.isGameOver || !this.bJumpPlay) return;
  929. this.eliminateJumpPrefab(event);
  930. },
  931. // update (dt) {}
  932. //模拟测试调用
  933. eliminateJumpPrefab(_jumpType) {
  934. //只触发第二个
  935. if (this.spawnArray.length < 3 || this.spawnAnimation != null) {
  936. return;
  937. }
  938. let _temp = this.spawnArray[2];
  939. //如果当前的跳类型和预制目标一样
  940. if (_jumpType == _temp.jumpCode) {
  941. _temp.bTrigger = true;
  942. this.deleteSpawn = this.spawnArray.splice(0, 1);
  943. if (this.index < this.templatePool.length) {
  944. this.spawnArray.push(this.templatePool[this.index]);
  945. this.index++;
  946. }
  947. //这里更新特效
  948. let _endTemp = Object.assign({}, _temp);
  949. this.onDrawEffect(_endTemp);
  950. //绘制新触发状态
  951. this.onDraw('tipHit', true);
  952. //成功
  953. this.setEliminationCount(1);
  954. //替换数组
  955. // console.log(this.index + " == " + this.spawnArray.length);
  956. if (this.spawnArray.length < 3 && this.index > 3) {
  957. clearInterval(this.countdownInterval);
  958. this.countdownInterval = null;
  959. //绘制新触发状态
  960. this.onDraw("normal", false);
  961. setTimeout(() => {
  962. this.startJumpGame();
  963. }, 2000)
  964. }
  965. } else {
  966. //失误
  967. this.setFaultCount(1);
  968. }
  969. },
  970. //设置倒计时
  971. setCountdown(value) {
  972. this.countdown -= value;
  973. // this.countdownLabel.string = '倒计时:' + this.countdown;
  974. this.$emit('actionJumpCountDownUpdate', {
  975. countDown: this.countdown
  976. });
  977. },
  978. resetCountdown(value) {
  979. this.countdown = value;
  980. // this.countdownLabel.string = '倒计时:' + this.countdown;
  981. this.$emit('actionJumpCountDownUpdate', {
  982. countDown: this.countdown
  983. });
  984. },
  985. //设置ui信息
  986. setEliminationCount(value) {
  987. this.tempHitCount++;
  988. this.taskSignCurCount++;
  989. this.roundingCount += this.addShowCountUnit;
  990. this.eliminationCount += value;
  991. // this.eliminationLabel.string = '消除数量:' + this.eliminationCount.toString();
  992. this.$emit('actionJumpDataUpdate', {
  993. eliminationCount: this.eliminationCount,
  994. faultCount: this.faultCount
  995. });
  996. this.jumpCalorie += puchConfig.getJumpCalorie(this.eliminationCount + this.faultCount);
  997. //如果是pk模式。不走下面判断
  998. if (this.currentMode == 'pkMode') return;
  999. if (CONDITIONPASSED.ENERGYBARFULL == this.taskConditionPassed.limitType) {
  1000. //能量条的条件下才显示能量条动
  1001. //取两位后计算Math floor,不然会有偏差值问题 Math.floor(39.9999999+ 0.1111111) = 39
  1002. this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
  1003. //1.能量槽满的时候,说明踩中次数到达
  1004. if (this.taskSignCurCount >= this.taskSignCount)
  1005. this.onGameOver("energyBarFull");
  1006. } else if (CONDITIONPASSED.SKIPALLFLAGWITHINTIME == this.taskConditionPassed.limitType) {
  1007. //规定时间下也给显示能量条
  1008. this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
  1009. //2.规定时间内跳完所有标志块
  1010. if (this.taskSignCurCount >= this.taskSignCount)
  1011. this.onGameOver("skipAllFlagWithinTime");
  1012. } else if (this.taskConditionPassed.isScore) {
  1013. //3.达到一定分数
  1014. //如果是用分数判断
  1015. //分数是 跳对的加1分,错的扣1分,0不扣分。
  1016. let curScore = this.eliminationCount - this.faultCount;
  1017. curScore = curScore < 0 ? 0 : curScore;
  1018. //当前分数达到,胜利
  1019. if (curScore >= this.taskConditionPassed.limitScore)
  1020. this.onGameOver("score");
  1021. }
  1022. },
  1023. onGameOver(type) {
  1024. console.log("onGameOver")
  1025. this.isGameOver = true;
  1026. //处理参数
  1027. this.onClear();
  1028. this.onClearData();
  1029. this.bJumpPlay = false;
  1030. /**
  1031. * 判断胜利和失败
  1032. */
  1033. let myWin = false; //默认失败
  1034. //比如, 1.充满左右两边蓄能槽.2.规定时间内跳完所有标志块.
  1035. if (type == "energyBarFull") {
  1036. //1.能量槽满的时候,说明踩中次数到达
  1037. if (this.taskSignCurCount >= this.taskSignCount) {
  1038. myWin = true;
  1039. }
  1040. } else if (type == 'skipAllFlagWithinTime') {
  1041. myWin = true;
  1042. } else if (type == "timeUp") {
  1043. //2.规定时间内跳完所有标志块
  1044. //查看消除数量是否到达总数,未达成就是未完成
  1045. if (this.taskSignCurCount >= this.taskSignCount) {
  1046. myWin = true;
  1047. }
  1048. } else if (type == "score") {
  1049. myWin = true;
  1050. }
  1051. console.log(type, {
  1052. myWin: myWin
  1053. });
  1054. this.$emit('gameOver', {
  1055. myWin: myWin,
  1056. type: 'calorieMode',
  1057. isOffEvent: true
  1058. });
  1059. },
  1060. //pk模式下结束游戏关卡
  1061. onPKModeGameOver(type) {
  1062. console.log("onPKModeGameOver");
  1063. this.isGameOver = true;
  1064. //处理参数
  1065. this.onClear();
  1066. this.onClearData();
  1067. this.bJumpPlay = false;
  1068. this.$emit('gameOver', {
  1069. type: 'pkMode',
  1070. isOffEvent: true
  1071. });
  1072. },
  1073. setFaultCount(value) {
  1074. this.tempHitCount++;
  1075. this.faultCount += value;
  1076. // this.faultLabel.string = '失误:' + this.faultCount;
  1077. this.$emit('actionJumpDataUpdate', {
  1078. eliminationCount: this.eliminationCount,
  1079. faultCount: this.faultCount
  1080. });
  1081. this.jumpCalorie += puchConfig.getJumpCalorie(this.eliminationCount + this.faultCount);
  1082. },
  1083. //控制播放
  1084. onControllerPlay() {
  1085. if (this.bJumpPlay) {
  1086. //仅仅暂停,没有清空数据
  1087. this._changePlay(false);
  1088. this.$emit("actionJumpControllerPlay", false);
  1089. } else {
  1090. this.$emit("actionJumpCheck");
  1091. }
  1092. },
  1093. onContinueGame() {
  1094. this._changePlay(true);
  1095. },
  1096. onClearActionJumpData() {
  1097. console.log("onClearActionJumpData");
  1098. this.onClear();
  1099. this.onClearData();
  1100. },
  1101. //修改状态
  1102. _changePlay(bPlaying) {
  1103. if (bPlaying) {
  1104. this.bJumpPlay = bPlaying;
  1105. } else {
  1106. this.bJumpPlay = !this.bJumpPlay;
  1107. }
  1108. },
  1109. onActionJumpPlay() {
  1110. console.log("onActionJumpPlay");
  1111. this.onClear();
  1112. this.onClearData();
  1113. this.startJumpGame();
  1114. this._changePlay(true);
  1115. //reset 对应计算数据
  1116. this.taskSignCurCount = 0;
  1117. this.showCurCount = 0;
  1118. this.roundingCount = 0;
  1119. this.faultCount = 0;
  1120. this.eliminationCount = 0;
  1121. },
  1122. /**
  1123. * 停止并清空数据
  1124. */
  1125. onStopAndClearAction() {
  1126. console.log("onStopAndClearAction");
  1127. this.onClear();
  1128. this.onClearData();
  1129. this.bJumpPlay = false;
  1130. //reset 对应计算数据
  1131. this.taskSignCurCount = 0;
  1132. this.showCurCount = 0;
  1133. this.roundingCount = 0;
  1134. this.faultCount = 0;
  1135. this.eliminationCount = 0;
  1136. this.jumpCalorie = 0;
  1137. },
  1138. getCurrentJumpType() {
  1139. let _temp = this.spawnArray[2];
  1140. return _temp.jumpCode;
  1141. },
  1142. //监听跳的状态数据
  1143. listenStateDataOfJump(data) {
  1144. console.log(JSON.stringify(data));
  1145. if (this.spawnArray.length < 3) return;
  1146. let _jumpType = this.getCurrentJumpType();
  1147. //初始全部默认状态
  1148. let _tempState = [{
  1149. jumpName: 'NORMAL',
  1150. jumpCode: 0,
  1151. bTrigger: false,
  1152. describe: '正常跳'
  1153. },
  1154. {
  1155. jumpName: 'LEFT',
  1156. jumpCode: 1,
  1157. bTrigger: false,
  1158. describe: '左直跳'
  1159. },
  1160. {
  1161. jumpName: 'RIGHT',
  1162. jumpCode: 2,
  1163. bTrigger: false,
  1164. describe: '右直跳'
  1165. },
  1166. {
  1167. jumpName: 'LEFT_ROTATE',
  1168. jumpCode: 3,
  1169. bTrigger: false,
  1170. describe: '左旋转跳'
  1171. },
  1172. {
  1173. jumpName: 'RIGHT_ROTATE',
  1174. jumpCode: 4,
  1175. bTrigger: false,
  1176. describe: '右旋转跳'
  1177. }
  1178. ];
  1179. let {
  1180. currentMaxValue,
  1181. oGyroValue,
  1182. peakOfWaveMaxValue,
  1183. valleyOfWaveMinValue
  1184. } = data
  1185. // console.log('stateDataOfJump:');
  1186. this.onLogData = data;
  1187. let _rotateLimit = 4;
  1188. let _jumpLimit = 0;
  1189. switch (_jumpType) {
  1190. case 0:
  1191. //JumpType.NORMAL = 0
  1192. _tempState[0].bTrigger = true;
  1193. this.eliminateJumpPrefabFormTemp(_tempState);
  1194. break;
  1195. case 1:
  1196. if (currentMaxValue < -_jumpLimit) {
  1197. //left jump
  1198. _tempState[1].bTrigger = true;
  1199. }
  1200. this.eliminateJumpPrefabFormTemp(_tempState);
  1201. break;
  1202. case 2:
  1203. if (currentMaxValue > _jumpLimit) {
  1204. //right jump
  1205. _tempState[2].bTrigger = true;
  1206. }
  1207. this.eliminateJumpPrefabFormTemp(_tempState);
  1208. break;
  1209. case 4:
  1210. if (oGyroValue > _rotateLimit) {
  1211. _tempState[4].bTrigger = true;
  1212. }
  1213. this.eliminateJumpPrefabFormTemp(_tempState);
  1214. break;
  1215. case 3:
  1216. if (oGyroValue < -_rotateLimit) {
  1217. _tempState[3].bTrigger = true;
  1218. }
  1219. this.eliminateJumpPrefabFormTemp(_tempState);
  1220. break;
  1221. default:
  1222. console.log('没有对应的_jumpType', _jumpType);
  1223. break;
  1224. }
  1225. // if (currentMaxValue == 0) {
  1226. // } else {
  1227. // // console.log('2====', data);
  1228. // if (this.isY) {
  1229. // //如果是检测到旋转跳
  1230. // if (oGyroValue > _rotateLimit) {
  1231. // // console.log('y right:', oGyroValue);
  1232. // _tempState[4].bTrigger = true;
  1233. // } else if (oGyroValue < -_rotateLimit) {
  1234. // // console.log('y left:', oGyroValue);
  1235. // _tempState[3].bTrigger = true;
  1236. // }
  1237. // if (valleyOfWaveMinValue < -_jumpLimit) {
  1238. // //left jump
  1239. // _tempState[1].bTrigger = true;
  1240. // } else if (peakOfWaveMaxValue > _jumpLimit) {
  1241. // //right jump
  1242. // _tempState[2].bTrigger = true;
  1243. // }
  1244. // } else {
  1245. // //如果是检测到旋转跳
  1246. // if (oGyroValue < -5) {
  1247. // // console.log('x right:', oGyroValue);
  1248. // _tempState[4].bTrigger = true;
  1249. // } else if (oGyroValue > 5) {
  1250. // // console.log('x left:', oGyroValue);
  1251. // _tempState[3].bTrigger = true;
  1252. // }
  1253. // if (valleyOfWaveMinValue < -_jumpLimit) {
  1254. // //left jump
  1255. // _tempState[1].bTrigger = true;
  1256. // } else if (peakOfWaveMaxValue > _jumpLimit) {
  1257. // //right jump
  1258. // _tempState[2].bTrigger = true;
  1259. // }
  1260. // }
  1261. // this.eliminateJumpPrefabFormTemp(_tempState);
  1262. // }
  1263. },
  1264. //监听跳的状态数据
  1265. jumpIdenModule_listenStateDataOfJump(data) {
  1266. console.log(JSON.stringify(data));
  1267. if (this.spawnArray.length < 3) return;
  1268. let _jumpType = this.getCurrentJumpType();
  1269. //初始全部默认状态
  1270. let _tempState = [{
  1271. jumpName: 'NORMAL',
  1272. jumpCode: 0,
  1273. bTrigger: false,
  1274. describe: '正常跳'
  1275. },
  1276. {
  1277. jumpName: 'LEFT',
  1278. jumpCode: 1,
  1279. bTrigger: false,
  1280. describe: '左直跳'
  1281. },
  1282. {
  1283. jumpName: 'RIGHT',
  1284. jumpCode: 2,
  1285. bTrigger: false,
  1286. describe: '右直跳'
  1287. },
  1288. {
  1289. jumpName: 'LEFT_ROTATE',
  1290. jumpCode: 3,
  1291. bTrigger: false,
  1292. describe: '左旋转跳'
  1293. },
  1294. {
  1295. jumpName: 'RIGHT_ROTATE',
  1296. jumpCode: 4,
  1297. bTrigger: false,
  1298. describe: '右旋转跳'
  1299. }
  1300. ];
  1301. let _rotateLimit = 4;
  1302. let _jumpLimit = 0;
  1303. switch (_jumpType) {
  1304. case 0:
  1305. //JumpType.NORMAL = 0
  1306. if (data.tag === 0) {
  1307. _tempState[0].bTrigger = true;
  1308. }
  1309. this.eliminateJumpPrefabFormTemp(_tempState);
  1310. break;
  1311. case 1:
  1312. if (data.tag === 2) {
  1313. //left jump
  1314. _tempState[1].bTrigger = true;
  1315. }
  1316. this.eliminateJumpPrefabFormTemp(_tempState);
  1317. break;
  1318. case 2:
  1319. if (data.tag === 1) {
  1320. //right jump
  1321. _tempState[2].bTrigger = true;
  1322. }
  1323. this.eliminateJumpPrefabFormTemp(_tempState);
  1324. break;
  1325. case 4:
  1326. if (data.tag === 3) {
  1327. _tempState[4].bTrigger = true;
  1328. }
  1329. this.eliminateJumpPrefabFormTemp(_tempState);
  1330. break;
  1331. case 3:
  1332. if (data.tag === 4) {
  1333. _tempState[3].bTrigger = true;
  1334. }
  1335. this.eliminateJumpPrefabFormTemp(_tempState);
  1336. break;
  1337. default:
  1338. console.log('没有对应的_jumpType', _jumpType);
  1339. break;
  1340. }
  1341. },
  1342. eliminateJumpPrefabFormTemp(_tempState) {
  1343. //只触发第三个
  1344. if (this.spawnArray.length < 3) {
  1345. return;
  1346. }
  1347. let _temp = this.spawnArray[2];
  1348. let bSuccess = false;
  1349. for (let i = 0; i < _tempState.length; i++) {
  1350. let _state = _tempState[i];
  1351. if (_state.bTrigger) {
  1352. console.log(this.eliminationCount + ',识别跳的类型:' + _state.describe + ',当前预制类型:' + _temp.jumpName +
  1353. "\n直跳判断值:" + this.onLogData.currentMaxValue + ",旋转跳值:" + this.onLogData.oGyroValue);
  1354. }
  1355. //如果当前的跳类型和预制目标一样
  1356. if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
  1357. //成功
  1358. bSuccess = true;
  1359. break;
  1360. }
  1361. }
  1362. //如果存在其中一个为true
  1363. if (bSuccess) {
  1364. _temp.bTrigger = true;
  1365. this.canSpawnTemp = _temp;
  1366. setTimeout(() => {
  1367. //这里更新特效
  1368. this.onDrawEffect(this.canSpawnTemp);
  1369. }, 150);
  1370. this.deleteSpawn = this.spawnArray.splice(0, 1);
  1371. if (this.index < this.templatePool.length) {
  1372. this.spawnArray.push(this.templatePool[this.index]);
  1373. this.index++;
  1374. }
  1375. //成功
  1376. this.setEliminationCount(1);
  1377. //去除原本算法后添加 start
  1378. console.log("stop");
  1379. this.onClearData();
  1380. //去除原本算法后添加 end
  1381. //替换数组
  1382. // console.log(this.index + " == " + this.spawnArray.length);
  1383. if (this.spawnArray.length < 3 && this.index > 3) {
  1384. clearInterval(this.countdownInterval);
  1385. this.countdownInterval = null;
  1386. //绘制新触发状态
  1387. //this.canGoNext = true; //去除jumpAction注销
  1388. //去除原本算法后添加 start
  1389. this.onDraw("normal", false);
  1390. setTimeout(() => {
  1391. this.startJumpGame();
  1392. }, 500)
  1393. //去除原本算法后添加 end
  1394. } else {
  1395. //绘制新触发状态
  1396. // this.canOnDraw = true; //去除jumpAction注销
  1397. //去除原本算法后添加 start
  1398. this.onDraw("tipHit", true);
  1399. //去除原本算法后添加 end
  1400. }
  1401. } else {
  1402. //失误
  1403. this.setFaultCount(1);
  1404. }
  1405. },
  1406. /**
  1407. * @param {Object} gameData
  1408. * 识别跳部分数据处理
  1409. */
  1410. onBLERopeUpdate(gameData) {
  1411. if (!this.bJumpPlay || this.isGameOver || this.spawnAnimation != null) return;
  1412. //调用识别算法
  1413. this.jumpIdenModule_onJump6AxisDataUpdate({
  1414. data: {
  1415. hex: gameData.hex
  1416. },
  1417. callback: (res) => {
  1418. if (res.code == 0) {
  1419. if (res.tag != -1) {
  1420. this.jumpIdenModule_listenStateDataOfJump(res);
  1421. uni.showToast({
  1422. title: res.tag + ',' + res.msg,
  1423. icon: 'none',
  1424. duration: 1000,
  1425. mask: true
  1426. })
  1427. }
  1428. }
  1429. }
  1430. });
  1431. //********陀螺仪角速度********
  1432. let {
  1433. gx,
  1434. gy,
  1435. gz
  1436. } = gameData.gyro;
  1437. let {
  1438. min,
  1439. s,
  1440. ms
  1441. } = gameData;
  1442. //-gameData.acc.ax * 10;
  1443. let _ax = gameData.acc.ax * 10;
  1444. let _ay = gameData.acc.ay * 10;
  1445. let _az = gameData.acc.az * 10;
  1446. //低通滤波分离重力
  1447. // alpha 由 t / (t + dT)得到
  1448. // t为滤波器时间常量,为传感器单次采样时间
  1449. // dT为采样频率
  1450. let alpha = 0.8;
  1451. this.xA = alpha * this.xA + (1 - alpha) * _ax;
  1452. this.yA = alpha * this.yA + (1 - alpha) * _ay;
  1453. this.zA = alpha * this.zA + (1 - alpha) * _az;
  1454. //高通滤波获取线性速度
  1455. let linear_acceleration_x = _ax - this.xA;
  1456. let linear_acceleration_y = _az - this.zA;
  1457. let linear_acceleration_z = _ay - this.yA;
  1458. // let _temp = {
  1459. // linearAcc: {
  1460. // lAccX: linear_acceleration_x,
  1461. // lAccY: linear_acceleration_y,
  1462. // lAccZ: linear_acceleration_z
  1463. // }, //gameData.acc,
  1464. // oriAcc: {
  1465. // oAccX: _ax,
  1466. // oAccY: _ay,
  1467. // oAccZ: _az
  1468. // },
  1469. // gravityAcc: {
  1470. // gravityX: this.xA,
  1471. // gravityY: this.yA,
  1472. // gravityZ: this.zA
  1473. // },
  1474. // bLimitRebound: false,
  1475. // resultant: Math.sqrt(_ax * _ax +
  1476. // _ay * _ay + _az * _az),
  1477. // runIndex: this.BLEAccIndex,
  1478. // //陀螺仪
  1479. // oriGyro: {
  1480. // oGyroX: gx,
  1481. // oGyroY: gy,
  1482. // oGyroZ: gz
  1483. // },
  1484. // //输入当前轴,旧设备使用Y轴,即为true
  1485. // bYAxis: this.bOldDeviceType ? true : false,
  1486. // };
  1487. //this.actionJumpObj.updateJump(_temp);
  1488. this.BLEAccIndex++;
  1489. },
  1490. onClearData() {
  1491. this.BLEAccIndex = 0;
  1492. },
  1493. onChangeY() {
  1494. this.isY = true;
  1495. },
  1496. onChangeX() {
  1497. this.isY = false;
  1498. },
  1499. onGetActionJumpPlayView(callback) {
  1500. let view = uni.createSelectorQuery().select('#ActionJumpPlay');
  1501. view.boundingClientRect(data => {
  1502. if (callback)
  1503. callback(data);
  1504. }).exec();
  1505. },
  1506. onTipLevel() {
  1507. this.$emit("tipLevel", {
  1508. hiddenType: 'normal'
  1509. });
  1510. console.log("**************22");
  1511. }
  1512. }
  1513. }
  1514. </script>
  1515. <style lang="scss">
  1516. .mid-absolute {
  1517. position: absolute;
  1518. top: 0;
  1519. bottom: 0;
  1520. right: 0;
  1521. left: 0;
  1522. margin: auto;
  1523. }
  1524. .action-jump-timer {
  1525. position: absolute;
  1526. top: -150rpx;
  1527. }
  1528. .grid-progress-vertical-container {
  1529. min-height: 376rpx;
  1530. }
  1531. .grid-progress-vertical-bar {
  1532. max-height: 376rpx;
  1533. }
  1534. .grid-progress-vertical-child {
  1535. width: 35px;
  1536. height: 7.36px;
  1537. margin: 7.36px 0 0 0;
  1538. position: relative;
  1539. }
  1540. .grid-progress-vertical-active {
  1541. width: 28rpx;
  1542. }
  1543. .grid-progress-vertical-inactive {
  1544. width: 28rpx;
  1545. }
  1546. .sprite-yellow-arrow {
  1547. display: inline-block;
  1548. overflow: hidden;
  1549. background-repeat: no-repeat;
  1550. width: 194px;
  1551. height: 232px;
  1552. background-image: url('@/static/modal/action-jump/yellow-arrow.png');
  1553. // border: 1rpx solid #00CE47;
  1554. }
  1555. .animation-play-state-play {
  1556. animation: yellowArrowRun 1s steps(1, end); // infinite
  1557. animation-play-state: running;
  1558. }
  1559. .animation-play-state-paused {
  1560. animation-play-state: paused;
  1561. }
  1562. /**
  1563. * 箭头动画
  1564. */
  1565. @keyframes yellowArrowRun {
  1566. 0% {
  1567. background-position: -0px -0px;
  1568. }
  1569. 5% {
  1570. background-position: -0px -0px;
  1571. }
  1572. 10% {
  1573. background-position: -194px -0px;
  1574. }
  1575. 15% {
  1576. background-position: -388px -0px;
  1577. }
  1578. 20% {
  1579. background-position: -582px -0px;
  1580. }
  1581. 25% {
  1582. background-position: -776px -0px;
  1583. }
  1584. 30% {
  1585. background-position: -0px -232px;
  1586. }
  1587. 35% {
  1588. background-position: -194px -232px;
  1589. }
  1590. 40% {
  1591. background-position: -388px -232px;
  1592. }
  1593. 45% {
  1594. background-position: -582px -232px;
  1595. }
  1596. 50% {
  1597. background-position: -776px -232px;
  1598. }
  1599. 55% {
  1600. background-position: -0px -464px;
  1601. }
  1602. 60% {
  1603. background-position: -194px -464px;
  1604. }
  1605. 65% {
  1606. background-position: -388px -464px;
  1607. }
  1608. 70% {
  1609. background-position: -582px -464px;
  1610. }
  1611. 75% {
  1612. background-position: -776px -464px;
  1613. }
  1614. 80% {
  1615. background-position: -0px -696px;
  1616. }
  1617. 85% {
  1618. background-position: -194px -696px;
  1619. }
  1620. 90% {
  1621. background-position: -388px -696px;
  1622. }
  1623. 95% {
  1624. background-position: -582px -696px;
  1625. }
  1626. 100% {
  1627. background-position: -776px -696px;
  1628. }
  1629. }
  1630. .sprite-rightToLeftArrow {
  1631. display: inline-block;
  1632. overflow: hidden;
  1633. background-repeat: no-repeat;
  1634. width: 317px;
  1635. height: 42px;
  1636. background-image: url('@/static/modal/action-jump/rightToLeftArrow.png');
  1637. // border: 1rpx solid #00CE47;
  1638. }
  1639. .sprite-rightToLeftArrow-play {
  1640. animation: rightToLeftArrowRun 1s steps(1, end) infinite;
  1641. }
  1642. @keyframes rightToLeftArrowRun {
  1643. 0% {
  1644. background-position: -0px -0px;
  1645. }
  1646. 3.33% {
  1647. background-position: -0px -0px;
  1648. }
  1649. 6.66% {
  1650. background-position: -317px -0px;
  1651. }
  1652. 9.99% {
  1653. background-position: -0px -42px;
  1654. }
  1655. 13.33% {
  1656. background-position: -317px -42px;
  1657. }
  1658. 16.66% {
  1659. background-position: -0px -84px;
  1660. }
  1661. 19.99% {
  1662. background-position: -317px -84px;
  1663. }
  1664. 23.33% {
  1665. background-position: -0px -126px;
  1666. }
  1667. 26.66% {
  1668. background-position: -317px -126px;
  1669. }
  1670. 29.99% {
  1671. background-position: -0px -168px;
  1672. }
  1673. 33.33% {
  1674. background-position: -317px -168px;
  1675. }
  1676. 36.66% {
  1677. background-position: -0px -210px;
  1678. }
  1679. 39.99% {
  1680. background-position: -317px -210px;
  1681. }
  1682. 43.33% {
  1683. background-position: -0px -252px;
  1684. }
  1685. 46.66% {
  1686. background-position: -317px -252px;
  1687. }
  1688. 49.99% {
  1689. background-position: -0px -294px;
  1690. }
  1691. 53.33% {
  1692. background-position: -317px -294px;
  1693. }
  1694. 56.66% {
  1695. background-position: -0px -336px;
  1696. }
  1697. 59.99% {
  1698. background-position: -317px -336px;
  1699. }
  1700. 63.33% {
  1701. background-position: -0px -378px;
  1702. }
  1703. 66.66% {
  1704. background-position: -317px -378px;
  1705. }
  1706. 69.99% {
  1707. background-position: -0px -420px;
  1708. }
  1709. 73.33% {
  1710. background-position: -317px -420px;
  1711. }
  1712. 76.66% {
  1713. background-position: -0px -462px;
  1714. }
  1715. 79.99% {
  1716. background-position: -317px -462px;
  1717. }
  1718. 83.33% {
  1719. background-position: -0px -504px;
  1720. }
  1721. 86.66% {
  1722. background-position: -317px -504px;
  1723. }
  1724. 89.99% {
  1725. background-position: -0px -546px;
  1726. }
  1727. 93.33% {
  1728. background-position: -317px -546px;
  1729. }
  1730. 96.66% {
  1731. background-position: -0px -588px;
  1732. }
  1733. 100% {
  1734. background-position: -317px -588px;
  1735. }
  1736. }
  1737. </style>