123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965 |
- <template>
- <view style="width: 750rpx;">
- <view class="flex justify-center" style="margin-top: 32rpx;">
- <!-- 计时器 -->
- <!-- <view class="action-jump-timer flex justify-center">
- <boxingCountDown ref="boxingCountDownRef" :show-day="false" :second="showTime" color="#FFFFFF"
- background-color="rgba(255,255,255,0);" border-color="#007AFF" splitorColor="#FFFFFF" />
- </view> -->
- <view class="grid-progress-vertical-container" style="top:-460rpx; ">
- <view class="grid-progress-vertical-bar">
- <view class="grid-progress-vertical-child" v-for="(item, index) in 20" :key="index">
- <view
- :class="showCount>=index+1? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
- </view>
- <view :class="index%5 == 0?'':'grid-progress-text-hidden'" class="grid-progress-vertical-text">
- {{(index+1)*2}}
- </view>
- </view>
- </view>
- <view class="grid-progress-vertical-bar">
- <view class="grid-progress-vertical-child" v-for="(item, index) in 20" :key="index">
- <view :class="index%5 == 0?'':'grid-progress-text-hidden'" class="grid-progress-vertical-text">
- {{(index+26)*2}}
- </view>
- <view
- :class="showCount>=index+26? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
- </view>
- </view>
- </view>
- </view>
- <!-- 居中绘制星星样式 -->
- <!-- <view class="flex justify-center align-center"
- style="height: 52rpx; width: 412rpx; background-color: rgba(255,255,255,0.11); border-radius: 12rpx;">
-
- <view class="text-14px text-white">
- 拉伸运动:
- </view>
- <view class="flex flex-direction" v-for="(item, index) in 5" :key="index">
- <image style="width: 34rpx;height: 32rpx;" src="../../../static/modal/action-jump/stars.png">
- </image>
- </view>
- </view> -->
- <view class="flex justify-center align-center" style="height: 100rpx; width: 444rpx; ">
- <view class="text-12px text-white text-center">
- 本关卡是为了让用户开始放松,需要在两分钟内跳100下
- </view>
- </view>
- </view>
- <!-- <view class="action-jump-parent margin-bottom">
- <view class="action-jump-container">
-
- </view>
- </view> -->
- <canvas canvas-id="actionJumpCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
- <view class="flex align-center justify-center" style="font-size: 14px;">
- <view style="position: relative;">
- <image style="width: 135px;height: 75px;" src="../../../static/modal/action-jump/Fill.png"></image>
- <view class="mid-absolute flex flex-direction align-center justify-center text-white">
- <view class="flex align-center">
- <image style="width: 22rpx;height: 28rpx;"
- src="../../../static/modal/action-jump/jumpSpeed.png"></image>
- <view style="margin-left: 6rpx;">平均速度</view>
- </view>
- <view style="margin-top: 12rpx;">{{jumpSpeed}}</view>
- </view>
- </view>
- <view class="flex" style="position: relative;" @click="onControllerPlay">
- <image style="width: 112px;height: 111px;" src="../../../static/modal/action-jump/midButton.png">
- </image>
- <image v-if="!bJumpPlay" class="mid-absolute" style=" width: 28rpx;height: 28rpx;"
- src="../../../static/modal/action-jump/midPlay.png">
- </image>
- <image v-else class="mid-absolute" style="width: 28rpx;height: 28rpx;"
- src="../../../static/modal/action-jump/midPause.png">
- </image>
- </view>
- <view style="position: relative;">
- <image style="width: 135px;height: 75px; transform: scaleX(-1);"
- src="../../../static/modal/action-jump/Fill.png"></image>
- <view class="mid-absolute flex flex-direction align-center justify-center text-white">
- <view class="flex align-center">
- <image style="width: 22rpx;height: 28rpx;"
- src="../../../static/modal/action-jump/jumpCalorie.png"></image>
- <view style="margin-left: 6rpx;">卡路里</view>
- </view>
- <view style="margin-top: 12rpx;">{{jumpCalorie}}</view>
- </view>
- </view>
- </view>
- <!-- <view style="height: 41px;"></view> -->
- <!-- 测试按钮 -->
- <!-- <view style="display: flex;justify-content: space-between;">
- <view>{{isY?'Y':'X'}}</view>
- <button @click="onChangeY">Y为旋转轴</button>
- <button @click="onChangeX">X为旋转轴</button>
- </view>
- <view style="display: flex;justify-content: space-between;" class="margin-top margin-bottom">
- <button @click="onJumpType(0)">jump</button>
- <button @click="onJumpType(1)">left</button>
- <button @click="onJumpType(2)">right</button>
- <button @click="onJumpType(3)">rLeft</button>
- <button @click="onJumpType(4)">rRight</button>
- </view> -->
- <!-- <view style="display: flex;justify-content: space-around; padding-bottom: 100rpx;">
- <view style="font-size: 14px;">t:{{countdown}}</view>
- <view style="font-size: 14px;">e:{{eliminationCount}}</view>
- <view style="font-size: 14px;">f:{{faultCount}}</view>
- </view> -->
- </view>
- </template>
- <script>
- // import boxingCountDown from '@/components/uni-count-down/uni-count-down.vue'
- import ActionJump from "@/util/util-js/action/jump.js"
- import {
- mapMutations
- } from 'vuex';
- export default {
- components: {
- // boxingCountDown
- },
- props: {
- showTime: {
- type: Number,
- default: 0
- }
- },
- data() {
- return {
- isY: true,
- //满格的数值是 25
- maxShowCount: 25,
- //显示的点
- showCount: 0,
- canvasW: 0, // 画布宽
- canvasH: 0, // 画布高
- SystemInfo: {}, // 设备信息
- directionJump: null,
- midJump: null,
- rotateJump: null,
- directionJumpWhite: null,
- midJumpWhite: null,
- rotateJumpWhite: null,
- //参考图片
- cankao: null,
- jumpTipImage: null,
- jumpNormalImage: null,
- jumpTypeArray: [{
- jumpName: 'NORMAL',
- jumpCode: 0,
- icon: 'midJump',
- scaleX: 1,
- bTrigger: false,
- }, {
- jumpName: 'LEFT',
- jumpCode: 1,
- icon: 'directionJump',
- scaleX: -1,
- bTrigger: false,
- }, {
- jumpName: 'RIGHT',
- jumpCode: 2,
- icon: 'directionJump',
- scaleX: 1,
- bTrigger: false,
- }, {
- jumpName: 'LEFT_ROTATE',
- jumpCode: 3,
- icon: 'rotateJump',
- scaleX: -1,
- bTrigger: false,
- }, {
- jumpName: 'RIGHT_ROTATE',
- jumpCode: 4,
- icon: 'rotateJump',
- scaleX: 1,
- bTrigger: false,
- }],
- spawnArray: [],
- //下一个生成是相反的方向
- bNextSpawnRightDirection: false,
- bNextSpawnRightRotateDirection: false,
- //生成预制的模板,用count 来判断生成哪一种
- template: [{
- count: 1,
- spawnList: [
- [0]
- ]
- }, {
- count: 2,
- spawnList: [
- [2, 1],
- [1, 2],
- [3, 4],
- [4, 3]
- ]
- }, {
- count: 3,
- spawnList: [
- [2, 0, 1],
- [1, 0, 2],
- [3, 0, 4],
- [4, 0, 3]
- ]
- }, ],
- level: 3,
- countdown: 60,
- countdownInterval: null,
- faultCount: 0,
- eliminationCount: 0,
- bJumpPlay: false,
- jumpCalorie: 1000,
- jumpSpeed: 1000,
- //硬件设备处理
- BLEAccIndex: 0,
- bJump: false,
- xA: 0,
- yA: 0,
- zA: 0,
- actionJumpObj: null
- }
- },
- created() {
- let _self = this;
- this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
- // console.log("this.actionJumpCanvas:", this.actionJumpCanvas);
- this.SystemInfo = uni.getSystemInfoSync();
- this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
- this.canvasH = 114;
- this.onLoadImage();
- this.onListenActionJump();
- },
- methods: {
- ...mapMutations(['onWriteBLEConnectionValue']),
- onListenActionJump() {
- let _self = this;
- _self.actionJumpObj = new ActionJump();
- _self.actionJumpObj.addEventListener('resultant', (e) => {
- if (e.type == 'jump') {
- // this.jumpCount++;
- this.bJump = true;
- } else if (e.type == 'stateDataOfJump') {
- //发送给game,在game里面处理判断
- this.listenStateDataOfJump(e);
- } else if (e.type == 'stop') {
- this.onClearData();
- // console.log('stop');
- }
- })
- },
- //load 相关图片
- onLoadImage() {
- let _self = this;
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/directionJump.png",
- success: function(image) {
- _self.directionJump = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/midJump.png",
- success: function(image) {
- _self.midJump = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/rotateJump.png",
- success: function(image) {
- _self.rotateJump = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/directionJumpWhite.png",
- success: function(image) {
- _self.directionJumpWhite = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/midJumpWhite.png",
- success: function(image) {
- _self.midJumpWhite = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/rotateJumpWhite.png",
- success: function(image) {
- _self.rotateJumpWhite = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/jumpTip.png",
- success: function(image) {
- _self.jumpTipImage = image;
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/jumpNormal.png",
- success: function(image) {
- _self.jumpNormalImage = image;
- _self.onDrawBg();
- }
- });
- uni.getImageInfo({
- src: "../../../static/modal/action-jump/cankao.png",
- success: function(image) {
- _self.cankao = image;
- }
- });
- },
- /**
- * 重置生成数组,重置倒计时
- */
- resetJumpGame() {
- this.spawnArray = [];
- if (this.countdownInterval) {
- clearInterval(this.countdownInterval);
- this.countdownInterval = null;
- }
- this.resetCountdown(60);
- },
- startJumpGame() {
- this.resetJumpGame();
- //开始游戏
- this.index = 0;
- // this.levelLabel.string = '关卡' + this.level;
- let _ranType = Math.floor(Math.random() * 2);
- if (this.level == 1) {
- //随便生成一组数据
- let _spawnList = this.template[1].spawnList;
- let ran = Math.floor(Math.random() * 2);
- if (_ranType >= 1) ran += 2;
- for (let i = 0; i < _spawnList[ran].length; i++) {
- this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
- }
- } else if (this.level == 2) {
- //随便生成二组数据
- let _newArray = [];
- let _spawnList1 = this.template[1].spawnList;
- let ran1 = Math.floor(Math.random() * 2);
- _newArray = _newArray.concat(_spawnList1[ran1]);
- let _spawnList2 = this.template[2].spawnList;
- let ran2 = Math.floor(Math.random() * 2);
- if (_ranType >= 1) ran2 += 2;
- _newArray = _newArray.concat(_spawnList2[ran2]);
- // console.log(_newArray);
- for (let i = 0; i < _newArray.length; i++) {
- this.spawnJumpPrefabsFromType(i, _newArray[i]);
- }
- } else if (this.level == 3) {
- //随便生成三组数据
- let _newArray = [];
- // let _spawnList1 = this.template[1].spawnList;
- // let ran1 = Math.floor(Math.random() * 2);
- // _newArray = _newArray.concat(_spawnList1[ran1]);
- let _spawnList2 = this.template[2].spawnList;
- let ran2 = Math.floor(Math.random() * 2);
- let ran3 = Math.floor(Math.random() * 2);
- if (_ranType >= 1) {
- ran2 += 2;
- ran3 += 2;
- }
- _newArray = _newArray.concat(_spawnList2[ran2]);
- _newArray = _newArray.concat(_spawnList2[ran3]);
- for (let i = 0; i < _newArray.length; i++) {
- this.spawnJumpPrefabsFromType(i, _newArray[i]);
- }
- //todo 暂时给循环
- this.level = 0;
- }
- this.level++;
- //倒计时
- this.countdownInterval = setInterval(() => {
- if (this.countdown <= 0) {
- clearInterval(this.countdownInterval);
- this.countdownInterval = null;
- //处理下一个关卡
- // console.warn('时间到,处理下一个关卡');
- this.startJumpGame();
- return;
- }
- this.setCountdown(1);
- }, 1000);
- this.onDraw();
- },
- spawnJumpPrefabsFromType(index, _jumpType) {
- //todo 生成的节点,后面再处理节奏问题。比如生成顺序
- for (let i = 0; i < this.jumpTypeArray.length; i++) {
- if (this.jumpTypeArray[i].jumpCode == _jumpType) {
- let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i]);
- this.spawnArray.push(_jumpPrefab);
- break;
- }
- }
- },
- spawnJumpPrefabs(index) {
- let ran = Math.floor(Math.random() * 5);
- //todo 生成的节点,后面再处理节奏问题。比如生成顺序
- let _jumpPrefab = Object.assign({}, this.jumpTypeArray[ran]);
- //这里处理相反方向,比如生成了一个左旋转,下一个右旋转
- if (_jumpPrefab.jumpName == 'LEFT') {
- if (this.bNextSpawnRightDirection) {
- //如果是对应的需要记录一个对应的准确值
- this.bNextSpawnRightDirection = false;
- } else {
- ran = 2; //RIGHT;
- this.bNextSpawnRightDirection = true;
- }
- } else if (_jumpPrefab.jumpName == 'RIGHT') {
- if (this.bNextSpawnRightDirection) {
- ran = 1; //LEFT;
- this.bNextSpawnRightDirection = false;
- } else {
- this.bNextSpawnRightDirection = true;
- }
- }
- if (_jumpPrefab.jumpName == 'LEFT_ROTATE') {
- if (this.bNextSpawnRightRotateDirection) {
- //如果是对应的需要记录一个对应的准确值
- this.bNextSpawnRightRotateDirection = false;
- } else {
- ran = 4; //RIGHT_ROTATE;
- this.bNextSpawnRightRotateDirection = true;
- }
- // console.log('l==rotate', ran);
- } else if (_jumpPrefab.jumpName == 'RIGHT_ROTATE') {
- if (this.bNextSpawnRightRotateDirection) {
- ran = 3; //LEFT_ROTATE;
- this.bNextSpawnRightRotateDirection = false;
- } else {
- //如果是对应的需要记录一个对应的准确值
- this.bNextSpawnRightRotateDirection = true;
- }
- }
- this.spawnArray.push(_jumpPrefab);
- },
- //单纯的绘制八个背景
- onDrawBg() {
- this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
- let _currentBgStartX = this.canvasW / 2;
- let count = 4;
- for (let i = 0; i < count; i++) {
- let _currentStartPos = _currentBgStartX - i * 50 - 50;
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114);
- let _currentEndPos = _currentBgStartX + i * 50;
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);
- }
- this.actionJumpCanvas.draw();
- },
- onDraw() {
- this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
- //计算一个对象
- let _drawObj = {
- path: null,
- startX: 0,
- width: 0,
- bgWidth: 0,
- bgStartXAllNormal: 0,
- bgStartXHasTip: 0,
- }
- //计算居中的点
- _drawObj.width = this.spawnArray.length * (50 + 10);
- _drawObj.startX = this.canvasW / 2 - _drawObj.width / 2;
- //全部是普通背景
- _drawObj.bgStartXAllNormal = this.canvasW / 2 - (this.spawnArray.length * 50) / 2;
- _drawObj.bgStartXHasTip = this.canvasW / 2 - (this.spawnArray.length * 50 + 40) / 2;
- let _currentBgStartX = this.index == this.spawnArray.length ? _drawObj.bgStartXAllNormal : _drawObj
- .bgStartXHasTip;
- // console.log("_drawObj.startX:", _drawObj.startX, _drawObj.width / 2);
- //绘制八个位置。如果生成数量不够的话。补上对应的数量
- let count = 8 - this.spawnArray.length;
- count = Math.ceil(count / 2);
- //计算一个节点数组
- for (let i = 0; i < this.spawnArray.length; i++) {
- //默认 mid 图标
- let _temp = this.spawnArray[i].bTrigger ? this.midJump : this.midJumpWhite;
- if (this.spawnArray[i].icon == 'directionJump') {
- _temp = this.spawnArray[i].bTrigger ? this.directionJump : this.directionJumpWhite;
- } else if (this.spawnArray[i].icon == 'rotateJump') {
- _temp = this.spawnArray[i].bTrigger ? this.rotateJump : this.rotateJumpWhite;
- }
- //如果是相反绘制,需要加多一个自身位置偏移
- let _pos = this.spawnArray[i].scaleX < 0 ? i + 1 : i;
- let _spacing = i == 0 ? 0 : 1;
- let _addData = 0;
- //大图提示后面要加上大图占的位置,为大图宽度减小图( 90 - 50 )
- if (i >= this.index) {
- _addData = 40;
- }
- if (i == 0) {
- //_frontBgData 为减去大图位置,10 为偏移位置
- let _frontBgData = 40;
- //绘制前背景
- for (let i = 0; i < count; i++) {
- let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114)
- }
- }
- this.actionJumpCanvas.save();
- this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.7 : 1;
- this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
- let _currentPos = 0;
- let _currentCenterPos = 0;
- if (i == this.index) {
- _currentPos = (_currentBgStartX + _pos * 90 - i * 40) *
- this
- .spawnArray[i]
- .scaleX;
- this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 90, 114);
- //计算对应中心点的值
- _currentCenterPos = _currentPos + 90 / 2 - 25 / 2;
- //57 - 40/2 是取画布中心y点,减去图标本身高的一半的值
- this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);
- } else {
- _currentPos = (_currentBgStartX + _addData + _pos *
- 50) * this
- .spawnArray[i]
- .scaleX;
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentPos, 0, 50, 114)
- //计算对应中心点的值
- _currentCenterPos = _currentPos + 50 / 2 - 25 / 2;
- //44.5 是取画布中心y点,减去图标本身高的一半的值
- this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);
- }
- this.actionJumpCanvas.restore();
- if (i == this.spawnArray.length - 1) {
- //绘制结束位置
- // console.log("count:", count);
- for (let i = 0; i < count; i++) {
- let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length + i) * 50;
- // console.log("end _currentEndPos:", _currentEndPos);
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114)
- }
- }
- }
- this.actionJumpCanvas.draw();
- },
- onClear() {
- this.resetJumpGame();
- this.onDrawBg();
- this.xA = 0;
- this.yA = 0;
- this.zA = 0;
- this.bJump = false;
- this.actionJumpObj.resetAll();
- },
- onJumpType(event) {
- // console.log("onJumpType:", event);
- this.eliminateJumpPrefab(event);
- },
- // update (dt) {}
- eliminateJumpPrefab(_jumpType) {
- let _temp = this.spawnArray[this.index];
- //如果当前的跳类型和预制目标一样
- if (_jumpType == _temp.jumpCode) {
- _temp.bTrigger = true;
- this.index++;
- if (this.index >= this.spawnArray.length) {
- clearInterval(this.countdownInterval);
- this.countdownInterval = null;
- this.startJumpGame();
- } else {
- //绘制新触发状态
- this.onDraw();
- }
- //成功
- this.setEliminationCount(1);
- } else {
- //失误
- this.setFaultCount(1);
- }
- },
- //设置倒计时
- setCountdown(value) {
- this.countdown -= value;
- // this.countdownLabel.string = '倒计时:' + this.countdown;
- this.$emit('actionJumpCountDownUpdate', {
- countDown: this.countdown
- });
- },
- resetCountdown(value) {
- this.countdown = value;
- // this.countdownLabel.string = '倒计时:' + this.countdown;
- this.$emit('actionJumpCountDownUpdate', {
- countDown: this.countdown
- });
- },
- //设置ui信息
- setEliminationCount(value) {
- this.eliminationCount += value;
- // this.eliminationLabel.string = '消除数量:' + this.eliminationCount.toString();
- this.$emit('actionJumpDataUpdate', {
- eliminationCount: this.eliminationCount,
- faultCount: this.faultCount
- });
- },
- setFaultCount(value) {
- this.faultCount += value;
- // this.faultLabel.string = '失误:' + this.faultCount;
- this.$emit('actionJumpDataUpdate', {
- eliminationCount: this.eliminationCount,
- faultCount: this.faultCount
- });
- },
- //控制播放
- onControllerPlay() {
- // this.bJumpPlay = !this.bJumpPlay;
- if (this.bJumpPlay) {
- this.onClear();
- this.onClearData();
- this._changePlay();
- this.$emit("actionJumpControllerPlay", false);
- } else {
- this.$emit("actionJumpCheck");
- }
- },
- //修改状态
- _changePlay(bPlaying) {
- if (bPlaying) {
- this.bJumpPlay = bPlaying;
- } else {
- this.bJumpPlay = !this.bJumpPlay;
- }
- },
- onActionJumpPlay() {
- this.onClear();
- this.onClearData();
- this.startJumpGame();
- this._changePlay(true);
- },
- getCurrentJumpType() {
- let _temp = this.spawnArray[this.index];;
- return _temp.jumpCode;
- },
- //监听跳的状态数据
- listenStateDataOfJump(data) {
- let _jumpType = this.getCurrentJumpType();
- //初始全部默认状态
- let _tempState = [{
- jumpName: 'NORMAL',
- jumpCode: 0,
- bTrigger: true,
- describe: '正常跳'
- },
- {
- jumpName: 'LEFT',
- jumpCode: 1,
- bTrigger: false,
- describe: '左直跳'
- },
- {
- jumpName: 'RIGHT',
- jumpCode: 2,
- bTrigger: false,
- describe: '右直跳'
- },
- {
- jumpName: 'LEFT_ROTATE',
- jumpCode: 3,
- bTrigger: false,
- describe: '左旋转跳'
- },
- {
- jumpName: 'RIGHT_ROTATE',
- jumpCode: 4,
- bTrigger: false,
- describe: '右旋转跳'
- }
- ];
- let {
- currentMaxValue,
- oGyroValue
- } = data
- // console.log(data);
- if (currentMaxValue == 0) {
- //JumpType.NORMAL = 0
- if (_jumpType == 0) {
- // console.log('1====', data);
- this.eliminateJumpPrefabFormTemp(_tempState);
- }
- //JumpType.RIGHT_ROTATE = 4
- else if (_jumpType == 4 && (!this.isY && oGyroValue < 0 || this.isY && oGyroValue > 0)) {
- // console.log('right1:', oGyroValue);
- _tempState[4].bTrigger = true;
- this.eliminateJumpPrefabFormTemp(_tempState);
- }
- //JumpType.LEFT_ROTATE = 3
- else if (_jumpType == 3 && (!this.isY && oGyroValue > 0 || this.isY && oGyroValue < 0)) {
- // console.log('left1:', oGyroValue);
- _tempState[3].bTrigger = true;
- this.eliminateJumpPrefabFormTemp(_tempState);
- }
- } else {
- console.log('2====', data);
- if (currentMaxValue > 5) {
- _tempState[1].bTrigger = true;
- } else if (currentMaxValue < -5) {
- _tempState[2].bTrigger = true;
- }
- if (this.isY) {
- //如果是检测到旋转跳
- if (oGyroValue > 5) {
- // console.log('y right:', oGyroValue);
- _tempState[4].bTrigger = true;
- } else if (oGyroValue < -5) {
- // console.log('y left:', oGyroValue);
- _tempState[3].bTrigger = true;
- }
- } else {
- //如果是检测到旋转跳
- if (oGyroValue < -5) {
- // console.log('x right:', oGyroValue);
- _tempState[4].bTrigger = true;
- } else if (oGyroValue > 5) {
- // console.log('x left:', oGyroValue);
- _tempState[3].bTrigger = true;
- }
- }
- this.eliminateJumpPrefabFormTemp(_tempState);
- }
- },
- eliminateJumpPrefabFormTemp(_tempState) {
- //如果消除完,需要重新生成
- let _temp = this.spawnArray[this.index];
- let bSuccess = false;
- console.log(_tempState);
- for (let i = 0; i < _tempState.length; i++) {
- let _state = _tempState[i];
- //如果当前的跳类型和预制目标一样
- if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
- //成功
- bSuccess = true;
- break;
- }
- }
- //如果存在其中一个为true
- if (bSuccess) {
- console.log("bSuccess:", bSuccess);
- _temp.bTrigger = true;
- this.index++;
- if (this.index >= this.spawnArray.length) {
- clearInterval(this.countdownInterval);
- this.countdownInterval = null;
- this.startJumpGame();
- } else {
- //绘制新触发状态
- this.onDraw();
- }
- //成功
- this.setEliminationCount(1);
- } else {
- //失误
- this.setFaultCount(1);
- }
- },
- /**
- * @param {Object} gameData
- * 识别跳部分数据处理
- */
- onBLERopeUpdate(gameData) {
- if (!this.bJumpPlay) return;
- //********陀螺仪角速度********
- let {
- gx,
- gy,
- gz
- } = gameData.gyro;
- let {
- min,
- s,
- ms
- } = gameData;
- let _ax = -gameData.acc.ax * 10;
- let _ay = gameData.acc.ay * 10;
- let _az = gameData.acc.az * 10;
- //低通滤波分离重力
- let alpha = 0.8;
- this.xA = alpha * this.xA + (1 - alpha) * _ax;
- this.yA = alpha * this.yA + (1 - alpha) * _ay;
- this.zA = alpha * this.zA + (1 - alpha) * _az;
- //高通滤波获取线性速度
- let linear_acceleration_x = _ax - this.xA;
- let linear_acceleration_y = _az - this.zA;
- let linear_acceleration_z = _ay - this.yA;
- let _temp = {
- linearAcc: {
- lAccX: linear_acceleration_x,
- lAccY: linear_acceleration_y,
- lAccZ: linear_acceleration_z
- }, //gameData.acc,
- oriAcc: {
- oAccX: _ax,
- oAccY: _ay,
- oAccZ: _az
- },
- gravityAcc: {
- gravityX: this.xA,
- gravityY: this.yA,
- gravityZ: this.zA
- },
- bLimitRebound: false,
- resultant: Math.sqrt(_ax * _ax +
- _ay * _ay + _az * _az),
- runIndex: this.BLEAccIndex,
- //陀螺仪
- oriGyro: {
- oGyroX: gx,
- oGyroY: gy,
- oGyroZ: gz
- },
- //输入当前轴
- bYAxis: this.isY,
- };
- this.actionJumpObj.updateJump(_temp);
- if (this.BLEAccIndex > 150) {
- this.onClearData();
- this.bJump = false;
- return;
- }
- this.BLEAccIndex++;
- },
- onClearData() {
- this.BLEAccIndex = 0;
- },
- onChangeY() {
- this.isY = true;
- },
- onChangeX() {
- this.isY = false;
- }
- }
- }
- </script>
- <style lang="scss">
- // .action-jump-parent {
- // border: 1rpx solid #ffaa7f;
- // position: relative;
- // display: flex;
- // justify-content: center;
- // overflow: hidden;
- // top: 0;
- // width: 100%;
- // }
- // .action-jump-container {
- // width: 100%;
- // height: 114px;
- // border: 1rpx solid #000000;
- // position: relative;
- // }
- .mid-absolute {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- margin: auto;
- }
- .action-jump-timer {
- position: absolute;
- top: -150rpx;
- }
- </style>
|