新しい言語やフレームワークを覚えるのに、まず何か作ってみるのはお勧めです。書籍を見るだけでなく、実際に手を動かしてみると分かることがたくさんあります。脳の刺激にもなり、記憶定着に役立つでしょう。 今回紹介するのはReacteroids、Reactを使ったアステロイドです。

Reacteroidsの使い方

ゲーム画面です。Canvasを使っており、速度はじゅうぶんです。

ゲーム画面

ゲームオーバーです。

ゲームオーバー

ゲーム中の画面です。ぬるぬると動いています。

ゲーム中

ReacteroidsはReact/Canvasを使って作られています。Canvasということもあり、Reactの重さは感じません。キー入力にもきびきび付いてきますので、ゲームを楽しめることでしょう。ReactやCanvasの使い方を覚える上でいい学習素材になるでしょう。

ReacteroidsはJavaScript製のオープンソース・ソフトウェア(Creative Commons)です。

Reacteroids chriz001/Reacteroids: A implementation of the classic Asteroids game using React and Canvas in es6