スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

7-2.Monaca開発(配列を保存する機能)

3作目のアプリいやいや期物語の作りについて少し解説をしますね。

今回工夫したのは何回も楽しめるゲームにすることです。
分岐がたくさんあるので、めったな確率では起こらないと思うのですが、
最初っからたまたま運よく一番いいエンディングにたどり着いてしまったら、
ああ簡単だった、と終わってしまい、もうそれ以降楽しく遊べません。

なので例えば初期状態でこんな感じでゲームが進み、
エンディングが3種類用意されている。

┌────────────┐      
│     分岐     │
└────────────┘
    ↓    ↓
┌─────┐┌────┐
│ 分岐  ││ 分岐 │
└─────┘└────┘
 ↓   ↓  ↓  ↓  
┌───┐┌───┐┌───┐
│終了1││終了2││終了3│
└───┘└───┘└───┘


でもって3種類のエンディングをクリアしたらゲームの分岐が増えて
こんな感じで新たなエンディングを見ることができるような状態になる。

┌─────────────────┐
│     分岐          │
└─────────────────┘
    ↓    ↓     ↓
┌─────┐┌────┐┌────┐
│ 分岐  ││ 分岐 ││ 分岐 │
└─────┘└────┘└────┘
 ↓   ↓  ↓  ↓  ↓  ↓
┌───┐┌───┐┌───┐┌───┐
│終了1││終了2││終了3││終了4│
└───┘└───┘└───┘└───┘

もうちょっと複雑なんですが、簡単に言うとこんな工夫をして、
何度もゲームが楽しめるようにしました。

この仕組みをどうやって作ったかというと、前にも説明したlocalStorageという機能で端末に「今どこまでクリアした状態か」ということを
保存するようにしました。

単純な1つの値を保存する方法は6-2.Monaca開発(データを保存する機能)のページで解説しています。

今回は保存する値を
・終了1をクリアしたか
・終了2をクリアしたか
・終了3をクリアしたか
という3つの値を保存したいので配列を保存することにしました。

ソースはこんな感じです。
----------------------------

//データ(配列)を取得
function getDataArray() {
if(localStorage.getItem("data_array")==null){
return new Array(0,0,0);
}
else
{
var data = JSON.parse(localStorage.getItem("data_array"));
return data;
}
}
//データ(配列)を保存
function saveDataArray(data) {
try {
localStorage.setItem("data_array", JSON.stringify(data));
} catch (e) {
alert('Error saving to storage.');
throw e;
}
}
//データ(配列)を削除
function delDataArray() {
window.localStorage.clear();
}

//加算
function addData(val) {
var data = getDataArray();
data[val] = data[val] + 1;
saveDataArray(data);
}

//取得
function getData(val) {
var data = getDataArray();
return data[val];
}


----------------------------


ポイントは、前回と異なる部分、
ローカルストレージから値を取得する部分
var data = JSON.parse(localStorage.getItem("data_array"));

ローカルストレージに値を保存する部分
localStorage.setItem("data_array", JSON.stringify(data));

この2点です。
こちらのページを参考にしました。
配列をそのまま保存してもうまくいかないのですが、JSON.parseとJSON.stringifyを使って文字列に変換してから保存するとうまくいくようです。

ふむふむ、勉強になりました。


なので初期状態は 「new Array(0,0,0);」こうなので、要はこんな感じですね。

┌─┬─┬─┐
│0 │0 │0 │
└─┴─┴─┘

エンディング1をクリアしたら
addData(0);
と実行して

┌─┬─┬─┐
│1 │0 │0 │
└─┴─┴─┘

さらにエンディング2をクリアしたら
addData(1);
と実行して

┌─┬─┬─┐
│1 │1 │0 │
└─┴─┴─┘

さらにエンディング3をクリアしたら
addData(2);
と実行して

┌─┬─┬─┐
│1 │1 │1 │
└─┴─┴─┘

という様に使ってみました。
で、すべての値が1以上になったら、これまでは選べなかった選択肢を表示させる、というわけです。

本当はもうちょっと複雑にしたのですが、簡単に説明するとこんな感じです。
「配列って慣れてない!難しい」という初心者の方は、もちろん
localStorage.setItem("kiroku1", 値1);
localStorage.setItem("kiroku2", 値2);
localStorage.setItem("kiroku3", 値3);
と色んなキーで保存してもOKですけどね。
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
















管理者にだけ表示を許可する


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。