action-jump.vue 26 KB

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