此前為哥尼斯堡做了個html+svg單機遊戲，但是一旦手機鎖屏，則動畫將不能正常運作。其原因是，手機熄屏之後就停止了計時。
一開始我想計算熄屏時間，但是用setInterval計時的話，無法跟Date.now()一樣準確。
因此後來改用阻止熄屏來解決此問題。
用到wakeLock，具體代碼如下：
// if support wakeLock
const canWakeLock = () => 'wakeLock' in navigator;
// start wakeLock
const canWakeLock = () => 'wakeLock' in navigator;
const requestWakeLock = async ()=>{
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log('Wake Lock is active!');
} catch (err) {
console.log(`${err.name}, ${err.message}`);
}
}
requestWakeLock()
// release wakeLock
wakeLock.release().then(() => wakeLock = null);
// if wakeLock released
wakeLock.addEventListener('release', () => {
console.log('Wake Lock has been released');
});
// restart wakeLock
document.addEventListener('visibilitychange', async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
requestWakeLock()
}
});
不過後來還是把svg動畫換成了css3動畫，因為css3動畫不必計時，隨時可以順滑啟動。