|
@@ -43,7 +43,7 @@
|
|
<view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
|
|
<view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
|
|
<image style="width: 110px;height: 110px;" src="../../../static/modal/action-jump/midButton.png">
|
|
<image style="width: 110px;height: 110px;" src="../../../static/modal/action-jump/midButton.png">
|
|
</image>
|
|
</image>
|
|
-
|
|
|
|
|
|
+
|
|
<image v-if="!bJumpPlay" class="mid-absolute" style=" width: 28rpx;height: 28rpx;"
|
|
<image v-if="!bJumpPlay" class="mid-absolute" style=" width: 28rpx;height: 28rpx;"
|
|
src="../../../static/modal/action-jump/midPlay.png">
|
|
src="../../../static/modal/action-jump/midPlay.png">
|
|
</image>
|
|
</image>
|
|
@@ -73,15 +73,20 @@
|
|
</view> -->
|
|
</view> -->
|
|
|
|
|
|
</view>
|
|
</view>
|
|
- <canvas canvas-id="actionJumpCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
|
|
|
|
|
+ <view class="position-relative">
|
|
|
|
+ <canvas canvas-id="actionJumpCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
|
|
|
+ <canvas class="position-absolute-center" canvas-id="effectCanvas"
|
|
|
|
+ :style="{ width: canvasW + 'px', height: '164px' }"></canvas>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
<view class="flex align-center justify-center" style="width: 750rpx;">
|
|
<view class="flex align-center justify-center" style="width: 750rpx;">
|
|
<view class="flex justify-center align-center" style="height: 120rpx; width: 444rpx; ">
|
|
<view class="flex justify-center align-center" style="height: 120rpx; width: 444rpx; ">
|
|
- <view class="text-12px text-white text-center">
|
|
|
|
|
|
+ <view class="text-12px text-white text-center">
|
|
{{taskDescribe}}
|
|
{{taskDescribe}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
|
|
|
|
<!-- <view style="height: 41px;"></view> -->
|
|
<!-- <view style="height: 41px;"></view> -->
|
|
|
|
|
|
@@ -105,7 +110,6 @@
|
|
<view style="font-size: 14px;">e:{{eliminationCount}}</view>
|
|
<view style="font-size: 14px;">e:{{eliminationCount}}</view>
|
|
<view style="font-size: 14px;">f:{{faultCount}}</view>
|
|
<view style="font-size: 14px;">f:{{faultCount}}</view>
|
|
</view> -->
|
|
</view> -->
|
|
-
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
</template>
|
|
@@ -116,6 +120,8 @@
|
|
CONDITIONPASSED
|
|
CONDITIONPASSED
|
|
} from "@/util/util-js/enum.js"
|
|
} from "@/util/util-js/enum.js"
|
|
|
|
|
|
|
|
+ import Firework from "@/util/util-js/effect/firework.js"
|
|
|
|
+
|
|
import {
|
|
import {
|
|
mapState,
|
|
mapState,
|
|
mapMutations
|
|
mapMutations
|
|
@@ -281,7 +287,27 @@
|
|
/**
|
|
/**
|
|
* 是否显示关卡提示
|
|
* 是否显示关卡提示
|
|
*/
|
|
*/
|
|
- bTipLevel: false
|
|
|
|
|
|
+ bTipLevel: false,
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 烟花相关
|
|
|
|
+ */
|
|
|
|
+ // firework collection
|
|
|
|
+ fireworks: [],
|
|
|
|
+ fireworkImage: null,
|
|
|
|
+ loop: null,
|
|
|
|
+ count: 100,
|
|
|
|
+ effectCanvas: null,
|
|
|
|
+ effectCurrentSpawn: null,
|
|
|
|
+ effectSpawnPosX: 0,
|
|
|
|
+ /**
|
|
|
|
+ * 管理三个绘制
|
|
|
|
+ */
|
|
|
|
+ bDrawBg: false,
|
|
|
|
+ bDrawJump: false,
|
|
|
|
+ bKeepBg: false,
|
|
|
|
+ bKeepType: '',
|
|
|
|
+ bDrawBoomEffect: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -310,7 +336,7 @@
|
|
created() {
|
|
created() {
|
|
let _self = this;
|
|
let _self = this;
|
|
this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
|
|
this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
|
|
- // console.log("this.actionJumpCanvas:", this.actionJumpCanvas);
|
|
|
|
|
|
+ this.effectCanvas = uni.createCanvasContext("effectCanvas", this);
|
|
// this.SystemInfo = this.systemInfo; // uni.getSystemInfoSync();
|
|
// this.SystemInfo = this.systemInfo; // uni.getSystemInfoSync();
|
|
this.canvasW = this.systemInfo.windowWidth; // 画布宽度
|
|
this.canvasW = this.systemInfo.windowWidth; // 画布宽度
|
|
this.canvasH = 114;
|
|
this.canvasH = 114;
|
|
@@ -425,6 +451,17 @@
|
|
_self.cankao = image;
|
|
_self.cankao = image;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 烟花照片
|
|
|
|
+ */
|
|
|
|
+ uni.getImageInfo({
|
|
|
|
+ src: "../../../static/modal/action-jump/boom.png",
|
|
|
|
+ success: function(image) {
|
|
|
|
+ _self.fireworkImage = image;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 重置生成数组,重置倒计时
|
|
* 重置生成数组,重置倒计时
|
|
@@ -602,12 +639,15 @@
|
|
},
|
|
},
|
|
//单纯的绘制八个背景
|
|
//单纯的绘制八个背景
|
|
onDrawBg() {
|
|
onDrawBg() {
|
|
|
|
+ this.bDrawBg = true;
|
|
|
|
+ this.bKeepBg = true;
|
|
this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
|
|
this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
|
|
let _currentBgStartX = this.canvasW / 2;
|
|
let _currentBgStartX = this.canvasW / 2;
|
|
let count = 4;
|
|
let count = 4;
|
|
for (let i = 0; i < count; i++) {
|
|
for (let i = 0; i < count; i++) {
|
|
let _currentStartPos = _currentBgStartX - i * 50 - 50;
|
|
let _currentStartPos = _currentBgStartX - i * 50 - 50;
|
|
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114);
|
|
|
|
|
|
+ this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50,
|
|
|
|
+ 114);
|
|
let _currentEndPos = _currentBgStartX + i * 50;
|
|
let _currentEndPos = _currentBgStartX + i * 50;
|
|
this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);
|
|
this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);
|
|
|
|
|
|
@@ -615,8 +655,10 @@
|
|
this.actionJumpCanvas.draw();
|
|
this.actionJumpCanvas.draw();
|
|
},
|
|
},
|
|
onDraw(type) {
|
|
onDraw(type) {
|
|
|
|
+ this.bDrawJump = true;
|
|
|
|
+ this.bKeepBg = false;
|
|
|
|
+ this.bKeepType = type;
|
|
this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
|
|
this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
|
|
-
|
|
|
|
//计算一个对象
|
|
//计算一个对象
|
|
let _drawObj = {
|
|
let _drawObj = {
|
|
path: null,
|
|
path: null,
|
|
@@ -667,7 +709,8 @@
|
|
//绘制前背景
|
|
//绘制前背景
|
|
for (let i = 0; i < count; i++) {
|
|
for (let i = 0; i < count; i++) {
|
|
let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
|
|
let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
|
|
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114)
|
|
|
|
|
|
+ this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0,
|
|
|
|
+ 50, 114)
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -691,6 +734,9 @@
|
|
|
|
|
|
//57 - 40/2 是取画布中心y点,减去图标本身高的一半的值
|
|
//57 - 40/2 是取画布中心y点,减去图标本身高的一半的值
|
|
this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);
|
|
this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);
|
|
|
|
+
|
|
|
|
+ //这里记录一个生成点,后面用于生成特效
|
|
|
|
+ this.effectSpawnPosX = _currentCenterPos - 8;
|
|
} else {
|
|
} else {
|
|
_currentPos = (_currentBgStartX + _addData + _pos *
|
|
_currentPos = (_currentBgStartX + _addData + _pos *
|
|
50) * this
|
|
50) * this
|
|
@@ -703,6 +749,7 @@
|
|
|
|
|
|
//44.5 是取画布中心y点,减去图标本身高的一半的值
|
|
//44.5 是取画布中心y点,减去图标本身高的一半的值
|
|
this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);
|
|
this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
this.actionJumpCanvas.restore();
|
|
this.actionJumpCanvas.restore();
|
|
@@ -711,10 +758,12 @@
|
|
//绘制结束位置
|
|
//绘制结束位置
|
|
// console.log("count:", count);
|
|
// console.log("count:", count);
|
|
for (let i = 0; i < count; i++) {
|
|
for (let i = 0; i < count; i++) {
|
|
- let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length + i) * 50;
|
|
|
|
|
|
+ let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length +
|
|
|
|
+ i) * 50;
|
|
|
|
|
|
// console.log("end _currentEndPos:", _currentEndPos);
|
|
// console.log("end _currentEndPos:", _currentEndPos);
|
|
- this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114)
|
|
|
|
|
|
+ this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0,
|
|
|
|
+ 50, 114)
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@@ -723,6 +772,21 @@
|
|
|
|
|
|
this.actionJumpCanvas.draw();
|
|
this.actionJumpCanvas.draw();
|
|
},
|
|
},
|
|
|
|
+ onDrawEffect(_temp) {
|
|
|
|
+ //根据当前消除的生成一个
|
|
|
|
+ // console.log("生成的_temp:" + JSON.stringify(_temp));
|
|
|
|
+ let spawnTemp = this.midJump;
|
|
|
|
+ if (_temp.icon == 'directionJump') {
|
|
|
|
+ spawnTemp = this.directionJump;
|
|
|
|
+ } else if (_temp.icon == 'rotateJump') {
|
|
|
|
+ spawnTemp = this.rotateJump;
|
|
|
|
+ }
|
|
|
|
+ let tempFirework = new Firework(this.fireworkImage,
|
|
|
|
+ spawnTemp, _temp.scaleX, this.effectSpawnPosX, 0, this.canvasW, 164);
|
|
|
|
+ this.fireworks.push(tempFirework);
|
|
|
|
+ this.bDrawBoomEffect = true;
|
|
|
|
+ this.onInitFirework();
|
|
|
|
+ },
|
|
onClear() {
|
|
onClear() {
|
|
this.resetJumpGame();
|
|
this.resetJumpGame();
|
|
|
|
|
|
@@ -736,6 +800,40 @@
|
|
this.actionJumpObj.resetAll();
|
|
this.actionJumpObj.resetAll();
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 统一绘制 效果 背景,交互,烟花
|
|
|
|
+ */
|
|
|
|
+ onInitFirework() {
|
|
|
|
+ if (this.loop != null) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.loop = setInterval(() => {
|
|
|
|
+ if (!this.bDrawBoomEffect) {
|
|
|
|
+ clearInterval(this.loop);
|
|
|
|
+ this.loop = null;
|
|
|
|
+ // console.log("结束绘制");
|
|
|
|
+ this.effectCanvas.clearRect(0, 0, this.canvasW, 164);
|
|
|
|
+ this.effectCanvas.draw();
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.effectCanvas.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.effectCanvas, () => {
|
|
|
|
+ this.fireworks.splice(i, 1);
|
|
|
|
+ if (this.fireworks.length == 0) {
|
|
|
|
+ this.bDrawBoomEffect = false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.effectCanvas.draw();
|
|
|
|
+ }, 30)
|
|
|
|
+ },
|
|
onJumpType(event) {
|
|
onJumpType(event) {
|
|
// console.log("onJumpType:", event);
|
|
// console.log("onJumpType:", event);
|
|
if (this.isGameOver || !this.bJumpPlay) return;
|
|
if (this.isGameOver || !this.bJumpPlay) return;
|
|
@@ -743,13 +841,20 @@
|
|
},
|
|
},
|
|
|
|
|
|
// update (dt) {}
|
|
// update (dt) {}
|
|
-
|
|
|
|
|
|
+ //模拟测试调用
|
|
eliminateJumpPrefab(_jumpType) {
|
|
eliminateJumpPrefab(_jumpType) {
|
|
let _temp = this.spawnArray[this.index];
|
|
let _temp = this.spawnArray[this.index];
|
|
|
|
+ // let _temp = this.jumpTypeArray[Math.floor(Math.random()*4) ];
|
|
|
|
+ //这里更新特效
|
|
|
|
+ // this.onDrawEffect(_temp);
|
|
|
|
+ // return;
|
|
//如果当前的跳类型和预制目标一样
|
|
//如果当前的跳类型和预制目标一样
|
|
if (_jumpType == _temp.jumpCode) {
|
|
if (_jumpType == _temp.jumpCode) {
|
|
_temp.bTrigger = true;
|
|
_temp.bTrigger = true;
|
|
this.index++;
|
|
this.index++;
|
|
|
|
+ //这里更新特效
|
|
|
|
+ let _endTemp = Object.assign({}, _temp);
|
|
|
|
+ this.onDrawEffect(_endTemp);
|
|
if (this.index >= this.spawnArray.length) {
|
|
if (this.index >= this.spawnArray.length) {
|
|
clearInterval(this.countdownInterval);
|
|
clearInterval(this.countdownInterval);
|
|
this.countdownInterval = null;
|
|
this.countdownInterval = null;
|
|
@@ -921,7 +1026,7 @@
|
|
},
|
|
},
|
|
|
|
|
|
getCurrentJumpType() {
|
|
getCurrentJumpType() {
|
|
- let _temp = this.spawnArray[this.index];;
|
|
|
|
|
|
+ let _temp = this.spawnArray[this.index];
|
|
return _temp.jumpCode;
|
|
return _temp.jumpCode;
|
|
},
|
|
},
|
|
|
|
|
|
@@ -1075,6 +1180,8 @@
|
|
// console.log("bSuccess:", bSuccess);
|
|
// console.log("bSuccess:", bSuccess);
|
|
_temp.bTrigger = true;
|
|
_temp.bTrigger = true;
|
|
this.index++;
|
|
this.index++;
|
|
|
|
+ //这里更新特效
|
|
|
|
+ this.onDrawEffect(_temp);
|
|
if (this.index >= this.spawnArray.length) {
|
|
if (this.index >= this.spawnArray.length) {
|
|
clearInterval(this.countdownInterval);
|
|
clearInterval(this.countdownInterval);
|
|
this.countdownInterval = null;
|
|
this.countdownInterval = null;
|
|
@@ -1192,23 +1299,6 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<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 {
|
|
.mid-absolute {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|