Engineering

Jun 27, 2018

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

 

ある日youtubeで面白い動画を探してたら、こんな動画に出会いました。

https://m.youtube.com/watch?v=AaGK-fj-BAM

動画自体はp5.jsというフレームワークを使って15分以内でスネークゲームを作ってみるというものです。

本当に15分で作れるの??とか思って見ていると案の定ラスト5分とかで、スネークが逆走した時にちっちゃくなっちゃったりして、バグ見つけてわちゃわちゃしています。

その様が締め切り前にバグとか、考慮漏れが見つかってドタバタする僕含めて多くのエンジニアの境遇に似てるなぁと思いながら楽しく見ていました。

 

スネークゲーム作りました

 

とまあ、話を元に戻しますが、自分でスネークゲームを作ってみるのも面白いかもしれないと思い実際にスネークゲームを作ってみました。

実装に要したのは20時間くらいですかね?あるいはもうちょっとかかったかもしれませんが、ゲームとして動くには10時間くらいで、スマホでも使えるようにレスポンシブにしたり、デバッグしたりでプラス10時間くらいで作りました。

自分で遊んでみても結構面白いので、我ながら良くできたなぁなんて思ってます。 (まぁ、元のゲームのアイデアが面白いからかとは思います、、、)

 

スネークゲームのルール

 

スネークゲームを知らない人もいるかと思うので、ざっくりルールを説明すると

登場人物

  • へび(スネーク)
  • えさ(フード)
ルール
  • へびはえさを食べると成長して長くなる。
  • 長くなった自分に衝突したらゲームオーバー
  • ゲームオーバーにならず、どこまで長さを伸ばせるか。
ルールはシンプルでいかに自分にぶつからずに、自分を成長させていけるかというゲームです。簡単ですね。

 

ざっくり作り方を説明

 

詳細な解説は、気が向いたらやろうと思うのですが、大まかに作りを説明すると

  • フィールドは固定幅と高さのdiv要素を並べて表現。
  • へび、えさ、フィールド(一つのdiv)にhtmlのclassを割り当て
  • Reactで一定の間隔ごとにレンダリングを行いへびが動いているように見せる。
  • へびの移動は、divの隣の要素をへびの色に変化させた後にへびの長さの分だけへびのdiv要素を残し他を元のフィールドclassに戻して表現する。
という感じですかね。この説明でわかる人と分からない人がいるとは思うのですが、今回はこれくらいの粗さの説明にしておきます。

ソースコードは、ここに置いてありますので気になる方はコード見てもらったり、スターを押して頂けると嬉しいです。

https://github.com/version-1/react-snake-game

 

まとめ | 新しい技術を勉強するには暇つぶしにでも何か作ってみると身につく

 

以前に読んだSOFT SKILLS ソフトウェア開発者の人生マニュアルという本では、基礎を一通り学んだらその技術を使って一通り遊んでみるという時間を作ると新しい技術を習得する効率がよくなるというようなことが書いてありました。

それに習ってというか、単純に理解することとできることというのは違うものなので新しく学んでみたことは実践するのが一番記憶にものこるし、そのあと役に立ちやすいです。実際にやってみて「あれ、こういう場合どうするんだ?」とあらたな疑問が湧く場合もあるので、実践の過程でさらに理解が深まります。

Reactもチュートリアルがあってそれをやるだけでも基礎の理解はできますが、全く指示がないままなにか作れと言われるとなかなかできないですよね。ただ、レールが敷かれていないなかで自分で試行錯誤しながらプログラムを書いていくというのが一番力がつくのでぜひともチャレンジしたいところです。(力が足りなすぎて、迷子になる場合もありますが、、そういう時は期間をおいて再チャレンジしてみたり最初のハードルを下げてみたりしてみると良いです。)

今回は本当に作りましたという報告だけで、コード0ですが、暇つぶしに作ったゲームが割と面白かったので自慢してみました。

今はちょっと解説書こうかなという気になってますが、どうなるかはわかりません。

では。

関連記事

記事検索

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

プロフィール

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

プロモーション