1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192 |
- <template>
- <view style="width: 750rpx;">
- <view class="flex justify-center" style="margin-top: 32rpx;">
- <!-- 目前格子数量不代表数字,显示完成度而已 -->
- <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 maxShowCount +1" :key="index"
- v-if="index!==0">
- <view
- :class="showCurCount>=index? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
- </view>
- <view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
- class="grid-progress-vertical-text">
- {{Math.floor(taskSignCount / 40 * index)}}
- </view>
- </view>
- </view>
- <view class="grid-progress-vertical-bar">
- <view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
- v-if="index!==0">
- <view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
- class="grid-progress-vertical-text">
- {{Math.floor(taskSignCount / 40 * index)+taskSignCount/2}}
- </view>
- <view
- :class="showCurCount>=index+20? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
- </view>
- </view>
- </view>
- </view>
- <view class="flex justify-center align-center" style="height: 100rpx; width: 444rpx; ">
- <view class="text-12px text-white text-center">
- {{taskDescribe}}
- </view>
- </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 id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
- <image style="width: 110px;height: 110px;" 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 ActionJump from "@/util/util-js/action/jump-0.1.js"
- import {
- CONDITIONPASSED
- } from "@/util/util-js/enum.js"
- import {
- mapMutations
- } from 'vuex';
- export default {
- components: {
- },
- props: {
- showTime: {
- type: Number,
- default: 0
- },
- levelData: {
- type: Object,
- default: null
- },
- currentMode: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- isY: true,
- 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,
- levelType: 0,
- 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,
- /**
- * 交互数据处理
- */
- //当前选择的关卡信息
- selfLevelData: null,
- // 双人模式下 数据
- //标记块数量
- taskSignCount: 0, //总数
- taskSignCurCount: 0, //当前计数
- //{"type":1,"explain":"规定时间内跳完所有标志块","limitType":1}
- taskConditionPassed: null,
- taskDescribe: '',
- //满格的数值是 25
- maxShowCount: 20,
- addShowCountUnit: 0,
- showCurCount: 0,
- roundingCount: 0,
- //游戏结束
- isGameOver: false,
- //pk模式下操作
- leftShowCurCount: 0,
- rightShowCurCount: 0,
- isleftPlayer: true,
- /**
- * 是否允许绘制
- */
- canOnDraw: false,
- /**
- * 是否去到下一个关卡
- */
- canGoNext: false,
-
- onLogData:'',
- }
- },
- watch: {
- levelData(val) {
- //更新数据
- // console.log("levelData ============>", JSON.stringify(val));
- if (val) {
- this.taskSignCount = val.signCount;
- this.taskConditionPassed = val.conditionPassed;
- this.taskDescribe = val.describe;
- this.addShowCountUnit = (this.maxShowCount * 2) / this.taskSignCount;
- // console.log("this.addShowCountUnit:", this.addShowCountUnit, this.maxShowCount * 2, this
- // .taskSignCount);
- this.showCount = 0;
- //用signType 做等级类型
- this.levelType = val.signType;
- console.log(JSON.stringify(this.taskConditionPassed));
- }
- },
- currentMode(val) {
- console.log('==========> action jump currentMode:', val);
- }
- },
- 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();
-
- setTimeout(()=>{
- this.onListenActionJump();
- },2000)
- // console.log('==========>1 action jump currentMode:', this.currentMode);
- },
- methods: {
- ...mapMutations(['onWriteBLEConnectionValue', 'onConvertDeviceData']),
- onListenActionJump() {
- let _self = this;
- console.log("*****************onListenActionJump*****************************");
- _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();
- this.actionJumpObj.resetAll();
- if (this.canOnDraw) {
- this.canOnDraw = false;
- this.onDraw("tipHit");
- }
- if (this.canGoNext) {
- this.canGoNext = false;
- this.startJumpGame();
- }
- // 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.isGameOver = false;
- this.resetJumpGame();
- //开始游戏
- this.index = 0;
- // this.levelLabel.string = '关卡' + this.level;
- let _ranType = Math.floor(Math.random() * 2);
- if (this.levelType == 0) {
- //随便生成一组跳的数据
- let _spawnList = this.template[0].spawnList;
- for (let i = 0; i < 4; i++) {
- this.spawnJumpPrefabsFromType(i, _spawnList[0][0]);
- }
- } else if (this.levelType == 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.levelType == 2) {
- //生成一组 左跳右跳原地
- let _spawnList = this.template[2].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.levelType == 3) {
- //生成一组 左旋跳右旋跳
- let _spawnList = this.template[1].spawnList;
- let ran = Math.floor(Math.random() * 2) + 2;
- for (let i = 0; i < _spawnList[ran].length; i++) {
- this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
- }
- } else if (this.levelType == 4) {
- //生成一组 左旋跳右旋跳
- let _spawnList = this.template[2].spawnList;
- let ran = Math.floor(Math.random() * 2) + 2;
- for (let i = 0; i < _spawnList[ran].length; i++) {
- this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
- }
- } else if (this.levelType == 5) {
- //随便生成三组数据
- 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;
- }
- // 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]);
- // }
- // }
- 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("tipHit");
- },
- 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(type) {
- 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 || type == "normal" ? _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 && type !== "normal") {
- _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 && type !== "normal") {
- _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);
- if (this.isGameOver || !this.bJumpPlay) return;
- 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('tipHit');
- }
- //成功
- 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.taskSignCurCount++;
- this.roundingCount += this.addShowCountUnit;
- this.eliminationCount += value;
- // this.eliminationLabel.string = '消除数量:' + this.eliminationCount.toString();
- this.$emit('actionJumpDataUpdate', {
- eliminationCount: this.eliminationCount,
- faultCount: this.faultCount
- });
- //如果是pk模式。不走下面判断
- if (this.currentMode == 'pkMode') return;
- if (CONDITIONPASSED.ENERGYBARFULL == this.taskConditionPassed.limitType) {
- //能量条的条件下才显示能量条动
- //取两位后计算Math floor,不然会有偏差值问题 Math.floor(39.9999999+ 0.1111111) = 39
- this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
- //1.能量槽满的时候,说明踩中次数到达
- if (this.taskSignCurCount >= this.taskSignCount)
- this.onGameOver("energyBarFull");
- } else if (CONDITIONPASSED.SKIPALLFLAGWITHINTIME == this.taskConditionPassed.limitType) {
- //规定时间下也给显示能量条
- this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
- //2.规定时间内跳完所有标志块
- if (this.taskSignCurCount >= this.taskSignCount)
- this.onGameOver("skipAllFlagWithinTime");
- } else if (this.taskConditionPassed.isScore) {
- //3.达到一定分数
- //如果是用分数判断
- //分数是 跳对的加1分,错的扣1分,0不扣分。
- let curScore = this.eliminationCount - this.faultCount;
- curScore = curScore < 0 ? 0 : curScore;
- //当前分数达到,胜利
- if (curScore >= this.taskConditionPassed.limitScore)
- this.onGameOver("score");
- }
- },
- onGameOver(type) {
- this.isGameOver = true;
- //处理参数
- this.onClear();
- this.onClearData();
- this.bJumpPlay = false;
- /**
- * 判断胜利和失败
- */
- let myWin = false; //默认失败
- //比如, 1.充满左右两边蓄能槽.2.规定时间内跳完所有标志块.
- if (type == "energyBarFull") {
- //1.能量槽满的时候,说明踩中次数到达
- if (this.taskSignCurCount >= this.taskSignCount) {
- myWin = true;
- }
- } else if (type == 'skipAllFlagWithinTime') {
- myWin = true;
- } else if (type == "timeUp") {
- //2.规定时间内跳完所有标志块
- //查看消除数量是否到达总数,未达成就是未完成
- if (this.taskSignCurCount >= this.taskSignCount) {
- myWin = true;
- }
- } else if (type == "score") {
- myWin = true;
- }
- console.log(type, {
- myWin: myWin
- });
- this.$emit('gameOver', {
- myWin: myWin,
- type: 'calorieMode',
- isOffEvent:true
- });
- },
- //pk模式下结束游戏关卡
- onPKModeGameOver(type) {
- this.isGameOver = true;
- //处理参数
- this.onClear();
- this.onClearData();
- this.bJumpPlay = false;
- this.$emit('gameOver', {
- type: 'pkMode',
- isOffEvent:true
- });
- },
- setFaultCount(value) {
- this.faultCount += value;
- // this.faultLabel.string = '失误:' + this.faultCount;
- this.$emit('actionJumpDataUpdate', {
- eliminationCount: this.eliminationCount,
- faultCount: this.faultCount
- });
- },
- //控制播放
- onControllerPlay() {
- if (this.bJumpPlay) {
- //仅仅暂停,没有清空数据
- this._changePlay(false);
- this.$emit("actionJumpControllerPlay", false);
- } else {
- this.$emit("actionJumpCheck");
- }
- },
- onContinueGame() {
- this._changePlay(true);
- },
- onClearActionJumpData() {
- console.log("onClearActionJumpData");
- this.onClear();
- this.onClearData();
- },
- //修改状态
- _changePlay(bPlaying) {
- if (bPlaying) {
- this.bJumpPlay = bPlaying;
- } else {
- this.bJumpPlay = !this.bJumpPlay;
- }
- },
- onActionJumpPlay() {
- this.onClear();
- this.onClearData();
- this.startJumpGame();
- this._changePlay(true);
- //reset 对应计算数据
- this.taskSignCurCount = 0;
- this.showCurCount = 0;
- this.roundingCount = 0;
- this.faultCount = 0;
- this.eliminationCount = 0;
- },
- getCurrentJumpType() {
- let _temp = this.spawnArray[this.index];;
- return _temp.jumpCode;
- },
- //监听跳的状态数据
- listenStateDataOfJump(data) {
- if (this.isGameOver || !this.bJumpPlay) return;
- 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,
- peakOfWaveMaxValue,
- valleyOfWaveMinValue
- } = data
- // console.log('stateDataOfJump:');
- // console.log(JSON.stringify(data));
- this.onLogData = data;
- let _rotateLimit = 4;
- let _jumpLimit = 8;
-
- switch (_jumpType) {
- case 0:
- //JumpType.NORMAL = 0
- _tempState[0].bTrigger = true;
- this.eliminateJumpPrefabFormTemp(_tempState);
- break;
- case 1:
- if (currentMaxValue < -_jumpLimit || valleyOfWaveMinValue < - 20) {
- //left jump
- _tempState[1].bTrigger = true;
- }
- this.eliminateJumpPrefabFormTemp(_tempState);
- break;
- case 2:
- if (currentMaxValue > _jumpLimit || peakOfWaveMaxValue > 20) {
- //right jump
- _tempState[2].bTrigger = true;
- }
- this.eliminateJumpPrefabFormTemp(_tempState);
- break;
- case 4:
- if (oGyroValue > _rotateLimit) {
- _tempState[4].bTrigger = true;
- }
- this.eliminateJumpPrefabFormTemp(_tempState);
- break;
- case 3:
- if (oGyroValue < -_rotateLimit) {
- _tempState[3].bTrigger = true;
- }
- this.eliminateJumpPrefabFormTemp(_tempState);
- break;
- default:
- console.log('没有对应的_jumpType', _jumpType);
- break;
- }
-
- // if (currentMaxValue == 0) {
-
- // } else {
- // // console.log('2====', data);
- // if (this.isY) {
- // //如果是检测到旋转跳
- // if (oGyroValue > _rotateLimit) {
- // // console.log('y right:', oGyroValue);
- // _tempState[4].bTrigger = true;
- // } else if (oGyroValue < -_rotateLimit) {
- // // console.log('y left:', oGyroValue);
- // _tempState[3].bTrigger = true;
- // }
- // if (valleyOfWaveMinValue < -_jumpLimit) {
- // //left jump
- // _tempState[1].bTrigger = true;
- // } else if (peakOfWaveMaxValue > _jumpLimit) {
- // //right jump
- // _tempState[2].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;
- // }
- // if (valleyOfWaveMinValue < -_jumpLimit) {
- // //left jump
- // _tempState[1].bTrigger = true;
- // } else if (peakOfWaveMaxValue > _jumpLimit) {
- // //right jump
- // _tempState[2].bTrigger = true;
- // }
- // }
- // this.eliminateJumpPrefabFormTemp(_tempState);
- // }
- },
- eliminateJumpPrefabFormTemp(_tempState) {
- //如果消除完,需要重新生成
- let _temp = this.spawnArray[this.index];
- let bSuccess = false;
- for (let i = 0; i < _tempState.length; i++) {
- let _state = _tempState[i];
- if (_state.bTrigger)
- console.log(JSON.stringify(_state)+JSON.stringify(this.onLogData));
- //如果当前的跳类型和预制目标一样
- 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.canGoNext = true;
- this.onDraw("normal");
- } else {
- //绘制新触发状态
- this.canOnDraw = true;
- this.onDraw("normal");
- }
- //成功
- this.setEliminationCount(1);
- } else {
- //失误
- this.setFaultCount(1);
- }
- },
- /**
- * @param {Object} gameData
- * 识别跳部分数据处理
- */
- onBLERopeUpdate(gameData) {
- if (!this.bJumpPlay || this.isGameOver) return;
- //********陀螺仪角速度********
- let {
- gx,
- gy,
- gz
- } = gameData.gyro;
- let {
- min,
- s,
- ms
- } = gameData;
- //-gameData.acc.ax * 10;
- 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: true,
- };
- 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;
- },
- onGetActionJumpPlayView(callback) {
- let view = uni.createSelectorQuery().select('#ActionJumpPlay');
- view.boundingClientRect(data => {
- if (callback)
- callback(data);
- }).exec();
- }
- }
- }
- </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>
|