feat: game5-h5端第一个页面

frontend-h5/src/pages/game5/Game5.vue

+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { cssAssetUrl } from '@/commons/assets.ts'
+import MobileStage from '@/components/MobileStage.vue'
+import { useGameSocket, joinSharedRoom, sendGameMessage, userJoinStatus } from '@/composables/useGameSocket'
+import LoadingView from './views/LoadingView.vue'
+import PlayingView from './views/PlayingView.vue'
+import ScoreView from './views/ScoreView.vue'
+import { $getWechat } from '@/commons/utils.ts'
+import { playGame1Music } from '@/commons/music'
+
+type GameView = 'loading' | 'playing' | 'score'
+
+const imageUrls = {
+    bg: cssAssetUrl('game5/bg.webp'),
+    bg2: cssAssetUrl('game1/bg2.png'),
+    logo: cssAssetUrl('logo.png'),
+    title: cssAssetUrl('game5/title.webp'),
+    avatar: cssAssetUrl('avatar-yellow.png'),
+    gu: cssAssetUrl('game1/gu.png'),
+    clock: cssAssetUrl('game1/clock.png'),
+    contdown: cssAssetUrl('game5/countdown-title-bg.webp'),
+    startBg: cssAssetUrl('game5/loading-start-bg.webp'),
+    gu01: cssAssetUrl('game1/gu01.png'),
+    gu02: cssAssetUrl('game1/gu02.png'),
+    gu03: cssAssetUrl('game1/gu03.png'),
+    scoreBg: cssAssetUrl('game1/score-bg.png'),
+    back: cssAssetUrl('game1/back.png'),
+    replay: cssAssetUrl('game1/replay.png'),
+    close: cssAssetUrl('game1/close.png'),
+
+    rule: cssAssetUrl('game1/rule.png')
+}
+
+const wechat = $getWechat()
+const currentView = ref<GameView>('loading')
+const countdownInterval = ref(60)
+const isDivDescVisible = ref(false)
+const tick = ref(0)  //点击次数
+const rank = ref(0)  //排名
+const guFrames: [string, string, string] = [imageUrls.gu01, imageUrls.gu02, imageUrls.gu03]
+const currentGu = ref(imageUrls.gu01)
+const isGuPlaying = ref(false)
+const token = ref(wechat?.token ?? '')
+const nickname = ref(wechat?.nickname ?? '')
+const avatar = ref(wechat?.avatar ?? '')
+const showGameRule = ref(false)
+
+const mobileStageRef = ref<InstanceType<typeof MobileStage> | null>(null)
+const _offSocketMessage = ref<(() => void) | undefined>()
+let guFrameTimer: ReturnType<typeof window.setTimeout> | undefined
+let gameCountdownTimer: ReturnType<typeof window.setTimeout> | undefined
+
+const confirmRefresh = (event: BeforeUnloadEvent) => {
+    event.preventDefault()
+    event.returnValue = ''
+}
+
+function setDivDescVisible(visible: boolean) {
+    isDivDescVisible.value = visible
+}
+
+function stopGameCountdown() {
+    if (gameCountdownTimer) {
+        window.clearTimeout(gameCountdownTimer)
+        gameCountdownTimer = undefined
+    }
+}
+
+function submitScore(save: boolean = false) {
+    //最后提交保存在数据库中
+    if (save) {
+        //item_num 游戏项目(1到6)
+        //wechat 原始token
+        sendGameMessage('submit_score_save', {
+            score: tick.value,
+            wechat: wechat.token_origin,
+            item_num: 1,
+            nickname: wechat.nickname,
+            avatar: wechat.avatar,
+            rank: rank.value,
+        })
+    } else {
+        sendGameMessage('submit_score', { score: tick.value })
+    }
+}
+
+function startGameCountdown(seconds = 60) {
+    stopGameCountdown()
+    countdownInterval.value = seconds
+    setDivDescVisible(true)
+
+    const tickCountdown = () => {
+        countdownInterval.value -= 1
+
+        if (countdownInterval.value <= 0) {
+            countdownInterval.value = 0
+            gameCountdownTimer = undefined
+            setDivDescVisible(false)
+            submitScore(true)
+            showScoreView()
+            return
+        }
+
+        gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
+    }
+
+    gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
+}
+
+function showLoadingView() {
+    stopGameCountdown()
+    currentView.value = 'loading'
+    setDivDescVisible(false)
+}
+
+function resetToLoadingView() {
+    stopGameCountdown()
+    if (guFrameTimer) {
+        window.clearTimeout(guFrameTimer)
+        guFrameTimer = undefined
+    }
+    tick.value = 0
+    rank.value = 0
+    countdownInterval.value = 60
+    currentGu.value = guFrames[0]
+    isGuPlaying.value = false
+    userJoinStatus.value = false
+    currentView.value = 'loading'
+    setDivDescVisible(false)
+}
+
+function startGameView() {
+    stopGameCountdown()
+    tick.value = 0
+    currentGu.value = guFrames[0]
+    currentView.value = 'playing'
+    startGameCountdown()
+}
+
+function showScoreView() {
+    stopGameCountdown()
+    setDivDescVisible(false)
+    currentView.value = 'score'
+}
+
+
+function handleRoomBack() {
+    resetToLoadingView()
+    window.setTimeout(() => {
+        joinSharedRoom(nickname.value, token.value, avatar.value)
+    }, 200)
+}
+
+const touchHandler = () => {
+    if (isGuPlaying.value) {
+        return
+    }
+
+    tick.value += 5
+    submitScore()
+    playGame1Music();
+    isGuPlaying.value = true
+
+    let frameIndex = 0
+    const playNextFrame = () => {
+        currentGu.value = guFrames[frameIndex] ?? imageUrls.gu01
+        frameIndex += 1
+
+        if (frameIndex >= guFrames.length) {
+            guFrameTimer = window.setTimeout(() => {
+                currentGu.value = guFrames[0]
+                isGuPlaying.value = false
+                guFrameTimer = undefined
+            }, 200)
+            return
+        }
+
+        guFrameTimer = window.setTimeout(playNextFrame, 200)
+    }
+
+    playNextFrame()
+}
+
+if (wechat) {
+    const { offSocketMessage } = useGameSocket({
+        gameId: 'game5',
+        auth: {
+            userid: wechat.token,
+        },
+        onConnect: () => {
+            window.setTimeout(() => {
+                const joined = joinSharedRoom(nickname.value, token.value, avatar.value)
+            }, 200)
+        },
+        onGameStart: async () => {
+            showGameRule.value = false;
+            await mobileStageRef.value?.startCountdown()
+            startGameView()
+        },
+        onScoreSubmitted: (is_save, data) => {
+            if (!is_save) {//非保存状态下
+                const nextRank = Number(typeof data === 'object' ? data?.rank : data)
+                if (Number.isFinite(nextRank) && nextRank > 0) {
+                    rank.value = nextRank
+                }
+            }
+        },
+        onRescoreSubmitted: (_recount) => {
+            submitScore(true);
+        },
+        onRoomClosed: showLoadingView,
+        onRoomBack: handleRoomBack,
+    })
+    _offSocketMessage.value = offSocketMessage
+}
+
+onMounted(() => {
+    document.title = '小游戏 - 圈彩纳福'
+    if (token.value) {
+        window.addEventListener('beforeunload', confirmRefresh)
+    }
+})
+
+onBeforeUnmount(() => {
+    _offSocketMessage.value?.()
+    if (guFrameTimer) {
+        window.clearTimeout(guFrameTimer)
+    }
+    stopGameCountdown()
+    if (token.value) {
+        window.removeEventListener('beforeunload', confirmRefresh)
+    }
+})
+
+const showGameRuleHandler = () => {
+    showGameRule.value = !showGameRule.value;
+}
+</script>
+
+<template>
+    <MobileStage v-if="token" :showGameRule="showGameRule" ref="mobileStageRef"
+        :background="`${imageUrls.bg} center/cover`">
+        <template #gameRule>
+            <div class="rule-container">
+                <div class="rule-txt-container">
+                    <div class="rule-title">游戏规则</div>
+                    <div class="rule-txt">
+                        1.主持人开赛后点击套圈，套中小马得 10 分，落空不得分;<br />
+                        2.限时比拼准度，结束后按积分排名;<br />
+                        3.高分用户有机会领取新疆福彩定制周边;<br />
+                        4.禁止外挂作弊，违规账号取消成绩与领奖资格;<br /><br />
+                        祝您游戏愉快！
+                    </div>
+                </div>
+                <div class="rule-close" @click="showGameRuleHandler"></div>
+            </div>
+        </template>
+        <LoadingView v-if="currentView === 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
+            @touchGameRule="showGameRuleHandler" />
+        <PlayingView v-else-if="currentView === 'playing'" :image-urls="imageUrls" :tick="tick" :rank="rank"
+            :current-gu="currentGu" :countdown-interval="countdownInterval" :is-div-desc-visible="isDivDescVisible"
+            @touch="touchHandler" />
+        <ScoreView v-else :image-urls="imageUrls" :rank="rank" :tick="tick" />
+    </MobileStage>
+    <div v-else style="text-align: center; width: 100vw; height: 100vh; line-height: 30; font-size: 20px;">
+        请使用微信扫码进入游戏
+    </div>
+</template>
+<style scoped>
+.rule-container {
+    .rule-txt-container {
+        position: absolute;
+        background: v-bind('imageUrls.rule') center / cover no-repeat;
+        width: 692px;
+        height: 797px;
+        left: -157px;
+        top: -75px;
+        transform: scale(0.5);
+
+        .rule-title {
+            text-align: center;
+            color: white;
+            font-weight: bold;
+            font-size: 22pt;
+            margin-top: 10px;
+            letter-spacing: 4px;
+        }
+
+        .rule-txt {
+            font-size: 26pt;
+            padding: 40px;
+            margin-top: 10px;
+            color: #AA0000;
+        }
+    }
+
+    .rule-close {
+        width: 57px;
+        height: 57px;
+        margin: 0 auto;
+        margin-top: 450px;
+        background: v-bind('imageUrls.close') center/cover;
+        position: relative;
+        transform: scale(0.8);
+    }
+}
+</style>
\ No newline at end of file

