@Lordirish, I will share what I have done so far, but please note that this system does not always return you to the exact same spot where you do the save; it sometimes returns you only to the beginning of the scene. YMMV.
First, I created a JavaScript file that I called ss.js (ss = save system). You place this file along with all the other JS files in your web folder. The contents of this file are as follows:
function getGameValueFn() {
if (!stats || !stats.scene) {
alert("Sorry, the game cannot be saved.");
return false;
}
var password = computeCookie(stats.scene.stats, stats.scene.temps, stats.scene.lineNum, stats.scene.indent);
password = stats.scene.obfuscate(stats.scene.name + password);
return password;
}
function loadGameCallback(password) {
if (!stats || !stats.scene) {
alert("Sorry, the game cannot be loaded.");
return false;
}
var token = stats.scene.deobfuscatePassword(password);
var icol = token.indexOf("{");
var scene_name = token.substring(0, icol);
var token = token.substring(icol);
var state = null;
try {
state = eval("state="+token);
} catch (e) {
alert("Sorry, your game could not be loaded.");
return;
}
saveCookie(function() {
clearScreen(function() {
restoreGame(state, scene_name, /*userRestored*/true);
})
}, "", state.stats, state.temps, state.lineNum, state.indent);
}
In your index.html file in your mygame folder, you then include this file like any of the other JS files are included, as follows:
<script src="../ss.js"></script>
Okay, so this is the foundation of any save system I’ve tried so far. The getGameValueFn function returns a password (or false on failure), and the loadGameCallback function accepts a password and attempts to restore the game accordingly. What is left to be done is to invoke them when you want to save or restore the game, and to keep that password around somehow so that it can be passed in to the loadGameCallback when you want to restore the game.
For this, I resorted to using my HTML5 localStorage save system that I wrote a year or two ago and have used elsewhere on the web for various purposes. It makes use of jQuery, so you have to point to jQuery and to my save system file in your index.html file. To do that, you can include the following lines in your index.html file:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://eposic.org/js/storageSystem.js"></script>
There is a good deal of code in both of those JS files that you won’t need, but if you link to them from the sites as shown above rather than hosting them on your own server, everyone will be using the same code, which will support caching in an optimum fashion. A lot of people already have jQuery cached in their browsers, possibly without even being aware of it, because they’ve visited a site before that uses jQuery and linked to it using the URL I’ve shown above.
Okay, so a couple more steps to go. The way that I chose to make the save/restore functionality available to the user is to put links at the bottom of the page, where they are always accessible, rather than showing them only at certain times within the game. @Lordirish, you’ve already seen this in my Castle of Chaos game (which, by the way, has an ending now, if you ever make it to grid point x=999, y=999, though further work on the game has been postponed for the foreseeable future). Placing links into the game for the purpose of saving and restoring the game involves editing the index.html file and plopping in some HTML code at the bottom of the page (or wherever it is you want the links to appear). I usually put it right above the line in the index.html file that looks like this: <div id="mobileLinks" class="webOnly">
The HTML code I use for the save/restore links looks something like this:
<div id="sa" style="display: none;">
<a href='#' id='save_game1'>Save Game 1</a>
| <a href='#' id='save_game2'>Save Game 2</a>
| <a href='#' id='save_game3'>Save Game 3</a><br />
<a href='#' id='load_game1'>Load Game 1</a>
| <a href='#' id='load_game2'>Load Game 2</a>
| <a href='#' id='load_game3'>Load Game 3</a><br />
</div>
The display: none style attribute will prevent the links from being displayed until later JS code massages the links. As they are, the links simply reload the current page, but with the last remaining step of the process we will use jQuery to make those links do what we want, and to then show them to the user.
So, the last step in this process is to write the JS that hooks everything together and activates it all. In your index.html file, go back up to the place in the header where you included those extra tags aforementioned. Remember, there are three JS files you pulled in: ss.js, jquery-1.7.2.min.js (from the jQuery server), and storageSystem.js (from my eposic.org server). Somewhere after those three files are included, enter the following JS code:
var game_ns = "<em>namespace specific to your game/server</em>";
(function($) {
$(function() {
if ($.Eposic.SS.isSupported()) {
// show the div containing the buttons for saving and loading
$("#sa").show();
var game_ss = $.Eposic.SS.get(game_ns);
$("#save_game1").click(function(){
game_ss.save(game_ns, "1", getGameValueFn());
alert("Game 1 saved");
return false;
});
$("#load_game1").click(function(){
var game_val = game_ss.load(game_ns, "1");
if (game_val) {
loadGameCallback(game_val);
} else {
alert("You do not have a game saved to slot 1");
}
});
$("#save_game2").click(function(){
game_ss.save(game_ns, "2", getGameValueFn());
alert("Game 2 saved");
return false;
});
$("#load_game2").click(function(){
var game_val = game_ss.load(game_ns, "2");
if (game_val) {
loadGameCallback(game_val);
} else {
alert("You do not have a game saved to slot 2");
}
});
$("#save_game3").click(function(){
game_ss.save(game_ns, "3", getGameValueFn());
alert("Game 3 saved");
return false;
});
$("#load_game3").click(function(){
var game_val = game_ss.load(game_ns, "3");
if (game_val) {
loadGameCallback(game_val);
} else {
alert("You do not have a game saved to slot 3");
}
});
}
});
})(jQuery);
</script>
I’m not going to explain this code line by line. Note however, that this code looks to see if the Eposic storage system is supported by the user’s browser, and if it isn’t, then nothing is done, which results in those links for saving/restoring the game not being shown. The user won’t even know what they are missing.
If the Eposic storage system is supported (which basically means that the computer/device supports HTML5 localStorage), then the links are displayed and set up to actually do something. When a save link is clicked, it will get the current password for the game and save it using my Eposic storage system. When the corresponding restore link is clicked, it will restore the game saved to the same slot (1, 2, or 3 – yes, you can save up to three different games at the same time).
A word about the game_ns variable: You can use this save system in different games on your server, but the value of the game_ns variable must be different for each game, or you’ll have the games saving over each other.
You can also enable more slots to save games to by following the pattern established for the 3 slots I’ve demonstrated.
