0

This is in p5.js which includes most javascript functions! I am trying to make a save-file for my game. By this I mean: the user presses the save button in my game. It updates an array that is saved on a file included in the game package, the player keeps playing. How would I do something like this (creating files that can be accessed by my code and changed).

    var SM = {
//save files
    sf1: [1,0,0,0,0],
         [0,0,0,0,0],
         [0,0,0,0,0],

    sf2: [1,0,0,0,0],
         [0,0,0,0,0],
         [0,0,0,0,0],

    sf3: [1,0,0,0,0],
         [0,0,0,0,0],
         [0,0,0,0,0],
};

One more thing (FOR PROCESSING CODERS FROM HERE ON): I tried to use processing functions like saveStrings(); and loadStrings(); but I couldn't get saveStrings() to save to a specific location nor could I properly load a txt file. Here is the code I used for that:

var result;
function preload() {
  result = loadStrings('assets/nouns.txt');
}

function setup() {
  background(200);
  var ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

I had a folder called assets within the sketch folder and assets had a txt file called nouns with strings in it (downloaded from saveStrings then manually moved) but the sketch wont go past the loading screen?

Turnip
  • 35,836
  • 15
  • 89
  • 111
Coding King2
  • 37
  • 1
  • 11
  • Is your game supposed to be hosted on a server on which any player can have his own save ? – Louis 'LYRO' Dupont Feb 22 '18 at 20:58
  • Yes It is and it will also have separate Local saves where you can couch brawl or play co-op campaign, or one player can play online with others the code I showed you is for the offline campaign for the online saves: there will be a different array var userDatabase = []; function newUser(usr,gamertag,pss,eml){ userDatabase.push({username: usr, ID: gamertag, password: pss, email: eml }); }; – Coding King2 Feb 22 '18 at 21:04
  • I will add more paramaters of course to give user info but that will be after I use the information I recieve here – Coding King2 Feb 22 '18 at 21:05

2 Answers2

1

If you are running it from a browser, you can't save or load a file how you want, period. Saving and loading files in browser JavaScript involves user interaction, and they get to pick the file and where it saves.

If you want to save it locally, instead of trying to write it to a file, you should write and read it from localStorage, which you can then do just fine.

// save
localStorage.setItem('saveData', data);

// load
const data = localStorage.getItem('saveData');

If it is somehow a game run directly on the client (out of the browser), like written in Node.js, then you'd want to use the fs functions.

To expand a bit, if you have your save data as an object:

const saveData = {
  state: [1,2,3],
  name: 'player'
};

Then to save it, you would simply call:

localStorage.setItem('saveData', JSON.stringify(data));

You'll want to stringify it when you save it to make it work properly. To read it back, you can then just read it back with getItem():

const data = JSON.parse(localStorage.getItem('saveData') || '{}');

(That extra || '{}' bit will handle if it hasn't been saved before and give you an empty object.)

It's actually much easier than trying to write a JavaScript file that you would then read in. Even if you were writing a file, you'd probably want to write it as JSON, not JavaScript.

samanime
  • 25,408
  • 15
  • 90
  • 139
  • Ok then how do I save a file to the computer? – Coding King2 Feb 22 '18 at 21:15
  • The common way is to create an anchor tag (``) with a data URL as the `href` and a suggested filename as `download`, then to append that to the body and trigger its `click()` event. It'll trigger a normal file download. To read a file in, you'd have to have an `` with `type="file"` which would trigger a select file dialog. Neither of those will generally work in a game context. – samanime Feb 22 '18 at 21:25
  • ok your answer is sufficient (It answered my question) but is JSON file only for local storage or can I save it as a JSON on my computer? (Isnt local storage just cookies that are erased when you clear your history?) – Coding King2 Feb 22 '18 at 22:17
  • To save it to your computer, you'll have to use the method I mentioned in my comments, which doesn't really work for a seamless game experience. That's the only way. localStorage is kind of like cookies, but is also more persistent. It doesn't have an expiration and will stick around for a good bit longer. Yes however, it will eventually disappear. – samanime Feb 22 '18 at 22:19
  • Another possible alternative is to save it as a bookmark. This can be done by encoding your save data as a string (there are any number of ways), then base64 encode that string and make it a URL like: https://example.com/mygame?data=data-string-goes-here. Then you can have them just bookmark that page for a save. A lot of online character simulators (for games) and the like use this. Again, not a super seamless approach, but working with the limitations of JS. – samanime Feb 22 '18 at 22:22
  • I understand now how to save it in-browser. I mean now to download a save file to the computer that can be accesed later – Coding King2 Feb 22 '18 at 23:09
  • From the browser, you cannot directly read a file from the browser. It's a limitation of browsers. It can't be done. Period. JavaScript in browsers operate in a sandbox which don't allow direct computer access. In order to save a file and load a file, you have to do the methods I mentioned in my first comment, which involve user interaction. That's the only way. – samanime Feb 23 '18 at 14:52
  • This isnt raw Javascript it is p5.js which is aided with a code called processing. There is a function called loadStrings and saveStrings i just cant get them to work – Coding King2 Feb 24 '18 at 03:08
  • If it's run in a browser, it plays by the same rules as anything else. Unless there is something specifically installed on the client's computer directly (i.e., not through the browser) that is running and being communicated over some port using either HTTP (AJAX) or WebSockets, there is no way in a standard browser to do the kind of saving and loading you are looking for. No library can get around that. It looks like p5 would trigger similar saves and loads as mentioned above, with different code. Still not suitable for a game. Still can't pick where. Still can't auto-load from random spot. – samanime Feb 24 '18 at 06:13
  • https://p5js.org/ . pls look at it. would it be able to manipulate files on the pc? – Coding King2 Feb 26 '18 at 17:53
  • I did look at it. I found the exact code that is used by `saveString()` and `loadString()`. It wouldn't be able to do anything other than what I've been saying all along. Nothing can. It's part of the browser security sandbox. – samanime Feb 27 '18 at 05:32
  • Ok can I use SQL (learn it) to store my array in a mysql database? – Coding King2 Feb 27 '18 at 17:52
  • Yes, that is a completely viable approach. You'd need a server to run the server-side code against (don't do client-side SQL directly, it's a huge security risk), but it'd be a valid approach. – samanime Feb 27 '18 at 18:58
  • does it cost money? – Coding King2 Feb 28 '18 at 01:47
  • There are some free options out there. One free one is Mongo Atlas, though that is NoSQL. Heroku is a free webhost. You can also run a server locally (checkout out MEAN stack as an example). You'll have to Google around. – samanime Feb 28 '18 at 02:15
  • Ok thanks you have been a big help i will remeber you and put you in credits of my game – Coding King2 Feb 28 '18 at 02:20
-1

In order to save strings into a file in Javascript, I would recommand you this previous StackOverflow question, which provides a link to a very clear and easy-to-use library to manage files in Javascript.

Louis 'LYRO' Dupont
  • 1,052
  • 4
  • 15
  • 35