やっぱりブラウザゲームにもセーブ機能が欲しいよなぁ(´Д｀)
という願いを叶えてくれるのがローカルストレージというブラウザが持っている機能です。
このローカルストレージという機能は、例えばパズルゲームの進行状況を保存したり(何面までクリアしたか)とか、ハイスコアを記録させたりとか簡単にできます。
わたしはこんな感じのものを作って使っています。
class LocalStorage {
constructor(name) {
this.name = name;
this.data = {};
}
delete() {
window.localStorage.removeItem(this.name);
}
load() {
let data;
if(window.localStorage){
data = JSON.parse(window.localStorage.getItem(this.name));
}
if(data){
this.data = data;
return true;
}
return false;
}
save() {
let data = JSON.stringify(this.data);
if(window.localStorage){
window.localStorage.setItem(this.name, data);
}
}
}
LocalStorageクラスを作って簡単に使えるようにする
LocalStorageというクラスを作ってストレージを操作する処理を作っています。
各メソッド名そのままの機能です。
基本的にセーブとロードができればいいんですが、開発してるときにはデータを消したりする必要もあるのでデリートも出来るようにしてあります。
クラスを生成するときに引数にローカルストレージの名前を指定します。
この名前でローカルストレージが読み書きされます。
dataはゲーム内容を保存するオブジェクトです。
プログラム内ではここに好きなデータを保存します。
ハイスコアを保存したいならhiscoreというプロパティを作って値を保存します。
JSON.parse()というのはローカルストレージがJSON形式で保存するためらしく、そのための変換処理を行う命令のようです。
サクッと簡単な説明でしたが、実際ローカルストレージはすごい簡単に使えます。
ただしゲームの進行状況をどういう風に保存するかは自分で考えないといけないのでそっちが問題ですね。
enchant.jsバージョン
この記事はもともとenchant.jsの記事だったのでかつてのenchant.jsバージョンも載せておきます。
まぁほとんどおんなじですね。
var Storage = enchant.Class.create({
initialize: function(name){
this.name = name; this.data = {};
},
delete: function(){
window.localStorage.removeItem(this.name);
},
load: function(){
var data;
if(window.localStorage){//ローカルストレージ機能が使用可能なら
data = JSON.parse(window.localStorage.getItem(this.name));
}
if(data){
this.data = data;
}
},
save: function(){
data = JSON.stringify(this.data);
if(window.localStorage){
window.localStorage.setItem(this.name, data);
}
}
});