セーブ機能を追加したい

HackforPlayには現在（2021/3/22）セーブ機能がありません。
そこでクッキー(Cookie）を使ってセーブ機能を作ってみましょう！

こちらがサンプルのステージです。

https://www.hackforplay.xyz/works/NdElZPpVt0d7K3PHDVtR

簡単にステージ解説

ステージが始まるとこのような説明が入ります。

ふむふむ…

なるほど…

画面の上の方にコインが11枚並び、下の方にはプレイヤー、緑のフクロウメイジ、赤のフクロウメイジがいます。
「緑のフクロウメイジに触れるとセーブ」「赤のフクロウメイジに触れるとセーブ消去」ができると書いていますね。

触れた時の動作

緑のフクロウメイジ	セーブする
赤のフクロウメイジ	セーブを消去する

これだけだといまいちわからないので、実際に試してみます。
中央にあるコインを4枚取ってみて、その後再読み込みをするとどうなるでしょう。

4枚コインを取ります。MONEY（お金）も4に増えました

次に再読み込みをクリックします。どうなるでしょう…

元に戻ってしまった…

再読み込みをすると、取った4枚のコインは元の位置に戻ってしまいました。
よくみると、MONEY（お金）も0になっています。
これはプレイするステージが元の状態に戻っている（初期化されている）ので、いつものHackforPlayの動きですね。

では、次に緑のフクロウメイジに話しかけてセーブしてみましょう。

同じように4枚取って…

今度は緑のフクロウメイジに話しかけます

もう一度再読み込みします

おお！コインが4枚消えている！！
（ちゃんとMONEYも4になってる）

緑のフクロウメイジに話しかけると、取得していたコインの情報が再読み込みしても引き継がれていましたね。
何度読み込み直しても、ブラウザを閉じてもまたステージを開くとセーブされた状態が表示されるはずです。

では、赤のフクロウメイジも試してみましょう。

今度はセーブを消したと言ってますね

そして再読み込み。どうでしょう…

最初の状態に戻った！

先ほどまでセーブされていたコインが元通りの位置に表示されるようになりました。
MONEYも0になっています。これがセーブ消去ということですね。

ではどうやって作ったのか解説していきます！

コード解説

このセーブ機能は、ブラウザのクッキー(Cookie)という機能を使っています。
例えば、一度HackforPlayにログインすると、その後はブラウザを閉じても次にHackforPlayを開いた時はログインした状態ですよね。これはブラウザがユーザーの「ログインした」という情報をクッキーに記憶させておくことで実現しています。

これと同じように、紹介したステージでも「コインの位置」と「取ったコインの枚数」をクッキーに読み書きしていました。

＜クッキーの読み込み部分＞

コードを見てみます。下は「ゲームがはじまったとき」の中身です。

 

まず、「Hack.myCoin」は画面上のコインの位置を2次元配列で表現しています。
デフォルトのマップサイズはx(横)が15、y(縦)が10なので、配列も並べると横が15要素、縦が10要素になっています。

次の処理では、ブラウザに保存されているクッキーの情報を読み取っています。

下のコードではクッキーを取得し、cookiesArrayという配列に格納しています。
クッキーの内容はセミコロン（;）で区切られているので、cookies.split(';');で取り出すと便利です。

var cookies = document.cookie;
var cookiesArray = cookies.split(';');

そのあとは、取得したクッキーの配列から必要な要素だけを取り出します。
クッキー1つ1つはキーと値がペアになる「キー=値」という形式の文字列です。（間にイコールが入っています）
クッキーを書き出すコードの説明で詳しく触れますが、今回はこのようなクッキーを設定しています。
 

キー	値（例）	説明
Coin	[  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ];	コインの位置を表した2次元配列
Money	5	所持しているコインの枚数

 

下のコードでは、配列に入っているクッキーごとに「=」で前後の値を区切ってmyCookieという配列に入れています。
myCookieの要素「0」にはキー、要素「1」には値が入ります。

キーがわかれば、あとは「Coin」と「Money」で一致するかどうかを判定し、一致した場合は取り出します。

cookiesArray.forEach(function(element) {
    var myCookie = element.split("=");

    log("myCookie[0]" + myCookie[0]);　//キーが入る
    log("myCookie[1]" + myCookie[1]);　//値が入る

    if (myCookie[0].trim(" ") === "Coin") {
        log("CookieからCoin取得");
        Hack.myCoin = JSON.parse(myCookie[1])
    }
        
    else if (myCookie[0].trim(" ") === "Money") {
        log("CookieからMoney取得");
        Hack.money = JSON.parse(myCookie[1])
    }
});    

最初に定義したHack.myCoinですが、クッキーがある場合はクッキーから取得した配列で上書きします。
最後に下のように配列の内容を元にコインを座標に表示させればマップの完成です。
2次元配列をループ処理で順番に見て「1」の座標にコインを置いています。

次に、どのようにクッキーを書き出しているか見てみます。（続く）