Is it possible to make it to where the player can save and load his game progress?

Any answers? How would I do this?

This is a very generic question.

I’d save a javascript object into a cookie that stores relevant information.

How exactly do I do that?

Have a look at cookie.js from my game:
http://simplesix.sdfgeoff.space/Scripts/cookie.js

It contains code to create, delete and read cookies. What you put in them depends on what information you need to store to ‘save’ a game (eg player position, health etc…)

how would i add in what to save?

there are errors in the code, it tells me ‘expires’ is already defined, and ‘expires’ used out of scope.

I do this in my project Accelerally:

https://playcanvas.com/project/3489/overview/accelerally

I use the LocalStorage HTML5 API to save the player’s high score. See this source file:

https://playcanvas.com/editor/code/3489/game.js

When it is ‘game over’, I check to see if there’s a new best score, and if it is, I write it to local storage:

        if (this.distance > this.bestDistance) {
            this.bestDistance = this.distance;
            if (localStorage) {
                localStorage.setItem('accelerally-best-distance', this.bestDistance);
            }
        }

And on startup (the ‘initialize’ function), I check to see if there is a saved best score and load it if there is:

        if (localStorage) {
            var storedBestDistance = localStorage.getItem('accelerally-best-distance');
            if (storedBestDistance !== null) {
                this.bestDistance = parseFloat(storedBestDistance);
            }
        }

how can I make this apply to other things? For example, I would like to be able to save the player’s location and other things such as the items they may be holding, and the progress they made in the game.

1 Like

also, how would i make it to where they can save their game using the ‘u’ key, and upload their save with the ‘l’ key. Plus, when a persons game is loaded, how will the game know who’s save to upload?

I also need help with something else:
Codes

that holds the code to the player’s backpack / inventory so far.
how can i make it to where when a item on the ground is clicked, it is assigned as one of the items.

there will be attributes added to where each item the game that the player can hold has a specified ID.
for example, the id of an axe may be: ID:1 . How can I code the game to where if the player finds an axe and clicks on it, it is assigned as one of the items in his inventory?

Check out the docs for setItem. As you can see, it takes a key, value pair where both are just strings. To store a position, you could do:

// Write
var p = this.entity.getPosition();
localStorage.setItem("mygame-player-position", p.x + ", " + p.y + ", " + p.z);

To get it back from storage, do:

// Read
var playerPos = localStorage.getItem("mygame-player-position");
if (playerPos !== null) {
    var p = JSON.parse("[" + playerPos + "]");
    this.entity.setPosition(p[0], p[1], p[2]);
}

Same kind of deal for booleans:

// Write
localStorage.setItem("mygame-player-has-axe", "true");

// Read
var playerHasAxe = false;
var value = localStorage.getItem("mygame-player-has-axe");
if (value !== null) {
    playerHasAxe = (value === "true");
}

You can call the code above if wrapped in a function called saveGame as follows:

update: function (dt) {
    if (app.keyboard.wasPressed(pc.KEY_U) {
        this.saveGame();
    }
}

You’re right to be concerned about overwriting different people’s scores though. The way I have my code examples here is per-browser. It can’t distinguish between multiple players. You could store user profiles in local storage though. Another down side of local storage is that it’s not shared across devices. You have to keep playing in the same browser on the same device to access the local storage data.

A solution is to implement a full, proper server side implementation. That’s a lot harder, as you might expect. But there are some cool offerings out there that can simplify this such as Parse.

1 Like