@m_seki の

I like ruby tooから引っ越し

ブラウザゲーを作ったよ！

RubyKiaigiだしスライドスポンサー募集！ - I like Ruby too. でも書いた話の続き。

作った動機1

リックとののほほさんの作ったカードゲームのルールとバランスを確認したいけど、実際にカードを印刷するのはめんどくさい！切るのはもっとめんどくさい！画像ファイルをもらってシミュレータを作ろう！が初めの動機です。
件のゲームははこちらの「ショッピングモール」。基本的にはソリティアなので作るの簡単そう。

シミュレータで確認したレビューから、最終版にルールを一つ追加してもらえたのが自慢。

作った動機2

最初はTofu/Divという大昔に作ったWeb GUIのフレームワークを使って書いてました。一操作ごとにページ更新がはいるので（自分が使う分には困らないけど）Internetごしに試すのは遅くて辛かったのでした。どうにかしたい。
同じような時期に@mamipekoに掲示板のデザインを手伝ってもらって刺激を受けたのと、なんとなく次の本を買ったのとでページ遷移しない実装で作り直してみたくなりました。

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

WebSocketのでてくる前辺りまでは写経してみました。でもなんとなくコードが肌に合わなかったの真似しないことにしました。

できたのはこれ。再起動の仕組みを入れてないので、クラッシュするまでの稼働予定です。

実装

  1. コマンドラインのインターフェイスで、絵文字を使ったバージョンからスタート
  2. ページ遷移ありのWeb UI
  3. ページ遷移なしのWeb UI

の順に作りました。ページ遷移なしバージョンはスタイルシートとJavaScriptでできています。
サーバは、クライアントからユーザー操作を受け取り、新しいカードの状態をJSONで返します。
Tofu/Divのウィジェットはhtml片を持つものばかりだったんだけど、今回はWebなAPI風のDivを用意しました。

アニメーション風の表現は、CSSのtransitionのみを使用し、jQueryなどのライブラリは使いませんでした。

ゲームのルールとデータ部分が360行、WebUI部分が180行、ERBのファイルが500行の超大作！

つづく

眠くなってきた。そうそう。まだまだRubyKaigiの旅費の支援を募集中です！RubyKiaigiだしスライドスポンサー募集！ - I like Ruby too.