action-jump.vue 50 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926
  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. bStartCountDown: true
  1092. });
  1093. }
  1094. },
  1095. onContinueGame() {
  1096. this._changePlay(true);
  1097. },
  1098. onClearActionJumpData() {
  1099. console.log("onClearActionJumpData");
  1100. this.onClear();
  1101. this.onClearData();
  1102. },
  1103. //修改状态
  1104. _changePlay(bPlaying) {
  1105. if (bPlaying) {
  1106. this.bJumpPlay = bPlaying;
  1107. } else {
  1108. this.bJumpPlay = !this.bJumpPlay;
  1109. }
  1110. },
  1111. onActionJumpPlay() {
  1112. console.log("onActionJumpPlay");
  1113. this.onClear();
  1114. this.onClearData();
  1115. this.startJumpGame();
  1116. this._changePlay(true);
  1117. //reset 对应计算数据
  1118. this.taskSignCurCount = 0;
  1119. this.showCurCount = 0;
  1120. this.roundingCount = 0;
  1121. this.faultCount = 0;
  1122. this.eliminationCount = 0;
  1123. },
  1124. /**
  1125. * 停止并清空数据
  1126. */
  1127. onStopAndClearAction() {
  1128. console.log("onStopAndClearAction");
  1129. this.onClear();
  1130. this.onClearData();
  1131. this.bJumpPlay = false;
  1132. //reset 对应计算数据
  1133. this.taskSignCurCount = 0;
  1134. this.showCurCount = 0;
  1135. this.roundingCount = 0;
  1136. this.faultCount = 0;
  1137. this.eliminationCount = 0;
  1138. this.jumpCalorie = 0;
  1139. },
  1140. getCurrentJumpType() {
  1141. let _temp = this.spawnArray[2];
  1142. return _temp.jumpCode;
  1143. },
  1144. //监听跳的状态数据
  1145. listenStateDataOfJump(data) {
  1146. console.log(JSON.stringify(data));
  1147. if (this.spawnArray.length < 3) return;
  1148. let _jumpType = this.getCurrentJumpType();
  1149. //初始全部默认状态
  1150. let _tempState = [{
  1151. jumpName: 'NORMAL',
  1152. jumpCode: 0,
  1153. bTrigger: false,
  1154. describe: '正常跳'
  1155. },
  1156. {
  1157. jumpName: 'LEFT',
  1158. jumpCode: 1,
  1159. bTrigger: false,
  1160. describe: '左直跳'
  1161. },
  1162. {
  1163. jumpName: 'RIGHT',
  1164. jumpCode: 2,
  1165. bTrigger: false,
  1166. describe: '右直跳'
  1167. },
  1168. {
  1169. jumpName: 'LEFT_ROTATE',
  1170. jumpCode: 3,
  1171. bTrigger: false,
  1172. describe: '左旋转跳'
  1173. },
  1174. {
  1175. jumpName: 'RIGHT_ROTATE',
  1176. jumpCode: 4,
  1177. bTrigger: false,
  1178. describe: '右旋转跳'
  1179. }
  1180. ];
  1181. let {
  1182. currentMaxValue,
  1183. oGyroValue,
  1184. peakOfWaveMaxValue,
  1185. valleyOfWaveMinValue
  1186. } = data
  1187. // console.log('stateDataOfJump:');
  1188. this.onLogData = data;
  1189. let _rotateLimit = 4;
  1190. let _jumpLimit = 0;
  1191. switch (_jumpType) {
  1192. case 0:
  1193. //JumpType.NORMAL = 0
  1194. _tempState[0].bTrigger = true;
  1195. this.eliminateJumpPrefabFormTemp(_tempState);
  1196. break;
  1197. case 1:
  1198. if (currentMaxValue < -_jumpLimit) {
  1199. //left jump
  1200. _tempState[1].bTrigger = true;
  1201. }
  1202. this.eliminateJumpPrefabFormTemp(_tempState);
  1203. break;
  1204. case 2:
  1205. if (currentMaxValue > _jumpLimit) {
  1206. //right jump
  1207. _tempState[2].bTrigger = true;
  1208. }
  1209. this.eliminateJumpPrefabFormTemp(_tempState);
  1210. break;
  1211. case 4:
  1212. if (oGyroValue > _rotateLimit) {
  1213. _tempState[4].bTrigger = true;
  1214. }
  1215. this.eliminateJumpPrefabFormTemp(_tempState);
  1216. break;
  1217. case 3:
  1218. if (oGyroValue < -_rotateLimit) {
  1219. _tempState[3].bTrigger = true;
  1220. }
  1221. this.eliminateJumpPrefabFormTemp(_tempState);
  1222. break;
  1223. default:
  1224. console.log('没有对应的_jumpType', _jumpType);
  1225. break;
  1226. }
  1227. // if (currentMaxValue == 0) {
  1228. // } else {
  1229. // // console.log('2====', data);
  1230. // if (this.isY) {
  1231. // //如果是检测到旋转跳
  1232. // if (oGyroValue > _rotateLimit) {
  1233. // // console.log('y right:', oGyroValue);
  1234. // _tempState[4].bTrigger = true;
  1235. // } else if (oGyroValue < -_rotateLimit) {
  1236. // // console.log('y left:', oGyroValue);
  1237. // _tempState[3].bTrigger = true;
  1238. // }
  1239. // if (valleyOfWaveMinValue < -_jumpLimit) {
  1240. // //left jump
  1241. // _tempState[1].bTrigger = true;
  1242. // } else if (peakOfWaveMaxValue > _jumpLimit) {
  1243. // //right jump
  1244. // _tempState[2].bTrigger = true;
  1245. // }
  1246. // } else {
  1247. // //如果是检测到旋转跳
  1248. // if (oGyroValue < -5) {
  1249. // // console.log('x right:', oGyroValue);
  1250. // _tempState[4].bTrigger = true;
  1251. // } else if (oGyroValue > 5) {
  1252. // // console.log('x left:', oGyroValue);
  1253. // _tempState[3].bTrigger = true;
  1254. // }
  1255. // if (valleyOfWaveMinValue < -_jumpLimit) {
  1256. // //left jump
  1257. // _tempState[1].bTrigger = true;
  1258. // } else if (peakOfWaveMaxValue > _jumpLimit) {
  1259. // //right jump
  1260. // _tempState[2].bTrigger = true;
  1261. // }
  1262. // }
  1263. // this.eliminateJumpPrefabFormTemp(_tempState);
  1264. // }
  1265. },
  1266. //监听跳的状态数据
  1267. jumpIdenModule_listenStateDataOfJump(data) {
  1268. console.log(JSON.stringify(data));
  1269. if (this.spawnArray.length < 3) return;
  1270. let _jumpType = this.getCurrentJumpType();
  1271. //初始全部默认状态
  1272. let _tempState = [{
  1273. jumpName: 'NORMAL',
  1274. jumpCode: 0,
  1275. bTrigger: false,
  1276. describe: '正常跳'
  1277. },
  1278. {
  1279. jumpName: 'LEFT',
  1280. jumpCode: 1,
  1281. bTrigger: false,
  1282. describe: '左直跳'
  1283. },
  1284. {
  1285. jumpName: 'RIGHT',
  1286. jumpCode: 2,
  1287. bTrigger: false,
  1288. describe: '右直跳'
  1289. },
  1290. {
  1291. jumpName: 'LEFT_ROTATE',
  1292. jumpCode: 3,
  1293. bTrigger: false,
  1294. describe: '左旋转跳'
  1295. },
  1296. {
  1297. jumpName: 'RIGHT_ROTATE',
  1298. jumpCode: 4,
  1299. bTrigger: false,
  1300. describe: '右旋转跳'
  1301. }
  1302. ];
  1303. let _rotateLimit = 4;
  1304. let _jumpLimit = 0;
  1305. switch (_jumpType) {
  1306. case 0:
  1307. //JumpType.NORMAL = 0
  1308. if (data.tag === 0) {
  1309. _tempState[0].bTrigger = true;
  1310. }
  1311. this.eliminateJumpPrefabFormTemp(_tempState);
  1312. break;
  1313. case 1:
  1314. if (data.tag === 2) {
  1315. //left jump
  1316. _tempState[1].bTrigger = true;
  1317. }
  1318. this.eliminateJumpPrefabFormTemp(_tempState);
  1319. break;
  1320. case 2:
  1321. if (data.tag === 1) {
  1322. //right jump
  1323. _tempState[2].bTrigger = true;
  1324. }
  1325. this.eliminateJumpPrefabFormTemp(_tempState);
  1326. break;
  1327. case 4:
  1328. if (data.tag === 3) {
  1329. _tempState[4].bTrigger = true;
  1330. }
  1331. this.eliminateJumpPrefabFormTemp(_tempState);
  1332. break;
  1333. case 3:
  1334. if (data.tag === 4) {
  1335. _tempState[3].bTrigger = true;
  1336. }
  1337. this.eliminateJumpPrefabFormTemp(_tempState);
  1338. break;
  1339. default:
  1340. console.log('没有对应的_jumpType', _jumpType);
  1341. break;
  1342. }
  1343. },
  1344. eliminateJumpPrefabFormTemp(_tempState) {
  1345. //只触发第三个
  1346. if (this.spawnArray.length < 3) {
  1347. return;
  1348. }
  1349. let _temp = this.spawnArray[2];
  1350. let bSuccess = false;
  1351. for (let i = 0; i < _tempState.length; i++) {
  1352. let _state = _tempState[i];
  1353. if (_state.bTrigger) {
  1354. console.log(this.eliminationCount + ',识别跳的类型:' + _state.describe + ',当前预制类型:' + _temp.jumpName +
  1355. "\n直跳判断值:" + this.onLogData.currentMaxValue + ",旋转跳值:" + this.onLogData.oGyroValue);
  1356. }
  1357. //如果当前的跳类型和预制目标一样
  1358. if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
  1359. //成功
  1360. bSuccess = true;
  1361. break;
  1362. }
  1363. }
  1364. //如果存在其中一个为true
  1365. if (bSuccess) {
  1366. _temp.bTrigger = true;
  1367. this.canSpawnTemp = _temp;
  1368. setTimeout(() => {
  1369. //这里更新特效
  1370. this.onDrawEffect(this.canSpawnTemp);
  1371. }, 150);
  1372. this.deleteSpawn = this.spawnArray.splice(0, 1);
  1373. if (this.index < this.templatePool.length) {
  1374. this.spawnArray.push(this.templatePool[this.index]);
  1375. this.index++;
  1376. }
  1377. //成功
  1378. this.setEliminationCount(1);
  1379. //去除原本算法后添加 start
  1380. console.log("stop");
  1381. this.onClearData();
  1382. //去除原本算法后添加 end
  1383. //替换数组
  1384. // console.log(this.index + " == " + this.spawnArray.length);
  1385. if (this.spawnArray.length < 3 && this.index > 3) {
  1386. clearInterval(this.countdownInterval);
  1387. this.countdownInterval = null;
  1388. //绘制新触发状态
  1389. //this.canGoNext = true; //去除jumpAction注销
  1390. //去除原本算法后添加 start
  1391. this.onDraw("normal", false);
  1392. setTimeout(() => {
  1393. this.startJumpGame();
  1394. }, 500)
  1395. //去除原本算法后添加 end
  1396. } else {
  1397. //绘制新触发状态
  1398. // this.canOnDraw = true; //去除jumpAction注销
  1399. //去除原本算法后添加 start
  1400. this.onDraw("tipHit", true);
  1401. //去除原本算法后添加 end
  1402. }
  1403. } else {
  1404. //失误
  1405. this.setFaultCount(1);
  1406. }
  1407. },
  1408. /**
  1409. * @param {Object} gameData
  1410. * 识别跳部分数据处理
  1411. */
  1412. onBLERopeUpdate(gameData) {
  1413. if (!this.bJumpPlay || this.isGameOver || this.spawnAnimation != null) return;
  1414. //调用识别算法
  1415. this.jumpIdenModule_onJump6AxisDataUpdate({
  1416. data: {
  1417. hex: gameData.hex
  1418. },
  1419. callback: (res) => {
  1420. if (res.code == 0) {
  1421. if (res.tag != -1) {
  1422. this.jumpIdenModule_listenStateDataOfJump(res);
  1423. uni.showToast({
  1424. title: res.tag + ',' + res.msg,
  1425. icon: 'none',
  1426. duration: 1000,
  1427. mask: true
  1428. })
  1429. }
  1430. }
  1431. }
  1432. });
  1433. //********陀螺仪角速度********
  1434. let {
  1435. gx,
  1436. gy,
  1437. gz
  1438. } = gameData.gyro;
  1439. let {
  1440. min,
  1441. s,
  1442. ms
  1443. } = gameData;
  1444. //-gameData.acc.ax * 10;
  1445. let _ax = gameData.acc.ax * 10;
  1446. let _ay = gameData.acc.ay * 10;
  1447. let _az = gameData.acc.az * 10;
  1448. //低通滤波分离重力
  1449. // alpha 由 t / (t + dT)得到
  1450. // t为滤波器时间常量,为传感器单次采样时间
  1451. // dT为采样频率
  1452. let alpha = 0.8;
  1453. this.xA = alpha * this.xA + (1 - alpha) * _ax;
  1454. this.yA = alpha * this.yA + (1 - alpha) * _ay;
  1455. this.zA = alpha * this.zA + (1 - alpha) * _az;
  1456. //高通滤波获取线性速度
  1457. let linear_acceleration_x = _ax - this.xA;
  1458. let linear_acceleration_y = _az - this.zA;
  1459. let linear_acceleration_z = _ay - this.yA;
  1460. // let _temp = {
  1461. // linearAcc: {
  1462. // lAccX: linear_acceleration_x,
  1463. // lAccY: linear_acceleration_y,
  1464. // lAccZ: linear_acceleration_z
  1465. // }, //gameData.acc,
  1466. // oriAcc: {
  1467. // oAccX: _ax,
  1468. // oAccY: _ay,
  1469. // oAccZ: _az
  1470. // },
  1471. // gravityAcc: {
  1472. // gravityX: this.xA,
  1473. // gravityY: this.yA,
  1474. // gravityZ: this.zA
  1475. // },
  1476. // bLimitRebound: false,
  1477. // resultant: Math.sqrt(_ax * _ax +
  1478. // _ay * _ay + _az * _az),
  1479. // runIndex: this.BLEAccIndex,
  1480. // //陀螺仪
  1481. // oriGyro: {
  1482. // oGyroX: gx,
  1483. // oGyroY: gy,
  1484. // oGyroZ: gz
  1485. // },
  1486. // //输入当前轴,旧设备使用Y轴,即为true
  1487. // bYAxis: this.bOldDeviceType ? true : false,
  1488. // };
  1489. //this.actionJumpObj.updateJump(_temp);
  1490. this.BLEAccIndex++;
  1491. },
  1492. onClearData() {
  1493. this.BLEAccIndex = 0;
  1494. },
  1495. onChangeY() {
  1496. this.isY = true;
  1497. },
  1498. onChangeX() {
  1499. this.isY = false;
  1500. },
  1501. onGetActionJumpPlayView(callback) {
  1502. let view = uni.createSelectorQuery().select('#ActionJumpPlay');
  1503. view.boundingClientRect(data => {
  1504. if (callback)
  1505. callback(data);
  1506. }).exec();
  1507. },
  1508. onTipLevel() {
  1509. this.$emit("tipLevel", {
  1510. hiddenType: 'normal'
  1511. });
  1512. console.log("**************22");
  1513. }
  1514. }
  1515. }
  1516. </script>
  1517. <style lang="scss">
  1518. .mid-absolute {
  1519. position: absolute;
  1520. top: 0;
  1521. bottom: 0;
  1522. right: 0;
  1523. left: 0;
  1524. margin: auto;
  1525. }
  1526. .action-jump-timer {
  1527. position: absolute;
  1528. top: -150rpx;
  1529. }
  1530. .grid-progress-vertical-container {
  1531. min-height: 376rpx;
  1532. }
  1533. .grid-progress-vertical-bar {
  1534. max-height: 376rpx;
  1535. }
  1536. .grid-progress-vertical-child {
  1537. width: 35px;
  1538. height: 7.36px;
  1539. margin: 7.36px 0 0 0;
  1540. position: relative;
  1541. }
  1542. .grid-progress-vertical-active {
  1543. width: 28rpx;
  1544. }
  1545. .grid-progress-vertical-inactive {
  1546. width: 28rpx;
  1547. }
  1548. .sprite-yellow-arrow {
  1549. display: inline-block;
  1550. overflow: hidden;
  1551. background-repeat: no-repeat;
  1552. width: 194px;
  1553. height: 232px;
  1554. background-image: url('@/static/modal/action-jump/yellow-arrow.png');
  1555. // border: 1rpx solid #00CE47;
  1556. }
  1557. .animation-play-state-play {
  1558. animation: yellowArrowRun 1s steps(1, end); // infinite
  1559. animation-play-state: running;
  1560. }
  1561. .animation-play-state-paused {
  1562. animation-play-state: paused;
  1563. }
  1564. /**
  1565. * 箭头动画
  1566. */
  1567. @keyframes yellowArrowRun {
  1568. 0% {
  1569. background-position: -0px -0px;
  1570. }
  1571. 5% {
  1572. background-position: -0px -0px;
  1573. }
  1574. 10% {
  1575. background-position: -194px -0px;
  1576. }
  1577. 15% {
  1578. background-position: -388px -0px;
  1579. }
  1580. 20% {
  1581. background-position: -582px -0px;
  1582. }
  1583. 25% {
  1584. background-position: -776px -0px;
  1585. }
  1586. 30% {
  1587. background-position: -0px -232px;
  1588. }
  1589. 35% {
  1590. background-position: -194px -232px;
  1591. }
  1592. 40% {
  1593. background-position: -388px -232px;
  1594. }
  1595. 45% {
  1596. background-position: -582px -232px;
  1597. }
  1598. 50% {
  1599. background-position: -776px -232px;
  1600. }
  1601. 55% {
  1602. background-position: -0px -464px;
  1603. }
  1604. 60% {
  1605. background-position: -194px -464px;
  1606. }
  1607. 65% {
  1608. background-position: -388px -464px;
  1609. }
  1610. 70% {
  1611. background-position: -582px -464px;
  1612. }
  1613. 75% {
  1614. background-position: -776px -464px;
  1615. }
  1616. 80% {
  1617. background-position: -0px -696px;
  1618. }
  1619. 85% {
  1620. background-position: -194px -696px;
  1621. }
  1622. 90% {
  1623. background-position: -388px -696px;
  1624. }
  1625. 95% {
  1626. background-position: -582px -696px;
  1627. }
  1628. 100% {
  1629. background-position: -776px -696px;
  1630. }
  1631. }
  1632. .sprite-rightToLeftArrow {
  1633. display: inline-block;
  1634. overflow: hidden;
  1635. background-repeat: no-repeat;
  1636. width: 317px;
  1637. height: 42px;
  1638. background-image: url('@/static/modal/action-jump/rightToLeftArrow.png');
  1639. // border: 1rpx solid #00CE47;
  1640. }
  1641. .sprite-rightToLeftArrow-play {
  1642. animation: rightToLeftArrowRun 1s steps(1, end) infinite;
  1643. }
  1644. @keyframes rightToLeftArrowRun {
  1645. 0% {
  1646. background-position: -0px -0px;
  1647. }
  1648. 3.33% {
  1649. background-position: -0px -0px;
  1650. }
  1651. 6.66% {
  1652. background-position: -317px -0px;
  1653. }
  1654. 9.99% {
  1655. background-position: -0px -42px;
  1656. }
  1657. 13.33% {
  1658. background-position: -317px -42px;
  1659. }
  1660. 16.66% {
  1661. background-position: -0px -84px;
  1662. }
  1663. 19.99% {
  1664. background-position: -317px -84px;
  1665. }
  1666. 23.33% {
  1667. background-position: -0px -126px;
  1668. }
  1669. 26.66% {
  1670. background-position: -317px -126px;
  1671. }
  1672. 29.99% {
  1673. background-position: -0px -168px;
  1674. }
  1675. 33.33% {
  1676. background-position: -317px -168px;
  1677. }
  1678. 36.66% {
  1679. background-position: -0px -210px;
  1680. }
  1681. 39.99% {
  1682. background-position: -317px -210px;
  1683. }
  1684. 43.33% {
  1685. background-position: -0px -252px;
  1686. }
  1687. 46.66% {
  1688. background-position: -317px -252px;
  1689. }
  1690. 49.99% {
  1691. background-position: -0px -294px;
  1692. }
  1693. 53.33% {
  1694. background-position: -317px -294px;
  1695. }
  1696. 56.66% {
  1697. background-position: -0px -336px;
  1698. }
  1699. 59.99% {
  1700. background-position: -317px -336px;
  1701. }
  1702. 63.33% {
  1703. background-position: -0px -378px;
  1704. }
  1705. 66.66% {
  1706. background-position: -317px -378px;
  1707. }
  1708. 69.99% {
  1709. background-position: -0px -420px;
  1710. }
  1711. 73.33% {
  1712. background-position: -317px -420px;
  1713. }
  1714. 76.66% {
  1715. background-position: -0px -462px;
  1716. }
  1717. 79.99% {
  1718. background-position: -317px -462px;
  1719. }
  1720. 83.33% {
  1721. background-position: -0px -504px;
  1722. }
  1723. 86.66% {
  1724. background-position: -317px -504px;
  1725. }
  1726. 89.99% {
  1727. background-position: -0px -546px;
  1728. }
  1729. 93.33% {
  1730. background-position: -317px -546px;
  1731. }
  1732. 96.66% {
  1733. background-position: -0px -588px;
  1734. }
  1735. 100% {
  1736. background-position: -317px -588px;
  1737. }
  1738. }
  1739. </style>