QRの黒い部分を消していくゲームがトゥイッターでバズってたので作りました。
ツイート主の方も作っていることに後から気づきました。
技術的な話
本家との差別化
どうせWebでやるならWebで完結させたかったので、自動判定を付けてます。
判定にはjsQRというライブラリを用いています。
このライブラリは汎用的なQRリーダで、スマホのカメラと合わせて使うことが多いですが今回は、内部で擬似的にレンダリングしたQRをjsQRに読み込ませてます。
これは若干冗長なプロセスで、できたQRをそのままデコーダに食わせることもできます。
ただ、デコーダは必要な部分しか読み取らず、位置補正や歪み補正のブロックが意味を持たなくなってしまいます。
これではゲーム性を著しく低下させるので敢えてレンダリングを挟んでいます。
ただチューニング不足か、精度が悪いのか、「ゲームでは読めない判定なのに、まだ読める。そうiPhoneならね」という事態が発生しました。
ここまでやっておいてなんですが、自動判定機能はオフにできます。
やっぱスマホで撮って読めるかドキドキした方が楽しい。
SvelteKit
最近の趣味開発はもっぱらSvelteKitです。
今回も例に漏れずSvelteKitを採用しています。
CSS in JSや、状態管理ライブラリの検討をする必要がないです。
詳細は調べていただければと思いますが、
- Vue.jsのようにSFCで直接スタイルを書ける（賛否ありそう）
- Svelte組み込みのストア
の2つは地味ながらかなり強力です。
ライブラリ
みなさんも作りたいでしょうから、QR Jengaのコア部分はnpmにリリースしました。
React/Vue.js/CLI版待ってます！
今回ライブラリも一つのリポジトリに入れてるのでpnpmのWorkspaceを使っています。
スタイル
勢いで1,2日で作ったのでスタイリングは手を抜いてます。
今回は、water.cssという class-less なCSS Frameworkを使いました。
おわりに
世の中のQRをいたずらで白に塗りつぶすのはやめましょう（？）