0818-eve
This commit is contained in:
parent
51bc39ca0c
commit
60ea3a7032
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 52 KiB |
BIN
src/assets/game/点击进入下一步.webp
Normal file
BIN
src/assets/game/点击进入下一步.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/assets/icons/bigcion1.webp
Normal file
BIN
src/assets/icons/bigcion1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
@ -40,7 +40,6 @@ export default {
|
||||
[new URL('./icons/icon5.webp', import.meta.url).href, new URL('./icons/bigicon5.webp', import.meta.url).href],
|
||||
[new URL('./icons/icon6.webp', import.meta.url).href, new URL('./icons/bigicon6.webp', import.meta.url).href],
|
||||
[new URL('./icons/icon7.webp', import.meta.url).href, new URL('./icons/bigicon7.webp', import.meta.url).href],
|
||||
[new URL('./icons/icon8.webp', import.meta.url).href, new URL('./icons/bigicon8.webp', import.meta.url).href],
|
||||
],
|
||||
metal:[
|
||||
[new URL('./game/metal_0.webp', import.meta.url).href,],
|
||||
|
||||
@ -422,6 +422,14 @@ async function finishCollect() {
|
||||
easing: 'cubic-bezier(0.53,-0.7, 0.25, 1)',
|
||||
fill: 'forwards',
|
||||
})
|
||||
document.querySelector('.finish-collect-btn-notice')?.animate([
|
||||
{ transform: 'scale(1)' },
|
||||
{ transform: 'scale(0)' },
|
||||
], {
|
||||
duration: 500,
|
||||
easing: 'cubic-bezier(0.53,-0.7, 0.25, 1)',
|
||||
fill: 'forwards',
|
||||
})
|
||||
|
||||
showTitleIcon.value = true;
|
||||
|
||||
@ -504,7 +512,7 @@ import Button from '../components/Button.vue';
|
||||
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
giftProgress.value = 7;
|
||||
giftProgress.value = 6;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -514,11 +522,14 @@ window.addEventListener('keydown', (e) => {
|
||||
|
||||
<div class="public">
|
||||
|
||||
<img src="../assets/game/床.webp" alt="" class="abs bed" style="width: 66vw;bottom: 12%;left: 17%;">
|
||||
<img src="../assets/game/床.webp" alt="" class="abs bed"
|
||||
style="width: 66vw;bottom: 12%;left: 17%;">
|
||||
|
||||
<AniEle :url="assets.ani.下拉蓄力提示" ref="shoot-notice" :height="334" :width="337" :rules="[
|
||||
{ name: '蓄力', frame: 241, loop: 2 },
|
||||
]" class="abs arrow" style="bottom: 7%;width: 30vw;left: 35%;" @pointerdown.once="shoot" />
|
||||
<AniEle :url="assets.ani.下拉蓄力提示" ref="shoot-notice" :height="334"
|
||||
:width="337" :rules="[
|
||||
{ name: '蓄力', frame: 241, loop: 2 },
|
||||
]" class="abs arrow" style="bottom: 7%;width: 30vw;left: 35%;"
|
||||
@pointerdown.once="shoot" />
|
||||
|
||||
<div class="sun-ani-wrapper abs" v-if="!showEndAni" :style="{
|
||||
width: '60vw',
|
||||
@ -530,40 +541,48 @@ window.addEventListener('keydown', (e) => {
|
||||
transition: transitionOn ? 'all 0.1s ease' : undefined
|
||||
}">
|
||||
|
||||
<AniEle :url="assets.ani.小太阳总" ref="sun-ani" class="sun-ani" :height="1800" :width="1600" :rules="[
|
||||
{ name: '起飞前', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
|
||||
{ name: '蓄力飞', frame: 181, loop: 1, pauseAfter: false, duration: 33 },
|
||||
{ name: '天上飞', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
|
||||
{ name: '落下', frame: 382, loop: 1, pauseAfter: false, duration: 33 },
|
||||
]" style="width: 100%; height: auto;" :auto-play="false" />
|
||||
<AniEle :url="assets.ani.小太阳总" ref="sun-ani" class="sun-ani"
|
||||
:height="1800" :width="1600" :rules="[
|
||||
{ name: '起飞前', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
|
||||
{ name: '蓄力飞', frame: 181, loop: 1, pauseAfter: false, duration: 33 },
|
||||
{ name: '天上飞', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
|
||||
{ name: '落下', frame: 382, loop: 1, pauseAfter: false, duration: 33 },
|
||||
]" style="width: 100%; height: auto;" :auto-play="false" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="in-game" v-if="gameState >= GAME_STATE.ingame && gameState < GAME_STATE.poster">
|
||||
<div class="in-game"
|
||||
v-if="gameState >= GAME_STATE.ingame && gameState < GAME_STATE.poster">
|
||||
<ActionArea @gToggle="gToggle" ref="action-area" />
|
||||
|
||||
<img class="abs gift-item" v-for="(gift, index) in giftList" :src="gift[0]" style="width: 20vw;"
|
||||
<img class="abs gift-item" v-for="(gift, index) in giftList"
|
||||
:src="gift[0]" style="width: 20vw;"
|
||||
v-if="gameState < GAME_STATE.gameEnd" :style="{
|
||||
display: giftProgress == index ? 'block' : 'none',
|
||||
bottom: `calc(45% + ${giftData.giftPos[1] ?? 0}vw)`, left: `calc(39.5% + ${giftData.giftPos[0] ?? 0}vw)`, transition: transitionOn ? `all 0.1s ease` : undefined
|
||||
}" alt="" :class="{ show: giftProgress == index, hide: giftProgress != index }">
|
||||
}" alt=""
|
||||
:class="{ show: giftProgress == index, hide: giftProgress != index }">
|
||||
|
||||
<img src="../assets/game/操作提示.webp" class="abs prompt" alt="" style="width: 31%; bottom: 18%; left: 34%; ">
|
||||
<img src="../assets/game/操作提示.webp" class="abs prompt" alt=""
|
||||
style="width: 31%; bottom: 18%; left: 34%; ">
|
||||
<img src="../assets/game/风.webp" alt="" class="abs wind">
|
||||
<img src="../assets/game/wecare.webp" alt="" class="abs wecare" style="width: 24vw;
|
||||
<img src="../assets/game/wecare.webp" alt="" class="abs wecare"
|
||||
style="width: 24vw;
|
||||
left: 50%; top: 6%; transform: translateX(-50%);">
|
||||
<div class="dot" v-if="gameState == GAME_STATE.ingame">
|
||||
<div v-for="(_, index) in giftList" :key="index" class="dot-item"
|
||||
:class="{ finished: index < giftProgress }" @click="giftProgress = index">
|
||||
<div v-for="(_, index) in giftList" :key="index"
|
||||
class="dot-item" :class="{ finished: index < giftProgress }"
|
||||
@click="giftProgress = index">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sun-ani-end-wrapper abs" style="pointer-events: none; inset: 0; width: 100%;z-index: 2;"
|
||||
<div class="sun-ani-end-wrapper abs"
|
||||
style="pointer-events: none; inset: 0; width: 100%;z-index: 2;"
|
||||
:style="{ display: showEndAni ? 'block' : 'none' }">
|
||||
|
||||
<AniEle :url="assets.ani.后段效果" :auto-play="false" ref="sun-ani-end" class="sun-ani-end" :height="2462"
|
||||
:width="1179" :rules="[
|
||||
<AniEle :url="assets.ani.后段效果" :auto-play="false" ref="sun-ani-end"
|
||||
class="sun-ani-end" :height="2462" :width="1179" :rules="[
|
||||
// 0 - 97
|
||||
{ name: '进入', frame: 98, loop: 1, pauseAfter: false, duration: 33 },
|
||||
// 98 - 129
|
||||
@ -588,35 +607,47 @@ window.addEventListener('keydown', (e) => {
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<Quiz :fmt-time="fmtTime" v-if="gameState == GAME_STATE.quiz" @finish-quiz="handleFinishQuiz" />
|
||||
<Quiz :fmt-time="fmtTime" v-if="gameState == GAME_STATE.quiz"
|
||||
@finish-quiz="handleFinishQuiz" />
|
||||
|
||||
|
||||
<div class="scoreboard" v-if="gameState >= GAME_STATE.leaderboard">
|
||||
<ScoreBoard :leaderBoard="leaderBoard" :fmtTime="fmtTime" v-if="gameState >= GAME_STATE.leaderboard" />
|
||||
|
||||
<img src="../assets/game/完成收集.webp" alt="" v-if="gameState >= GAME_STATE.leaderboard"
|
||||
@click.once="AudioEffects.play('按钮音效'); finishCollect()" class="finish-collect-btn abs">
|
||||
<ScoreBoard :leaderBoard="leaderBoard" :fmtTime="fmtTime"
|
||||
v-if="gameState >= GAME_STATE.leaderboard" />
|
||||
<img src="../assets/game/点击进入下一步.webp" alt=""
|
||||
v-if="gameState >= GAME_STATE.leaderboard"
|
||||
class="finish-collect-btn-notice abs">
|
||||
<img src="../assets/game/完成收集.webp" alt=""
|
||||
v-if="gameState >= GAME_STATE.leaderboard"
|
||||
@click.once="AudioEffects.play('按钮音效'); finishCollect()"
|
||||
class="finish-collect-btn abs">
|
||||
</div>
|
||||
|
||||
|
||||
<LastPage :userdata="userdata" :time-spent="fmtTime(timeSpent)" v-if="gameState == GAME_STATE.poster"
|
||||
@reset-game="emit('restart')" @show-share-mask="showShareMask = true" />
|
||||
<LastPage :userdata="userdata" :time-spent="fmtTime(timeSpent)"
|
||||
v-if="gameState == GAME_STATE.poster" @reset-game="emit('restart')"
|
||||
@show-share-mask="showShareMask = true" />
|
||||
|
||||
<Transition name="gift-popup">
|
||||
<div v-if="showGiftDesc" class="gift-popup">
|
||||
<img :src="giftList[giftProgress][1]" alt="" class="abs" style="width: 82%; left: 9%; top: 11%;">
|
||||
<img src="../assets/game/收下福利.webp" alt="" class="abs" style="width: 14%; left: 43%; top: 54%;"
|
||||
<img :src="giftList[giftProgress][1]" alt="" class="abs"
|
||||
style="width: 82%; left: 9%; top: 11%;">
|
||||
<img src="../assets/game/收下福利.webp" alt="" class="abs"
|
||||
style="width: 14%; left: 43%; top: 54%;"
|
||||
@click="AudioEffects.play('按钮音效'); gameLoop()">
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<Transition name="fade">
|
||||
<img src="../assets/game/wecare.webp" alt="" class="abs wecare" style="width: 24vw;
|
||||
left: 50%; top: 6%; transform: translateX(-50%);" v-if="showTitleIcon">
|
||||
<img src="../assets/game/wecare.webp" alt="" class="abs wecare"
|
||||
style="width: 24vw;
|
||||
left: 50%; top: 6%; transform: translateX(-50%);"
|
||||
v-if="showTitleIcon">
|
||||
</Transition>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="showShareMask" class="share-mask" @click="showShareMask = false">
|
||||
<div v-if="showShareMask" class="share-mask"
|
||||
@click="showShareMask = false">
|
||||
<img src="../assets/game/share_mask.webp" alt="">
|
||||
</div>
|
||||
</Transition>
|
||||
@ -625,6 +656,16 @@ window.addEventListener('keydown', (e) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.finish-collect-btn-notice{
|
||||
scale: 0;
|
||||
animation: scale-in 0.2s ease-out forwards;
|
||||
animation-delay: 1.5s;
|
||||
bottom: 14%;
|
||||
left: 33.5%;
|
||||
width: 33vw;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.finish-collect-btn {
|
||||
scale: 0;
|
||||
animation: scale-in 0.5s ease-out forwards;
|
||||
|
||||
@ -415,7 +415,7 @@ onUnmounted(() => {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
top: 52%;
|
||||
top: -1%;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user