action-jump.vue 25 KB

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