おおきなかぶを引っこ抜け!

https://github.com/allocup-2026-tabaru/untokosyo-infra

Next.js

Go

TypeScript

GCP

Docker

童話「おおきなかぶ」がモチーフのチキンレースゲーム

時任琢真

かなで

推しアイデア

うんとこしょ、どっこいしょ。この掛け声がゲームに!

作った背景

うんとこしょ、どっこいしょ、これだけ Three.js使ってみたかった

推し技術

Next.js + Tree.js で 3Dモデルを使った「かわいい」Web UI のゲーム画面

プロジェクト詳細

ルール

みんなで『おおきなかぶ』を引っ張って抜くゲーム。

プレイヤーは自分のスマホで、画面をスライドしてカブを引っ張ります。 大きく引くほどカブに大きな力を加えられ、貢献度が上がります。

ただし、カブが抜ける瞬間にまだ引っ張っていると、勢いで転んでしまいます。転んだ人は負けです。

勝つためにはできるだけ長く・強く引っ張って貢献しつつ、カブが抜ける直前にうまく手を離す必要があります。

カブが抜けそうになると様々な兆候が現れるため、上手に見極めましょう!

最終的にカブが抜けたときに転ばずに立っていた人の中で、最も貢献度が高い人が勝ちです。

技術のはなし

インフラ

Vercel 上で Next.ts、3Dモデルは Cloudflare R2、wsの通信サーバーはGCP VM上で GOのchiが動いています。

image

開発環境はMakefileを用いて、初期セッティングやサーバーの起動、デプロイ部分を簡略化しています。

3Dモデル

3Dモデルは自作のローポリモデル。全部合わせても5MBもありません。普通に作ると軽く50MBは超える容量になるのですが、少ない頂点数でも違和感がないように工夫することで軽いモデルでの作成を行いました(結果用意したcloudflare要らない子説がでてインフラ担当は複雑な気持ちでした)。

image

image おじいちゃん(開発名称:じじい)

image 犬(開発名称:熊)

image カブが埋まる穴 トーラスで大まかな大きさをとって、ジオメトリーノードで頂点座標をずらすことで土の盛り上がりを表現しています。地味ですが、3dモデル担当の一番の推し技術です。

ちょっと認証

今回バックエンド側が寂しい構成なので、どこか無理やりにでも認証をつっこみたいという思いで入れた認証です。 wsを確立した後にtokenのやり取りをトンネル内で行うことで、なりすましを予防する仕組みです。

本ゲームはオフラインの場で楽しむことがメインになるので基本は不要ですが入れました。 image

時任琢真

@tokito