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:
37
src/App.vue
37
src/App.vue
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user