Javascriptでゲームループを実現する
まとめ
async/awaitでいける
hr.icon
やりたいこと
code:py
from sleep import time
# 3秒インターバルの無限ループ
while True:
sleep(3000)
これをjsで
制約
sleepはない
setTimeoutは「n秒後に指定関数を実行する」
案1
setTimeout(f, waitsec)が基本形
waitsecをずらしたsetTimeoutをたくさん用意して、全部実行する
3秒インターバルなら
setTimeout(f, 3)
setTimeout(f, 6)
……
もうちょっとスマートにならんかsta.icon
案2
awaitとloopでいける気がしている
code:js
function f(waitsec){
const f_internal = () => {
console.log('現在時刻とリマインド時刻を比較して、過ぎてたらリマインド！')
}
setTimeout(f_internal, waitsec*1000)
}
async function gameloop(){
while(true){
await f(3)
}
}
返ってこぬ
https://gyazo.com/73c2e78c7ab6d1fdbfac78e55f755465
23:0x46613b0 17677 ms: Scavenge 254.7 (257.2) -> 254.4 (257.5) MB, 2.4 / 0.0 ms (average mu = 0.114, current mu = 0.063) allocation failure
たぶん f がなんか return しないといけない
なんだっけ
一回だけ通った
code:js
function f(waitsec){
const f_internal = () => {
console.log('現在時刻とリマインド時刻を比較！')
}
return new Promise((resolve) => {
setTimeout(f_internal, waitsec*1000)
})
}
async function gameloop(){
while(true){
console.log('aaa')
await f(3)
console.log('bbb')
}
}
gameloop()
無限ループがなぜか機能してくれない
https://gyazo.com/62cc5cd77f5389858a3c1db9eb319b3b
bbbに来ないのも変
最悪案3だが、とりあえずこれ解決したいな、悔しい
code:js
function triple_and_1sec(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x*3);
}, 3000);
});
}
async function gameloop(){
while(true){
await triple_and_1sec(1)
console.log('3秒ごとに表示')
}
}
gameloop()
これは動いた
何が違う……あ、resolveしてねえ！
できた！
code:js
function f(waitsec){
const f_internal = () => {
console.log('現在時刻とリマインド時刻を比較！')
}
return new Promise((resolve) => {
setTimeout(() => {
f_internal()
resolve(true)
}, waitsec*1000)
})
}
async function gameloop(){
while(true){
console.log('aaa')
await f(3)
console.log('bbb')
}
}
gameloop()
案3: わからんのでぐぐる
requestAnimationFrameというドンピシャがあった
このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。
過剰スペックすぎる
時刻一致なので1秒1回でいいんですけども
そもそもwaitsec指定できないね