fix: add start button to satisfy browser autoplay policy

Replace auto-start after loading with a '开始游戏' button overlay.
The user click provides the required user gesture for autoplay with sound,
fixing the issue where play() was silently rejected and choices never appeared.
This commit is contained in:
2026-06-07 15:44:31 +08:00
parent 192ecbbce2
commit 7aed2b46ca

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ref } from 'vue'
import GamePlayer from '@/components/GamePlayer.vue'
import ChoicePanel from '@/components/ChoicePanel.vue'
import { useGameEngine } from '@/composables/useGameEngine'
@@ -8,13 +8,17 @@ import { useGameStore } from '@/stores/gameStore'
const store = useGameStore()
const videoElRef = ref<HTMLVideoElement | null>(null)
const loading = ref(true)
const started = ref(false)
const { loadGame, start, makeChoice } = useGameEngine(() => videoElRef.value)
async function init() {
await loadGame('/scenes/demo.json')
loading.value = false
await nextTick()
}
function handleStart() {
started.value = true
start()
}
@@ -37,6 +41,9 @@ init()
<GamePlayer @video-ready="onVideoReady" />
<ChoicePanel :choices="store.choices" @choose="onChoose" />
</div>
<div v-if="!started" class="start-overlay">
<button class="start-btn" @click="handleStart">开始游戏</button>
</div>
<div v-if="store.gameEnded" class="game-end-overlay">
<div class="game-end-text">游戏结束</div>
</div>
@@ -101,4 +108,30 @@ html, body {
font-size: 36px;
letter-spacing: 4px;
}
.start-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.start-btn {
padding: 18px 48px;
font-size: 20px;
color: #fff;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
cursor: pointer;
letter-spacing: 4px;
transition: background 0.2s;
}
.start-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
</style>