13 ポイント 投稿者 seokmin 2021-11-02 | 2件のコメント | WhatsAppで共有

こんにちは。普段はGeekNewsを読むばかりでしたが、最近 Cloudflare Developer Challenge (https://challenge.developers.cloudflare.com/) に参加したプロジェクトを共有したくて投稿します :)

遊び方は、メイン画面の Create Room ボタンを押して、次の画面に表示されるリンクを共有するだけです。そのリンクに接続した2つのブラウザ同士でセッションを構成してマルチプレイヤーゲームを進行し、この一連の処理はすべて Cloudflare Workers 上で行われます。リポジトリはこちらです。

https://github.com/SeokminHong/edge-yacht


Cloudflare Developer Challenge は、Cloudflare のプロダクトである Cloudflare Workers、Cloudflare Pages、Workers KV、Durable Objects を2つ以上活用して面白い作品を作り、投稿するプログラムです。こうしたプロダクトを知って参加するきっかけになったのが GeekNews だったので、なおさら共有したくなりました!

Cloudflare Workers は、サーバーレスコードをグローバルエッジにデプロイできるようにし、WebSocket と Durable Objects による coordination をサポートします。実際、これを活用してすでにオンライン上でマルチプレイヤー Doom を動かすデモが披露されています。 (https://blog.cloudflare.com/doom-multiplayer-workers/) これに触発され、約1か月の開発期間で2人用マルチプレイヤーゲームをゼロから作ってみようと思いました。

ゲームのデザインとルールは、Nintendo Switch の 51 Worldwide Games というミニゲーム集に収録されている Yacht を参考にしました。クライアント側でゲーム状態を改ざんできないよう、ゲーム状態のミューテーションはすべて Workers で実行し、クライアントは JavaScript 3D ライブラリ three.js を使って状態をシミュレーションします。開発期間が短く、オーディオやエフェクト、デザインなどで妥協した部分も多いですが、ひとまず動くゲームを完成させられたので、ここに投稿します。

2件のコメント

 
xguru 2021-11-02

わあ!! ヤッチですね。サイコロさえあればできるので、私も好きなゲームです。完成おめでとうございます。

試しにブラウザを2つで接続してみたら、とてもきれいにしっかり動きますね。

エッジで動くマルチプレイヤーゲームには、十分意味があると思います。

 
seokmin 2021-11-02

ありがとうございます!GeekNewsのおかげで、こういうプロダクトに関するニュースに触れることができましたね(笑)