20200708_おやこテックLT_MakeCodeで神隠し

MakdeCode Arcadeで自作ゲームをつくってみました。

Transcript

1. MakeCodeで神隠し
   

   View Slide

2. ぺんたけ
   webエンジニア / デザイナーの狭間
   ⚙ Noodl / HTML / CSS / JavaScript
   Noodlコミュニティ運営 / Noodler
   Twitter：@pentake_de

   Qiita：@pentake
   
   
   

   View Slide

3. MakeCode Arcade の紹介
   ‍ 実際につくってみた話
   STEAM教育に良さそうなツール！
   

   View Slide

4. 　オリジナルゲームをつくる...！？　
   

   View Slide

5. つくってみたい！！
   
   

   View Slide

6. 参加できず...
   
   

   View Slide

7. 後日、一人ハンズオン。
   ‍
   

   View Slide

8. View Slide

9. 懐かしい雰囲気...
   

   View Slide

10. View Slide

11. 英語
    

    View Slide

12. Google Chromeの翻訳機能をありがたく使わせていただく
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. １時間くらいでシューティング
    ゲームが完成！
    
    

    View Slide

19. 物足らない...
    
    もっとオリジナルな何かを作りたい...
    

    View Slide

20. View Slide

21. ❗❗
    

    View Slide

22. 砂金だ！！！！！！
    さ きん
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. 砂金を撒き散らすカオナシから
    逃げ続けるゲーム
    ルール
    15秒間、ライフがゼロにならなければ
    プレイヤー（アヒル）の勝ち！
    

    View Slide

27. View Slide

28. https://makecode.com/_cdYDaeDkWHe3
    （PCだと音が出ます）
    ↓　遊んでみてね　↓
    

    View Slide

29. つくったものをシェアしやすい！
    オリジナルのデザインがつくれる！楽しい！
    ブロックを組み合わせて数学的な論理を学べる！
    かつ（and）/ または（or）/ 否定（not）...
    MakeCode Arcade のココが良い！
    ↑
    

    View Slide

30. View Slide

31. MakeCode Arcade のココが良い！
    JavaScript (TypeScript) で書ける
    Github連携できる
    ‍
    アドバンス編
    

    View Slide

32. ブロックに対応したJavaScript (TypeScript) での記述
    

    View Slide

33. Google翻訳機能を使っていると
    コードも翻訳してしまうので注意！
    

    View Slide

34. Githubと連携するとMakeCode Arcade画面から
    コミット&プッシュやプルができる
    

    View Slide

35. 今後の日本語対応に期待！
    　
    

    View Slide

36. この夏はおやこで
    MakeCode Arcade
    
    

    View Slide

37. View Slide