タップだけでできる計算ゲーム「ふらっしゅあんざん」を作ってみました! | Select *
Web Web制作

タップだけでできる計算ゲーム「ふらっしゅあんざん」を作ってみました!

flach-calc2オハヨウゴザイマス!
久しぶりにものづくりをした@deepblue_willです。

作ったのは表示される数字を足していって答えを出すというシンプルな計算ゲームです。俗にフラッシュ暗算なんて呼ばれてるものです。
せっかく作ったので今回はこの「ふらっしゅあんざん」を紹介したいと思います。


ふらっしゅあんざんの遊び方

ふらっしゅあんざんはものすごく単純なゲームです。
まず「はじめる」をクリックします。
flach-calc2

次に難易度を選択します。
かんたん
1〜9の数字が秒間1秒で10個表示されます。
ふつう
1〜9の数字が秒間0.5秒で10個表示されます。
むずい
1〜99の数字が秒間0.3秒で15個表示されます。
ちょーむずい
1〜999の数字が秒間0.2秒で15個表示されます。
flach-calc3

次々を表示される数字をひたすら足していきます。
flach-calc1

答えを選択します。
flach-calc4

すると結果が表示されます。
flach-calc5

ちなみに私はまともにやったら「ふつう」までしかクリアできません 笑。
これでも珠算2級なんですけどね。。
自分で作っといてなんなんですが、ちょっとむずかしすぎたかもしれません。

開発の裏側的な

pluzzled_mac1
大したものでもないですが、技術的な話とそうでない話をちょっとだけ書きます。

Foundationを使用

レスポンシブデザインにするためにFoundationというフレームワークを使っています。
これを選んだ理由は特になくて、なんとなく良さそうだったからです。(Bootstrapは使ったことあったのでどうせなら違うの使ってみたかったというのもある)

このFoundationのGridシステムを使ってレスポンシブにしています。
最初、てかいまでもこのGridシステムがよくわかなくて苦労しました。。(英語が苦手。。)
だれかFoundationの使い方を日本語でうまく説明してくれないかなぁ。


JavaScriptで配列をシャッフルする

答えをバラバラな順序で表示するために、配列をシャッフルすることで実現しています。
JavaとかRubyならArrayクラスにシャッフルするメソッドがあるんですが、Javascriptにはそれがありません。
で、調べたら簡単な方法がありました。Array.sortを使う方法です。
["aaa", "bbb", "ccc"].sort(function(){
  return Math.random() - .5;
});


これが一番シンプルなんですが、実はこれだと不完全なシャッフルになるらしいです。
今回の場合、シャッフルに完全性を求めてなかったのでこれで書いたのですが、求める場合はちゃんと考えて使ったほうが良さそうです。

ツイートボタンを自作(オリジナル)

ツイートボタンってaタグだけで作れるのご存知でしたか?
hrefに指定するURLにクエリパラメータという形で渡すことで指定の文字列をツイートするツイートボタンが簡単に作れます。
具体的にはこんな感じです。

http://twitter.com/share?url=共有するURL&text=ツイートする文章&via=ツイートに含めるユーザ名

注意としてはクエリパラメータ(共有するURLなど)はURLエンコードする必要があります。
とくにツイートする文章には日本語入ると思います。それをそのまま書いてしまうとうまくツイート画面が表示されません。
Javascriptを使ってエンコードする場合は

encodeURI("ツイートする文章");


ベタ書きする場合は「Web便利ツール/URLエンコード・デコードフォーム – TAG index Webサイト」など使って生成するといいと思います。

スマホでも楽しめるように

こうしてブログを運営しててわかったのですが、最近はWebはスマホでやる人が結構多いんですよね。
なので、スマホでも簡単に楽しめるようにちょっと工夫しました。
ポイントとしてはたった2点
  • レスポンシブ
  • タップだけで遊べる

スマホでもちゃんと表示されるように、初めてレスポンシブデザインにトライしました。(といっても8割以上フレームワークのお力です)
あと答えをいちいち入力するのめんどくさいかなと思い、難易度や答えを選択式にすることでタップだけで遊べるようにしました。
いろんな難易度で遊びたい方は、GitHubからダウンロードして適当にJS編集して遊んでください 笑。

最後に

3日ぐらいでできるかなぁと思っていたら2週間もかかってしまいました。。
平日仕事してるからあんまり時間とれなかったんですよね。
またなにか思いついたらなんかつくろうと思います。
いちおうソースはGitHubにありますんで、気になる方は見てください。
普通にやって(適当に選択肢を選ばないで)「ちょーむずい」をクリアできた人はご一報ください。プレゼントとかはないですけど。。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)