Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ゲーム開発初心者が教えるブラウザゲームのつくり方 / How to make gam...

ゲーム開発初心者が教えるブラウザゲームのつくり方 / How to make games JavaScript

2018/06/29 さくらの勉強会 フロントエンドナイト
〜「さくらのクラウド」のスタッフがエイプリルフール企画でブラウザゲームを作る まで〜

勉強会で発表した内容にいくつかスライドを追加したフルバージョンです。

発表した内容を文字起こし版
https://kuroeveryday.blogspot.com/2018/07/how-to-make-games-with-javascript-01.html
https://kuroeveryday.blogspot.com/2018/07/how-to-make-games-with-javascript-02.html

ダーシノ

June 29, 2018
Tweet

More Decks by ダーシノ

Other Decks in Programming

Transcript

  1. ⼱ӃҽӒ ѷҿҹӳӘ*/'3"8"34ѸӘ✫ঝ ԟ՛ԿՓӔԾՑԎԞԚդՈӘӎҹӴᢅ • 㔸⋬ӕᒨ⺙Ӕ⏑⿔ӕӎҮӐ • ՓդԿ௡ⅈ㮢SFRVFTU"OJNBUJPO'SBNF㮣 • Ք՛ԨՒ՛Ԙ㮢$BOWBT"1*ѬԹԽԑդՆ՛ԡᠱ๝㮣 •

    ՎդԞդ୾౟Ә൑һদһ • ᏍᮏӘᥥ᡾㮢◠㉎⍃➥㉯ಌѬझ⻄㕉ᡔѬᚙҼञҼѬԼԧԜՑԡӘᇰⅈ㮣 • ⷥ╝ఋᇰ㮢ԱգՊՓԔ՛ӘᴿణѬԼԧԜՑԡӘᇰⅈ㮣 • ҴӨһ • ѷҿҹӳӘ*/'3"8"34ѸӘԝԎ՛ԱԯԞԌ՛
  2. ԚդՈӘՓդՓ ԿՔԌՌդ ԝԌԸդᠳួҵӳㅪӼӐҮӁӐԝդԸդӼᇟӵ क⨕ՎդԞդӘՒԗԐԡ԰Ӽ㊌᡻ӃӵӒᓙӳӶӵ ၖӶӉԝդԸդә੫ⅈӁӐᒕᢥҿӅӵ ԝդԸդ ՒԗԐԡ԰Ӽ௡ⅈӃӵԝդԸդ ԊԧԫԓդҵӳᠳួӼ൑һӵӒὬञ ӁՒԗԐԡ԰Ҷ௡ⅈӑҷӔҹӔӵ ԿՔԌՌդӘՑԌԽ

    क⨕ՎդԞդӘՒԗԐԡ԰Ӽ㊌᡻Ӂ ӐӁӨҰӒḄӵ ၖӶӉԝդԸդӼҿӳӕᠳួҿӶӵ ӒḄӵ Ԋԧԫԓդ ㈭ᕞӼҵһӲҰӒӒᢣѰԝ ԌԸդᠳួӼӁҵһӐҹӵ ᕅᖌӘҬӵՎդԞդ क⨕ՎդԞդ ԝդԻԡӼਜҰӉӫӕՒԗ Ԑԡ԰ӼᚙҼӐҹӵक⨕঑ ԾՕԫԗԐՒԊӒ੫ᒕԐՒԊ Լ՛ԗӘԐՒԊӑәԝԌԸդᠳួӼ㖌 ҺҽӒҶӑҷӵѭӉӊӁक⨕ՎդԞդ ӘՒԗԐԡ԰ӬԾՕԫԗӑҷӐӁӨҰ Әӑᵍᖌ ԘՒդ՛ӘԐՒԊӑәၖӶӉԝդԸդ Ӽ੫ᒕӑҷӵѭӉӊӁԝԌԸդᠳួә ԾՕԫԗӑҷӔҮӘӑᵍᖌ ՒԗԐԡ԰Ӓᠳួ क⨕ՎդԞդҵӳӘՒԗԐԡ ԰ӮԊԧԫԓդӘԝԌԸդᠳ ួәԻդՈӑⷭ⒈ҿӶӵ ǟ∈଍әԿՕ԰ԧԌԿ‾ӘӬӘӑӃ
  3. (BNF DUY$BOWBT3FOEFSJOH$POUFYU% DVSSFOU'SBNFOVNCFS LFZCPBSETUSJOH  JUFNT#BTF*UFN<> BEE JUFN#BTF*UFN WPJE SFNOPWF

    JUFN#BTF*UFN WPJE TUBSU WPJE TUPQ WPJE SFOEFS WPJE UFTU)JU CPPMFBO  MPPQ OPXOVNCFS WPJE #BTF*UFN Y ZOVNCFS X IOVNCFS UPQ CPUUPN MFGU SJHIUOVNCFS  JNBHF )5.-*NBHF&MFNFOU VQEBUF HBNF(BNF WPJE ESBX HBNF(BNF WPJE IJU HBNF(BNF WPJE 1MBZFS VQEBUF HBNF(BNF WPJE ESBX HBNF(BNF WPJE IJU HBNF(BNF WPJE 4FSWFS JT#SPLFOCPPMFBO  IQOVNCFS VQEBUF HBNF(BNF WPJE ESBX HBNF(BNF WPJE IJU HBNF(BNF WPJE #FBN  WFMPDJUZOVNCFS VQEBUF HBNF(BNF WPJE ESBX HBNF(BNF WPJE IJU HBNF(BNF WPJE $PSF 0CKFDUT
  4. ԗՑԡ⼀⻤㮢♫ᣄ‾㮣 • ⷭ⒈ӃӵԒԾԠԏԗ԰ӼԗՑԡӑ☛ⅈ • ԿՕԹԮԋ • Y ZԒԾԠԏԗ԰Әⷭ⒈Ꮝᮏ • I

    XԒԾԠԏԗ԰ӘԝԌԢ㮢)FJHIU 8JEUI㮣 • UPQ CPUUPN MFGU SJHIUᑑӉӴఋᇰӘ৴⡕ • ՉԥԫԱ • VQEBUF ᏍᮏӔӓӘᥥ᡾⇹ՉԥԫԱ • ESBX ԒԾԠԏԗ԰Әᝡ∈ • IJU ⷥ╝᫰⏑ӁӉӒҷӘ௡ⅈ
  5. ՓդԿ௡ⅈ • +4ӕәकᇰ㔿㗏ӑ௡ⅈӼᇴ⷗ӃӵՉԥԫԱҶӎҬӵ • TFU5JNFPVU • TFU*OUFSWBM • SFRVFTU"OJNBUJPO'SBNF •

    ԚդՈ㔸⋬ӑәSFRVFTU"OJNBUJPO'SBNFҶӲҹਜӹӶӵ • TFU5JNFPVUәᛡᇰᣪ㔿ᒁӕᇴ⷗ҿӶӵ • TFU*OUFSWBMәकᇰ㔿㗏ӑᇴ⷗ҿӶӵ • SFRVFTU"OJNBUJPO'SBNFәԾՑԎԞӘが⫪ӕᒸӂӐᇴ⷗㔿㗏Ҷ⧞ಌ ⽬ᡖҿӶӵ
  6. ԽՔդՈԡԕԫԿ௡ⅈ QFSGPSNBODFOPX ҶᐠᡔӕḉҿӶӵ QSJWBUF MPPQ OPXOVNCFS WPJE \ ㉊ᎉӔӳEFMUBәNTӕӔӵ DPOTU

    EFMUB OPX  UIJTUIFO UIJTUIFO OPX XIJMF EFMUB  \ UIJTSFOEFS న༪ᇴ⷗ᣪӒӘᣪ㔿፜ҶNTলञӔӳ௡ⅈӼ㉜ӫӵ EFMUB   ^ UIJTSFR SFRVFTU"OJNBUJPO'SBNF UIJTMPPQCJOE UIJT ^ QVCMJD TUBSU WPJE \ UIJTSFR SFRVFTU"OJNBUJPO'SBNF UIJTMPPQCJOE UIJT ^ ԚդՈ஗ᣪ㔿Ӽ㉜ӫӐ ԽՔդՈӼԡԕԫԿӃӵ
  7. Ք՛ԨՒ՛Ԙ   9㆓ :㆓ 0CKFDU Y Z X XJEUI

    I IFJHIU ༺ᑜ ⏔ᑜ DUYGJMM3FDU Y Z X I ∈଍ DUYESBX*NBHF JNBHF Y Z X I ༺ᑜ झ⻄ᑜ DUYCFHJO1BUI DUYNPWF5P Y Z DUYMJOF5P Y Z I DUYMJOF5P Y X Z I DUYDMPTF1BUI DUYGJMM ஘ DUYCFHJO1BUI DUYBSD Y Z SBEJVT  .BUI1*  DUYTUSPLF DUYGJMM
  8. ԒԽԡԗՒդ՛Әᵿ⇹ ൧⺧㛗࿋Ә$BOWBT DPOTU DBOWBT EPDVNFOUHFU&MFNFOU#Z*E HBNF  DPOTU DUY DBOWBTHFU$POUFYU

    E  ԒԽԡԗՒդ՛ DPOTU PGG4DS EPDVNFOUDSFBUF&MFNFOU DBOWBT  PGG4DSXJEUI DBOWBTXJEUI PGG4DSIFJHIU DBOWBTIFJHIU DPOTU PGG$UY PGG4DSHFU$POUFYU E  ԿՒՔ՛ԨՒ՛Ԙ PGGO$UYGJMM3FDU     ӔӓӔӓ ൧⺧㛗࿋Ә$BOWBTӕԛԼդӁӐᝡ∈Ӄӵ DBOWBTESBX*NBHF PGG4DS    4$03& 5*.& ൧⺧㛗࿋$BOWBT ԒԽԡԗՒդ՛ ⤪ᤐ "TTFUT
  9. ՎդԞդ୾౟Ә൑һদһ LFZEPXO EPDVNFOUBEE&WFOU-JTUFOFS LFZEPXO F  \ HBNFLFZCPBSE FLFZ ^

    1MBZFS TXJUDI HBNFLFZCPBSE \ DBTF "SSPX6Q UIJTZ  ञӕQY┅ಌ CSFBL DBTF "SSPX%PXO UIJTZ  टӕQY┅ಌ CSFBL ∪ ^
  10. ᏍᮏӘᥥ᡾㮢൉ቂ㮣 • ၏ӕᑑӉӍӉӳ൉ቂҿӅӉҮӒҷ • ፗ൫Ә၏ӕᑑӉӍӉӳY㆓Ә㉎ᏌӼ൉ㆊ • ञटӘ၏ӕᑑӉӍӉӳZ㆓Ә㉎ᏌӼ൉ㆊ S೯ᑺ YW ZWY

    Z㆓ᢅൿӢӘ㉎Ꮜ JG UIJTY  UIJTS  ]]UIJTY UIJTS DBOWBTXJEUI \ UIJTYW UIJTYW ^ JG UIJTZ  UIJTS  ]]UIJTZ UIJTS DBOWBTIFJHIU \ UIJTZW UIJTZW ^ UIJTY UIJTYW UIJTZ UIJTZW
  11. ᏍᮏӘᥥ᡾㮢ᡯӫ┅ಌӘ㉎Ꮜ㮣 • ԒԾԠԏԗ԰ӼᡯӫӕಌҵӁӉҮӒҷ • ㉎Ꮜ   9㆓ :㆓ TFMGǏ

    TFMG Y Z YǏ ZǏ =   % + %    , + = , = ∕   Ӕӆᡯӫ┅ಌӑౢ㉎ӃӵӘҵ㮹 Y㆓ᢅൿӕ ѬZ㆓ᢅൿӕ Ә㉎Ꮜӑo Ә⻄ᏌӑಌҮӉӒӃӵ ԼԧԜՑԡӘᇰⅈӲӴѬᡯӫ┅ಌӘ㉎Ꮜә ȸ ✂ ӕӔӵ ㉎ᏌӼ⸲᱒Ӄӵ ᡯӫ┅ಌӘ㉎ᏌӒञटፗ൫┅ಌӘ㉎ᏌӼൺ ӂӕӃӵӕә W  ȸ ӕӃӵ
  12. ᏍᮏӘᥥ᡾㮢⓬ӑ༪ㆊ㮣 ⅁ཡӘԽՔդՈᡔ DVSSFOU'SBNF  ඵ௻ӼӑూӍӉѬԽՔդՈҬӉӴӘ⻄㉎Ꮜ SBE1FS'SBNF  .BUI1*  

    ᲢԽՔդՈහӚӶӵ VQEBUF \ UIJTY .BUIDPT SBE1FS'SBNF DVSFOU'SBNF UIJTZ .BUITJO SBE1FS'SBNF DVSSFOU'SBNF ^
  13. ⷥ╝ఋᇰ ⏔ᑜ   9㆓ :㆓ UBSHFUCPUUPN UBSHFUUPQ TFMGMFGU TFMGSJHIU

    UBSHFUMFGU UBSHFUSJHIU TFMGUPQ TFMGCPUUPN TFMG UBSHFU ⟕ᢅൿ TFMGUPQ UBSHFUCPUUPN UBSHFUUPQ TFMGCPUUPN ᮜᢅൿ  TFMGMFGU UBSHFUSJHIU UBSHFUMFGU TFMGSJHIU
  14. ⷥ╝ఋᇰӘ⢰Ҳᢅ ⷥ╝ӁӐҮӔҮ࿾൶Ӽ⢰ҲӵӒӹҵӴӮӃҮ ⷥ╝ӁӐҮӔҮȔⷥ╝ӁӐҮӵӕႁᝪ ԱգՊՓԔ՛ӘᴿణӼਜӍӐႁᝪӃӵ 㮢ҿҷӥӓӘԝ՛ԿՓԛդԱӒൺӂӕӔӍӉ㮣 ⷥ╝ఋᇰ ⻎⽟ TFMG UBSHFU UBSHFUUPQ

    TFMGCPUUPN UPQ CPUUPN TFMG UBSHFU TFMGMFGU UBSHFUSJHIU SJHIU MFGU TFMG UBSHFU UBSHFUMFGU TFMGSJHIU MFGU SJHIU TFMG UBSHFU TFMGUPQ UBSHFUCPUUPN CPUUPN UPQ TFMGUPQ UBSHFUCPUUPN ]]UBSHFUUPQ TFMGCPUUPN ]]TFMGMFGU UBSHFUSJHIU ]]UBSHFUMFGU TFMGSJHIU TFMGUPQ UBSHFUCPUUPN UBSHFUUPQ TFMGCPUUPN TFMGMFGU UBSHFUSJHIU UBSHFUMFGU TFMGSJHIU ʍ ʎ ʏ ʐ ʍ ʎ ʏ ʐ
  15. ⷥ╝ఋᇰ ⏔ᑜ ஘ ⍃⻄झ⻄ᑜӘ㠹ҿ DPOTU B TFMGUPQ  UBSHFUZ ⍃⻄झ⻄ᑜӘᏂ㈄

    DPOTU C TFMGMFGU  UBSHFUY ஘Ә೯ᑺ DPOTU D UBSHFUS ፗञӘⷥ╝ఋᇰ झᎬᢅӘᇰⅈB? C?D? JG .BUIQPX B   .BUIQPX C  .BUIQPX D  \ ⷥ╝᫰⏑ ^ TFMG գ UBSHFUS UBSHFU Y Z TFMGMFGU TFMGUPQ B TFMGUPQNJUBSHFUZ C TFMGMFGUNJUBSHFUY D ᡯ㈄D ஘Әसᒦҵӳ⏔ᑜӘፗ ञӨӑӘヮ㘊 ӲӍӐ೯ᑺSӲӴᡯ㈄D ӘᢅҶ⏗ҮӒҷѬⷥ╝ ӁӉӒఋᇰӑҷӵ +
  16. ԝԎ՛ԱԯԞԌ՛ • ႙ᇆӑә㚺㛂౵᧠."Ӽቀᠳ • ԚդՈӘԝԎ՛ԱԯԞԌ՛әఉᛩᙌ • ⧞௻ӕ⽤㛸ӼҵӁӉ • ҿҹӳԌ՛ԧդԵԫ԰ӔӘӑѷҿҹӳҿҹӳѸӘՉՕԯԋӼՊ ԩդԽӕӃӵ

    • ԽԉՇԛ՛Әఙ✂㮢⏔ᑜᵉYѬझ⻄ᵉYѬԶԌԢY㮣Ӽᇟӵ • ㊶㢕ӕӔӳӔҮһӓѬ⣒ӕᱳӴӮӃҮԝԎ՛ԱӼӎҹӵ