Engineering

Jun 29, 2018

Reactでスネークゲームを作ってみた-解説編 環境構築-

 

目次

 

Reactでスネークゲーム作ってみた。

Reactでスネークゲームを作ってみた-解説編

  1. 環境構築
  2. フィールドを作る
  3. ヘビを動かす
  4. 曲がれるようにする
  5. 壁にぶつかった時の処理
  6. えさを表示する
  7. えさを食べる処理
  8. ステータスを管理する
  9. ゲームオーバーの処理を書く
  10. スピードを変えられるようにする。
  11. 最後に
 

インストール

 

ひとまず 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で動かしたいとかだとかなり便利です。

 

まとめ

 

今回は環境構築だけなのであまり面白くありませんがら次回から実際にコードの解説をしていきます。

関連記事

記事検索

気になるサイト内の記事を検索する

プロフィール

バンクーバー在住のフルスタックエンジニアです。React, Ruby on Rails, Go などでお仕事しています。職場がトロントなので日本、トロント、バンクーバーの三つの時天空を操って生活しています。

プロモーション