frontend-h5/src/pages/game5/views/LoadingView.vue

+<script setup lang="ts">
+import { $getWechat } from '@/commons/utils.ts'
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    userJoinStatus: boolean
+}>();
+const nickname = ref('');
+const avatar = ref('');
+onMounted(() => {
+    const wechat = $getWechat();
+    nickname.value = wechat.nickname;
+    avatar.value = wechat.avatar;
+});
+</script>
+
+<template>
+    <div class="h5-page game-stage">
+        <div class="game-desc" @click="$emit('touchGameRule')">游戏规则</div>
+        <div class="img-logo"></div>
+        <div class="img-title"></div>
+        <div class="img-avatar" :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`">
+        </div>
+        <div class="txt-contdown">游戏等待开始倒计时&nbsp;<b style="font-weight: 900;">60</b>&nbsp;秒 </div>
+        <!-- <div class="txt-contdown"></div> -->
+        <div class="txt-nickname">{{ nickname }}</div>
+        <div class="txt-loading">您已成功加入游戏等待主持人开始</div>
+        <div class="txt-loading2">游戏即将开始 敬请期待</div>
+        <!-- <div class="bg-bottom"></div> -->
+        <!-- <div class="loading-gu"></div> -->
+    </div>
+</template>
+
+<style scoped>
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.game-desc {
+    position: absolute;
+    top: 50%;
+    left: var(--stage-viewport-left, 0);
+    display: flex;
+    width: 86px;
+    height: 256px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 12px 12px 0;
+    background: rgba(40, 12, 8, 0.52);
+    color: white;
+    font-size: 32pt;
+    letter-spacing: 10px;
+    line-height: 1.25;
+    text-align: center;
+    text-orientation: upright;
+    transform: translateY(-50%);
+    writing-mode: vertical-rl;
+}
+
+.bg-bottom {
+    position: absolute;
+    bottom: 0;
+    left: var(--stage-viewport-left, 0);
+    width: var(--stage-viewport-width, 750px);
+    height: 479px;
+    background: v-bind('imageUrls.bg2') center/cover;
+    opacity: 0.6;
+}
+
+.img-logo {
+    position: absolute;
+    top: 66px;
+    left: 50%;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+    transform: translateX(-50%);
+}
+
+.img-title {
+    position: absolute;
+    top: 200px;
+    left: 50%;
+    background: v-bind('imageUrls.title') center/cover;
+    width: 536px;
+    height: 237px;
+    transform: translateX(-50%);
+}
+
+.img-avatar {
+    position: absolute;
+     bottom: 11%;
+    left: 50%;
+    /* width: 148px;
+    height: 148px;
+    background: v-bind('avatar') center/cover; */
+    transform: translateX(-50%);
+}
+
+.txt-contdown {
+    position: absolute;
+    left: 124px;
+    top: 475px;
+    width: 502px;
+    height: 90px;
+    font-weight: bold;
+    font-size: 36px;
+    color: #B90103;
+    line-height: 88px;
+    text-align: center;
+    background: v-bind('imageUrls.contdown') center/cover;
+}
+.txt-nickname {
+    position: absolute;
+    bottom: 10%;
+    left: 50%;
+    color: #FFFFFF;
+    font-size: 18px;
+    font-weight: bold;
+    transform: translateX(-50%);
+}
+
+.txt-loading {
+    position: absolute;
+    bottom: 4.74%;
+    left: 50%;
+    width: 288px;
+    color: #6F0000;
+    font-size: 25pt;
+    font-weight: bold;
+    text-align: center;
+    transform: translateX(-50%);
+    font-weight: 500;
+    font-size: 36px;
+    color: #FFFFFF;
+    line-height: 50px;
+}
+
+.txt-loading2 {
+    width: 750px;
+    height: 126px;
+    color: white;
+    position: absolute;
+    top:786px;
+    left: 50%;
+    transform: translate(-50%);
+    line-height: 118px;
+    text-align: center;
+   font-weight: 500;
+font-size: 46px;
+color: #FFFFFF;
+    letter-spacing:5px;
+    background: v-bind('imageUrls.startBg') center/cover;
+}
+
+.loading-gu {
+    position: absolute;
+    bottom: 100px;
+    left: 50%;
+    width: 600px;
+    height: 534px;
+    background: v-bind('imageUrls.gu') center/cover;
+    transform: translateX(-50%);
+}
+</style>

frontend-h5/src/pages/game5/views/PlayingView.vue

+<script setup lang="ts">
+defineProps<{
+    imageUrls: Record<string, string>
+    countdownInterval: number
+    isDivDescVisible: boolean
+    tick: number
+    rank: number
+    currentGu: string
+}>()
+
+defineEmits<{
+    touch: []
+}>()
+</script>
+
+<template>
+    <div class="h5-page game-stage">
+        <Transition name="div-desc-slide" appear>
+            <div v-if="isDivDescVisible" class="div-desc">
+                <span class="desc-clock" aria-hidden="true"></span>
+                <span class="desc-time">{{ countdownInterval }}</span>
+            </div>
+        </Transition>
+        <div class="img-logo"></div>
+        <div class="play-content">
+            <div>当前击鼓积分</div>
+            <div>{{ tick }}</div>
+            <div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
+        </div>
+        <div class="bg-bottom"></div>
+        <div class="play-gu" :style="{ background: `${currentGu} center/cover` }" @click="$emit('touch')"></div>
+    </div>
+</template>
+
+<style scoped>
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.div-desc {
+    position: absolute;
+    top: 150px;
+    left: var(--stage-viewport-left, 0);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    width: 180px;
+    height: 80px;
+    border-radius: 0 56px 56px 0;
+    background: rgba(40, 12, 8, 0.48);
+    color: #fff;
+
+
+    .desc-clock {
+        position: absolute;
+        left: 20px;
+        width: 38px;
+        height: 44px;
+        border-radius: 50%;
+        background: v-bind('imageUrls.clock') center/cover;
+    }
+
+    .desc-time {
+        position: absolute;
+        right: 40px;
+        color: white;
+        font-size: 35pt;
+        line-height: 1;
+    }
+}
+
+.div-desc-slide-enter-active {
+    transition:
+        transform 360ms ease-out 220ms,
+        opacity 360ms ease-out 220ms;
+}
+
+.div-desc-slide-leave-active {
+    transition:
+        transform 260ms ease-in,
+        opacity 260ms ease-in;
+}
+
+.div-desc-slide-enter-from,
+.div-desc-slide-leave-to {
+    opacity: 0;
+    transform: translateX(-110%);
+}
+
+.div-desc-slide-enter-to,
+.div-desc-slide-leave-from {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.bg-bottom {
+    position: absolute;
+    bottom: 0;
+    left: var(--stage-viewport-left, 0);
+    width: var(--stage-viewport-width, 750px);
+    height: 479px;
+    background: v-bind('imageUrls.bg2') center/cover;
+    opacity: 0.6;
+}
+
+.img-logo {
+    position: absolute;
+    top: 66px;
+    left: 50%;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+    transform: translateX(-50%);
+}
+
+.play-content {
+    margin-top: 240px;
+    margin-left: 40px;
+    margin-right: 40px;
+    padding: 30px 0;
+    border-radius: 25px;
+    background: rgba(40, 12, 8, 0.52);
+    color: white;
+    font-size: 28pt;
+    text-align: center;
+}
+
+.play-content>div:nth-child(2) {
+    display: inline-block;
+    margin: 10px 0;
+    background: linear-gradient(180deg, #FFE68D 0%, #FAD500 100%);
+    background-clip: text;
+    color: transparent;
+    font-size: 48pt;
+    font-weight: bold;
+    transform: scaleY(1.2);
+    transform-origin: center;
+    -webkit-background-clip: text;
+}
+
+.play-content>div:nth-child(3) {
+    position: relative;
+    top: -10px;
+}
+
+.play-content>div:nth-child(3) label {
+    color: white;
+    font-size: 42pt;
+}
+
+.play-gu {
+    position: absolute;
+    bottom: 350px;
+    left: 50%;
+    width: 400px;
+    height: 400px;
+    transform: translateX(-50%) scale(2.4);
+}
+</style>

frontend-h5/src/pages/game5/views/ScoreView.vue

+<script setup lang="ts">
+import { $getWechat } from '@/commons/utils';
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    tick: number
+    rank: number
+}>()
+
+defineEmits<{
+    replay: []
+    back: []
+}>()
+const nickname = ref('');
+const avatar = ref('');
+onMounted(() => {
+    const wechat = $getWechat();
+    nickname.value = wechat.nickname;
+    avatar.value = wechat.avatar;
+});
+</script>
+
+<template>
+    <div class="h5-page game-stage">
+        <div class="img-logo"></div>
+        <div class="bg-bottom"></div>
+        <div class="img-score">
+            <div class="score-avatar"
+                :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
+            <div class="score-content">
+                <div>{{ nickname }}</div>
+                <div>您的成绩</div>
+                <div>击鼓积分</div>
+                <div>{{ tick }}</div>
+                <div>最终排名</div>
+                <div>第<label>{{ rank }}</label>名</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.bg-bottom {
+    position: absolute;
+    bottom: 0;
+    left: var(--stage-viewport-left, 0);
+    width: var(--stage-viewport-width, 750px);
+    height: 479px;
+    background: v-bind('imageUrls.bg2') center/cover;
+    opacity: 0.6;
+}
+
+.img-logo {
+    position: absolute;
+    top: 66px;
+    left: 50%;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+    transform: translateX(-50%);
+}
+
+.img-score {
+    position: absolute;
+    top: 450px;
+    left: 50%;
+    width: 465px;
+    height: 731px;
+    background: v-bind('imageUrls.scoreBg') center/cover;
+    transform: translateX(-50%) scale(1.2);
+}
+
+.score-avatar {
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    background: v-bind('imageUrls.avatar') center/cover;
+    transform: translateX(-50%);
+}
+
+.score-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 100px);
+    font-size: 28pt;
+    text-align: center;
+}
+
+.score-content>div:nth-child(1) {
+    color: #E00000;
+    font-size: 32pt;
+    font-weight: bold;
+}
+
+.score-content>div:nth-child(2) {
+    margin-top: 20px;
+    font-size: 32pt;
+}
+
+.score-content>div:nth-child(3) {
+    margin-top: 40px;
+}
+
+.score-content>div:nth-child(4) {
+    margin-top: 30px;
+    color: #E00000;
+    font-size: 32pt;
+    /* font-weight: bold; */
+    transform: scale(1.5);
+}
+
+.score-content>div:nth-child(5) {
+    margin-top: 40px;
+}
+
+.score-content>div:nth-child(6) {
+    margin-top: 20px;
+    color: #E00000;
+    font-size: 32pt;
+    font-weight: bold;
+}
+
+.score-content>div:nth-child(6) label {
+    color: #E00000;
+    font-size: 42pt;
+    margin: 0 10px;
+}
+
+</style>

frontend-h5/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import { $read } from '@/commons/utils'
 import Game1 from '@/pages/game1/Game.vue'
 import Game4 from '@/pages/game4/Game4.vue'
+import Game5 from '@/pages/game5/Game5.vue'
 import Game6 from '@/pages/game6/Game.vue'
 
 const getWechatId = () => {
@@ -29,6 +30,11 @@ const router = createRouter({
             component: Game4,
         },
         {
+            path: '/game5',
+            name: 'Game5',
+            component: Game5,
+        },
+        {
             path: '/game6',
             name: 'Game6',
             component: Game6,