音MADとポケモンと私

音MAD7割　ポケモン2割　その他1割

音MAD作者版Wordle『Otomadle』で遊ぼう

この記事は音MAD Advent Calendar 2024に参加しています！

adventar.org

 

 

Wordleとは

皆さん、Wordleというゲームはご存じでしょうか？

www.nytimes.com

6回の回答の間に、正解の英単語を当てるクイズゲームです。

文章での説明だとよくわからないと思うので、どんなものか知らない方はぜひやってみてください！

 

 

 

様々なWordle派生

Wordleのシステムは人気で、英単語以外の単語を当てる様々な派生ゲームが作られています。

一例を紹介します。

wordle.mega-yadoran.jp

plum-chloride.jp

railword.com

 

中でも、ポケモンが好きな自分はポケモンWordleに大ハマりしており、毎日プレイしていた時期もありました。（問題が更新される0時が過ぎると各ゲームのリザルトをTLに流していた時期もありました。）

 

 

 

音MAD作者版Wordle

そんな僕がWordleを始めた2年前頃から、うっすら思っていたことがありました。

『音MAD作者版のWordleも作れるんじゃないか・・・？』

ずっとアイデアとしてはあったんですが、なかなか実際に作ろうと思う機会もなく、頭の中のアイデア止まりでした。

そんな中、今回のアドベントカレンダー企画にお誘いいただいたので、今だ！と思い、制作に乗り出しました。

 

 

 

制作記

実際に作ったものの紹介をする前に、軽めの制作記をお話しさせてください。

音MAD作者版のWordleを作る、とは言え、実際に想像していた完成形は音MAD作者版のポケモンWordleでした。

というわけで、ポケモンWordleの作者の方が公開されているこちらのブログ記事を読むところから始まりました。

zenn.dev

「ちなみに構成は Vue＋Vuetify のフロントエンド完結アプリです。」とのことでした。

自分はプログラミングの知識はちょっとだけあるのですが、画面系の話はさっぱりわからない（html,CSS,JavaScriptがちょっとわかるくらい）ので、とりあえずVue.jsについて調べてみることにしました。

調べてみたら初心者におすすめって書いてあるし、じゃあ自分もこれで行こう！と決めました。JavaScriptは少しだけ経験もあるので。

で、調べつつ作りつつ、って感じで進めていったのですが、結局最後までVueもVuetifyも理解しきれず、全てをhtmlファイルに記述してしまいました。

作者名のリストまでもhtmlファイルに入ってます。もはやVueを使えている状態なのかどうかもよくわかっていません。

色々不便なところだったり課題は残っている状態（後述します）なのですが、とりあえず完成までたどり着くことが出来ました。

 

 

 

音MAD作者版Wordle『Otomadle』

と、いうわけで、お待たせしました！

音MAD作者版Wordle『Otomadle』です！

https://nkaoobt.github.io/otomadle/

 

遊び方やルールを説明する前に、一点残念な報告をさせてください。

レスポンシブ対応まで手が回らなかったため、スマホ非対応です…

一応遊べはしますが、レイアウトが死ぬほど崩れます…

なんならPCからでもモニターのサイズなどによっては遊び辛いかもしれません。

僕の使っているモニターのサイズに合わせて作られているので、ちゃんとした環境で遊びたい人は、僕と同じモニターを買うか、僕の家まで来てください。

 

ルール説明

・本家Wordleと同様に、10回以内に音MAD作者の名前を当てるゲームです。

・回答と正解の音MAD作者名に同じ文字が入っていればその文字が黄色に、文字も位置も一致していればその文字が緑に変わります。

・正解として選ばれる音MAD作者は以下の条件に合った音MAD作者の中からランダムに選ばれます。

  1. 2024/12/7時点で、以下の音MAD投稿アカウントの一覧に記載されている

  2. 名前が全てひらがなかつ、5文字である

・本家WordleやポケモンWordleと違い、実際に音MAD作者名として存在しない文字列を回答することも出来ます。

・4文字以下の文字列を回答することは出来ません。

 

勝手にスプレッドシートお借りしています！すみません！問題あれば連絡ください！

名前の条件の方に関しては、「～」が含まれる名前も省いています。

カタカナ5文字やアルファベット5文字の作者に関しては入れてもいいのかな～、とも思いますが、一旦省いています。

 

 

 

実際に遊んでみよう

では、実際にプレイしている様子をお見せします。

記念すべき一答目、ルールの方でも書いた通り、別に音MAD作者の名前を回答する必要はないのですが、折角なので音MAD作者の名前を入れてみます。

二文字目の「ん」が黄色で表示されました。

では、1,3,4,5文字の少なくとも1箇所に「ん」が入ることが分かりましたね。

ポケモンWordleやことのはたんごではあり得ませんが、このゲームでは1文字目にも「ん」が入り得ます。

 

2答目。

これで、「ん」の位置が1,3,5文字目に絞られました。

 

3,4答目。

3答目であり得ないプレミをしていますが、4答目で「ん」の位置を確定させることが出来ました。

 

5~9答目。

5文字目が「ん」というだけでは絞り切れないので、他の文字を開けるための回答を続けました。

あずりーのさん、あずまうどさんの2文字被りなど、ちょっとしたプレミを重ねた結果、ノーヒントで10答目へ。

 

10答目。

だめでした。残念。

 

正解はぱぱぱぱんさんでした。文字2種。

 

 

 

改善点、今後追加したい機能など

今回一旦完成としていますが、先述した通り、不便な点や追加したい機能もたくさんあります。

モチベとスケジュール次第ではありますが、いつかアップデートする時の為の備忘録代わりにここに残しておきます。

・レスポンシブ対応

　　スマホでも遊べると良いですよね。

・どの五十音を使ったか分かる機能

　　現状だと五十音表に印付けながら進める、とかしかないので、その機能も付けると便利だろうと思います。

・エンターキーで回答できるようにしたい

　　回答ボタンを押すためにはマウスを使わないといけないので、フォーム内でエンターキーを押すと回答できるようにしたいですね。（現状の仕様でもtabキーでフォームから回答ボタンに移ってエンターキー、という方法はありますが）

・難易度調整

　　正直あり得ないくらい難しいので、正解として選ばれる範囲を絞る、難易度選択機能なんかが合ってもいいのかな、と思います。

　　絞るとしたら動画投稿本数とかが良さそうですかね。いっぱい投稿してる人はその分知名度も高そうですし。

 

その他にも遊んでみて気になったところなどあれば連絡ください！

すぐに対応します！とは言えませんが、ここに追記していきます。

 

 

 

最後に

ここまで記事を読んでいただき、ありがとうございました。

Webゲームを制作するのも公開するのも初ですが、初期知識と制作期間の割には形になったかな、と思っています。いろいろと勉強にもなったし、作ってみて良かったです。

ただ、音MAD作者名×Wordleという発想は別に自分のオリジナリティが出ているわけではありません。

なので、ルール面でもプログラミング面でも「俺ならもっと上手く作れる！」という方がいれば全然作ってもらっても構わない、と思っています。

僕もクオリティの高いものが出ればそっちで遊びます。

 

最後に、記事冒頭でも触れましたが、音MAD Advent Calendar 2024についてお話しさせて下さい！

12/1～12/25まで毎日1本ずつ音MADに関する記事が公開される企画です！

この記事で企画の存在を知った方は、ぜひ他の記事も読んでみてください！

adventar.org