action-jump.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192
  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-0.1.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. */
  235. canOnDraw: false,
  236. /**
  237. * 是否去到下一个关卡
  238. */
  239. canGoNext: false,
  240. onLogData:'',
  241. }
  242. },
  243. watch: {
  244. levelData(val) {
  245. //更新数据
  246. // console.log("levelData ============>", JSON.stringify(val));
  247. if (val) {
  248. this.taskSignCount = val.signCount;
  249. this.taskConditionPassed = val.conditionPassed;
  250. this.taskDescribe = val.describe;
  251. this.addShowCountUnit = (this.maxShowCount * 2) / this.taskSignCount;
  252. // console.log("this.addShowCountUnit:", this.addShowCountUnit, this.maxShowCount * 2, this
  253. // .taskSignCount);
  254. this.showCount = 0;
  255. //用signType 做等级类型
  256. this.levelType = val.signType;
  257. console.log(JSON.stringify(this.taskConditionPassed));
  258. }
  259. },
  260. currentMode(val) {
  261. console.log('==========> action jump currentMode:', val);
  262. }
  263. },
  264. created() {
  265. let _self = this;
  266. this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
  267. // console.log("this.actionJumpCanvas:", this.actionJumpCanvas);
  268. this.SystemInfo = uni.getSystemInfoSync();
  269. this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
  270. this.canvasH = 114;
  271. this.onLoadImage();
  272. setTimeout(()=>{
  273. this.onListenActionJump();
  274. },2000)
  275. // console.log('==========>1 action jump currentMode:', this.currentMode);
  276. },
  277. methods: {
  278. ...mapMutations(['onWriteBLEConnectionValue', 'onConvertDeviceData']),
  279. onListenActionJump() {
  280. let _self = this;
  281. console.log("*****************onListenActionJump*****************************");
  282. _self.actionJumpObj = new ActionJump();
  283. _self.actionJumpObj.addEventListener('resultant', (e) => {
  284. if (e.type == 'jump') {
  285. // this.jumpCount++;
  286. this.bJump = true;
  287. } else if (e.type == 'stateDataOfJump') {
  288. //发送给game,在game里面处理判断
  289. this.listenStateDataOfJump(e);
  290. } else if (e.type == 'stop') {
  291. this.onClearData();
  292. this.actionJumpObj.resetAll();
  293. if (this.canOnDraw) {
  294. this.canOnDraw = false;
  295. this.onDraw("tipHit");
  296. }
  297. if (this.canGoNext) {
  298. this.canGoNext = false;
  299. this.startJumpGame();
  300. }
  301. // console.log('stop');
  302. //这里处理生成下一个
  303. }
  304. })
  305. },
  306. //load 相关图片
  307. onLoadImage() {
  308. let _self = this;
  309. uni.getImageInfo({
  310. src: "../../../static/modal/action-jump/directionJump.png",
  311. success: function(image) {
  312. _self.directionJump = image;
  313. }
  314. });
  315. uni.getImageInfo({
  316. src: "../../../static/modal/action-jump/midJump.png",
  317. success: function(image) {
  318. _self.midJump = image;
  319. }
  320. });
  321. uni.getImageInfo({
  322. src: "../../../static/modal/action-jump/rotateJump.png",
  323. success: function(image) {
  324. _self.rotateJump = image;
  325. }
  326. });
  327. uni.getImageInfo({
  328. src: "../../../static/modal/action-jump/directionJumpWhite.png",
  329. success: function(image) {
  330. _self.directionJumpWhite = image;
  331. }
  332. });
  333. uni.getImageInfo({
  334. src: "../../../static/modal/action-jump/midJumpWhite.png",
  335. success: function(image) {
  336. _self.midJumpWhite = image;
  337. }
  338. });
  339. uni.getImageInfo({
  340. src: "../../../static/modal/action-jump/rotateJumpWhite.png",
  341. success: function(image) {
  342. _self.rotateJumpWhite = image;
  343. }
  344. });
  345. uni.getImageInfo({
  346. src: "../../../static/modal/action-jump/jumpTip.png",
  347. success: function(image) {
  348. _self.jumpTipImage = image;
  349. }
  350. });
  351. uni.getImageInfo({
  352. src: "../../../static/modal/action-jump/jumpNormal.png",
  353. success: function(image) {
  354. _self.jumpNormalImage = image;
  355. _self.onDrawBg();
  356. }
  357. });
  358. uni.getImageInfo({
  359. src: "../../../static/modal/action-jump/cankao.png",
  360. success: function(image) {
  361. _self.cankao = image;
  362. }
  363. });
  364. },
  365. /**
  366. * 重置生成数组,重置倒计时
  367. */
  368. resetJumpGame() {
  369. this.spawnArray = [];
  370. if (this.countdownInterval) {
  371. clearInterval(this.countdownInterval);
  372. this.countdownInterval = null;
  373. }
  374. // this.resetCountdown(60);
  375. },
  376. startJumpGame() {
  377. this.isGameOver = false;
  378. this.resetJumpGame();
  379. //开始游戏
  380. this.index = 0;
  381. // this.levelLabel.string = '关卡' + this.level;
  382. let _ranType = Math.floor(Math.random() * 2);
  383. if (this.levelType == 0) {
  384. //随便生成一组跳的数据
  385. let _spawnList = this.template[0].spawnList;
  386. for (let i = 0; i < 4; i++) {
  387. this.spawnJumpPrefabsFromType(i, _spawnList[0][0]);
  388. }
  389. } else if (this.levelType == 1) {
  390. //生成一组 左跳右跳
  391. let _spawnList = this.template[1].spawnList;
  392. let ran = Math.floor(Math.random() * 2);
  393. // if (_ranType >= 1) ran += 2;
  394. for (let i = 0; i < _spawnList[ran].length; i++) {
  395. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  396. }
  397. } else if (this.levelType == 2) {
  398. //生成一组 左跳右跳原地
  399. let _spawnList = this.template[2].spawnList;
  400. let ran = Math.floor(Math.random() * 2);
  401. // if (_ranType >= 1) ran += 2;
  402. for (let i = 0; i < _spawnList[ran].length; i++) {
  403. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  404. }
  405. } else if (this.levelType == 3) {
  406. //生成一组 左旋跳右旋跳
  407. let _spawnList = this.template[1].spawnList;
  408. let ran = Math.floor(Math.random() * 2) + 2;
  409. for (let i = 0; i < _spawnList[ran].length; i++) {
  410. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  411. }
  412. } else if (this.levelType == 4) {
  413. //生成一组 左旋跳右旋跳
  414. let _spawnList = this.template[2].spawnList;
  415. let ran = Math.floor(Math.random() * 2) + 2;
  416. for (let i = 0; i < _spawnList[ran].length; i++) {
  417. this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
  418. }
  419. } else if (this.levelType == 5) {
  420. //随便生成三组数据
  421. let _newArray = [];
  422. // let _spawnList1 = this.template[1].spawnList;
  423. // let ran1 = Math.floor(Math.random() * 2);
  424. // _newArray = _newArray.concat(_spawnList1[ran1]);
  425. let _spawnList2 = this.template[2].spawnList;
  426. let ran2 = Math.floor(Math.random() * 2);
  427. let ran3 = Math.floor(Math.random() * 2);
  428. if (_ranType >= 1) {
  429. ran2 += 2;
  430. ran3 += 2;
  431. }
  432. _newArray = _newArray.concat(_spawnList2[ran2]);
  433. _newArray = _newArray.concat(_spawnList2[ran3]);
  434. for (let i = 0; i < _newArray.length; i++) {
  435. this.spawnJumpPrefabsFromType(i, _newArray[i]);
  436. }
  437. //todo 暂时给循环
  438. this.level = 0;
  439. }
  440. // if (this.level == 2) {
  441. // //随便生成二组数据
  442. // let _newArray = [];
  443. // let _spawnList1 = this.template[1].spawnList;
  444. // let ran1 = Math.floor(Math.random() * 2);
  445. // _newArray = _newArray.concat(_spawnList1[ran1]);
  446. // let _spawnList2 = this.template[2].spawnList;
  447. // let ran2 = Math.floor(Math.random() * 2);
  448. // if (_ranType >= 1) ran2 += 2;
  449. // _newArray = _newArray.concat(_spawnList2[ran2]);
  450. // // console.log(_newArray);
  451. // for (let i = 0; i < _newArray.length; i++) {
  452. // this.spawnJumpPrefabsFromType(i, _newArray[i]);
  453. // }
  454. // }
  455. this.level++;
  456. //倒计时
  457. // this.countdownInterval = setInterval(() => {
  458. // if (this.countdown <= 0) {
  459. // clearInterval(this.countdownInterval);
  460. // this.countdownInterval = null;
  461. // //处理下一个关卡
  462. // // console.warn('时间到,处理下一个关卡');
  463. // this.startJumpGame();
  464. // return;
  465. // }
  466. // this.setCountdown(1);
  467. // }, 1000);
  468. this.onDraw("tipHit");
  469. },
  470. spawnJumpPrefabsFromType(index, _jumpType) {
  471. //todo 生成的节点,后面再处理节奏问题。比如生成顺序
  472. for (let i = 0; i < this.jumpTypeArray.length; i++) {
  473. if (this.jumpTypeArray[i].jumpCode == _jumpType) {
  474. let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i]);
  475. this.spawnArray.push(_jumpPrefab);
  476. break;
  477. }
  478. }
  479. },
  480. spawnJumpPrefabs(index) {
  481. let ran = Math.floor(Math.random() * 5);
  482. //todo 生成的节点,后面再处理节奏问题。比如生成顺序
  483. let _jumpPrefab = Object.assign({}, this.jumpTypeArray[ran]);
  484. //这里处理相反方向,比如生成了一个左旋转,下一个右旋转
  485. if (_jumpPrefab.jumpName == 'LEFT') {
  486. if (this.bNextSpawnRightDirection) {
  487. //如果是对应的需要记录一个对应的准确值
  488. this.bNextSpawnRightDirection = false;
  489. } else {
  490. ran = 2; //RIGHT;
  491. this.bNextSpawnRightDirection = true;
  492. }
  493. } else if (_jumpPrefab.jumpName == 'RIGHT') {
  494. if (this.bNextSpawnRightDirection) {
  495. ran = 1; //LEFT;
  496. this.bNextSpawnRightDirection = false;
  497. } else {
  498. this.bNextSpawnRightDirection = true;
  499. }
  500. }
  501. if (_jumpPrefab.jumpName == 'LEFT_ROTATE') {
  502. if (this.bNextSpawnRightRotateDirection) {
  503. //如果是对应的需要记录一个对应的准确值
  504. this.bNextSpawnRightRotateDirection = false;
  505. } else {
  506. ran = 4; //RIGHT_ROTATE;
  507. this.bNextSpawnRightRotateDirection = true;
  508. }
  509. // console.log('l==rotate', ran);
  510. } else if (_jumpPrefab.jumpName == 'RIGHT_ROTATE') {
  511. if (this.bNextSpawnRightRotateDirection) {
  512. ran = 3; //LEFT_ROTATE;
  513. this.bNextSpawnRightRotateDirection = false;
  514. } else {
  515. //如果是对应的需要记录一个对应的准确值
  516. this.bNextSpawnRightRotateDirection = true;
  517. }
  518. }
  519. this.spawnArray.push(_jumpPrefab);
  520. },
  521. //单纯的绘制八个背景
  522. onDrawBg() {
  523. this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
  524. let _currentBgStartX = this.canvasW / 2;
  525. let count = 4;
  526. for (let i = 0; i < count; i++) {
  527. let _currentStartPos = _currentBgStartX - i * 50 - 50;
  528. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114);
  529. let _currentEndPos = _currentBgStartX + i * 50;
  530. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);
  531. }
  532. this.actionJumpCanvas.draw();
  533. },
  534. onDraw(type) {
  535. this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
  536. //计算一个对象
  537. let _drawObj = {
  538. path: null,
  539. startX: 0,
  540. width: 0,
  541. bgWidth: 0,
  542. bgStartXAllNormal: 0,
  543. bgStartXHasTip: 0,
  544. }
  545. //计算居中的点
  546. _drawObj.width = this.spawnArray.length * (50 + 10);
  547. _drawObj.startX = this.canvasW / 2 - _drawObj.width / 2;
  548. //全部是普通背景
  549. _drawObj.bgStartXAllNormal = this.canvasW / 2 - (this.spawnArray.length * 50) / 2;
  550. _drawObj.bgStartXHasTip = this.canvasW / 2 - (this.spawnArray.length * 50 + 40) / 2;
  551. let _currentBgStartX = this.index == this.spawnArray.length || type == "normal" ? _drawObj
  552. .bgStartXAllNormal : _drawObj
  553. .bgStartXHasTip;
  554. // console.log("_drawObj.startX:", _drawObj.startX, _drawObj.width / 2);
  555. //绘制八个位置。如果生成数量不够的话。补上对应的数量
  556. let count = 8 - this.spawnArray.length;
  557. count = Math.ceil(count / 2);
  558. //计算一个节点数组
  559. for (let i = 0; i < this.spawnArray.length; i++) {
  560. //默认 mid 图标
  561. let _temp = this.spawnArray[i].bTrigger ? this.midJump : this.midJumpWhite;
  562. if (this.spawnArray[i].icon == 'directionJump') {
  563. _temp = this.spawnArray[i].bTrigger ? this.directionJump : this.directionJumpWhite;
  564. } else if (this.spawnArray[i].icon == 'rotateJump') {
  565. _temp = this.spawnArray[i].bTrigger ? this.rotateJump : this.rotateJumpWhite;
  566. }
  567. //如果是相反绘制,需要加多一个自身位置偏移
  568. let _pos = this.spawnArray[i].scaleX < 0 ? i + 1 : i;
  569. let _spacing = i == 0 ? 0 : 1;
  570. let _addData = 0;
  571. //大图提示后面要加上大图占的位置,为大图宽度减小图( 90 - 50 )
  572. if (i >= this.index && type !== "normal") {
  573. _addData = 40;
  574. }
  575. if (i == 0) {
  576. //_frontBgData 为减去大图位置,10 为偏移位置
  577. let _frontBgData = 40;
  578. //绘制前背景
  579. for (let i = 0; i < count; i++) {
  580. let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
  581. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114)
  582. }
  583. }
  584. this.actionJumpCanvas.save();
  585. this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.7 : 1;
  586. this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
  587. let _currentPos = 0;
  588. let _currentCenterPos = 0;
  589. if (i == this.index && type !== "normal") {
  590. _currentPos = (_currentBgStartX + _pos * 90 - i * 40) *
  591. this
  592. .spawnArray[i]
  593. .scaleX;
  594. this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 90, 114);
  595. //计算对应中心点的值
  596. _currentCenterPos = _currentPos + 90 / 2 - 25 / 2;
  597. //57 - 40/2 是取画布中心y点,减去图标本身高的一半的值
  598. this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);
  599. } else {
  600. _currentPos = (_currentBgStartX + _addData + _pos *
  601. 50) * this
  602. .spawnArray[i]
  603. .scaleX;
  604. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentPos, 0, 50, 114)
  605. //计算对应中心点的值
  606. _currentCenterPos = _currentPos + 50 / 2 - 25 / 2;
  607. //44.5 是取画布中心y点,减去图标本身高的一半的值
  608. this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);
  609. }
  610. this.actionJumpCanvas.restore();
  611. if (i == this.spawnArray.length - 1) {
  612. //绘制结束位置
  613. // console.log("count:", count);
  614. for (let i = 0; i < count; i++) {
  615. let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length + i) * 50;
  616. // console.log("end _currentEndPos:", _currentEndPos);
  617. this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114)
  618. }
  619. }
  620. }
  621. this.actionJumpCanvas.draw();
  622. },
  623. onClear() {
  624. this.resetJumpGame();
  625. this.onDrawBg();
  626. this.xA = 0;
  627. this.yA = 0;
  628. this.zA = 0;
  629. this.bJump = false;
  630. this.actionJumpObj.resetAll();
  631. },
  632. onJumpType(event) {
  633. // console.log("onJumpType:", event);
  634. if (this.isGameOver || !this.bJumpPlay) return;
  635. this.eliminateJumpPrefab(event);
  636. },
  637. // update (dt) {}
  638. eliminateJumpPrefab(_jumpType) {
  639. let _temp = this.spawnArray[this.index];
  640. //如果当前的跳类型和预制目标一样
  641. if (_jumpType == _temp.jumpCode) {
  642. _temp.bTrigger = true;
  643. this.index++;
  644. if (this.index >= this.spawnArray.length) {
  645. clearInterval(this.countdownInterval);
  646. this.countdownInterval = null;
  647. this.startJumpGame();
  648. } else {
  649. //绘制新触发状态
  650. this.onDraw('tipHit');
  651. }
  652. //成功
  653. this.setEliminationCount(1);
  654. } else {
  655. //失误
  656. this.setFaultCount(1);
  657. }
  658. },
  659. //设置倒计时
  660. setCountdown(value) {
  661. this.countdown -= value;
  662. // this.countdownLabel.string = '倒计时:' + this.countdown;
  663. this.$emit('actionJumpCountDownUpdate', {
  664. countDown: this.countdown
  665. });
  666. },
  667. resetCountdown(value) {
  668. this.countdown = value;
  669. // this.countdownLabel.string = '倒计时:' + this.countdown;
  670. this.$emit('actionJumpCountDownUpdate', {
  671. countDown: this.countdown
  672. });
  673. },
  674. //设置ui信息
  675. setEliminationCount(value) {
  676. this.taskSignCurCount++;
  677. this.roundingCount += this.addShowCountUnit;
  678. this.eliminationCount += value;
  679. // this.eliminationLabel.string = '消除数量:' + this.eliminationCount.toString();
  680. this.$emit('actionJumpDataUpdate', {
  681. eliminationCount: this.eliminationCount,
  682. faultCount: this.faultCount
  683. });
  684. //如果是pk模式。不走下面判断
  685. if (this.currentMode == 'pkMode') return;
  686. if (CONDITIONPASSED.ENERGYBARFULL == this.taskConditionPassed.limitType) {
  687. //能量条的条件下才显示能量条动
  688. //取两位后计算Math floor,不然会有偏差值问题 Math.floor(39.9999999+ 0.1111111) = 39
  689. this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
  690. //1.能量槽满的时候,说明踩中次数到达
  691. if (this.taskSignCurCount >= this.taskSignCount)
  692. this.onGameOver("energyBarFull");
  693. } else if (CONDITIONPASSED.SKIPALLFLAGWITHINTIME == this.taskConditionPassed.limitType) {
  694. //规定时间下也给显示能量条
  695. this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
  696. //2.规定时间内跳完所有标志块
  697. if (this.taskSignCurCount >= this.taskSignCount)
  698. this.onGameOver("skipAllFlagWithinTime");
  699. } else if (this.taskConditionPassed.isScore) {
  700. //3.达到一定分数
  701. //如果是用分数判断
  702. //分数是 跳对的加1分,错的扣1分,0不扣分。
  703. let curScore = this.eliminationCount - this.faultCount;
  704. curScore = curScore < 0 ? 0 : curScore;
  705. //当前分数达到,胜利
  706. if (curScore >= this.taskConditionPassed.limitScore)
  707. this.onGameOver("score");
  708. }
  709. },
  710. onGameOver(type) {
  711. this.isGameOver = true;
  712. //处理参数
  713. this.onClear();
  714. this.onClearData();
  715. this.bJumpPlay = false;
  716. /**
  717. * 判断胜利和失败
  718. */
  719. let myWin = false; //默认失败
  720. //比如, 1.充满左右两边蓄能槽.2.规定时间内跳完所有标志块.
  721. if (type == "energyBarFull") {
  722. //1.能量槽满的时候,说明踩中次数到达
  723. if (this.taskSignCurCount >= this.taskSignCount) {
  724. myWin = true;
  725. }
  726. } else if (type == 'skipAllFlagWithinTime') {
  727. myWin = true;
  728. } else if (type == "timeUp") {
  729. //2.规定时间内跳完所有标志块
  730. //查看消除数量是否到达总数,未达成就是未完成
  731. if (this.taskSignCurCount >= this.taskSignCount) {
  732. myWin = true;
  733. }
  734. } else if (type == "score") {
  735. myWin = true;
  736. }
  737. console.log(type, {
  738. myWin: myWin
  739. });
  740. this.$emit('gameOver', {
  741. myWin: myWin,
  742. type: 'calorieMode',
  743. isOffEvent:true
  744. });
  745. },
  746. //pk模式下结束游戏关卡
  747. onPKModeGameOver(type) {
  748. this.isGameOver = true;
  749. //处理参数
  750. this.onClear();
  751. this.onClearData();
  752. this.bJumpPlay = false;
  753. this.$emit('gameOver', {
  754. type: 'pkMode',
  755. isOffEvent:true
  756. });
  757. },
  758. setFaultCount(value) {
  759. this.faultCount += value;
  760. // this.faultLabel.string = '失误:' + this.faultCount;
  761. this.$emit('actionJumpDataUpdate', {
  762. eliminationCount: this.eliminationCount,
  763. faultCount: this.faultCount
  764. });
  765. },
  766. //控制播放
  767. onControllerPlay() {
  768. if (this.bJumpPlay) {
  769. //仅仅暂停,没有清空数据
  770. this._changePlay(false);
  771. this.$emit("actionJumpControllerPlay", false);
  772. } else {
  773. this.$emit("actionJumpCheck");
  774. }
  775. },
  776. onContinueGame() {
  777. this._changePlay(true);
  778. },
  779. onClearActionJumpData() {
  780. console.log("onClearActionJumpData");
  781. this.onClear();
  782. this.onClearData();
  783. },
  784. //修改状态
  785. _changePlay(bPlaying) {
  786. if (bPlaying) {
  787. this.bJumpPlay = bPlaying;
  788. } else {
  789. this.bJumpPlay = !this.bJumpPlay;
  790. }
  791. },
  792. onActionJumpPlay() {
  793. this.onClear();
  794. this.onClearData();
  795. this.startJumpGame();
  796. this._changePlay(true);
  797. //reset 对应计算数据
  798. this.taskSignCurCount = 0;
  799. this.showCurCount = 0;
  800. this.roundingCount = 0;
  801. this.faultCount = 0;
  802. this.eliminationCount = 0;
  803. },
  804. getCurrentJumpType() {
  805. let _temp = this.spawnArray[this.index];;
  806. return _temp.jumpCode;
  807. },
  808. //监听跳的状态数据
  809. listenStateDataOfJump(data) {
  810. if (this.isGameOver || !this.bJumpPlay) return;
  811. let _jumpType = this.getCurrentJumpType();
  812. //初始全部默认状态
  813. let _tempState = [{
  814. jumpName: 'NORMAL',
  815. jumpCode: 0,
  816. bTrigger: true,
  817. describe: '正常跳'
  818. },
  819. {
  820. jumpName: 'LEFT',
  821. jumpCode: 1,
  822. bTrigger: false,
  823. describe: '左直跳'
  824. },
  825. {
  826. jumpName: 'RIGHT',
  827. jumpCode: 2,
  828. bTrigger: false,
  829. describe: '右直跳'
  830. },
  831. {
  832. jumpName: 'LEFT_ROTATE',
  833. jumpCode: 3,
  834. bTrigger: false,
  835. describe: '左旋转跳'
  836. },
  837. {
  838. jumpName: 'RIGHT_ROTATE',
  839. jumpCode: 4,
  840. bTrigger: false,
  841. describe: '右旋转跳'
  842. }
  843. ];
  844. let {
  845. currentMaxValue,
  846. oGyroValue,
  847. peakOfWaveMaxValue,
  848. valleyOfWaveMinValue
  849. } = data
  850. // console.log('stateDataOfJump:');
  851. // console.log(JSON.stringify(data));
  852. this.onLogData = data;
  853. let _rotateLimit = 4;
  854. let _jumpLimit = 8;
  855. switch (_jumpType) {
  856. case 0:
  857. //JumpType.NORMAL = 0
  858. _tempState[0].bTrigger = true;
  859. this.eliminateJumpPrefabFormTemp(_tempState);
  860. break;
  861. case 1:
  862. if (currentMaxValue < -_jumpLimit || valleyOfWaveMinValue < - 20) {
  863. //left jump
  864. _tempState[1].bTrigger = true;
  865. }
  866. this.eliminateJumpPrefabFormTemp(_tempState);
  867. break;
  868. case 2:
  869. if (currentMaxValue > _jumpLimit || peakOfWaveMaxValue > 20) {
  870. //right jump
  871. _tempState[2].bTrigger = true;
  872. }
  873. this.eliminateJumpPrefabFormTemp(_tempState);
  874. break;
  875. case 4:
  876. if (oGyroValue > _rotateLimit) {
  877. _tempState[4].bTrigger = true;
  878. }
  879. this.eliminateJumpPrefabFormTemp(_tempState);
  880. break;
  881. case 3:
  882. if (oGyroValue < -_rotateLimit) {
  883. _tempState[3].bTrigger = true;
  884. }
  885. this.eliminateJumpPrefabFormTemp(_tempState);
  886. break;
  887. default:
  888. console.log('没有对应的_jumpType', _jumpType);
  889. break;
  890. }
  891. // if (currentMaxValue == 0) {
  892. // } else {
  893. // // console.log('2====', data);
  894. // if (this.isY) {
  895. // //如果是检测到旋转跳
  896. // if (oGyroValue > _rotateLimit) {
  897. // // console.log('y right:', oGyroValue);
  898. // _tempState[4].bTrigger = true;
  899. // } else if (oGyroValue < -_rotateLimit) {
  900. // // console.log('y left:', oGyroValue);
  901. // _tempState[3].bTrigger = true;
  902. // }
  903. // if (valleyOfWaveMinValue < -_jumpLimit) {
  904. // //left jump
  905. // _tempState[1].bTrigger = true;
  906. // } else if (peakOfWaveMaxValue > _jumpLimit) {
  907. // //right jump
  908. // _tempState[2].bTrigger = true;
  909. // }
  910. // } else {
  911. // //如果是检测到旋转跳
  912. // if (oGyroValue < -5) {
  913. // // console.log('x right:', oGyroValue);
  914. // _tempState[4].bTrigger = true;
  915. // } else if (oGyroValue > 5) {
  916. // // console.log('x left:', oGyroValue);
  917. // _tempState[3].bTrigger = true;
  918. // }
  919. // if (valleyOfWaveMinValue < -_jumpLimit) {
  920. // //left jump
  921. // _tempState[1].bTrigger = true;
  922. // } else if (peakOfWaveMaxValue > _jumpLimit) {
  923. // //right jump
  924. // _tempState[2].bTrigger = true;
  925. // }
  926. // }
  927. // this.eliminateJumpPrefabFormTemp(_tempState);
  928. // }
  929. },
  930. eliminateJumpPrefabFormTemp(_tempState) {
  931. //如果消除完,需要重新生成
  932. let _temp = this.spawnArray[this.index];
  933. let bSuccess = false;
  934. for (let i = 0; i < _tempState.length; i++) {
  935. let _state = _tempState[i];
  936. if (_state.bTrigger)
  937. console.log(JSON.stringify(_state)+JSON.stringify(this.onLogData));
  938. //如果当前的跳类型和预制目标一样
  939. if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
  940. //成功
  941. bSuccess = true;
  942. break;
  943. }
  944. }
  945. //如果存在其中一个为true
  946. if (bSuccess) {
  947. // console.log("bSuccess:", bSuccess);
  948. _temp.bTrigger = true;
  949. this.index++;
  950. if (this.index >= this.spawnArray.length) {
  951. clearInterval(this.countdownInterval);
  952. this.countdownInterval = null;
  953. this.canGoNext = true;
  954. this.onDraw("normal");
  955. } else {
  956. //绘制新触发状态
  957. this.canOnDraw = true;
  958. this.onDraw("normal");
  959. }
  960. //成功
  961. this.setEliminationCount(1);
  962. } else {
  963. //失误
  964. this.setFaultCount(1);
  965. }
  966. },
  967. /**
  968. * @param {Object} gameData
  969. * 识别跳部分数据处理
  970. */
  971. onBLERopeUpdate(gameData) {
  972. if (!this.bJumpPlay || this.isGameOver) return;
  973. //********陀螺仪角速度********
  974. let {
  975. gx,
  976. gy,
  977. gz
  978. } = gameData.gyro;
  979. let {
  980. min,
  981. s,
  982. ms
  983. } = gameData;
  984. //-gameData.acc.ax * 10;
  985. let _ax = gameData.acc.ax * 10;
  986. let _ay = gameData.acc.ay * 10;
  987. let _az = gameData.acc.az * 10;
  988. //低通滤波分离重力
  989. let alpha = 0.8;
  990. this.xA = alpha * this.xA + (1 - alpha) * _ax;
  991. this.yA = alpha * this.yA + (1 - alpha) * _ay;
  992. this.zA = alpha * this.zA + (1 - alpha) * _az;
  993. //高通滤波获取线性速度
  994. let linear_acceleration_x = _ax - this.xA;
  995. let linear_acceleration_y = _az - this.zA;
  996. let linear_acceleration_z = _ay - this.yA;
  997. let _temp = {
  998. linearAcc: {
  999. lAccX: linear_acceleration_x,
  1000. lAccY: linear_acceleration_y,
  1001. lAccZ: linear_acceleration_z
  1002. }, //gameData.acc,
  1003. oriAcc: {
  1004. oAccX: _ax,
  1005. oAccY: _ay,
  1006. oAccZ: _az
  1007. },
  1008. gravityAcc: {
  1009. gravityX: this.xA,
  1010. gravityY: this.yA,
  1011. gravityZ: this.zA
  1012. },
  1013. bLimitRebound: false,
  1014. resultant: Math.sqrt(_ax * _ax +
  1015. _ay * _ay + _az * _az),
  1016. runIndex: this.BLEAccIndex,
  1017. //陀螺仪
  1018. oriGyro: {
  1019. oGyroX: gx,
  1020. oGyroY: gy,
  1021. oGyroZ: gz
  1022. },
  1023. //输入当前轴
  1024. bYAxis: true,
  1025. };
  1026. this.actionJumpObj.updateJump(_temp);
  1027. // if (this.BLEAccIndex > 150) {
  1028. // this.onClearData();
  1029. // this.bJump = false;
  1030. // return;
  1031. // }
  1032. this.BLEAccIndex++;
  1033. },
  1034. onClearData() {
  1035. this.BLEAccIndex = 0;
  1036. },
  1037. onChangeY() {
  1038. this.isY = true;
  1039. },
  1040. onChangeX() {
  1041. this.isY = false;
  1042. },
  1043. onGetActionJumpPlayView(callback) {
  1044. let view = uni.createSelectorQuery().select('#ActionJumpPlay');
  1045. view.boundingClientRect(data => {
  1046. if (callback)
  1047. callback(data);
  1048. }).exec();
  1049. }
  1050. }
  1051. }
  1052. </script>
  1053. <style lang="scss">
  1054. // .action-jump-parent {
  1055. // border: 1rpx solid #ffaa7f;
  1056. // position: relative;
  1057. // display: flex;
  1058. // justify-content: center;
  1059. // overflow: hidden;
  1060. // top: 0;
  1061. // width: 100%;
  1062. // }
  1063. // .action-jump-container {
  1064. // width: 100%;
  1065. // height: 114px;
  1066. // border: 1rpx solid #000000;
  1067. // position: relative;
  1068. // }
  1069. .mid-absolute {
  1070. position: absolute;
  1071. top: 0;
  1072. bottom: 0;
  1073. right: 0;
  1074. left: 0;
  1075. margin: auto;
  1076. }
  1077. .action-jump-timer {
  1078. position: absolute;
  1079. top: -150rpx;
  1080. }
  1081. </style>