Webブラウザでゲームを作る場合、多くが専用のゲームエンジンを利用します。そして、それらはWebGLやCanvasに描画するでしょう。通常のWeb開発とはやり方が大きく異なるので、学習コストが大きくなります。 今回紹介するracing-gameは3Dのレーシングゲームです。しかし、フレームワークにReactを用いていることで、Web開発者にも取っつきやすそうです。

racing-gameの使い方

車が1台のレーシングゲームとなっています。

矢印キーで操作、スペースでドリフト、シフトでターボになります。

トンネルの手前で終了です。

細かいパラメータを調整できます。

Cキーで視点変更。運転席から。

上から見下ろすビューも。

racing-gameはReact Threeというライブラリを使っています。名前の通り、ReactでThree.jsを扱うものです。これによってReactの作法でThree.jsを使って3D描画が可能です。レーシングゲームのパフォーマンスは良いので、他のゲームにも十分使えそうです。

racing-gameはReact/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

@pmndrs/racing-game pmndrs/racing-game: ? Open source racing game developed by everyone willing