16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【js】milkcocoaを使って作ったゲームをGithhub Pagesで公開したよ

先日、milkcocoaというサービスを見つけまして、それが非常に簡単で面白そうだったので遊んでみました。

milkcocoaとは

https://mlkcca.com/

BaaS(Backend as a Service)に分類されるサービス。
Javascriptを1行書くだけで、データアクセス周りのバックエンドを肩代わりしてくれるというものです。
アクセスの方法もシンプルで分かりやすい(APIのドキュメントも結構充実してる)のと、
複数端末からの同時アクセスでもリアルタイムに同期されるのが素晴らしいです。

つくったもの

f:id:sakuramochi702:20150301133212p:plain
ミリオンまおう

『ミリオンまおう』というゲーム(?)を作り、Github Pagesで公開しました。*1
HPが100万ある『ミリオンまおう』を、みんなで協力してやっつけるゲームです。
Androidアプリ『100万のタマゴ』のパクリにインスパイアされています。

100万のタマゴ - Google Play のアプリ

因みにGithub Pagesで何かを公開したのも初めてだったのですが、これも非常に簡単でとても良いですね。
基本的には静的ページしか作れませんが、milkcocoa等を使えばそれなりに動的にできるし。

なお、他の人が攻撃した内容も自分の画面に表示される(ここがリアルタイム通信)のですが、
HPが0になった時に表示される「ミリオンまおうをやっつけた!」という文章は、その時に通信していた人にしか表示されないのでなかなかレアです。
倒した後になってアクセスしても、「ミリオンまおうはすでに滅びた」みたいなメッセージしか出ないので。

アルゴリズム弱者のソース晒し

データアクセス周りはものすごく簡単に実装できるのですが、僕の頭がおかしかったせいで、『ミリオンまおう』は実は既に2回も修正されてます。

当初
//画面起動時の読込部分
query.limit(1000000);
query.done(function(data) {
		var count = 0;
		for (var i=0; i<data.length; i++) {
			count++;
		}
		remain = 1000000 - count;
		txtCount.innerHTML=String(remain);
	});

最初は、ダメージを与える度にデータをpushして、そのcountでこれまでに与えたダメージを測るというアルゴリズムでした。
が、データが10万件を超えたあたりから最初の読み込みに時間がかかりすぎるようになってきたので、
データにその時の残HPを持たせ、最新の1件だけ読み込めば良いようにしたのが1回目の修正。

1回目修正後
//画面起動時の読込部分
query.sort(desc).limit(1);
query.done(function(data) {
		data.forEach(function(value) {
			remain = Number(value.hp);
		});
		txtCount.innerHTML=String(remain);
	});

//データのpush部分
dataStore.push({name : pName, hp : String(remain-1)},
		function(data){
			console.log("送信OK!");
		);

データに値を複数持たせたい時も、カンマ区切りで書けば良いだけなので簡単です。
しかしこの修正の後、「そもそも100万件分もデータを保存したら、フリープランの容量をオーバーする」ということが判明。
よって、pushでどんどんデータを積むのではなく、setを使ってデータを使い回すように修正しました。

2回目修正後
//画面起動時の読込部分
query.sort(desc).limit(1);
query.done(function(data) {
		data.forEach(function(value) {
			maoId = value.id;
			remain = Number(value.hp);
		});
		txtCount.innerHTML=String(remain);
	});

//こうげき
function attack(){
	if (remain > 0) {
		if (maoId.length == 0) {
			dataStore.push({name : pName, hp : String(remain-1)},
				function(data){
					console.log("送信OK!");
					maoId = data.id;
				});
		} else {
			dataStore.set(maoId, {name : pName, hp : String(remain-1)});
		}
	} else {}
}

既にダメージを与えている場合はデータを使い回すようにしたので、データが1件で済むようになりました。
当初は「データを積んでおけば後々ダメージ数ランキングとかも実装できるな」とかも考えたんですが、
動かないことにはどうしようも無いので。
ランキング実装したくなったらユーザー毎にデータ作って、「これまでにそのユーザーが与えたダメージ」を持つようにしよう。

また、ランキングの他には「コンソール部分を使って普通にチャットもできるように」とかも考えてました。
が、とりあえずリアルタイム通信が簡単にできることを試したかっただけなので、ひとまずカット。
ミニマルデザインです。

感想

これだけ簡単にリアルタイム通信のアプリケーションが作れるというのはすごいなぁと。
ただ、

http://www.appiaries.com/jp/baas/
http://e-words.jp/w/BaaS.html
サービス終了のお知らせ - NAVER まとめ

この辺にも書かれてますが、Baasが一番必要なのはモバイルかなという気がするので、
milkcocoaも早くandroidに対応して欲しいなと思いました。
android対応したらユーザー管理とランキング機能とチャット機能付けてアプリ作ろ。


終わり。

*1:画像は星乃だーつ グーテンベルグの娘より拝借いたしました。ありがとうございます。