Googleマップで宝探し！たんけんぼくのかそうまちゲーム

前々から温めてたのに実装方法が思いつかなかったんだけど、ようやくプロト出来た！

# まえせつ

　**自分の住んでいる町を迷路とかゲームのマップ**として簡単に使えたら、遊び方が広がらないかなって思ってて*OpenStreetMap→Blender*変換とかやってたけどうまくいかなくって。

　で、とある日、ぼーっとGoogleマップ見てたら

```
https://www.google.co.jp/maps/@35.6608375,139.7008749,3a,75y,43.91h,92.5t/data=!3m6!1e1!3m4!1sDrFpHa0VreQbapnpTC-QgA!2e0!7i16384!8i8192
```

あれ・・？この**URLの"@"の後って緯度経度**・・・？

### ！！！！！！！！

こっからの実装へのブレークスルーは実に早かった。

# つくってみたわ


### 宝探しを通じて現実の町探検を仮想で楽しむゲームです。

![goToMap4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/482da01d-4fd6-4c44-dae0-03f38e136606.gif)

[高解像度はこちら](https://github.com/yasutakatou/goToMap/blob/pic/goToMap.gif)

 - Googleマップの緯度・経度を使って各プレイヤーのスタート地点とゴールを決めます
 - ゴールまでにヒントのテキストや、画像を仕掛けたりできます
 - プレイヤー同士でメッセージをやりとりしたり、書置きを読んだりできます

### ・Windows、Linux、Rasbian対応のGolang製Websocketサーバー
<a href="https://github.com/yasutakatou/goToMap"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/yasutakatou/goToMap.png" width="460px"></a>

サーバーとするPCで動かしてください。

### ・Chrome拡張 (Chromiumも対応)
<a href="https://github.com/yasutakatou/goToMapExt"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/yasutakatou/goToMapExt.png" width="460px"></a>

ゲームする端末上のChrome(と互換ブラウザ)で動かしてください。サーバーと同居できます。

# v0.2

### ユーザー名を指定したログイン機能と、メッセージをログイン名宛てに送れる機能を追加しました

![2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/72483b6d-ba11-b6d7-8865-9caf00c0db29.png)

こんなかんじに拡張機能からサーバーにユーザー名を決めてログインします。（旧版はChrome拡張起動時に自動ログイン）

![2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/c20cc1e5-5192-7321-5cfa-9db517337916.png)

メッセージ送信時に自分以外のユーザー名が一覧で表示されるようになりました。

![2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/cb038714-53d2-f399-0ff8-de8a0bd4d42a.png)

送信先では送り元のユーザー名も表示されます。

# v0.3

### ログイン時に指定したユーザー名と画像をアバターとして近くに来たら表示するようにしました

![3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/2af482bc-94fd-3c37-7402-dfec0985866f.png)

### 注意！ Chrome拡張とサーバを同じ版数に揃えないと動作しませんので注意

# じゅんび:

Googleマップで遊びたい町を開いてください。

![url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/780366f1-9ef9-69b1-99a2-79cb0c92bd95.png)

こんなかんじでURL出ますんで**下線の緯度経度**をピックアップしてコンフィグを作ります。
コンフィグの例は以下です。

```
[PLAYER]
https://www.google.co.jp/maps/@35.6608375,139.7008749,3a,75y,43.91h,92.5t/data=!3m6!1e1!3m4!1sDrFpHa0VreQbapnpTC-QgA!2e0!7i16384!8i8192
https://www.google.co.jp/maps/@35.6613982,139.7001959,3a,75y,131.45h,104.53t/data=!3m6!1e1!3m4!1szZPFU_fUtAcf-e3DGysGlw!2e0!7i16384!8i8192

[GOAL]
35.6618983,139.7008538

[RESULT]
ゴールに着きました！

[ACTION]
35.6602069,139.7007403	マックに着きました～
35.6632348,139.701151	https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
```

 - [PLAYER]はスタート地点です。URLをベタ貼りしてください。遊ぶ人数分貼ってください。
 - [GOAL]は目的地(ゴール)の緯度・経度を書いてください
 - [RESULT]はゴール時のメッセージです。**httpから始まるURL指定で画像も指定できます**
 - [ACTION]は緯度経度とメッセージをタブで区切ったもので来た時に**メッセージ**や**画像**を表示します

緯度経度を調べながらヒント作ったり、画像貼ったりでゲームの"面"を作ってください

# きどうほうほう：

　始めに**Go言語のWebsocketサーバーを起動**します。**同フォルダにコンフィグ置いて実行**すれば動きます。
　次にChrome拡張インストールします。ブラウザとサーバーが別PCの場合は**拡張のアイコン**を開いて**「接続サーバー」欄にサーバーのIPアドレスとポート番号を指定**してください。保存して拡張を**再起動**します。
　IPアドレスとポート番号はサーバー上に10秒に一回表示されます

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/53c83b18-5994-dcb4-e746-a8a7e98cc2f6.png)

**join client!と出たら接続成功**です。**スタート地点のマップ**が自動的に開きます。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/bb5bd47f-46ad-b385-4e0c-26ea772fef0c.png)

# うごかしかた:

ルールとしては宝探しなので**Googleマップで一番先に目的地**に着けば良いです。その他は要素はゲーム装飾です。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/0f1bec47-a4d8-e2c2-ad48-357fc523ee0b.png)

コンフィグで指定した**任意の場所でメッセージ**を出せます

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/24c9069e-3ebb-fd88-583f-1b99fa8709ea.png)

任意の場所で**画像**も出せます

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/26007320-c9d5-a552-e5a1-b5acca2217d5.png)

SNSぽく、**参加者全員にメッセージ**を表示できます。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/dcea58fb-0f80-cd40-8c10-b4f6e5ab10b0.png)

他プレイヤーにお知らせが出ました

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/344034c7-031f-9e09-13cd-4eb95c92ca00.png)

**特定の場所に書置き**ができます。メッセージ通知を後から追加できる機能です

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/bc4a429c-4417-98a4-38ab-ef4eb9bf5f3a.png)

# あとがき
バーチャルリアリティはあくまで仮想の世界であってリアリティが今一つだと思ってる。
人がアバターになって出てきても、街という人の生活感が感じられる部分が薄いからと思ってる。
このゲームは現実の町で、仮想的に探検するという真逆の発想で産まれました。
たぶん他に無いアイディアなのでSNS化など、もっともっと育てたいです。