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
890
いろいろな駆動開発の話 / 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
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
480
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.8k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.2k
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
340
LLMエージェント時代に適応した開発フロー
hiragram
1
430
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
進捗
ydah
1
170
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.1k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
210
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
150
JavaScript 研修
recruitengineers
PRO
5
960
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
The Cult of Friendly URLs
andyhume
79
6.6k
Balancing Empowerment & Direction
lara
2
590
Building an army of robots
kneath
306
46k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Site-Speed That Sticks
csswizardry
10
790
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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ͭҎ্ͷϒϥβΟϯυ͕ަΘΔ෦ͷΟϯυ Ҡಈ