CSSだけでCookie Clickerを作る

by kthatoto

Embed

Start on current slide

Slide 1

Slide 1 text

$44͚ͩͰ$PPLJF$MJDLFSΛ࡞Δ !IUPQJHFPO

Slide 2

Slide 2 text

ߴڮ Ұే (Kazuto Takahashi) ɾॴଐɿגࣜձࣾΫϩεϏοτ ɾۀ຿ɿγϑτ؅ཧαʔϏεͷ։ൃ, ςοΫϦʔυ   ɾٕज़ɿRails, Vue, React, NeoVim   ɾझຯɿٕज़ͷແବ࢖͍, ์ஔήʔϜ Zenn / GitHub @kthatoto X   @h4topigeon

Slide 3

Slide 3 text

%FNP https://kthatoto.github.io/css-cookie-clicker

Slide 4

Slide 4 text

࢓૊Έ JOQVUUZQFDIFDLCPYͷଟ༻ CZQVH $44ͷDPVOUFSؔ਺DIFDLFE d 4BTT4$44ͷཞ༻

Slide 5

Slide 5 text

JOQVUUZQFDIFDLCPYͷଟ༻ CZQVH

Slide 6

Slide 6 text

JOQVUUZQFDIFDLCPYͷଟ༻ CZQVH 🍪 ਤղ ΫϦοΫ 🍪 🍪input:checked νΣοΫ͞ΕͨinputΛ ݟ͑ͳ͍ͱ͜Ζʹඈ͹͢

Slide 7

Slide 7 text

4BTT4$44ͷཞ༻ JUFN͕ߪೖՄೳ͔$44Ͱ൑அ ΄΅खଓతϓϩάϥϜॻ͍ͯΔײ֮ QSJDFͷJUFNʹରͯ͠   ଞͷJUFNΛߪೖ͍ͯ͠ͳ͚Ε͹   ɹɹݸҎ্DIFDLFEͳΒMBCFMԡͤΔ   ଞͷJUFNΛߪೖ͍ͯ͠Δ৔߹   ɹɹͦͷJUFNͷ஋ஈݸҎ্DIFDLFE   ɹ͜ΕΛશͯͷύλʔϯॻ͘

Slide 8

Slide 8 text

OݸͷJUFN͕͋Δ࣌ ɹ ͷએݴϒϩοΫ͕ඞཁʹͳΔ ྫ ݸͷJUFN͕࣌ JUFNΛങ͑Δ͔Ͳ͏͔ JUFNΛങͬͯͳ͍JUFNΛങͬͯͳ͍ JUFNΛങͬͨJUFNΛങͬͯͳ͍ JUFNΛങͬͯͳ͍JUFNΛങͬͨ JUFNΛങͬͨJUFNΛങͬͨ JUFNΛങ͑Δ͔Ͳ͏͔ ಉ͘͡ύλʔϯ JUFNΛങ͑Δ͔Ͳ͏͔   ಉ͘͡ύλʔϯ n ⋅ 2(n−1) 4BTT4$44ͷཞ༻ }2(3−1)}3

Slide 9

Slide 9 text

ྫ JUFNDPPLJF JUFNDPPLJFTͷ৔߹ 4BTT4$44ͷཞ༻ item1Λങ͏ͷʹ1cookieඞཁ item2ΛߪೖࡁΈ(2cookies) item1Λങ͏ͷʹ3cookiesඞཁ

Slide 10

Slide 10 text

.BQ "SSBZ   ɹɹJUFN৘ใ   GPS FBDIϧʔϓ   ɹɹී௨ʹ   JG FMTF෼ذ   ɹɹϧʔϓͷ࠷ޙͷJUFSBUJPOͳΒʙ͢Δ   ɹɹJUFNΛങΘΕͨ৔߹ʙ   ΧελϜؔ਺   ɹɹQPX O N OͷN৐   ɹɹCJOBSZIJU O EJHJU ɹɹɹOΛਐ਺දهͨ࣌͠ʹEJHJUʹ   ɹɹɹ͕͋Δ͔ 4BTT4$44ͷཞ༻

Slide 11

Slide 11 text

ΞΠςϜͷޮՌΛ࣮૷͢Δ   ɹɹΫϦοΫ͋ͨΓͷ֫ಘ$PPLJFΛ૿΍͢ ɹɹࣗಈͰ૿͑ΔΑ͏ʹ͢Δ ͜Ε͸ෆՄೳʹۙͦ͏ ࠓޙ