Vue.jsで絵文字をクリックするだけのクソゲーを作りました

「クソアプリ Advent Calendar 2018」7日目の担当、黒神(@kokushing)です。

みんなクソ（クオリティ高い）アプリを作っているので、僕も負けじと頑張りましたが、技術力に限界がありどうしようもないクソアプリができてしまいましたので先にお詫び申し上げます。

作ったもの

「Emoji Wars」というブラウザゲームです。

Emoji Wars

ただただ絵文字をクリックして点数を稼ぐというクソゲーです。
5回絵文字をクリックするとフィーバーモードに突入して獲得点数が10倍になります。

ぜひ高得点を競い合ってみてください😂

使った技術

• Vue CLI 3 (Vue.js + Vuex, babel + webpack)
• GitHub Pages

今回使ってみた技術の目玉は__「Vue CLI 3」__です。
VueFesで公演を聞いたときから興味があったのですが、実際に一回も使ったことがなかったのでこの機会に触ってみました。

結論から言うと、めっちゃ使いやすかったです。特に__「Vue CLI UI」__が。
メリットをざっくりとまとめておきます。

• GUIなのでポチポチするだけでVue.jsの開発環境が整う
• 各種モジュール（vue-router, vuexをはじめ、npmで公開されているパッケージ等）をポチポチするだけでインストールできる
• ビルドやリントなどのコマンド群もGUI上で実行できる
• 日本語対応済み

vuexやvue-routerなんかは途中から追加したいときに、毎回自前でディレクトリやファイル用意するのが面倒くさかったので、数クリックで簡単にインストールできるというのは素晴らしいなあと思いました。

vue.config.js

Vue CLI 3ではwebpack.config.jsなどの設定ファイルがプロジェクトディレクトリ内に生成されないので、__vue.config.js__という設定ファイルを自前で用意する必要があります。

今回はGitHub Pagesでホスティングしたかったので、docsディレクトリにビルドしたものを吐き出すようにconfigを変更しました。

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/emojiwars/'
    : '/',
  outputDir: 'docs'
}

baseUrlは環境変数に応じてディレクトリのパスを切り替えるようにしています。
outputDirでビルド後のファイルが吐き出されるディレクトリ名を指定しています。

他の設定項目は公式ドキュメントをご覧ください。
https://cli.vuejs.org/config/

感想

Vue js 幸せ

vue js 幸せ pic.twitter.com/l4ONueyqaR

— 黒神 (@kokushing) 2018年12月6日

追記:
クソゲーに需要が生まれました。
全国のFPSプレイヤーの皆様、ご活用ください

これエイム練習に最適です！！フリックショットといって、マウスを瞬時に動かして敵にカーソルを合わせる技術が鍛えられる！しかも顔文字だからヘッドショット気分が味わえる！なんて素敵なんだ

— もいもい (@_CrMoi90) 2018年12月7日

クソコードはこちら

他に作ったもの

クソからマジメまで、いろんなものを作ってます。
https://yusukeishiguro.com/

Tapbox
Tapboxは「決められた回数タップしないと開かない箱」を簡単に作成することができるサービスです。
https://tapbox.app/#/

makepost
つくったものをシェアできるSNS（リニューアル予定）
https://www.makepost.net/

---

黒神先生の次回作にご期待下さい！

明日は　@watanabe_yu　さんのクソアプリです。楽しみ🤪