micro:bitでマリオなりきり!

micro:bitでマリオなりきりウォッチを作る!

最近、CoderDojo静岡さんでお世話になっています。

micro:bitのスターターキット(TFabWorksさん)を配布いただいたようで、子供達が何か楽しいことができるように、大人(大人と子供の間のことな?)なりになんかできないかな、と思います。

CoderDojoを何回かみていると、nintendoのマリオブラザーズに夢を馳せる子は多いようです。

作りたいもの

  • 仕様1:ジャンプすると「ぷーん」とジャンプ音がする
  • 仕様2:1秒あたり50cmぐらい前方に移動する(つまり、Vx=0.5m/s)とBダッシュ音がする
    • 腕をフリフリするとダメなのかな?(アルゴリズムによるのかな?)
  • 仕様3:Aボタンを押したら、大きくなるような音がする。Bボタンを押したら、一気死んだ感じな音がする。

購入物

TFabWorksさんのD1スターターキットで始めます。何を揃えていいか、わからなかったので、相棒の6Bucksに手伝ってもらいました。

下準備

Scratchを勉強する

環境はScratchではなかったので、省略可能。 ただ、ブロックプログラミングになれるには良いと思います。

micro:bitに触ってみる

micro:bitについて調査をする

傾き/動きセンサー:傾きや動きの有無、振動、ジャンプなどを検知できる。micro:bitを動かしたり傾けたときに、Scratch上のスプライトを動かすことなどが可能。

なんかできそうな気がしてきた!!

音声素材があるか、調査する

micro:bitをScratchで操作してみる

  • 未済。

つづき

進捗はこちらに追記します。

Gatsuby, Get Started!

Gatsubyとは

Gatsbyとは、Reactベースの無償のオープンソースのフレームワーク。 速攻でWEBサイトやアプリを作成することができる?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

GatsubyJSで始める

  1. Gatsubyクライアントをインストールする

    $ npm install - global gatsby-cli
    

    npmが古いバージョンの場合は、下記のコマンドで最新版にあげてください。

    $ npm i -g npm
    
  2. サイトを作成する

    好きなフォルダに移動し、下記のコマンドを打つと、「my-gatsuby-site(任意)」のディレクトリが作成される。 プロジェクトフォルダに移動してください。

    $ npx gatsby new my-gatsby-site
    $ cd my-gatsby-site
    
  3. 動作確認する

    • デベロップモードで起動する。
    $ npm run develop
    
    DONE  Compiled successfully in 2623ms                                  18:19:03
    
    
    You can now view gatsby-starter-default in the browser.
    
      http://localhost:8000/
    
    View GraphiQL, an in-browser IDE, to explore your site's data and schema
    
      http://localhost:8000/___graphql
    
    

    デフォルトページ

    GraphQLページ

    • GraphQLとは?…今度調べる(TODO)
  4. 本番運用用のビルドを作成する

    サイトに必要な最適化されたプロダクションビルドデータが展開される

    npm run build
    
  5. 本番用ビルドをローカルで動かす

    npm run serve