しゃるしーじゃなくてしゃるしぃ

Qiita に書いたら怒られそうなときに使います

大富豪ゲームを作ってみた

これは ミルキィホームズ Advent Calendar 2017 の22日目の記事です。

昨日は SACLA_XFEL さんの「バブみを感じるコーデリア」でした。 母性溢れる感じかと思ったらそっちですか😇

お前誰よ?

しゃるしぃといいます。 2014年末ごろからミルキィホームズに入った割と新参です。 ミルキィホームズ知識もあまりなく、絵や小説も書けないので、今回はミルキィホームズとあまり関係のないネタでいきます。 悪しからず。

最近あった悲しいこと

最近、よく遊んでいたスマホの大富豪ゲームが遊べなくなりました。 iPhone を機種変更して、iOS 11 になったため 64bit 対応していないアプリが動かなくなったのが原因です。

不思議なことに、ミルキアンで遊んでいる人が多かったらしく、TL の数々のミルキアンの方々が阿鼻叫喚していたので、公式が対応せずにサポート切ってしまうなら自分で作ればいいじゃないというデジャヴのような流れで今回「大富豪ゲーム」を作ってみることにしました。

ミルキィホームズとは一切関係がないですが、ミルキアンが喜んでくれるなら関係なくもないよね、というこじつけです。 ミルキィホームズとは一切関係がないのですが

ということで作ったよ

先に言っておきますが、まだまだ未完成です。 ローカルルールの類は全部未実装、自動パスのような機能もありません。 それでもなんとか最低限の大富豪としてのルールは実装しました……

「あなたは台湾ラーメンとなって、パクチー、日本酒、餃子、かまぼこと大富豪勝負をするのだ…!」

大富豪ゲームはこちら!

なお、思いついたときに不二家のミルキーを舐めていたので「ミルキー大富豪」と名付けました。 基本的には iPhoneSafari で遊ぶことを想定しています。 まぁ他のブラウザでもそれなりに動く気がします。(だが Internet Explorer お前はダメだ)

Q&A

  • Q: CPU 弱いんだけど?
    • A: そうです。弱いです。ほとんど戦略なく捨ててくるので。そのうち強くするかもしれないししないかもしれない
  • Q: たまにカードの残数表示おかしくない?
    • A: 謎の不具合です。原因わかったら直します
  • Q: キャラ選べないの?
  • Q: アレがほしい、コレがほしい
    • A: 機能要望等は Issue を書いてください。(※ GitHub というサービスのアカウントが必要ですが…)
  • Q: ソースコード見せてみろよ?

作って所感

(※ 以下、ミルキアンの方々にはあまり興味のないと思われる話が続きますので、最後のおまけまでスキップください)

著者の背景

普段は C# .NET 開発している弱小エンジニアです。 Web 系もよくやってましたが、HTML4.01 と CSS2.1 と ECMAScript3 時代から進化してないので「ふろんとえんどこわい」

今回の技術

今回のやつは Vue.js と ECMAScript2015 で作ってます。await も使ってます。 Babel でトランスパイルしています。

npm とか glup とか Webpack とか疎すぎて今回結構困りました。移り変わりが激しくて「ちょっと寝てるから落ち着いたら起こしてくれ」って感じでしたが、いざ必要になると調べて理解する時間もなく焦りますね。

結局、TypeScript やら SASS やら導入する余裕もなく、map ファイル使ったステップ実行すらできずじまいでした。 このご時世に console.log の print デバッグ

よくわからないままzokucode さんの解説が超丁寧でわかりやすかったので Webpack で *.vue コンポーネントをビルドしてます…… 今回を機に今からでも勉強しよう……

JavaScript つらみ

やっぱり動的型付けつらいっすね。IDE 上でリアルタイムに波線引いてくれれば未然に防げたくだらないミスで何度も時間を無駄にしました。最近同僚の kumake さんもタイムリーにそんな感想書いてたりして。

というかアロー関数や class 構文等々をもってしてもなお、JavaScript つらいって感じでした。配列の標準関数がわかりづらかったり、欲しいものが色々標準で用意されてなかったり。.NET 偉大だなぁと。この辺は TypeScript の導入だけではなんとも。

それでも await 使えたのがかなりの救いでした。特にループ中の非同期処理はコールバック形式だと死ねるので。例えばターンの実施とかも非同期メソッド呼び出しの無限ループで書けたりして非常にわかりやすい。

ただ驚いたのは、結構なところまで Chrome でしか動作確認せずに進めていて、さて iPhone で見たらどんだけ動かないんだろうと見てみたところ、ほとんどそのまま動いたこと。

Java が言ってた Write once, run anywhere ってこのことだったんだ…(インドとインドネシアって違うんですか?)

CSS3 はいい時代になったなぁと

CSS3 も改めてすごーいって感じです。画像が要らないフレンズですね

ミルキィホームズ Advent Calendar との繋がり

最近仕事では WPF を触っていて、慣れない Vue.js より WPF ならもっとサクサク組めそうなのになーとか思ってたら…

タイムリーにもミルキィホームズ Advent Calendar で WPF を HTML5 に変換する話が!?

でも Storyboard のアニメーションとかは対応してなさそうですね😇 きっと…

それから teito.yokohama ドメイン!!

今回作ったやつ置かせてもらうか!?とか思ったものの、アップロードとか考えたら自分が持ってるスペースの方が無難だなぁとなりましたとさ…

おまけ

最近あった悲しいこともう1つ。

ANIMAX MUSIC YOKOHAMA で買ったミルキィスマホケースにwktkしてたら…

なんと iPhone X ではカメラがあたる…

色々考えて100円ショップの紙やすりでプラスチック部分を削ったらなんとか使えました。

f:id:SHARUL:20171222222009j:plain

(矢印で指した個所がなだらかに低くなっているのがわかるでしょうか…)

同じことで困っている方は参考まで。

明日は taru_sake さんです~