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
180
複数ブラウザウィンドウを 単一平面とみなしてボールの 衝突判定をする
kthatoto
December 14, 2023
Tweet
Share
More Decks by kthatoto
See All by kthatoto
CSSだけでCookie Clickerを作る
kthatoto
0
910
いろいろな駆動開発の話 / various-driven-development
kthatoto
0
93
ぼくのかんがえたさいきょうの放置ゲームを作ってる話 / saikyou-houti-game
kthatoto
1
480
最強の放置ゲームを作ってる話 ~ と、そのうちのゲーム作るためのゲームデータエディタを作ってる話 ~
kthatoto
0
68
ぼくのかんがえたさいきょうのぶろぐしすてむ
kthatoto
0
730
Other Decks in Technology
See All in Technology
Tomorrow graphlib, Let us use everybody
hayaosuzuki
0
120
CData MCP ナイト!「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
shisyu_gaku
0
150
5000万ダウンロードを超える漫画サービスを支えるログ基盤の設計開発の全て
ldf_tech
0
450
SSG の限界を破る、再ビルド不要なサイト
reyalka
2
550
RevOps実践で学んだ俺が最強のデータ基盤になることの重要性 / revops-practice-learned
pei0804
1
990
Railsアプリケーション開発者のためのブックガイド
takahashim
5
3k
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
870
Goを使ってTDDを体験しよう!
chiroruxx
0
150
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
130
Создание мультиагентной системы на базе AI Studio
shwars
0
180
わいわいClaude Code アイスブレイクLT iOSDC2025 Day2 アンカンファレンス
hiragram
0
110
みん強のこれまでとこれから
genshun9
1
350
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
A Tale of Four Properties
chriscoyier
160
23k
Typedesign – Prime Four
hannesfritz
42
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Optimizing for Happiness
mojombo
379
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Thoughts on Productivity
jonyablonski
70
4.8k
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ͭҎ্ͷϒϥβΟϯυ͕ަΘΔ෦ͷΟϯυ Ҡಈ