|
|
@@ -0,0 +1,1586 @@
|
|
|
+11
|
|
|
+<!-- 新版本拳击区域部分文件 -->
|
|
|
+<template>
|
|
|
+ <view style="width: 750rpx;">
|
|
|
+ <view class="flex justify-center" style="margin-top: 68rpx;">
|
|
|
+ <!-- 目前格子数量不代表数字，显示完成度而已 -460rpx;-->
|
|
|
+ <view class="grid-progress-vertical-container" style="top:-376rpx;">
|
|
|
+ <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" style="position: absolute;right: 0;top: -4px;">
|
|
|
+ {{Math.floor(taskSignCount / 26 * 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" style="position: absolute;left: 0;top: -4px;">
|
|
|
+ {{Math.floor(taskSignCount / 26 * index)+taskSignCount/2}}
|
|
|
+ </view>
|
|
|
+ <!-- 设置空位 -->
|
|
|
+ <view></view>
|
|
|
+ <view
|
|
|
+ :class="showCurCount>=index+13? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- class="position-relative" -->
|
|
|
+ <view style="position: relative;">
|
|
|
+ <view class="position-absolute-left-top flex justify-center align-center " style="width: 86.12px;height:55.96px;
|
|
|
+ left: 146rpx;top:-90rpx; ">
|
|
|
+ <view style="transform: scale(0.5);">
|
|
|
+ <view class="sprite-yellow-arrow " :class="bRuning?'animation-play-state-play':''"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="position-absolute-right-bottom flex justify-center align-center "
|
|
|
+ style="width: 317rpx; height:138px; right: 46rpx; bottom: 15rpx;">
|
|
|
+ <view class="flex flex-direction justify-between" style="transform: scale(0.5); height: 276px; ">
|
|
|
+ <block v-if="bJumpPlay">
|
|
|
+ <view class="sprite-rightToLeftArrow" :class="bJumpPlay?'sprite-rightToLeftArrow-play':''">
|
|
|
+ </view>
|
|
|
+ <view class="sprite-rightToLeftArrow" :class="bJumpPlay?'sprite-rightToLeftArrow-play':''">
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <image style="width: 317px; height: 42px;"
|
|
|
+ src="../../../static/modal/action-jump/progress-tip.png"></image>
|
|
|
+ <image style="width: 317px; height: 42px;"
|
|
|
+ src="../../../static/modal/action-jump/progress-tip.png"></image>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <canvas canvas-id="actionHitCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
|
|
+ </view>
|
|
|
+ <view style="position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;">
|
|
|
+ <!-- class="position-absolute-center" -->
|
|
|
+ <canvas canvas-id="effectHitCanvas" :style="{ width: canvasW + 'px', height: '164px' }"></canvas>
|
|
|
+ </view>
|
|
|
+ <view class="flex align-center justify-center" style="font-size: 14px; width:750rpx;">
|
|
|
+ <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;">{{averageSpeed}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
|
|
|
+ <image style="width: 110px;height: 110px;"
|
|
|
+ src="../../../static/modal/action-jump/mid-button-orange@2x.png">
|
|
|
+ </image>
|
|
|
+
|
|
|
+ <image v-if="!bJumpPlay" class="mid-absolute" style="left:12rpx; width: 56rpx;height: 70rpx;"
|
|
|
+ src="../../../static/play.png">
|
|
|
+ </image>
|
|
|
+ <image v-else class="mid-absolute" style="width: 100rpx;height: 100rpx;"
|
|
|
+ src="../../../static/e-pause.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;">{{Math.floor(jumpCalorie)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex align-center justify-center" style="width: 750rpx;margin-top: 16rpx;">
|
|
|
+ <view class="flex justify-center align-center" style="height: 120rpx; width: 444rpx; ">
|
|
|
+ <view class="text-12px text-white text-center">
|
|
|
+ {{taskDescribe}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <view style="display: flex;justify-content: space-between;" class="margin-top margin-bottom">
|
|
|
+ <button @click="onJumpType(0)">middle</button>
|
|
|
+ <button @click="onJumpType(1)">left</button>
|
|
|
+ <button @click="onJumpType(2)">right</button>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ CONDITIONPASSED
|
|
|
+ } from "@/util/util-js/enum.js"
|
|
|
+
|
|
|
+ import Firework from "@/util/util-js/effect/firework.js"
|
|
|
+ import Animation from "@/util/util-js/Animation.js"
|
|
|
+ import puchConfig from "@/util/util-js/puchConfig.js"
|
|
|
+
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ computed: mapState(['systemInfo', 'bOldDeviceType']),
|
|
|
+ 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: {}, // 设备信息
|
|
|
+
|
|
|
+ directionJumpRight: null,
|
|
|
+ directionJumpLeft: null,
|
|
|
+ midJump: null,
|
|
|
+ rotateJumpRight: null,
|
|
|
+ rotateJumpLeft: null,
|
|
|
+ directionJumpWhiteRight: null,
|
|
|
+ directionJumpWhiteLeft: null,
|
|
|
+ midJumpWhite: null,
|
|
|
+ rotateJumpWhiteRight: null,
|
|
|
+ rotateJumpWhiteLeft: null,
|
|
|
+ //参考图片
|
|
|
+ cankao: null,
|
|
|
+
|
|
|
+ jumpTipImage: null,
|
|
|
+ JumpTipOrange: null,
|
|
|
+ jumpNormalLine: null,
|
|
|
+ jumpNormalRect: null,
|
|
|
+ jumpNormalWidth: 70,
|
|
|
+ jumpNormalHeight: 164,
|
|
|
+
|
|
|
+ jumpProgressTip: null,
|
|
|
+
|
|
|
+ jumpTypeArray: [{
|
|
|
+ jumpName: 'NORMAL',
|
|
|
+ jumpCode: 0,
|
|
|
+ icon: 'midJump',
|
|
|
+ scaleX: 1,
|
|
|
+ bTrigger: false,
|
|
|
+ bShow: true,
|
|
|
+ }, {
|
|
|
+ jumpName: 'LEFT',
|
|
|
+ jumpCode: 1,
|
|
|
+ icon: 'directionJump',
|
|
|
+ scaleX: 1,
|
|
|
+ bTrigger: false,
|
|
|
+ bShow: true,
|
|
|
+ }, {
|
|
|
+ jumpName: 'RIGHT',
|
|
|
+ jumpCode: 2,
|
|
|
+ icon: 'directionJump',
|
|
|
+ scaleX: 1,
|
|
|
+ bTrigger: false,
|
|
|
+ bShow: true,
|
|
|
+ }],
|
|
|
+ spawnArray: [],
|
|
|
+ deleteSpawn: null, //已删除的对象
|
|
|
+ deleteImage: null,
|
|
|
+ /**
|
|
|
+ * 生成的背景位置
|
|
|
+ */
|
|
|
+ spawnPos: [],
|
|
|
+ spawnAnimation: null,
|
|
|
+ spawnProcess: 1,
|
|
|
+
|
|
|
+ //下一个生成是相反的方向
|
|
|
+ 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]
|
|
|
+ ]
|
|
|
+ }, ],
|
|
|
+ //模板对象池，管理生成对象
|
|
|
+ templatePool: [],
|
|
|
+
|
|
|
+ levelType: 0,
|
|
|
+ countdown: 60,
|
|
|
+ countdownInterval: null,
|
|
|
+
|
|
|
+ faultCount: 0,
|
|
|
+ eliminationCount: 0,
|
|
|
+
|
|
|
+ bJumpPlay: false,
|
|
|
+ jumpCalorie: 0,
|
|
|
+
|
|
|
+ averageSpeedInterval: null,
|
|
|
+ averageSpeed: 0,
|
|
|
+ tempHitCount: 0,
|
|
|
+
|
|
|
+ //硬件设备处理
|
|
|
+ BLEAccIndex: 0,
|
|
|
+ xA: 0,
|
|
|
+ yA: 0,
|
|
|
+ zA: 0,
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 交互数据处理
|
|
|
+ */
|
|
|
+ //当前选择的关卡信息
|
|
|
+ selfLevelData: null,
|
|
|
+ // 双人模式下 数据
|
|
|
+ //标记块数量
|
|
|
+ taskSignCount: 0, //总数
|
|
|
+ taskSignCurCount: 0, //当前计数
|
|
|
+ //{"type":1,"explain":"规定时间内跳完所有标志块","limitType":1}
|
|
|
+ taskConditionPassed: null,
|
|
|
+ taskDescribe: '',
|
|
|
+ //满格的数值是 25
|
|
|
+ maxShowCount: 13,
|
|
|
+ addShowCountUnit: 0,
|
|
|
+ showCurCount: 0,
|
|
|
+ roundingCount: 0,
|
|
|
+ //游戏结束
|
|
|
+ isGameOver: false,
|
|
|
+
|
|
|
+
|
|
|
+ //pk模式下操作
|
|
|
+ leftShowCurCount: 0,
|
|
|
+ rightShowCurCount: 0,
|
|
|
+ isleftPlayer: true,
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 是否允许绘制
|
|
|
+ */
|
|
|
+ canOnDraw: false,
|
|
|
+ /**
|
|
|
+ * 是否去到下一个关卡
|
|
|
+ */
|
|
|
+ canGoNext: false,
|
|
|
+ /**
|
|
|
+ * 生成的特效
|
|
|
+ */
|
|
|
+ canSpawnTemp: null,
|
|
|
+
|
|
|
+ onLogData: '',
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 是否显示关卡提示
|
|
|
+ */
|
|
|
+ bTipLevel: false,
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 烟花相关
|
|
|
+ */
|
|
|
+ // firework collection
|
|
|
+ fireworks: [],
|
|
|
+ fireworkImage: null,
|
|
|
+ loop: null,
|
|
|
+ count: 100,
|
|
|
+ effectHitCanvas: null,
|
|
|
+ effectCurrentSpawn: null,
|
|
|
+ effectSpawnPosX: 0,
|
|
|
+ /**
|
|
|
+ * 烟花特效
|
|
|
+ */
|
|
|
+ bDrawBoomEffect: false,
|
|
|
+ //绘制箭头效果
|
|
|
+ bRuning: false,
|
|
|
+ bRuningInfinite: false,
|
|
|
+ yellowRuningTimeout: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.actionHitCanvas = uni.createCanvasContext("actionHitCanvas", this);
|
|
|
+ this.effectHitCanvas = uni.createCanvasContext("effectHitCanvas", this);
|
|
|
+ // this.SystemInfo = this.systemInfo; // uni.getSystemInfoSync();
|
|
|
+ this.canvasW = this.systemInfo.windowWidth; // 画布宽度
|
|
|
+ this.canvasH = 147.68;
|
|
|
+ this.onLoadImage();
|
|
|
+
|
|
|
+ //更新一次状态
|
|
|
+ const value = uni.getStorageSync('levelButtonPrompt');
|
|
|
+ if (value) {
|
|
|
+ _self.bTipLevel = !value.isSelected;
|
|
|
+ } else {
|
|
|
+ _self.bTipLevel = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.averageSpeedInterval) {
|
|
|
+ clearInterval(this.averageSpeedInterval);
|
|
|
+ this.averageSpeedInterval = null;
|
|
|
+ }
|
|
|
+ //计算平均速度
|
|
|
+ this.averageSpeedInterval = setInterval(() => {
|
|
|
+ this.averageSpeed = this.tempHitCount;
|
|
|
+ this.tempHitCount = 0;
|
|
|
+ }, 3000)
|
|
|
+
|
|
|
+ // console.log("组件创建")
|
|
|
+ },
|
|
|
+ // destroyed() { //Vue 实例销毁后调用
|
|
|
+ // console.log("组件销毁")
|
|
|
+ // },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(['onWriteBLEConnectionValue', 'onConvertDeviceData']),
|
|
|
+ //更新新手状态提示
|
|
|
+ onUpdateTipLevelValue(value) {
|
|
|
+ this.bTipLevel = value;
|
|
|
+ },
|
|
|
+ //load 相关图片
|
|
|
+ onLoadImage() {
|
|
|
+ let _self = this;
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/boxing-post/left-hook-m@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.directionJumpLeft = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/boxing-post/right-hook-m@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.directionJumpRight = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/boxing-post/straight-m@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.midJump = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/boxing-post/right-hook-h@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.directionJumpWhiteRight = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/boxing-post/left-hook-h@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.directionJumpWhiteLeft = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/boxing-post/straight-h@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.midJumpWhite = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/jumpTip.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.jumpTipImage = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/jump-tip-orange@2x.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.JumpTipOrange = image;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/progress-tip.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.jumpProgressTip = image;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/jumpNormal-line.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.jumpNormalLine = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/jumpNormal-rect.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.jumpNormalRect = image;
|
|
|
+ _self.onDrawBg(true);
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/cankao.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.cankao = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 烟花照片
|
|
|
+ */
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: "../../../static/modal/action-jump/boom.png",
|
|
|
+ success: function(image) {
|
|
|
+ _self.fireworkImage = image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 重置生成数组，重置倒计时
|
|
|
+ */
|
|
|
+ resetJumpGame() {
|
|
|
+
|
|
|
+ this.spawnArray = [];
|
|
|
+ this.templatePool = [];
|
|
|
+ if (this.countdownInterval) {
|
|
|
+ clearInterval(this.countdownInterval);
|
|
|
+ this.countdownInterval = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.resetCountdown(60);
|
|
|
+
|
|
|
+ },
|
|
|
+ startJumpGame() {
|
|
|
+ this.isGameOver = false;
|
|
|
+ this.resetJumpGame();
|
|
|
+ //开始游戏
|
|
|
+ this.index = 0;
|
|
|
+ // this.levelType = 5;
|
|
|
+ let spawnCount = 7;
|
|
|
+ let _ranType = Math.floor(Math.random() * 2);
|
|
|
+ //生成二个占位
|
|
|
+ this.addTemplatePoolFromType(false, this.template[0].spawnList[0][0]);
|
|
|
+ this.addTemplatePoolFromType(false, this.template[0].spawnList[0][0]);
|
|
|
+ if (this.levelType == 0) {
|
|
|
+ //随便生成一组跳的数据
|
|
|
+ let _spawnList = this.template[0].spawnList;
|
|
|
+ for (let i = 0; i < 30; i++) {
|
|
|
+ //再对象池里面生成一组对象
|
|
|
+ this.addTemplatePoolFromType(true, _spawnList[0][0]);
|
|
|
+ }
|
|
|
+ //先生成spawnCount个
|
|
|
+ for (let i = 0; i < spawnCount; i++) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (this.levelType == 1) {
|
|
|
+ //生成一组 左跳右跳
|
|
|
+ let _spawnList = this.template[1].spawnList;
|
|
|
+ for (let i = 0; i < 30; i++) {
|
|
|
+ let ran = Math.floor(Math.random() * 2);
|
|
|
+ for (let j = 0; j < _spawnList[ran].length; j++) {
|
|
|
+ //再对象池里面生成一组对象
|
|
|
+ this.addTemplatePoolFromType(true, _spawnList[ran][j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //先生成spawnCount个
|
|
|
+ for (let i = 0; i < spawnCount; i++) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.spawnArray)
|
|
|
+
|
|
|
+ } else if (this.levelType == 2) {
|
|
|
+ //生成一组 左跳右跳原地
|
|
|
+ let _spawnList = this.template[2].spawnList;
|
|
|
+ for (let i = 0; i < 30; i++) {
|
|
|
+ let ran = Math.floor(Math.random() * 2);
|
|
|
+ for (let j = 0; j < _spawnList[ran].length; j++) {
|
|
|
+ //再对象池里面生成一组对象
|
|
|
+ this.addTemplatePoolFromType(true, _spawnList[ran][j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //先生成spawnCount个
|
|
|
+ for (let i = 0; i < spawnCount; i++) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ } else if (this.levelType == 3) {
|
|
|
+ //生成一组 左旋跳右旋跳
|
|
|
+ let _spawnList = this.template[1].spawnList;
|
|
|
+ for (let i = 0; i < 30; i++) {
|
|
|
+ let ran = Math.floor(Math.random() * 2) + 2;
|
|
|
+ for (let j = 0; j < _spawnList[ran].length; j++) {
|
|
|
+ //再对象池里面生成一组对象
|
|
|
+ this.addTemplatePoolFromType(true, _spawnList[ran][j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //先生成spawnCount个
|
|
|
+ for (let i = 0; i < spawnCount; i++) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+ } else if (this.levelType == 4) {
|
|
|
+ //生成一组 左旋跳右旋跳
|
|
|
+ let _spawnList = this.template[2].spawnList;
|
|
|
+ for (let i = 0; i < 30; i++) {
|
|
|
+ let ran = Math.floor(Math.random() * 2) + 2;
|
|
|
+ for (let j = 0; j < _spawnList[ran].length; j++) {
|
|
|
+ //再对象池里面生成一组对象
|
|
|
+ this.addTemplatePoolFromType(true, _spawnList[ran][j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //先生成spawnCount个
|
|
|
+ for (let i = 0; i < spawnCount; i++) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (this.levelType == 5) {
|
|
|
+ for (let i = 0; i < 20; i++) {
|
|
|
+ //随便生成三组数据
|
|
|
+ let _newArray = [];
|
|
|
+ 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 j = 0; j < _newArray.length; j++) {
|
|
|
+ this.addTemplatePoolFromType(true, _newArray[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //先生成spawnCount个
|
|
|
+ for (let i = 0; i < spawnCount; i++) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.onDraw("tipHit", false);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生成对应预制对象
|
|
|
+ * @param {Object} bShow
|
|
|
+ * @param {Object} _jumpType
|
|
|
+ */
|
|
|
+ addTemplatePoolFromType(bShow, _jumpType) {
|
|
|
+
|
|
|
+ for (let i = 0; i < this.jumpTypeArray.length; i++) {
|
|
|
+ if (this.jumpTypeArray[i].jumpCode == _jumpType) {
|
|
|
+ let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i], {
|
|
|
+ bShow: bShow,
|
|
|
+ bInit: true,
|
|
|
+ position: 0,
|
|
|
+ animation: null, //动画
|
|
|
+ });
|
|
|
+ this.templatePool.push(_jumpPrefab);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //单纯的绘制八个背景
|
|
|
+ onDrawBg(bDraw) {
|
|
|
+ this.spawnPos = [];
|
|
|
+
|
|
|
+ if (bDraw) {
|
|
|
+ this.actionHitCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
|
|
|
+ }
|
|
|
+
|
|
|
+ let _currentBgStartX = this.canvasW / 2;
|
|
|
+ let count = 7;
|
|
|
+ let _currentPos = -12,
|
|
|
+ _addPos = 0;
|
|
|
+
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ if (0 !== i) {
|
|
|
+ _currentPos += this.jumpNormalWidth;
|
|
|
+ } else {
|
|
|
+ _currentPos -= this.jumpNormalWidth;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (2 === i) {
|
|
|
+ //结尾时候快消除完绘制一次大图背景。不然会为空白
|
|
|
+ if (this.spawnArray.length < 3)
|
|
|
+ this.actionHitCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 120, this
|
|
|
+ .canvasH);
|
|
|
+
|
|
|
+ if (bDraw) {
|
|
|
+ this.actionHitCanvas.drawImage(this.JumpTipOrange.path, _currentPos + 3, 7, 113, this
|
|
|
+ .canvasH -
|
|
|
+ 14);
|
|
|
+ }
|
|
|
+ //添加对应生成点
|
|
|
+ this.spawnPos.push({
|
|
|
+ center: _currentPos + 30
|
|
|
+ })
|
|
|
+ _currentPos += 50;
|
|
|
+ } else {
|
|
|
+ this.actionHitCanvas.drawImage(this.jumpNormalLine.path, _currentPos, 0, this
|
|
|
+ .jumpNormalWidth,
|
|
|
+ this.canvasH);
|
|
|
+ if (bDraw) {
|
|
|
+ this.actionHitCanvas.drawImage(this.jumpNormalRect.path, _currentPos, 0, this
|
|
|
+ .jumpNormalWidth,
|
|
|
+ this.canvasH);
|
|
|
+ }
|
|
|
+ //添加对应生成点
|
|
|
+ this.spawnPos.push({
|
|
|
+ center: _currentPos + 16
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (bDraw) {
|
|
|
+ this.actionHitCanvas.draw();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDraw(type, bAnimation) {
|
|
|
+ let _self = this;
|
|
|
+ if (bAnimation && _self.spawnAnimation == null) {
|
|
|
+ _self.spawnProcess = 0;
|
|
|
+ _self.spawnAnimation = new Animation({
|
|
|
+ timing: 'linear',
|
|
|
+ duration: 200,
|
|
|
+ onProcess: function onProcess(process) {
|
|
|
+ _self.spawnProcess = process;
|
|
|
+ _self.onDraw('normal', true);
|
|
|
+ // console.log("process=" + process);
|
|
|
+ },
|
|
|
+ onAnimationFinish: function onAnimationFinish() {
|
|
|
+ // console.log("finish animation");
|
|
|
+ _self.spawnAnimation = null;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.actionHitCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
|
|
|
+ //单纯绘制背景
|
|
|
+ this.onDrawBg(false);
|
|
|
+ //计算一个节点数组
|
|
|
+ // let _oldRectMoveDis = 1;
|
|
|
+ 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') {
|
|
|
+ if (this.spawnArray[i].jumpName == "RIGHT") {
|
|
|
+ _temp = this.spawnArray[i].bTrigger ? this.directionJumpRight : this
|
|
|
+ .directionJumpWhiteRight;
|
|
|
+ } else {
|
|
|
+ _temp = this.spawnArray[i].bTrigger ? this.directionJumpLeft : this
|
|
|
+ .directionJumpWhiteLeft;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.actionHitCanvas.save();
|
|
|
+
|
|
|
+ let _currentPos = this.spawnPos[i].center;
|
|
|
+ let _currentCenterPos = 0;
|
|
|
+
|
|
|
+ if (2 === i) {
|
|
|
+ //这里分两部分走，从小图走到大图
|
|
|
+ let _spawnBiggerToLeft = this.spawnArray[i];
|
|
|
+ //这里记录一个生成点，后面用于生成特效
|
|
|
+ this.effectSpawnPosX = _currentPos;
|
|
|
+ //大图
|
|
|
+ let tempPosition = _currentPos;
|
|
|
+ if (!bAnimation || _spawnBiggerToLeft.bInit) {
|
|
|
+ _spawnBiggerToLeft.position = _currentPos;
|
|
|
+ _spawnBiggerToLeft.bInit = false;
|
|
|
+ } else {
|
|
|
+ tempPosition = _spawnBiggerToLeft.position - Math.abs(_currentPos - _spawnBiggerToLeft
|
|
|
+ .position) * _self.spawnProcess;
|
|
|
+
|
|
|
+ }
|
|
|
+ if (1 === this.spawnProcess) {
|
|
|
+ _spawnBiggerToLeft.position = tempPosition;
|
|
|
+ } else {
|
|
|
+ //绘制一次前面方块背景前移
|
|
|
+ this.actionHitCanvas.drawImage(this.jumpNormalRect.path, tempPosition - 16, 0, this
|
|
|
+ .jumpNormalWidth,
|
|
|
+ this.canvasH);
|
|
|
+ this.actionHitCanvas.clearRect(this.spawnPos[i].center - 30, 0, 120, this.canvasH);
|
|
|
+ }
|
|
|
+ let _width = 40 + 20 * _self.spawnProcess;
|
|
|
+ this.actionHitCanvas.drawImage(_temp.path, tempPosition, 55 - 9 * _self.spawnProcess,
|
|
|
+ _width,
|
|
|
+ _width);
|
|
|
+
|
|
|
+ //绘制多一次背景
|
|
|
+ this.actionHitCanvas.drawImage(this.jumpTipImage.path, this.spawnPos[i].center - 30, 0,
|
|
|
+ 120, this
|
|
|
+ .canvasH);
|
|
|
+
|
|
|
+ this.actionHitCanvas.drawImage(this.JumpTipOrange.path, this.spawnPos[i].center - 27, 7,
|
|
|
+ 113, this
|
|
|
+ .canvasH -
|
|
|
+ 14);
|
|
|
+ } else {
|
|
|
+ //小图
|
|
|
+ let _otherObj = this.spawnArray[i];
|
|
|
+ let tempPosition = _currentPos;
|
|
|
+ if (!bAnimation || _otherObj.bInit) {
|
|
|
+ _otherObj.position = _currentPos;
|
|
|
+ _otherObj.bInit = false;
|
|
|
+ } else {
|
|
|
+ tempPosition = _otherObj.position - Math.abs(_currentPos - _otherObj.position) * _self
|
|
|
+ .spawnProcess;
|
|
|
+ }
|
|
|
+ if (1 === this.spawnProcess) {
|
|
|
+ _otherObj.position = tempPosition;
|
|
|
+ }
|
|
|
+ this.actionHitCanvas.drawImage(this.jumpNormalRect.path, tempPosition - 16, 0, this
|
|
|
+ .jumpNormalWidth,
|
|
|
+ this.canvasH);
|
|
|
+ if (this.spawnArray[i].bShow) {
|
|
|
+ this.actionHitCanvas.drawImage(_temp.path, tempPosition, 55, 40, 40);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ this.actionHitCanvas.restore();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.actionHitCanvas.draw();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 消除时候显示的特效
|
|
|
+ * @param {Object} _temp
|
|
|
+ */
|
|
|
+ onDrawEffect(_temp) {
|
|
|
+ if (!this.bRuning) {
|
|
|
+ this.bRuning = true;
|
|
|
+ if (this.yellowRuningTimeout) {
|
|
|
+ clearTimeout(this.yellowRuningTimeout)
|
|
|
+ this.yellowRuningTimeout = null;
|
|
|
+ }
|
|
|
+ this.yellowRuningTimeout = setTimeout(() => {
|
|
|
+ this.bRuning = false;
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //根据当前消除的生成一个
|
|
|
+ let spawnTemp = this.midJump;
|
|
|
+ let offest = 5;
|
|
|
+ if (_temp.icon == 'directionJump') {
|
|
|
+ spawnTemp = _temp.jumpName == "RIGHT" ? this.directionJumpRight : this.directionJumpLeft;
|
|
|
+ }
|
|
|
+ let tempFirework = new Firework(this.fireworkImage,
|
|
|
+ spawnTemp, _temp.scaleX, this.effectSpawnPosX, 0, this.canvasW, 164, offest, true);
|
|
|
+ this.fireworks.push(tempFirework);
|
|
|
+ this.bDrawBoomEffect = true;
|
|
|
+ this.onInitFirework();
|
|
|
+ },
|
|
|
+ onClear() {
|
|
|
+ this.resetJumpGame();
|
|
|
+
|
|
|
+ this.onDrawBg(true);
|
|
|
+
|
|
|
+ this.xA = 0;
|
|
|
+ this.yA = 0;
|
|
|
+ this.zA = 0;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 统一绘制 效果 背景，交互，烟花
|
|
|
+ */
|
|
|
+ onInitFirework() {
|
|
|
+ if (this.loop != null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.loop = setInterval(() => {
|
|
|
+ if (!this.bDrawBoomEffect) {
|
|
|
+ clearInterval(this.loop);
|
|
|
+ this.loop = null;
|
|
|
+ // console.log("结束绘制");
|
|
|
+ this.effectHitCanvas.clearRect(0, 0, this.canvasW, 164);
|
|
|
+ this.effectHitCanvas.draw();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.effectHitCanvas.clearRect(0, 0, this.canvasW, 164);
|
|
|
+ if (this.bDrawBoomEffect) {
|
|
|
+ // loop over each firework, draw it, update it
|
|
|
+ var i = this.fireworks.length;
|
|
|
+ while (i--) {
|
|
|
+ this.fireworks[i].draw(this.effectHitCanvas, () => {
|
|
|
+ this.fireworks.splice(i, 1);
|
|
|
+ if (this.fireworks.length == 0) {
|
|
|
+ this.bDrawBoomEffect = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.effectHitCanvas.draw();
|
|
|
+ }, 30)
|
|
|
+ },
|
|
|
+ onJumpType(event) {
|
|
|
+ // console.log("onJumpType:", event);
|
|
|
+ if (this.isGameOver || !this.bJumpPlay) return;
|
|
|
+ this.eliminateJumpPrefab(event);
|
|
|
+ },
|
|
|
+
|
|
|
+ // update (dt) {}
|
|
|
+ //模拟测试调用
|
|
|
+ eliminateJumpPrefab(_jumpType) {
|
|
|
+ //只触发第二个
|
|
|
+ if (this.spawnArray.length < 3 || this.spawnAnimation != null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let _temp = this.spawnArray[2];
|
|
|
+ //如果当前的跳类型和预制目标一样
|
|
|
+ if (_jumpType == _temp.jumpCode) {
|
|
|
+ _temp.bTrigger = true;
|
|
|
+ this.deleteSpawn = this.spawnArray.splice(0, 1);
|
|
|
+
|
|
|
+ if (this.index < this.templatePool.length) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+ //这里更新特效
|
|
|
+ let _endTemp = Object.assign({}, _temp);
|
|
|
+ this.onDrawEffect(_endTemp);
|
|
|
+ //绘制新触发状态
|
|
|
+ this.onDraw('tipHit', true);
|
|
|
+ //成功
|
|
|
+ this.setEliminationCount(1);
|
|
|
+ //替换数组
|
|
|
+ // console.log(this.index + " == " + this.spawnArray.length);
|
|
|
+ if (this.spawnArray.length < 3 && this.index > 3) {
|
|
|
+ clearInterval(this.countdownInterval);
|
|
|
+ this.countdownInterval = null;
|
|
|
+ //绘制新触发状态
|
|
|
+ this.onDraw("normal", false);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.startJumpGame();
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ } 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.tempHitCount++;
|
|
|
+ this.taskSignCurCount++;
|
|
|
+ this.roundingCount += this.addShowCountUnit;
|
|
|
+ this.eliminationCount += value;
|
|
|
+
|
|
|
+ // this.eliminationLabel.string = '消除数量：' + this.eliminationCount.toString();
|
|
|
+ this.$emit('actionJumpDataUpdate', {
|
|
|
+ eliminationCount: this.eliminationCount,
|
|
|
+ faultCount: this.faultCount
|
|
|
+ });
|
|
|
+ this.jumpCalorie += puchConfig.getJumpCalorie(this.eliminationCount + 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.tempHitCount++;
|
|
|
+ this.faultCount += value;
|
|
|
+ // this.faultLabel.string = '失误：' + this.faultCount;
|
|
|
+ this.$emit('actionJumpDataUpdate', {
|
|
|
+ eliminationCount: this.eliminationCount,
|
|
|
+ faultCount: this.faultCount
|
|
|
+ });
|
|
|
+ this.jumpCalorie += puchConfig.getJumpCalorie(this.eliminationCount + 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onActionPlay() {
|
|
|
+ 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[2];
|
|
|
+ return _temp.jumpCode;
|
|
|
+ },
|
|
|
+
|
|
|
+ //监听跳的状态数据
|
|
|
+ listenStateDataOfJump(data) {
|
|
|
+
|
|
|
+ if (this.spawnArray.length < 3) return;
|
|
|
+ let _jumpType = this.getCurrentJumpType();
|
|
|
+ //初始全部默认状态
|
|
|
+ let _tempState = [{
|
|
|
+ jumpName: 'NORMAL',
|
|
|
+ jumpCode: 0,
|
|
|
+ bTrigger: false,
|
|
|
+ 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 = 0;
|
|
|
+
|
|
|
+ switch (_jumpType) {
|
|
|
+ case 0:
|
|
|
+ //JumpType.NORMAL = 0
|
|
|
+ _tempState[0].bTrigger = true;
|
|
|
+ this.eliminateJumpPrefabFormTemp(_tempState);
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ if (currentMaxValue < -_jumpLimit) {
|
|
|
+ //left jump
|
|
|
+ _tempState[1].bTrigger = true;
|
|
|
+ }
|
|
|
+ this.eliminateJumpPrefabFormTemp(_tempState);
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ if (currentMaxValue > _jumpLimit) {
|
|
|
+ //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;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ eliminateJumpPrefabFormTemp(_tempState) {
|
|
|
+ //只触发第三个
|
|
|
+ if (this.spawnArray.length < 3) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let _temp = this.spawnArray[2];
|
|
|
+ let bSuccess = false;
|
|
|
+ for (let i = 0; i < _tempState.length; i++) {
|
|
|
+ let _state = _tempState[i];
|
|
|
+ if (_state.bTrigger) {
|
|
|
+ console.log(this.eliminationCount + ',识别跳的类型:' + _state.describe + ',当前预制类型:' + _temp
|
|
|
+ .jumpName +
|
|
|
+ "\n直跳判断值:" + this.onLogData.currentMaxValue + ",旋转跳值:" + this.onLogData.oGyroValue);
|
|
|
+ }
|
|
|
+ //如果当前的跳类型和预制目标一样
|
|
|
+ if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
|
|
|
+ //成功
|
|
|
+ bSuccess = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //如果存在其中一个为true
|
|
|
+ if (bSuccess) {
|
|
|
+ _temp.bTrigger = true;
|
|
|
+ this.canSpawnTemp = _temp;
|
|
|
+ setTimeout(() => {
|
|
|
+ //这里更新特效
|
|
|
+ this.onDrawEffect(this.canSpawnTemp);
|
|
|
+ }, 150);
|
|
|
+ this.deleteSpawn = this.spawnArray.splice(0, 1);
|
|
|
+
|
|
|
+ if (this.index < this.templatePool.length) {
|
|
|
+ this.spawnArray.push(this.templatePool[this.index]);
|
|
|
+ this.index++;
|
|
|
+ }
|
|
|
+ //成功
|
|
|
+ this.setEliminationCount(1);
|
|
|
+ //替换数组
|
|
|
+ // console.log(this.index + " == " + this.spawnArray.length);
|
|
|
+ if (this.spawnArray.length < 3 && this.index > 3) {
|
|
|
+ clearInterval(this.countdownInterval);
|
|
|
+ this.countdownInterval = null;
|
|
|
+ //绘制新触发状态
|
|
|
+ this.canGoNext = true;
|
|
|
+ } else {
|
|
|
+ //绘制新触发状态
|
|
|
+ this.canOnDraw = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ //失误
|
|
|
+ this.setFaultCount(1);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @param {Object} gameData
|
|
|
+ * 识别跳部分数据处理
|
|
|
+ */
|
|
|
+ onBLEHitUpdate(gameData) {
|
|
|
+ console.log("gameData:",gameData);
|
|
|
+ if (!this.bJumpPlay || this.isGameOver || this.spawnAnimation != null) return;
|
|
|
+
|
|
|
+ // if (curAngleCeil < 30) {
|
|
|
+ // directionPunch = "straightPunch";
|
|
|
+ // name = "正向的直拳";
|
|
|
+ // ename = "front-straight";
|
|
|
+ // } else if (direction.x < 0) {
|
|
|
+ // directionPunch = "rightPunch";
|
|
|
+ // name = "正向的右拳";
|
|
|
+ // ename = "front-right";
|
|
|
+ // } else if (direction.x > 0) {
|
|
|
+ // directionPunch = "leftPunch";
|
|
|
+ // name = "正向的左拳";
|
|
|
+ // ename = "front-left";
|
|
|
+ // }
|
|
|
+ if (gameData.direction == "straightPunch") {
|
|
|
+ this.eliminateJumpPrefab(0);
|
|
|
+ } else if (gameData.direction == "leftPunch") {
|
|
|
+ this.eliminateJumpPrefab(1);
|
|
|
+ } else if (gameData.direction == "rightPunch") {
|
|
|
+ this.eliminateJumpPrefab(2);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+
|
|
|
+ onTipLevel() {
|
|
|
+ this.$emit("tipLevel", {
|
|
|
+ hiddenType: 'normal'
|
|
|
+ });
|
|
|
+ console.log("**************22");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .mid-absolute {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-jump-timer {
|
|
|
+ position: absolute;
|
|
|
+ top: -150rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-progress-vertical-container {
|
|
|
+ min-height: 376rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-progress-vertical-bar {
|
|
|
+ max-height: 376rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-progress-vertical-child {
|
|
|
+ width: 35px;
|
|
|
+ height: 7.36px;
|
|
|
+ margin: 7.36px 0 0 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-progress-vertical-active {
|
|
|
+ width: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-progress-vertical-inactive {
|
|
|
+ width: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sprite-yellow-arrow {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ width: 194px;
|
|
|
+ height: 232px;
|
|
|
+ background-image: url('@/static/modal/action-jump/yellow-arrow.png');
|
|
|
+
|
|
|
+ // border: 1rpx solid #00CE47;
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation-play-state-play {
|
|
|
+ animation: yellowArrowRun 1s steps(1, end); // infinite
|
|
|
+ animation-play-state: running;
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation-play-state-paused {
|
|
|
+ animation-play-state: paused;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 箭头动画
|
|
|
+ */
|
|
|
+ @keyframes yellowArrowRun {
|
|
|
+ 0% {
|
|
|
+ background-position: -0px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 5% {
|
|
|
+ background-position: -0px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 10% {
|
|
|
+ background-position: -194px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 15% {
|
|
|
+ background-position: -388px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 20% {
|
|
|
+ background-position: -582px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 25% {
|
|
|
+ background-position: -776px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 30% {
|
|
|
+ background-position: -0px -232px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 35% {
|
|
|
+ background-position: -194px -232px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 40% {
|
|
|
+ background-position: -388px -232px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 45% {
|
|
|
+ background-position: -582px -232px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ background-position: -776px -232px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 55% {
|
|
|
+ background-position: -0px -464px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 60% {
|
|
|
+ background-position: -194px -464px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 65% {
|
|
|
+ background-position: -388px -464px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 70% {
|
|
|
+ background-position: -582px -464px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 75% {
|
|
|
+ background-position: -776px -464px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 80% {
|
|
|
+ background-position: -0px -696px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 85% {
|
|
|
+ background-position: -194px -696px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 90% {
|
|
|
+ background-position: -388px -696px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 95% {
|
|
|
+ background-position: -582px -696px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position: -776px -696px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sprite-rightToLeftArrow {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ width: 317px;
|
|
|
+ height: 42px;
|
|
|
+ background-image: url('@/static/modal/action-jump/rightToLeftArrow.png');
|
|
|
+
|
|
|
+ // border: 1rpx solid #00CE47;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sprite-rightToLeftArrow-play {
|
|
|
+ animation: rightToLeftArrowRun 1s steps(1, end) infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rightToLeftArrowRun {
|
|
|
+ 0% {
|
|
|
+ background-position: -0px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 3.33% {
|
|
|
+ background-position: -0px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 6.66% {
|
|
|
+ background-position: -317px -0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 9.99% {
|
|
|
+ background-position: -0px -42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 13.33% {
|
|
|
+ background-position: -317px -42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 16.66% {
|
|
|
+ background-position: -0px -84px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 19.99% {
|
|
|
+ background-position: -317px -84px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 23.33% {
|
|
|
+ background-position: -0px -126px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 26.66% {
|
|
|
+ background-position: -317px -126px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 29.99% {
|
|
|
+ background-position: -0px -168px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 33.33% {
|
|
|
+ background-position: -317px -168px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 36.66% {
|
|
|
+ background-position: -0px -210px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 39.99% {
|
|
|
+ background-position: -317px -210px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 43.33% {
|
|
|
+ background-position: -0px -252px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 46.66% {
|
|
|
+ background-position: -317px -252px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 49.99% {
|
|
|
+ background-position: -0px -294px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 53.33% {
|
|
|
+ background-position: -317px -294px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 56.66% {
|
|
|
+ background-position: -0px -336px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 59.99% {
|
|
|
+ background-position: -317px -336px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 63.33% {
|
|
|
+ background-position: -0px -378px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 66.66% {
|
|
|
+ background-position: -317px -378px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 69.99% {
|
|
|
+ background-position: -0px -420px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 73.33% {
|
|
|
+ background-position: -317px -420px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 76.66% {
|
|
|
+ background-position: -0px -462px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 79.99% {
|
|
|
+ background-position: -317px -462px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 83.33% {
|
|
|
+ background-position: -0px -504px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 86.66% {
|
|
|
+ background-position: -317px -504px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 89.99% {
|
|
|
+ background-position: -0px -546px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 93.33% {
|
|
|
+ background-position: -317px -546px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 96.66% {
|
|
|
+ background-position: -0px -588px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position: -317px -588px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
