複数ブラウザウィンドウを 単一平面とみなしてボールの 衝突判定をする

Transcript

1. ෳ਺ϒϥ΢β΢Οϯυ΢Λ ୯Ұฏ໘ͱΈͳͯ͠Ϙʔϧͷ িಥ൑ఆΛ͢Δ @h4topigeon
2. ߴڮ Ұే (Kazuto Takahashi) ɾॴଐɿגࣜձࣾΫϩεϏοτ ɾۀ຿ɿγϑτ؅ཧαʔϏεͷ։ൃ, ςοΫϦʔυ 
 ɾٕज़ɿRails, Vue, React, NeoVim 
 ɾझຯɿٕज़ͷແବ࢖͍, ์ஔήʔϜ Zenn / GitHub @kthatoto Twitter 
 @h4topigeon
3. ΍ͬͨ͜ͱ / ͭͬͨ͘΋ͷ • ϒϥ΢β΢Οϯυ΢Λ୯ҰԾ૝ฏ໘ʹ͢Δ • ·ͣ͸Ϙʔϧͷিಥ൑ఆΛ࣮૷͢Δ
4. • ݁ߏ͕֯Ͱ͖ΔͷͰ֯ͱͷিಥΛߟྀ͢Δඞཁ͕͋Δ • ҙ֎ͱԁͱ֯ͷিಥ൑ఆޙɺ௓ͶฦΓ͕ߟྀ͞Ε ͨ৘ใ͕͋·Γଟ͘ͳ͍ ΍ͬͨ͜ͱ / ͭͬͨ͘΋ͷ
5. هࣄॻ͖·ͨ͠
6. ؆қਤղ
7. ࣮ݱํ๏ (Ґஔؔ܎) • window.screenX, window.screenY • window.outerWidth, window.outerHeight x y (0, 0) → ݪ఺ (-403, -1415)
8. ࣮ݱํ๏ (σʔλڞ༗) • localStorage or IndexedDB • ྆ํͱ΋΢Οϯυ΢Λލ͍Ͱσʔλڞ༗Ͱ͖Δ • localStorageͰࢼͯ͠Έͨͱ͜Ζ... • key, valueΛ1֊૚͔͠΋ͯͳ͍ • ͳ͔ͥਖ਼ৗʹ஋ͷߋ৽͕͞Εͳ͍͠஗͍ؾ͕͢Δ...
9. ࣮ݱํ๏ (σʔλڞ༗) • IndexedDBΛ࢖ͬͯΈΔ • ͳΜ͔ૣ͍ʂ͏·͍͘͘ʂ • Dexie.js ࢖͑͹ΠϯλʔϑΣʔε΋ָʹѻ͑Δ
10. هࣄॻ͖·ͨ͠
11. ݁Ռ
12. ࣮ݱํ๏ (σʔλڞ༗) • localStorage • ಉ͡ΩʔΛ࢖͍ճ͍ͯ͠Δ͔ΒόοςΟϯάͯ͠࢖͍෺ʹ ͳΒͳ͔ͬͨ • ΩʔʹIDΛؚΜͰ͠·͏ͱҰཡੑ͕ࣦΘΕΔ 
 (localStorage.ball_1 = ...) • Ωʔ͕ଘࡏ͢ΔIDͷҰཡΛผͰอ࣋͢Δ͜ͱͰղܾ • ❌ localStorage.balls = "[{x:0,y:0},{x:100,y:100}]" • ⭕ localStorage.ball_ids = "[1,2]" 
 ɹ localStorage.ball_1 = "{id:1,x:0,y:0}" 
 ɹ localStorage.ball_2 = "{id:2,x:100,y:100}"
13. ࣮ݱํ๏ (΢Οϯυ΢ҠಈՄೳ൑ఆ) ͜͜௨աͰ͖Δ͔൑ఆ͍ͨ͠ ো֐෺ ো֐෺ 2ͭͷ΢Οϯυ΢Λލ͙ ॠ͚ؒͩԾ૝ͷো֐෺ Λద੾ʹஔ͘
14. ࣮ݱํ๏ (΢Οϯυ΢ҠಈՄೳ൑ఆ) • ͜ͷద੾ʹ͕େม... • ਫฏํ޲ͷҠಈՄೳ൑ఆ͚ͩͰ9ύλʔϯ • ਨ௚ํ޲9ύλʔϯΛ߹Θͤͯ18ύλʔϯ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺ ো֐෺
15. ࠓޙ • ԁಉ࢜Ͱিಥ൑ఆ • ܭࢉྔͷ࠷దԽ → ࢛෼໦ۭؒ෼ׂ • ϒϥ΢β΢Οϯυ΢ͷॏͳΓΛߟྀͨ͠΢Οϯυ΢Ҡ ಈ • 3ͭҎ্ͷϒϥ΢β΢Οϯυ΢͕ަΘΔ෦෼ͷ΢Οϯυ ΢Ҡಈ