大富豪ゲームを作ってみた
これは ミルキィホームズ Advent Calendar 2017 の22日目の記事です。
昨日は SACLA_XFEL さんの「バブみを感じるコーデリア」でした。 母性溢れる感じかと思ったらそっちですか😇
お前誰よ?
しゃるしぃといいます。 2014年末ごろからミルキィホームズに入った割と新参です。 ミルキィホームズ知識もあまりなく、絵や小説も書けないので、今回はミルキィホームズとあまり関係のないネタでいきます。 悪しからず。
最近あった悲しいこと
最近、よく遊んでいたスマホの大富豪ゲームが遊べなくなりました。 iPhone を機種変更して、iOS 11 になったため 64bit 対応していないアプリが動かなくなったのが原因です。
不思議なことに、ミルキアンで遊んでいる人が多かったらしく、TL の数々のミルキアンの方々が阿鼻叫喚していたので、公式が対応せずにサポート切ってしまうなら自分で作ればいいじゃないというデジャヴのような流れで今回「大富豪ゲーム」を作ってみることにしました。
ミルキィホームズとは一切関係がないですが、ミルキアンが喜んでくれるなら関係なくもないよね、というこじつけです。 ミルキィホームズとは一切関係がないのですが。
ということで作ったよ
先に言っておきますが、まだまだ未完成です。 ローカルルールの類は全部未実装、自動パスのような機能もありません。 それでもなんとか最低限の大富豪としてのルールは実装しました……
「あなたは台湾ラーメンとなって、パクチー、日本酒、餃子、かまぼこと大富豪勝負をするのだ…!」
なお、思いついたときに不二家のミルキーを舐めていたので「ミルキー大富豪」と名付けました。 基本的には iPhone の Safari で遊ぶことを想定しています。 まぁ他のブラウザでもそれなりに動く気がします。(だが Internet Explorer お前はダメだ)
Q&A
- Q: CPU 弱いんだけど?
- A: そうです。弱いです。ほとんど戦略なく捨ててくるので。そのうち強くするかもしれないししないかもしれない
- Q: たまにカードの残数表示おかしくない?
- A: 謎の不具合です。原因わかったら直します
- Q: キャラ選べないの?
- A:
台湾ラーメンの画像がいらすとやになかったので
- A:
- Q: アレがほしい、コレがほしい
- 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 も改めてすごーいって感じです。画像が要らないフレンズですね
- カードの幅を画面の 1/8 にしつつ、縦横比を維持して縮小拡大したいけどどうやるんだろう?って思ったら
padding
を使うイディオムがあるんですね。知らなかった… - 背景もグラデーションの重ね合わせです。
repeating-lenear-gradient
も初めて知った… - 極太文字を出すのにウェブフォント使うと重いしどうしようかなーと思ったら便利なサービスはやはりあるもので
vw
って単位をこんなに使いまくったのも初めてです- やたら疑似要素で頑張ってたりします。かつての W3C 信者として論理マークアップしたい欲求のせめてもの抵抗なんですかね(知らんがな
ミルキィホームズ Advent Calendar との繋がり
最近仕事では WPF を触っていて、慣れない Vue.js より WPF ならもっとサクサク組めそうなのになーとか思ってたら…
タイムリーにもミルキィホームズ Advent Calendar で WPF を HTML5 に変換する話が!?
でも Storyboard のアニメーションとかは対応してなさそうですね😇 きっと…
それから teito.yokohama
ドメイン!!
今回作ったやつ置かせてもらうか!?とか思ったものの、アップロードとか考えたら自分が持ってるスペースの方が無難だなぁとなりましたとさ…
おまけ
最近あった悲しいこともう1つ。
ANIMAX MUSIC YOKOHAMA で買ったミルキィスマホケースにwktkしてたら…
Loppiの事前引換券の交換も待ち時間ゼロです。 pic.twitter.com/L50bblhIPM
— しゃるしぃ (@chocolamint) 2017年11月23日
やばい!このケースやばい!ニヤニヤする!やばい!
— しゃるしぃ (@chocolamint) 2017年11月23日
なんと iPhone X ではカメラがあたる…
え、嘘だろ
— しゃるしぃ (@chocolamint) 2017年11月25日
ミルキィのスマホケース、カメラが当たる…
— しゃるしぃ (@chocolamint) 2017年11月25日
最悪
— しゃるしぃ (@chocolamint) 2017年11月25日
色々考えて100円ショップの紙やすりでプラスチック部分を削ったらなんとか使えました。
何とかつけたけど下のカメラ傷つきそう… pic.twitter.com/X4qOoRYwIq
— しゃるしぃ (@chocolamint) 2017年11月25日
(矢印で指した個所がなだらかに低くなっているのがわかるでしょうか…)
同じことで困っている方は参考まで。
明日は taru_sake さんです~