色を当てる Wordle、Colorfle を作った。 - クフでダローバルな日記

サマリ

wordle派生で、色のカラーコードを当てるゲームをつくった。

mazamachi.github.io Colorfle

↓を見て分かる通り、上に表示される四角のカラーコードを当てるゲームです。

f:id:SWIMATH2:20220217220428p:image:h400 — Colorfle プレイ画面

各カラーコードを入力後、自分が入力したカラーコードがどんな色なのか分かるため、色を近づけていけば正解できるはず。なので意外と難易度は低い？

以下、実装に至るまでの気持ちの変遷と、実際に作ってからの気持ち。

経緯

Wordle およびその派生ゲームを毎日TLで見るようになって、世界的ブームすげーという気分になっていた。
なんか作りたいなという気分はあるものの、アイディアの壁と実装の壁があるので時間的に何も作れる状況にない、と自分に言い訳していた。

その折、id:motemen さんの漢字ル作成エントリを見て、OSSをforkすればあとはロジックだけ書けば良いのかとなって実装の壁が崩壊してしまった。

さらに、Worldleという、答え（地図）がもう表示されててあとは当てるだけという、元の Wordle とはだいぶ乖離したが面白いゲームを見て、これありなら何でもアリじゃんとなってアイディアの壁もだいぶ低まってしまった。

なので、「なんか見て当てるのが面白そうないろんな種類があるもの」ないかなーと思って当たりを見回してみた。
そこで気付いたんだけど、世界には色があった。
アイディアの壁も崩壊した。

実装パート

最初は単に単語のリストを色のリスト（000000-FFFFFF）にするだけだから、2秒で終わるだろうと思っていた。が、やってみたところ、HTMLのカラーコードで表現できる色は（透明度除いて）256*256*256=16,121,856 種類もあるんで、単純な配列に持たせるだけだと重すぎて無理じゃんとなった。
世界の彩りの豊さを舐めていた自分に恥いるばかりである*1。
そこで、「入力された文字列がカラーコードとして正しいか判定する関数」と「n番目の色を取得する関数」を実装することとなった。

さらに、元の実装だと日付から取得されるnの幅が小さすぎて全然ランダムにならず、ほぼ毎日緑が続くことになってしまっていた。なので、ある程度均等にばらつかせるためにシード付き乱数を実装することとなった。まあググってコピペしただけだが、なんか学びになって良かった。

あとはなんか自分がやっててつまんなかったんで、ちょっとでも楽しくなるように色々調整して終わり。

github pages による公開でややハマったけど、公式ドキュメント読んだらどうにかなった*2。

これでもトータル5時間もかからず一通り終わったんで、OSSによる開発の高速道路化はすごい。