目次
Reactでスネークゲームを作ってみた-解説編
- 環境構築
- フィールドを作る
- ヘビを動かす
- 曲がれるようにする
- 壁にぶつかった時の処理
- えさを表示する
- えさを食べる処理
- ステータスを管理する
- ゲームオーバーの処理を書く
- スピードを変えられるようにする。
- 最後に
インストール
ひとまず Reactの環境をつくっていきます。
reactの環境構築は手間を省いて、create react appで1コマンドで仕上げます。 (cliをグローバルにインストールする必要があるので2コマンドかも)
コマンドのインストール
npm install -g create-react-app
アプリの雛形作成
create-react-app snake-game
オブジェクトの操作などで便利なのでついでに、lodashも入れておきます。
yarn add lodash
これで環境構築は終了です。
ディレクトリ構成
最終的なディレクトリ構成は以下のようになります。ディレクトリ構成
|--public
| |--assets
|--src
| |--components
| |--styles
cssはsassで書いています。最近ピュアcssに耐えられない体になってきているのでさらっと入れちゃっています。
※cssの解説はあまり詳しく説明しないので、面倒な方はmasterのcssをダウンロードしてつかったり、コピペすると良いと思います。sassをそのまま使いたい方はnode-sassを入れましょう。
yarn add node-sass
github pagesについて
今回デモを公開していますが、github pagesというパッケージを入れるとgithub上での公開がかなり簡単になります。ちょっとしたReactアプリのデモをWebで動かしたいとかだとかなり便利です。
まとめ
今回は環境構築だけなのであまり面白くありませんがら次回から実際にコードの解説をしていきます。