回答編集履歴
1
追記処理
test
CHANGED
|
@@ -53,3 +53,42 @@
|
|
|
53
53
|
|
|
54
54
|
なので、真に生徒さんの事を考えた場合
|
|
55
55
|
私だったら`Window.requestAnimationFrame`を覚えて使いこなしてみろとアドバイスをすると思います。
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
> 追記箇所
|
|
60
|
+
|
|
61
|
+
JavaScriptに同期処理で待つという機能が存在しない以上、
|
|
62
|
+
sleep関数はsetTimeoutをラッピングしてPromiseインスタンスを返すくらいのものしか出来ません。
|
|
63
|
+
|
|
64
|
+
そしてイベント・非同期処理の機能一度使ってしまったが最後
|
|
65
|
+
「二度と」同期処理の世界には戻って来れません。
|
|
66
|
+
なのでPromiseを使いまくる必要があります。
|
|
67
|
+
|
|
68
|
+
そのPromiseのthenメソッドで一生繋ぐのは嫌だから
|
|
69
|
+
JavaScriptのES2017というバージョンでasync/awaitというPromiseを使って
|
|
70
|
+
コードだけでも同期処理っぽく簡素に書けるようになったわけです。
|
|
71
|
+
|
|
72
|
+
質問者さん自身は今のうちにPromiseの猛勉強をしてください。
|
|
73
|
+
JavaScriptを教える人間がPromiseやイベント駆動教えられないなら、
|
|
74
|
+
存在意義が分からなくなるくらい大事な箇所ですからね。
|
|
75
|
+
|
|
76
|
+
> Window.requestAnimationFrame
|
|
77
|
+
|
|
78
|
+
これ同軸の話じゃねえから。
|
|
79
|
+
|
|
80
|
+
ゆくゆくのゲームの在り方を考えれば
|
|
81
|
+
一生Window.requestAnimationFrameを叩き続ける無限ループを作って
|
|
82
|
+
今画面はどうなっているかを逐一書き換えさせるのが最善です。
|
|
83
|
+
そういう意味で他の回答者さんも「これじゃゲームの体をなしてないから全部書き直すしかない」って言ってるわけです。
|
|
84
|
+
|
|
85
|
+
そこをごっちゃにしてsleep関数をWindow.requestAnimationFrameで包んでやろうってのはトンチンカンな事をやっているという事になります。
|
|
86
|
+
|
|
87
|
+
自作のsleep関数を作るとすれば、
|
|
88
|
+
私の回答上部にあるsetTimeoutをラッピングして、
|
|
89
|
+
もしかするとPromiseインスタンスで包んで返す関数にしても良いかもね程度のものしかなりえません。
|
|
90
|
+
|
|
91
|
+
私であっても質問者さんであっても
|
|
92
|
+
片手間でこの思想が詰まったコードをぷよぷよのゲームの完成形に差し替えるというのは土台無理な話です。
|
|
93
|
+
生徒には「Window.requestAnimationFrameの大きな無限ループの檻を作って、グローバル変数を確認しながら、秒間30回画面を最新の状態に更新し直せ」と伝えた上で、
|
|
94
|
+
その間にPromiseを死ぬ気で勉強するのを推奨します。
|