CSSだけでCookie Clickerを作る

Transcript

1. $44
   ͚ͩͰ$PPLJF
   $MJDLFSΛ࡞Δ !IUPQJHFPO
2. ߴڮ Ұే (Kazuto Takahashi) ɾॴଐɿגࣜձࣾΫϩεϏοτ ɾۀ຿ɿγϑτ؅ཧαʔϏεͷ։ൃ, ςοΫϦʔυ 
 ɾٕज़ɿRails, Vue, React, NeoVim 
 ɾझຯɿٕज़ͷແବ࢖͍, ์ஔήʔϜ Zenn / GitHub @kthatoto X 
 @h4topigeon
3. %FNP https://kthatoto.github.io/css-cookie-clicker
4. ࢓૊Έ
   JOQVU
   UZQFDIFDLCPY
   ͷଟ༻
   CZ
   QVH
   
   $44
   ͷDPVOUFSؔ਺
   
   DIFDLFE
   
   
   d
   
   4BTT4$44
   ͷཞ༻
5. JOQVU
   UZQFDIFDLCPY
   ͷଟ༻
   CZ
   QVH
6. JOQVU
   UZQFDIFDLCPY
   ͷଟ༻
   CZ
   QVH 🍪 ਤղ ΫϦοΫ 🍪 🍪input:checked νΣοΫ͞ΕͨinputΛ ݟ͑ͳ͍ͱ͜Ζʹඈ͹͢
7. 4BTT4$44
   ͷཞ༻
   JUFN͕ߪೖՄೳ͔$44Ͱ൑அ
   
   
   
   
   
   ΄΅खଓతϓϩάϥϜॻ͍ͯΔײ֮
   
   QSJDF
   ͷJUFNʹରͯ͠ 

   
   
   
   
   ଞͷJUFNΛߪೖ͍ͯ͠ͳ͚Ε͹ 
 ɹɹݸҎ্DIFDLFEͳΒMBCFMԡͤΔ 

   
   
   
   
   ଞͷJUFNΛߪೖ͍ͯ͠Δ৔߹ 
 ɹɹͦͷJUFNͷ஋ஈ ݸҎ্DIFDLFE 
 ɹ
   
   ͜ΕΛશͯͷύλʔϯॻ͘
8. 
   OݸͷJUFN͕͋Δ࣌
   ɹ
   ͷએݴϒϩοΫ͕ඞཁʹͳΔ
   
   ྫ
   ݸͷJUFN͕࣌
   
   
   
   
   
   JUFNΛങ͑Δ͔Ͳ͏͔
   
   
   
   
   
   
   
   
   
   JUFNΛങͬͯͳ͍
   
   JUFNΛങͬͯͳ͍
   
   
   
   
   
   
   
   
   
   JUFNΛങͬͨ
   
   
   
   
   
   
   
   JUFNΛങͬͯͳ͍
   
   
   
   
   
   
   
   
   
   JUFNΛങͬͯͳ͍
   
   JUFNΛങͬͨ
   
   
   
   
   
   
   
   
   
   JUFNΛങͬͨ
   
   
   
   
   
   
   
   JUFNΛങͬͨ
   
   
   
   
   
   JUFNΛങ͑Δ͔Ͳ͏͔
   
   
   
   
   
   
   
   
   
   ಉ͘͡ύλʔϯ
   
   
   
   
   
   JUFNΛങ͑Δ͔Ͳ͏͔ 

   
   
   
   
   
   
   
   
   ಉ͘͡ύλʔϯ n ⋅ 2(n−1) 4BTT4$44
   ͷཞ༻ }2(3−1)}3
9. 
   ྫ
   JUFN
   DPPLJF
   JUFN
   DPPLJFT
   ͷ৔߹ 4BTT4$44
   ͷཞ༻ item1Λങ͏ͷʹ1cookieඞཁ item2ΛߪೖࡁΈ(2cookies) item1Λങ͏ͷʹ3cookiesඞཁ
10. 
    .BQ
    "SSBZ 
 ɹɹ
    JUFN৘ใ 

    GPS
    FBDI
    ϧʔϓ 
 ɹɹ
    ී௨ʹ 

    JG
    FMTF
    ෼ذ 
 ɹɹ
    ϧʔϓͷ࠷ޙͷJUFSBUJPOͳΒʙ͢Δ 
 ɹɹ
    JUFNΛങΘΕͨ৔߹ʙ 

    ΧελϜؔ਺ 
 ɹɹ
    QPX O
    N 
    OͷN৐ 
 ɹɹ
    CJOBSZIJU O
    EJHJU 
    ɹɹɹ
    OΛਐ਺දهͨ࣌͠ʹEJHJUʹ 
 ɹɹɹ
    ͕͋Δ͔ 4BTT4$44
    ͷཞ༻
11. 
    ΞΠςϜͷޮՌΛ࣮૷͢Δ 
 ɹɹ
    ΫϦοΫ͋ͨΓͷ֫ಘ$PPLJFΛ૿΍͢
    ɹɹ
    ࣗಈͰ૿͑ΔΑ͏ʹ͢Δ ͜Ε͸ෆՄೳʹۙͦ͏ ࠓޙ