action-jump.vue 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127
  1. <template>
  2. <view style="width: 750rpx;">
  3. <view class="flex justify-center" style="margin-top: 32rpx;">
  4. <!-- 目前格子数量不代表数字,显示完成度而已 -->
  5. <view class="grid-progress-vertical-container" style="top:-460rpx; ">
  6. <view class="grid-progress-vertical-bar">
  7. <view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
  8. v-if="index!==0">
  9. <view
  10. :class="showCurCount>=index? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
  11. </view>
  12. <view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
  13. class="grid-progress-vertical-text">
  14. {{Math.floor(taskSignCount / 40 * index)}}
  15. </view>
  16. </view>
  17. </view>
  18. <view class="grid-progress-vertical-bar">
  19. <view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
  20. v-if="index!==0">
  21. <view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
  22. class="grid-progress-vertical-text">
  23. {{Math.floor(taskSignCount / 40 * index)+taskSignCount/2}}
  24. </view>
  25. <view
  26. :class="showCurCount>=index+20? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="flex justify-center align-center" style="height: 100rpx; width: 444rpx; ">
  32. <view class="text-12px text-white text-center">
  33. {{taskDescribe}}
  34. </view>
  35. </view>
  36. </view>
  37. <canvas canvas-id="actionJumpCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
  38. <view class="flex align-center justify-center" style="font-size: 14px;">
  39. <view style="position: relative;">
  40. <image style="width: 135px;height: 75px;" src="../../../static/modal/action-jump/Fill.png"></image>
  41. <view class="mid-absolute flex flex-direction align-center justify-center text-white">
  42. <view class="flex align-center">
  43. <image style="width: 22rpx;height: 28rpx;"
  44. src="../../../static/modal/action-jump/jumpSpeed.png"></image>
  45. <view style="margin-left: 6rpx;">平均速度</view>
  46. </view>
  47. <view style="margin-top: 12rpx;">{{jumpSpeed}}</view>
  48. </view>
  49. </view>
  50. <view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
  51. <image style="width: 110px;height: 110px;" src="../../../static/modal/action-jump/midButton.png">
  52. </image>
  53. <image v-if="!bJumpPlay" class="mid-absolute" style=" width: 28rpx;height: 28rpx;"
  54. src="../../../static/modal/action-jump/midPlay.png">
  55. </image>
  56. <image v-else class="mid-absolute" style="width: 28rpx;height: 28rpx;"
  57. src="../../../static/modal/action-jump/midPause.png">
  58. </image>
  59. </view>
  60. <view style="position: relative;">
  61. <image style="width: 135px;height: 75px; transform: scaleX(-1);"
  62. src="../../../static/modal/action-jump/Fill.png"></image>
  63. <view class="mid-absolute flex flex-direction align-center justify-center text-white">
  64. <view class="flex align-center">
  65. <image style="width: 22rpx;height: 28rpx;"
  66. src="../../../static/modal/action-jump/jumpCalorie.png"></image>
  67. <view style="margin-left: 6rpx;">卡路里</view>
  68. </view>
  69. <view style="margin-top: 12rpx;">{{jumpCalorie}}</view>
  70. </view>
  71. </view>
  72. </view>
  73. <!-- <view style="height: 41px;"></view> -->
  74. <!-- 测试按钮 -->
  75. <!-- <view style="display: flex;justify-content: space-between;">
  76. <view>{{isY?'Y':'X'}}</view>
  77. <button @click="onChangeY">Y为旋转轴</button>
  78. <button @click="onChangeX">X为旋转轴</button>
  79. </view> -->
  80. <!-- <view style="display: flex;justify-content: space-between;" class="margin-top margin-bottom">
  81. <button @click="onJumpType(0)">jump</button>
  82. <button @click="onJumpType(1)">left</button>
  83. <button @click="onJumpType(2)">right</button>
  84. <button @click="onJumpType(3)">rLeft</button>
  85. <button @click="onJumpType(4)">rRight</button>
  86. </view> -->
  87. <!-- <view style="display: flex;justify-content: space-around; padding-bottom: 100rpx;">
  88. <view style="font-size: 14px;">t:{{countdown}}</view>
  89. <view style="font-size: 14px;">e:{{eliminationCount}}</view>
  90. <view style="font-size: 14px;">f:{{faultCount}}</view>
  91. </view> -->
  92. </view>
  93. </template>
  94. <script>
  95. import ActionJump from "@/util/util-js/action/jump.js"
  96. import {
  97. CONDITIONPASSED
  98. } from "@/util/util-js/enum.js"
  99. import {
  100. mapMutations
  101. } from 'vuex';
  102. export default {
  103. components: {
  104. },
  105. props: {
  106. showTime: {
  107. type: Number,
  108. default: 0
  109. },
  110. levelData: {
  111. type: Object,
  112. default: null
  113. },
  114. currentMode: {
  115. type: String,
  116. default: ''
  117. }
  118. },
  119. data() {
  120. return {
  121. isY: true,
  122. canvasW: 0, // 画布宽
  123. canvasH: 0, // 画布高
  124. SystemInfo: {}, // 设备信息
  125. directionJump: null,
  126. midJump: null,
  127. rotateJump: null,
  128. directionJumpWhite: null,
  129. midJumpWhite: null,
  130. rotateJumpWhite: null,
  131. //参考图片
  132. cankao: null,
  133. jumpTipImage: null,
  134. jumpNormalImage: null,
  135. jumpTypeArray: [{
  136. jumpName: 'NORMAL',
  137. jumpCode: 0,
  138. icon: 'midJump',
  139. scaleX: 1,
  140. bTrigger: false,
  141. }, {
  142. jumpName: 'LEFT',
  143. jumpCode: 1,
  144. icon: 'directionJump',
  145. scaleX: -1,
  146. bTrigger: false,
  147. }, {
  148. jumpName: 'RIGHT',
  149. jumpCode: 2,
  150. icon: 'directionJump',
  151. scaleX: 1,
  152. bTrigger: false,
  153. }, {
  154. jumpName: 'LEFT_ROTATE',
  155. jumpCode: 3,
  156. icon: 'rotateJump',
  157. scaleX: -1,
  158. bTrigger: false,
  159. }, {
  160. jumpName: 'RIGHT_ROTATE',
  161. jumpCode: 4,
  162. icon: 'rotateJump',
  163. scaleX: 1,
  164. bTrigger: false,
  165. }],
  166. spawnArray: [],
  167. //下一个生成是相反的方向
  168. bNextSpawnRightDirection: false,
  169. bNextSpawnRightRotateDirection: false,
  170. //生成预制的模板,用count 来判断生成哪一种
  171. template: [{ //原地
  172. count: 1,
  173. spawnList: [
  174. [0]
  175. ]
  176. }, {
  177. count: 2,
  178. spawnList: [
  179. [2, 1],
  180. [1, 2],
  181. [3, 4],
  182. [4, 3]
  183. ]
  184. }, {
  185. count: 3,
  186. spawnList: [
  187. [2, 0, 1],
  188. [1, 0, 2],
  189. [3, 0, 4],
  190. [4, 0, 3]
  191. ]
  192. }, ],
  193. level: 3,
  194. levelType: 0,
  195. countdown: 60,
  196. countdownInterval: null,
  197. faultCount: 0,
  198. eliminationCount: 0,
  199. bJumpPlay: false,
  200. jumpCalorie: 1000,
  201. jumpSpeed: 1000,
  202. //硬件设备处理
  203. BLEAccIndex: 0,
  204. bJump: false,
  205. xA: 0,
  206. yA: 0,
  207. zA: 0,
  208. actionJumpObj: null,
  209. /**
  210. * 交互数据处理
  211. */
  212. //当前选择的关卡信息
  213. selfLevelData: null,
  214. // 双人模式下 数据
  215. //标记块数量
  216. taskSignCount: 0, //总数
  217. taskSignCurCount: 0, //当前计数
  218. //{"type":1,"explain":"规定时间内跳完所有标志块","limitType":1}
  219. taskConditionPassed: null,
  220. taskDescribe: '',
  221. //满格的数值是 25
  222. maxShowCount: 20,
  223. addShowCountUnit: 0,
  224. showCurCount: 0,
  225. roundingCount: 0,
  226. //游戏结束
  227. isGameOver: false,
  228. //pk模式下操作
  229. leftShowCurCount: 0,
  230. rightShowCurCount: 0,
  231. isleftPlayer: true
  232. }
  233. },
  234. watch: {
  235. levelData(val) {
  236. //更新数据
  237. // console.log("levelData ============>", JSON.stringify(val));
  238. if (val) {
  239. this.taskSignCount = val.signCount;
  240. this.taskConditionPassed = val.conditionPassed;
  241. this.taskDescribe = val.describe;
  242. this.addShowCountUnit = (this.maxShowCount * 2) / this.taskSignCount;
  243. // console.log("this.addShowCountUnit:", this.addShowCountUnit, this.maxShowCount * 2, this
  244. // .taskSignCount);
  245. this.showCount = 0;
  246. //用signType 做等级类型
  247. this.levelType = val.signType;
  248. console.log(JSON.stringify(this.taskConditionPassed));
  249. }
  250. },
  251. currentMode(val) {
  252. console.log('==========> action jump currentMode:', val);
  253. }
  254. },
  255. created() {
  256. let _self = this;
  257. this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
  258. // console.log("this.actionJumpCanvas:", this.actionJumpCanvas);
  259. this.SystemInfo = uni.getSystemInfoSync();
  260. this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
  261. this.canvasH = 114;
  262. this.onLoadImage();
  263. this.onListenActionJump();
  264. console.log('==========>1 action jump currentMode:', this.currentMode);
  265. },
  266. methods: {
  267. ...mapMutations(['onWriteBLEConnectionValue', 'onConvertDeviceData']),
  268. onListenActionJump() {
  269. let _self = this;
  270. _self.actionJumpObj = new ActionJump();
  271. _self.actionJumpObj.addEventListener('resultant', (e) => {
  272. if (e.type == 'jump') {
  273. // this.jumpCount++;
  274. this.bJump = true;
  275. } else if (e.type == 'stateDataOfJump') {
  276. //发送给game,在game里面处理判断
  277. this.listenStateDataOfJump(e);
  278. } else if (e.type == 'stop') {
  279. this.onClearData();
  280. // console.log('stop');
  281. }
  282. })
  283. },
  284. //load 相关图片
  285. onLoadImage() {
  286. let _self = this;
  287. uni.getImageInfo({
  288. src: "../../../static/modal/action-jump/directionJump.png",
  289. success: function(image) {
  290. _self.directionJump = image;
  291. }
  292. });
  293. uni.getImageInfo({
  294. src: "../../../static/modal/action-jump/midJump.png",
  295. success: function(image) {
  296. _self.midJump = image;
  297. }
  298. });
  299. uni.getImageInfo({
  300. src: "../../../static/modal/action-jump/rotateJump.png",
  301. success: function(image) {
  302. _self.rotateJump = image;
  303. }
  304. });
  305. uni.getImageInfo({
  306. src: "../../../static/modal/action-jump/directionJumpWhite.png",
  307. success: function(image) {
  308. _self.directionJumpWhite = image;
  309. }
  310. });
  311. uni.getImageInfo({
  312. src: "../../../static/modal/action-jump/midJumpWhite.png",
  313. success: function(image) {
  314. _self.midJumpWhite = image;
  315. }
  316. });
  317. uni.getImageInfo({
  318. src: "../../../static/modal/action-jump/rotateJumpWhite.png",
  319. success: function(image) {
  320. _self.rotateJumpWhite = image;
  321. }
  322. });
  323. uni.getImageInfo({
  324. src: "../../../static/modal/action-jump/jumpTip.png",
  325. success: function(image) {
  326. _self.jumpTipImage = image;
  327. }
  328. });
  329. uni.getImageInfo({
  330. src: "../../../static/modal/action-jump/jumpNormal.png",
  331. success: function(image) {
  332. _self.jumpNormalImage = image;
  333. _self.onDrawBg();
  334. }
  335. });
  336. uni.getImageInfo({
  337. src: "../../../static/modal/action-jump/cankao.png",
  338. success: function(image) {
  339. _self.cankao = image;
  340. }
  341. });
  342. },
  343. /**
  344. * 重置生成数组,重置倒计时
  345. */
  346. resetJumpGame() {
  347. this.spawnArray = [];
  348. if (this.countdownInterval) {
  349. clearInterval(this.countdownInterval);
  350. this.countdownInterval = null;
  351. }
  352. // this.resetCountdown(60);
  353. },
  354. startJumpGame() {
  355. this.isGameOver = false;
  356. this.resetJumpGame();
  357. //开始游戏
  358. this.index = 0;
  359. // this.levelLabel.string = '关卡' + this.level;
  360. let _ranType = Math.floor(Math.random() * 2);
  361. if (this.levelType == 0) {
  362. //随便生成一组跳的数据
  363. let _spawnList = this.template[0].spawnList;
  364. for (let i = 0; i < 4; i++) {
  365. this.spawnJumpPrefabsFromType(i, _spawnList[0][0]);
  366. }
  367. } else if (this.levelType == 1) {
  368. //生成一组 左跳右跳
  369. let _spawnList = this.template[1].spawnList;
  370. let ran = Math.floor(Math.random() * 2);
  371. // if (_ranType >= 1) ran += 2;
  372. for (let i = 0; i < _spawnList[ran].length; i++) {
  373. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  374. }
  375. } else if (this.levelType == 2) {
  376. //生成一组 左跳右跳原地
  377. let _spawnList = this.template[2].spawnList;
  378. let ran = Math.floor(Math.random() * 2);
  379. // if (_ranType >= 1) ran += 2;
  380. for (let i = 0; i < _spawnList[ran].length; i++) {
  381. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  382. }
  383. } else if (this.levelType == 3) {
  384. //生成一组 左旋跳右旋跳
  385. let _spawnList = this.template[1].spawnList;
  386. let ran = Math.floor(Math.random() * 2) + 2;
  387. for (let i = 0; i < _spawnList[ran].length; i++) {
  388. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  389. }
  390. } else if (this.levelType == 4) {
  391. //生成一组 左旋跳右旋跳
  392. let _spawnList = this.template[2].spawnList;
  393. let ran = Math.floor(Math.random() * 2) + 2;
  394. for (let i = 0; i < _spawnList[ran].length; i++) {
  395. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  396. }
  397. } else if (this.levelType == 5) {
  398. //随便生成三组数据
  399. let _newArray = [];
  400. // let _spawnList1 = this.template[1].spawnList;
  401. // let ran1 = Math.floor(Math.random() * 2);
  402. // _newArray = _newArray.concat(_spawnList1[ran1]);
  403. let _spawnList2 = this.template[2].spawnList;
  404. let ran2 = Math.floor(Math.random() * 2);
  405. let ran3 = Math.floor(Math.random() * 2);
  406. if (_ranType >= 1) {
  407. ran2 += 2;
  408. ran3 += 2;
  409. }
  410. _newArray = _newArray.concat(_spawnList2[ran2]);
  411. _newArray = _newArray.concat(_spawnList2[ran3]);
  412. for (let i = 0; i < _newArray.length; i++) {
  413. this.spawnJumpPrefabsFromType(i, _newArray[i]);
  414. }
  415. //todo 暂时给循环
  416. this.level = 0;
  417. }
  418. // if (this.level == 2) {
  419. // //随便生成二组数据
  420. // let _newArray = [];
  421. // let _spawnList1 = this.template[1].spawnList;
  422. // let ran1 = Math.floor(Math.random() * 2);
  423. // _newArray = _newArray.concat(_spawnList1[ran1]);
  424. // let _spawnList2 = this.template[2].spawnList;
  425. // let ran2 = Math.floor(Math.random() * 2);
  426. // if (_ranType >= 1) ran2 += 2;
  427. // _newArray = _newArray.concat(_spawnList2[ran2]);
  428. // // console.log(_newArray);
  429. // for (let i = 0; i < _newArray.length; i++) {
  430. // this.spawnJumpPrefabsFromType(i, _newArray[i]);
  431. // }
  432. // }
  433. this.level++;
  434. //倒计时
  435. // this.countdownInterval = setInterval(() => {
  436. // if (this.countdown <= 0) {
  437. // clearInterval(this.countdownInterval);
  438. // this.countdownInterval = null;
  439. // //处理下一个关卡
  440. // // console.warn('时间到,处理下一个关卡');
  441. // this.startJumpGame();
  442. // return;
  443. // }
  444. // this.setCountdown(1);
  445. // }, 1000);
  446. this.onDraw();
  447. },
  448. spawnJumpPrefabsFromType(index, _jumpType) {
  449. //todo 生成的节点,后面再处理节奏问题。比如生成顺序
  450. for (let i = 0; i < this.jumpTypeArray.length; i++) {
  451. if (this.jumpTypeArray[i].jumpCode == _jumpType) {
  452. let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i]);
  453. this.spawnArray.push(_jumpPrefab);
  454. break;
  455. }
  456. }
  457. },
  458. spawnJumpPrefabs(index) {
  459. let ran = Math.floor(Math.random() * 5);
  460. //todo 生成的节点,后面再处理节奏问题。比如生成顺序
  461. let _jumpPrefab = Object.assign({}, this.jumpTypeArray[ran]);
  462. //这里处理相反方向,比如生成了一个左旋转,下一个右旋转
  463. if (_jumpPrefab.jumpName == 'LEFT') {
  464. if (this.bNextSpawnRightDirection) {
  465. //如果是对应的需要记录一个对应的准确值
  466. this.bNextSpawnRightDirection = false;
  467. } else {
  468. ran = 2; //RIGHT;
  469. this.bNextSpawnRightDirection = true;
  470. }
  471. } else if (_jumpPrefab.jumpName == 'RIGHT') {
  472. if (this.bNextSpawnRightDirection) {
  473. ran = 1; //LEFT;
  474. this.bNextSpawnRightDirection = false;
  475. } else {
  476. this.bNextSpawnRightDirection = true;
  477. }
  478. }
  479. if (_jumpPrefab.jumpName == 'LEFT_ROTATE') {
  480. if (this.bNextSpawnRightRotateDirection) {
  481. //如果是对应的需要记录一个对应的准确值
  482. this.bNextSpawnRightRotateDirection = false;
  483. } else {
  484. ran = 4; //RIGHT_ROTATE;
  485. this.bNextSpawnRightRotateDirection = true;
  486. }
  487. // console.log('l==rotate', ran);
  488. } else if (_jumpPrefab.jumpName == 'RIGHT_ROTATE') {
  489. if (this.bNextSpawnRightRotateDirection) {
  490. ran = 3; //LEFT_ROTATE;
  491. this.bNextSpawnRightRotateDirection = false;
  492. } else {
  493. //如果是对应的需要记录一个对应的准确值
  494. this.bNextSpawnRightRotateDirection = true;
  495. }
  496. }
  497. this.spawnArray.push(_jumpPrefab);
  498. },
  499. //单纯的绘制八个背景
  500. onDrawBg() {
  501. this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
  502. let _currentBgStartX = this.canvasW / 2;
  503. let count = 4;
  504. for (let i = 0; i < count; i++) {
  505. let _currentStartPos = _currentBgStartX - i * 50 - 50;
  506. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114);
  507. let _currentEndPos = _currentBgStartX + i * 50;
  508. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);
  509. }
  510. this.actionJumpCanvas.draw();
  511. },
  512. onDraw() {
  513. this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
  514. //计算一个对象
  515. let _drawObj = {
  516. path: null,
  517. startX: 0,
  518. width: 0,
  519. bgWidth: 0,
  520. bgStartXAllNormal: 0,
  521. bgStartXHasTip: 0,
  522. }
  523. //计算居中的点
  524. _drawObj.width = this.spawnArray.length * (50 + 10);
  525. _drawObj.startX = this.canvasW / 2 - _drawObj.width / 2;
  526. //全部是普通背景
  527. _drawObj.bgStartXAllNormal = this.canvasW / 2 - (this.spawnArray.length * 50) / 2;
  528. _drawObj.bgStartXHasTip = this.canvasW / 2 - (this.spawnArray.length * 50 + 40) / 2;
  529. let _currentBgStartX = this.index == this.spawnArray.length ? _drawObj.bgStartXAllNormal : _drawObj
  530. .bgStartXHasTip;
  531. // console.log("_drawObj.startX:", _drawObj.startX, _drawObj.width / 2);
  532. //绘制八个位置。如果生成数量不够的话。补上对应的数量
  533. let count = 8 - this.spawnArray.length;
  534. count = Math.ceil(count / 2);
  535. //计算一个节点数组
  536. for (let i = 0; i < this.spawnArray.length; i++) {
  537. //默认 mid 图标
  538. let _temp = this.spawnArray[i].bTrigger ? this.midJump : this.midJumpWhite;
  539. if (this.spawnArray[i].icon == 'directionJump') {
  540. _temp = this.spawnArray[i].bTrigger ? this.directionJump : this.directionJumpWhite;
  541. } else if (this.spawnArray[i].icon == 'rotateJump') {
  542. _temp = this.spawnArray[i].bTrigger ? this.rotateJump : this.rotateJumpWhite;
  543. }
  544. //如果是相反绘制,需要加多一个自身位置偏移
  545. let _pos = this.spawnArray[i].scaleX < 0 ? i + 1 : i;
  546. let _spacing = i == 0 ? 0 : 1;
  547. let _addData = 0;
  548. //大图提示后面要加上大图占的位置,为大图宽度减小图( 90 - 50 )
  549. if (i >= this.index) {
  550. _addData = 40;
  551. }
  552. if (i == 0) {
  553. //_frontBgData 为减去大图位置,10 为偏移位置
  554. let _frontBgData = 40;
  555. //绘制前背景
  556. for (let i = 0; i < count; i++) {
  557. let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
  558. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114)
  559. }
  560. }
  561. this.actionJumpCanvas.save();
  562. this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.7 : 1;
  563. this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
  564. let _currentPos = 0;
  565. let _currentCenterPos = 0;
  566. if (i == this.index) {
  567. _currentPos = (_currentBgStartX + _pos * 90 - i * 40) *
  568. this
  569. .spawnArray[i]
  570. .scaleX;
  571. this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 90, 114);
  572. //计算对应中心点的值
  573. _currentCenterPos = _currentPos + 90 / 2 - 25 / 2;
  574. //57 - 40/2 是取画布中心y点,减去图标本身高的一半的值
  575. this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);
  576. } else {
  577. _currentPos = (_currentBgStartX + _addData + _pos *
  578. 50) * this
  579. .spawnArray[i]
  580. .scaleX;
  581. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentPos, 0, 50, 114)
  582. //计算对应中心点的值
  583. _currentCenterPos = _currentPos + 50 / 2 - 25 / 2;
  584. //44.5 是取画布中心y点,减去图标本身高的一半的值
  585. this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);
  586. }
  587. this.actionJumpCanvas.restore();
  588. if (i == this.spawnArray.length - 1) {
  589. //绘制结束位置
  590. // console.log("count:", count);
  591. for (let i = 0; i < count; i++) {
  592. let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length + i) * 50;
  593. // console.log("end _currentEndPos:", _currentEndPos);
  594. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114)
  595. }
  596. }
  597. }
  598. this.actionJumpCanvas.draw();
  599. },
  600. onClear() {
  601. this.resetJumpGame();
  602. this.onDrawBg();
  603. this.xA = 0;
  604. this.yA = 0;
  605. this.zA = 0;
  606. this.bJump = false;
  607. this.actionJumpObj.resetAll();
  608. },
  609. onJumpType(event) {
  610. // console.log("onJumpType:", event);
  611. if (this.isGameOver || !this.bJumpPlay) return;
  612. this.eliminateJumpPrefab(event);
  613. },
  614. // update (dt) {}
  615. eliminateJumpPrefab(_jumpType) {
  616. let _temp = this.spawnArray[this.index];
  617. //如果当前的跳类型和预制目标一样
  618. if (_jumpType == _temp.jumpCode) {
  619. _temp.bTrigger = true;
  620. this.index++;
  621. if (this.index >= this.spawnArray.length) {
  622. clearInterval(this.countdownInterval);
  623. this.countdownInterval = null;
  624. this.startJumpGame();
  625. } else {
  626. //绘制新触发状态
  627. this.onDraw();
  628. }
  629. //成功
  630. this.setEliminationCount(1);
  631. } else {
  632. //失误
  633. this.setFaultCount(1);
  634. }
  635. },
  636. //设置倒计时
  637. setCountdown(value) {
  638. this.countdown -= value;
  639. // this.countdownLabel.string = '倒计时:' + this.countdown;
  640. this.$emit('actionJumpCountDownUpdate', {
  641. countDown: this.countdown
  642. });
  643. },
  644. resetCountdown(value) {
  645. this.countdown = value;
  646. // this.countdownLabel.string = '倒计时:' + this.countdown;
  647. this.$emit('actionJumpCountDownUpdate', {
  648. countDown: this.countdown
  649. });
  650. },
  651. //设置ui信息
  652. setEliminationCount(value) {
  653. this.taskSignCurCount++;
  654. this.roundingCount += this.addShowCountUnit;
  655. this.eliminationCount += value;
  656. // this.eliminationLabel.string = '消除数量:' + this.eliminationCount.toString();
  657. this.$emit('actionJumpDataUpdate', {
  658. eliminationCount: this.eliminationCount,
  659. faultCount: this.faultCount
  660. });
  661. //如果是pk模式。不走下面判断
  662. if (this.currentMode == 'pkMode') return;
  663. if (CONDITIONPASSED.ENERGYBARFULL == this.taskConditionPassed.limitType) {
  664. //能量条的条件下才显示能量条动
  665. //取两位后计算Math floor,不然会有偏差值问题 Math.floor(39.9999999+ 0.1111111) = 39
  666. this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
  667. //1.能量槽满的时候,说明踩中次数到达
  668. if (this.taskSignCurCount >= this.taskSignCount)
  669. this.onGameOver("energyBarFull");
  670. } else if (CONDITIONPASSED.SKIPALLFLAGWITHINTIME == this.taskConditionPassed.limitType) {
  671. //规定时间下也给显示能量条
  672. this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
  673. //2.规定时间内跳完所有标志块
  674. if (this.taskSignCurCount >= this.taskSignCount)
  675. this.onGameOver("skipAllFlagWithinTime");
  676. } else if (this.taskConditionPassed.isScore) {
  677. //3.达到一定分数
  678. //如果是用分数判断
  679. //分数是 跳对的加1分,错的扣1分,0不扣分。
  680. let curScore = this.eliminationCount - this.faultCount;
  681. curScore = curScore < 0 ? 0 : curScore;
  682. //当前分数达到,胜利
  683. if (curScore >= this.taskConditionPassed.limitScore)
  684. this.onGameOver("score");
  685. }
  686. },
  687. onGameOver(type) {
  688. this.isGameOver = true;
  689. //处理参数
  690. this.onClear();
  691. this.onClearData();
  692. this._changePlay();
  693. /**
  694. * 判断胜利和失败
  695. */
  696. let myWin = false; //默认失败
  697. //比如, 1.充满左右两边蓄能槽.2.规定时间内跳完所有标志块.
  698. if (type == "energyBarFull") {
  699. //1.能量槽满的时候,说明踩中次数到达
  700. if (this.taskSignCurCount >= this.taskSignCount) {
  701. myWin = true;
  702. }
  703. } else if (type == 'skipAllFlagWithinTime') {
  704. myWin = true;
  705. } else if (type == "timeUp") {
  706. //2.规定时间内跳完所有标志块
  707. //查看消除数量是否到达总数,未达成就是未完成
  708. if (this.taskSignCurCount >= this.taskSignCount) {
  709. myWin = true;
  710. }
  711. } else if (type == "score") {
  712. myWin = true;
  713. }
  714. console.log(type, {
  715. myWin: myWin
  716. });
  717. this.$emit('gameOver', {
  718. myWin: myWin,
  719. type: 'calorieMode'
  720. });
  721. },
  722. //pk模式下结束游戏关卡
  723. onPKModeGameOver(type) {
  724. this.isGameOver = true;
  725. //处理参数
  726. this.onClear();
  727. this.onClearData();
  728. this._changePlay();
  729. this.$emit('gameOver', {
  730. type: 'pkMode'
  731. });
  732. },
  733. setFaultCount(value) {
  734. this.faultCount += value;
  735. // this.faultLabel.string = '失误:' + this.faultCount;
  736. this.$emit('actionJumpDataUpdate', {
  737. eliminationCount: this.eliminationCount,
  738. faultCount: this.faultCount
  739. });
  740. },
  741. //控制播放
  742. onControllerPlay() {
  743. if (this.bJumpPlay) {
  744. //仅仅暂停,没有清空数据
  745. this._changePlay(false);
  746. this.$emit("actionJumpControllerPlay", false);
  747. } else {
  748. this.$emit("actionJumpCheck");
  749. }
  750. },
  751. onContinueGame() {
  752. this._changePlay(true);
  753. },
  754. onClearActionJumpData() {
  755. this.onClear();
  756. this.onClearData();
  757. },
  758. //修改状态
  759. _changePlay(bPlaying) {
  760. if (bPlaying) {
  761. this.bJumpPlay = bPlaying;
  762. } else {
  763. this.bJumpPlay = !this.bJumpPlay;
  764. }
  765. },
  766. onActionJumpPlay() {
  767. this.onClear();
  768. this.onClearData();
  769. this.startJumpGame();
  770. this._changePlay(true);
  771. //reset 对应计算数据
  772. this.taskSignCurCount = 0;
  773. this.showCurCount = 0;
  774. this.roundingCount = 0;
  775. this.faultCount = 0;
  776. this.eliminationCount = 0;
  777. },
  778. getCurrentJumpType() {
  779. let _temp = this.spawnArray[this.index];;
  780. return _temp.jumpCode;
  781. },
  782. //监听跳的状态数据
  783. listenStateDataOfJump(data) {
  784. if (this.isGameOver || !this.bJumpPlay) return;
  785. let _jumpType = this.getCurrentJumpType();
  786. //初始全部默认状态
  787. let _tempState = [{
  788. jumpName: 'NORMAL',
  789. jumpCode: 0,
  790. bTrigger: true,
  791. describe: '正常跳'
  792. },
  793. {
  794. jumpName: 'LEFT',
  795. jumpCode: 1,
  796. bTrigger: false,
  797. describe: '左直跳'
  798. },
  799. {
  800. jumpName: 'RIGHT',
  801. jumpCode: 2,
  802. bTrigger: false,
  803. describe: '右直跳'
  804. },
  805. {
  806. jumpName: 'LEFT_ROTATE',
  807. jumpCode: 3,
  808. bTrigger: false,
  809. describe: '左旋转跳'
  810. },
  811. {
  812. jumpName: 'RIGHT_ROTATE',
  813. jumpCode: 4,
  814. bTrigger: false,
  815. describe: '右旋转跳'
  816. }
  817. ];
  818. let {
  819. currentMaxValue,
  820. oGyroValue
  821. } = data
  822. console.log('stateDataOfJump:', JSON.stringify(data));
  823. if (currentMaxValue == 0) {
  824. //JumpType.NORMAL = 0
  825. if (_jumpType == 0) {
  826. // console.log('1====', data);
  827. this.eliminateJumpPrefabFormTemp(_tempState);
  828. }
  829. //JumpType.RIGHT_ROTATE = 4
  830. else if (_jumpType == 4 && (!this.isY && oGyroValue < 0 || this.isY && oGyroValue > 0)) {
  831. // console.log('right1:', oGyroValue);
  832. _tempState[4].bTrigger = true;
  833. this.eliminateJumpPrefabFormTemp(_tempState);
  834. }
  835. //JumpType.LEFT_ROTATE = 3
  836. else if (_jumpType == 3 && (!this.isY && oGyroValue > 0 || this.isY && oGyroValue < 0)) {
  837. // console.log('left1:', oGyroValue);
  838. _tempState[3].bTrigger = true;
  839. this.eliminateJumpPrefabFormTemp(_tempState);
  840. }
  841. } else {
  842. // console.log('2====', data);
  843. if (currentMaxValue < -5) {
  844. //left jump
  845. _tempState[1].bTrigger = true;
  846. } else if (currentMaxValue > 5) {
  847. //right jump
  848. _tempState[2].bTrigger = true;
  849. }
  850. if (this.isY) {
  851. //如果是检测到旋转跳
  852. if (oGyroValue > 5) {
  853. // console.log('y right:', oGyroValue);
  854. _tempState[4].bTrigger = true;
  855. } else if (oGyroValue < -5) {
  856. // console.log('y left:', oGyroValue);
  857. _tempState[3].bTrigger = true;
  858. }
  859. } else {
  860. //如果是检测到旋转跳
  861. if (oGyroValue < -5) {
  862. // console.log('x right:', oGyroValue);
  863. _tempState[4].bTrigger = true;
  864. } else if (oGyroValue > 5) {
  865. // console.log('x left:', oGyroValue);
  866. _tempState[3].bTrigger = true;
  867. }
  868. }
  869. this.eliminateJumpPrefabFormTemp(_tempState);
  870. }
  871. },
  872. eliminateJumpPrefabFormTemp(_tempState) {
  873. //如果消除完,需要重新生成
  874. let _temp = this.spawnArray[this.index];
  875. let bSuccess = false;
  876. console.log(JSON.stringify(_tempState));
  877. for (let i = 0; i < _tempState.length; i++) {
  878. let _state = _tempState[i];
  879. //如果当前的跳类型和预制目标一样
  880. if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
  881. //成功
  882. bSuccess = true;
  883. break;
  884. }
  885. }
  886. //如果存在其中一个为true
  887. if (bSuccess) {
  888. // console.log("bSuccess:", bSuccess);
  889. _temp.bTrigger = true;
  890. this.index++;
  891. if (this.index >= this.spawnArray.length) {
  892. clearInterval(this.countdownInterval);
  893. this.countdownInterval = null;
  894. this.startJumpGame();
  895. } else {
  896. //绘制新触发状态
  897. this.onDraw();
  898. }
  899. //成功
  900. this.setEliminationCount(1);
  901. } else {
  902. //失误
  903. this.setFaultCount(1);
  904. }
  905. },
  906. /**
  907. * @param {Object} gameData
  908. * 识别跳部分数据处理
  909. */
  910. onBLERopeUpdate(gameData) {
  911. if (!this.bJumpPlay || this.isGameOver) return;
  912. //********陀螺仪角速度********
  913. let {
  914. gx,
  915. gy,
  916. gz
  917. } = gameData.gyro;
  918. let {
  919. min,
  920. s,
  921. ms
  922. } = gameData;
  923. //-gameData.acc.ax * 10;
  924. let _ax = gameData.acc.ax * 10;
  925. let _ay = gameData.acc.ay * 10;
  926. let _az = gameData.acc.az * 10;
  927. //低通滤波分离重力
  928. let alpha = 0.8;
  929. this.xA = alpha * this.xA + (1 - alpha) * _ax;
  930. this.yA = alpha * this.yA + (1 - alpha) * _ay;
  931. this.zA = alpha * this.zA + (1 - alpha) * _az;
  932. //高通滤波获取线性速度
  933. let linear_acceleration_x = _ax - this.xA;
  934. let linear_acceleration_y = _az - this.zA;
  935. let linear_acceleration_z = _ay - this.yA;
  936. let _temp = {
  937. linearAcc: {
  938. lAccX: linear_acceleration_x,
  939. lAccY: linear_acceleration_y,
  940. lAccZ: linear_acceleration_z
  941. }, //gameData.acc,
  942. oriAcc: {
  943. oAccX: _ax,
  944. oAccY: _ay,
  945. oAccZ: _az
  946. },
  947. gravityAcc: {
  948. gravityX: this.xA,
  949. gravityY: this.yA,
  950. gravityZ: this.zA
  951. },
  952. bLimitRebound: false,
  953. resultant: Math.sqrt(_ax * _ax +
  954. _ay * _ay + _az * _az),
  955. runIndex: this.BLEAccIndex,
  956. //陀螺仪
  957. oriGyro: {
  958. oGyroX: gx,
  959. oGyroY: gy,
  960. oGyroZ: gz
  961. },
  962. //输入当前轴
  963. bYAxis: true,
  964. };
  965. this.actionJumpObj.updateJump(_temp);
  966. if (this.BLEAccIndex > 150) {
  967. this.onClearData();
  968. this.bJump = false;
  969. return;
  970. }
  971. this.BLEAccIndex++;
  972. },
  973. onClearData() {
  974. this.BLEAccIndex = 0;
  975. },
  976. onChangeY() {
  977. this.isY = true;
  978. },
  979. onChangeX() {
  980. this.isY = false;
  981. },
  982. onGetActionJumpPlayView(callback) {
  983. let view = uni.createSelectorQuery().select('#ActionJumpPlay');
  984. view.boundingClientRect(data => {
  985. if (callback)
  986. callback(data);
  987. }).exec();
  988. }
  989. }
  990. }
  991. </script>
  992. <style lang="scss">
  993. // .action-jump-parent {
  994. // border: 1rpx solid #ffaa7f;
  995. // position: relative;
  996. // display: flex;
  997. // justify-content: center;
  998. // overflow: hidden;
  999. // top: 0;
  1000. // width: 100%;
  1001. // }
  1002. // .action-jump-container {
  1003. // width: 100%;
  1004. // height: 114px;
  1005. // border: 1rpx solid #000000;
  1006. // position: relative;
  1007. // }
  1008. .mid-absolute {
  1009. position: absolute;
  1010. top: 0;
  1011. bottom: 0;
  1012. right: 0;
  1013. left: 0;
  1014. margin: auto;
  1015. }
  1016. .action-jump-timer {
  1017. position: absolute;
  1018. top: -150rpx;
  1019. }
  1020. </style>