milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

46
+ で、 バーチャルサバゲを作ってみた geechs株式会社 田宮 幸子(タミー)

Upload: yukiko-tamiya

Post on 08-Jan-2017

2.823 views

Category:

Engineering


0 download

TRANSCRIPT

Page 1: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

    +       で、バーチャルサバゲを作ってみた

geechs株式会社 田宮 幸子(タミー)

Page 2: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

初めまして、タミーです。• ギークスでiOSエンジニア やってます (セブ帰り)

• 趣味はパラグライダー(飛び仲間募集中!)

• 野生児

• 3年以内に世界一周の旅出ます

Page 3: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

本題

Page 4: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

サバゲ

Page 5: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

ルール知ってますか?

Page 6: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた
Page 7: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

チームに分かれてフラグを

取り合う

Page 8: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

その間に銃で打ち合って

打たれたら死ぬ。

Page 9: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

それを・・

Page 10: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

VS

Page 11: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

VSかの有名なバトルメンバーで

再現してみた

Page 12: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

せっかくMilkcocoa girlsなのに、ガールズっぽいネタじゃなくてすいません…

Page 13: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

ゲーム概要

Page 14: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

1.Dropbox 上のファイルに接続

https://dl.dropboxusercontent.com/u/

48622414/real-onigokko/sp.html

※みなさんもぜひ!

Page 15: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

2. チームとキャラを選択

Page 16: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

3. みんなが選択し終えたら、

スタートボタンで開始!

Page 17: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

勝利条件

・ドラゴンボールを相手チームより

 多く集める

・相手チームを全滅させる

Page 18: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

早速ドラゴンボールを

発見!!

100メートル圏内に入ると

ボールを発見できます

GETするには30メートルの

射程内に

入らなければなりません

↑ 仲間の姿は見えます

Page 19: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

アイテムGETボタンで

ドラゴンボールをGETしました!

こんな調子で集めます

Page 20: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた
Page 21: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

敵がすぐ近くにいる・・

Page 22: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた
Page 23: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

攻      撃

Page 24: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた
Page 25: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

死亡しました・・ (これも30M圏内)

Page 26: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

こんな調子です

Page 27: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

基本構造はのびすけさんの記事からhttp://liginc.co.jp/web/js/132533

DROPBOX 使ってますが

Page 28: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

TEAM01TEAM02 ITEMS

STREAMで

とってくる

それぞれの

DATASTORE

※ログはSENDで共有している

Page 29: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

<script src="https://maps.google.com/maps/api/js?sensor=true&libraries=geometry"></script>

var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var itemLatLng = new google.maps.LatLng(value.lat, value.lon);

var distance = google.maps.geometry.spherical.computeDistanceBetween (itemLatLng, myLatLng);

距離をはかるメソッド

Page 30: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

・制作時間 約まる2日

 コードは500行くらい(書き方よくない)

・ちなみにJSは初心者。

 デバッグの仕方もわからないほど

・ゲームの設定を考えたり、

 ステータス分岐実装に時間がかかったかも

Page 31: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

<MILKCOCOAのすごいと思ったところ>

・動くようになるまでが超早くてテンション上がる!

・とにかく手軽なので、今のところはプロトタイプ作ったりするのにすごく向いてそう。フロントの味方。

・ココイルみたいなアプリやチャットアプリはまじで簡単に作れると思う。

・ドキュメントが日本語ですごくとてもわかりやすい。

 資料自体は多くないけど困ることはなかった。

 

Page 32: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

<ちょっと残念だったところ>

・REMOVEがしにくい。

 これからに期待。

・DATASTOREからWHERE付きでFINDができるようになってほしいな

Page 33: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

おまけ

Page 34: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

弊社のドランゴンボールに 夢見る若者たちに、

Z戦士になってもらいました。

Page 35: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

まずはチームわけと、レーダー確認

Page 36: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

ここでいきなりザーボンが不意打ち!

攻撃!!

ぐあ・・貴様卑怯な。。

zabon:vegetaを倒しました!!

Page 37: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

ちょっ、、スタート直後は攻撃禁止!今後、できないように実装予定だから(汗)

Page 38: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

仕切り直し

Page 39: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

うーん・・

どこだ~

ドラゴンボール・・

Page 40: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

うお、またベジータだ・・

レーダーに夢中で気づいてない。

攻撃!!!

Page 41: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

な、なに・・!?

ザ・・ザーボンごときに・・・

バタッ

Page 42: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

そうこうしている

うちにフリーザが

ドラゴンボールを

発見!!フッフッフ・・・

Page 43: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

フリーザチームの勝利!!

Page 44: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

え、わたしが何もしてないって?そりゃ・・開発者だもん、ね?チートもできちゃうし、ね?

Page 45: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

ともあれ、

MILKCOCOA、楽しい!!

Page 46: Milkcocoa + gmaps.jsで、バーチャルサバゲを作ってみた

ありがとうございました。

GitHubにコードあがってますhttps://github.com/Tamiiy/virtual-sabage

Special Thanks!

弊社エンジニア Kosuke, Daiki, Shohei 主催 のびすけさん、ようへいさん