Svelteを使ってブラウザゲームを作りました
タイトルの通り、ここのところ記事にしていたSvelteを使ってブラウザ上で動く簡単なゲームを作りました。
ので、今日はそれについて書いていきます。
どんなゲーム？
こちらです。
Numnam（ナムナム）という名前です。名前は響きだけで決めました。
5桁の数字を当てるだけのシンプルなゲームです。
正解の数字は以下のような縛りがあります。
- 一の位は0または5
- 全部違う数字
最初は「全部違う数字」だけにしてたんですが、全然当たらないのでもうちょっと絞りました。
1問につき3回まで回答することができ、回答するごとにヒントがもらえます。
それぞれの数字については、
- 場所も数字も合っていたら数字の色はそのまま
- 数字は合っているけど場所が違ったら数字の色は赤
- 含まれない数字だったら黒
また入力した5桁の数字については、
- 正解より大きければピンクの枠
- 正解より小さければ青の枠
になります。これと上述した縛りを元に数字を当ててください。
「WORDLEのパクリ」はNGワードです。インスパイアと言ってください。
ちなみに3回回答しても当たらなかった場合は、
「まだ本気出してないだけでしょ？」とめっちゃ煽られます。
やってみると程良い難易度でそれなりに頭の体操になるかと思います。
技術面
ここからは使った技術について簡単にまとめます。
今回サーバーサイドは何も書いていません。フロントエンドのみの実装になります。
これぐらいのものであればわざわざバックエンド書かなくてもいいかなと思ったのでフロントのみで完結させました。サーバー用意するのも面倒だし
そもそものコンセプト的に「ログイン不要でサッと遊べるもの」だったのでサーバーサイドが必要な複雑なものを作る気がありませんでした。
フロントエンドは冒頭に書いたとおりSvelteです。先日めでたく正式リリースされたSveltekitを使いました。
そこにTypeScriptも合わせて型をがっちり定めて書きました。が、正直改善の余地ありまくりなのでぼちぼちリファクタリングしていきたいと思います。
あとテストも書けてないのでそこも課題です。
デプロイ先は色々検討しましたがCloudflare Pagesを使ってます。
@sveltejs/adapter-staticを使って静的サイトとしてビルドされるように設定しています。
Githubと連携すると指定したブランチにプッシュされるたびに自動でビルドしてデプロイしてくれるのでめっちゃ便利です。
ビルド〜デプロイにかかる時間は約1分です。
注意点として、Cloudflare PagesではデフォルトのNode.jsのバージョンが12.18.0です。なぜ。
しかも使えるバージョンも17系までなので18系を使っている方はご注意ください。
僕はnodenvで17系を指定して、.node-versionもリポジトリに含めています。
その他、Cloudflare Pagesの環境変数でNODE_VERSIONを指定することでも可能なようです。
詳しくはこちらをご覧ください。
まとめ
というわけで自作ゲームの紹介でした。
今月頭から作り始めて実際にかかった時間でいうと多分5〜60時間程でしょうか。フロントだけだったのでサクッと作りました。
年内にリリースできたらいいなと思っていたので無事達成できて一安心です。
年末年始の暇つぶしにぜひ遊んでみてください。あとバグがあったらこっそり教えてください。
