Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数ブラウザウィンドウを 単一平面とみなしてボールの 衝突判定をする
Search
kthatoto
December 14, 2023
Technology
0
110
複数ブラウザウィンドウを 単一平面とみなしてボールの 衝突判定をする
kthatoto
December 14, 2023
Tweet
Share
More Decks by kthatoto
See All by kthatoto
CSSだけでCookie Clickerを作る
kthatoto
0
270
いろいろな駆動開発の話 / various-driven-development
kthatoto
0
77
ぼくのかんがえたさいきょうの放置ゲームを作ってる話 / saikyou-houti-game
kthatoto
1
450
最強の放置ゲームを作ってる話 ~ と、そのうちのゲーム作るためのゲームデータエディタを作ってる話 ~
kthatoto
0
50
ぼくのかんがえたさいきょうのぶろぐしすてむ
kthatoto
0
710
Other Decks in Technology
See All in Technology
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
10
3k
Shinagile 2024
kawaguti
PRO
2
110
Dungeons and Dragons and Rails
joelq
0
220
Domain-driven Design: A Complete Example
ewolff
2
230
パスワードを保存しますか?
hanacchi
0
240
NewSQL Landscape
oracle4engineer
PRO
5
3.1k
技術力の伸ばし方を考える
khirata
0
130
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
120
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
670
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
270
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
15
3.6k
Featured
See All Featured
Debugging Ruby Performance
tmm1
70
11k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Done Done
chrislema
178
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Infographics Made Easy
chrislema
238
18k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Transcript
ෳϒϥβΟϯυΛ ୯Ұฏ໘ͱΈͳͯ͠Ϙʔϧͷ িಥఆΛ͢Δ @h4topigeon
ߴڮ Ұే (Kazuto Takahashi) ɾॴଐɿגࣜձࣾΫϩεϏοτ ɾۀɿγϑτཧαʔϏεͷ։ൃ, ςοΫϦʔυ ɾٕज़ɿRails, Vue,
React, NeoVim ɾझຯɿٕज़ͷແବ͍, ์ஔήʔϜ Zenn / GitHub @kthatoto Twitter @h4topigeon
ͬͨ͜ͱ / ͭͬͨ͘ͷ • ϒϥβΟϯυΛ୯ҰԾฏ໘ʹ͢Δ • ·ͣϘʔϧͷিಥఆΛ࣮͢Δ
• ݁ߏ͕֯Ͱ͖ΔͷͰ֯ͱͷিಥΛߟྀ͢Δඞཁ͕͋Δ • ҙ֎ͱԁͱ֯ͷিಥఆޙɺͶฦΓ͕ߟྀ͞Ε ͨใ͕͋·Γଟ͘ͳ͍ ͬͨ͜ͱ / ͭͬͨ͘ͷ
هࣄॻ͖·ͨ͠
؆қਤղ
࣮ݱํ๏ (Ґஔؔ) • window.screenX, window.screenY • window.outerWidth, window.outerHeight x y
(0, 0) → ݪ (-403, -1415)
࣮ݱํ๏ (σʔλڞ༗) • localStorage or IndexedDB • ྆ํͱΟϯυΛލ͍Ͱσʔλڞ༗Ͱ͖Δ • localStorageͰࢼͯ͠Έͨͱ͜Ζ...
• key, valueΛ1֊͔ͯ͠ͳ͍ • ͳ͔ͥਖ਼ৗʹͷߋ৽͕͞Εͳ͍͍͠ؾ͕͢Δ...
࣮ݱํ๏ (σʔλڞ༗) • IndexedDBΛͬͯΈΔ • ͳΜ͔ૣ͍ʂ͏·͍͘͘ʂ • Dexie.js ͑ΠϯλʔϑΣʔεָʹѻ͑Δ
هࣄॻ͖·ͨ͠
݁Ռ
࣮ݱํ๏ (σʔλڞ༗) • 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}"
࣮ݱํ๏ (ΟϯυҠಈՄೳఆ) ͜͜௨աͰ͖Δ͔ఆ͍ͨ͠ ো ো 2ͭͷΟϯυΛލ͙ ॠ͚ؒͩԾͷো Λదʹஔ͘
࣮ݱํ๏ (ΟϯυҠಈՄೳఆ) • ͜ͷదʹ͕େม... • ਫฏํͷҠಈՄೳఆ͚ͩͰ9ύλʔϯ • ਨํ9ύλʔϯΛ߹Θͤͯ18ύλʔϯ ো ো
ো ো ো ো ো ো ো ো ো ো ো ো ো ো ো ো
ࠓޙ • ԁಉ࢜Ͱিಥఆ • ܭࢉྔͷ࠷దԽ → ׂ࢛ۭؒ • ϒϥβΟϯυͷॏͳΓΛߟྀͨ͠ΟϯυҠ ಈ
• 3ͭҎ্ͷϒϥβΟϯυ͕ަΘΔ෦ͷΟϯυ Ҡಈ