What is the best method for storing "game progress" in local storage?

Question

What is the best method for storing "game progress" in local storage?

I am currently working on coding a simple Risk game where players can click on countries to change their color from red to green, yellow, purple, and back to white.

The game starts with an "all-white" map. I am looking to create different save slots so that players can save the game in one slot and then reload that slot later to continue playing. How can I implement this feature for 4 different save slots? The world map is an SVG file, and I am changing each region's color using event.target.style.fill.

Consider the following code:

HTML

    <svg   width="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 701 300" style="enable-background:new 0 0 701 300;" xml:space="preserve">
    
      <g onclick="changeColor(event)">
       <path class="st1" d="M308.6,112.3l-0.1,0.2l-0.1,0.2l-0.1-0.1h-0.1l-0.1-0.1l0.1-0.1h0.1l0.1-0.1l0.1-0.1L308.6,112.3L308.6,112.3z
            M313.4,111.6v0.2l0.1,0.1l-0.1,0.2v0.1l-0.1,0.1l-0.2,0.1l-0.1,0.1l-0.2-0.1l-0.2-0.2l-0.1-0.1v-0.2l0.2-0.1v-0.2v-0.1h0.2h0.1h0.1
           L313.4,111.6z M309.9,111.8L309.9,111.8l-0.2-0.1l-0.1-0.1v-0.1v-0.1h0.1h0.1l0.2,0.1v0.1L309.9,111.8L309.9,111.8z M312,110.6
           L312,110.6l-0.2,0.2l-0.1,0.2l-0.1,0.1v0.1l-0.1,0.2v0.1l-0.2,0.2v0.1h-0.1l-0.2,0.1l0,0v-0.1l-0.1-0.1v-0.1l-0.1-0.1v-0.1l-0.1-0.2
           l0.2-0.1l0.1,0.1l0.2-0.1h0.1l0.2-0.1l0.2-0.1v-0.1l0.2-0.1h0.2L312,110.6L312,110.6z M315.6,111.6l-0.1,0.1h-0.1h-0.1h-0.1v-0.1
           h0.1l0.2-0.1l0.1-0.1l0.1-0.1v-0.2V111l0.1-0.2l0.1-0.1l0.1-0.2l0.1-0.3l0.1-0.1h0.1l0.1,0.1v0.2v0.2v0.2v0.2l0,0l-0.1,0.2l-0.1,0.1
           H316L315.6,111.6L315.6,111.6z M308.8,110h0.1l0.1,0.1l0.1,0.2l-0.1,0.1v0.1l-0.2,0.3l0,0v-0.1l-0.1-0.3v-0.1v-0.1L308.8,110h0.1
           H308.8z M317.1,109.3L317.1,109.3l-0.1,0.3l-0.2,0.2h-0.2l-0.1,0.2l-0.2-0.1l0,0l0.1-0.1v-0.1l0.1-0.1l0.1-0.1h0.1l0.1-0.1h0.2l0,0
           L317.1,109.3l0.1-0.1l0...

JS

function changeColor(event) { 
    clicks++

    if (clicks == 1)  {
      event.target.style.fill = "#DA4567";
  }
    if (clicks == 2) {
        event.target.style.fill = "#7aeb34";
   }
    if (clicks == 3) {
        event.target.style.fill = "#ffe70a";
}
    if (clicks == 4) {
        event.target.style.fill = "#ba0afa";
}
    if (clicks == 5) {
        event.target.style.fill = "#FFFFFF";
        clicks = 0;
}
}

CSS (INITIAL COLOR = WHITE)

.st1{fill:#FFFFFF;stroke:#000000;stroke-linejoin:round;}

You can see a live demo of the game and access the website by clicking on the link below. I have also added a user interface for saving and loading games which can be accessed through the "Load/Save game" button.

Visit the Risk Game Demo here.

Thank you for your support!

javascript html css local-storage

Answer 1

Answer №1

If you want to utilize localStorage to save the state of your application, it's essential to create functions similar to the ones outlined below:

function save(slotIndex, clicks) {
  let slots;

  try {
    slots = JSON.parse(localStorage.getItem('slots'));
  } catch (e) {
    console.error(e);
  }

  if (!slots) {
    slots = [0, 0, 0, 0];
  }

  slots[slotIndex] = clicks;

  localStorage.setItem('slots', JSON.stringify(slots));
}

function restore(slotIndex) {
  let slots = [];

  try {
    slots = JSON.parse(localStorage.getItem('slots'));
  } catch (e) {
    alert('no slots found in local storage');
  }

  return slots[slotIndex] || 0;
}

An altered version of your app with my modifications can be accessed here.

It's important to note that the state being saved only includes the number of clicks made, which corresponds to the next color for coloring a country.

If what you truly intend to save are the colors of the countries themselves, a more intricate data structure would be required:

const slots = [
  
  {
    currentColorIndex: 2,
    selectedCountries: [
       { id: 'spain', colorIndex: 3 },
       { id: 'usa', colorIndex: 1 },
    ]
  },
  ... other slots
  
];

This updated data can also be stored in localStorage once stringified (as all localStorage values must be strings). Your application will need to update this structure whenever a color is changed in the SVG, ensuring they remain synchronized.

As applications become more complex, delving into concepts like the MVC (Model View Controller) pattern may prove beneficial in handling such issues effectively.

Answer 2

If you want to utilize localStorage to save the state of your application, it's essential to create functions similar to the ones outlined below:

function save(slotIndex, clicks) {
  let slots;

  try {
    slots = JSON.parse(localStorage.getItem('slots'));
  } catch (e) {
    console.error(e);
  }

  if (!slots) {
    slots = [0, 0, 0, 0];
  }

  slots[slotIndex] = clicks;

  localStorage.setItem('slots', JSON.stringify(slots));
}

function restore(slotIndex) {
  let slots = [];

  try {
    slots = JSON.parse(localStorage.getItem('slots'));
  } catch (e) {
    alert('no slots found in local storage');
  }

  return slots[slotIndex] || 0;
}

An altered version of your app with my modifications can be accessed here.

It's important to note that the state being saved only includes the number of clicks made, which corresponds to the next color for coloring a country.

If what you truly intend to save are the colors of the countries themselves, a more intricate data structure would be required:

const slots = [
  
  {
    currentColorIndex: 2,
    selectedCountries: [
       { id: 'spain', colorIndex: 3 },
       { id: 'usa', colorIndex: 1 },
    ]
  },
  ... other slots
  
];

This updated data can also be stored in localStorage once stringified (as all localStorage values must be strings). Your application will need to update this structure whenever a color is changed in the SVG, ensuring they remain synchronized.

As applications become more complex, delving into concepts like the MVC (Model View Controller) pattern may prove beneficial in handling such issues effectively.

What is the best method for storing "game progress" in local storage?

HTML

JS

CSS (INITIAL COLOR = WHITE)

Answer №1

Similar questions

The conversion of the input (ImageButton) to jQuery is not possible

Currently dealing with a script that utilizes AJAX GET to incorporate JSON data into my table

Ways to soften a section of a canvas component?

What steps are involved in converting .html files to .ejs format via terminal?

Error retrieving data from Jquery getJSON Query

Obtain the key by using the JSON value

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

Error: Attempting to access 'map' property on an undefined object in a ReactJS application

Unable to locate the sibling element using CSS Selector with Selenium

Ensure page is updated after an AJAX request in jQuery Mobile by refreshing the page

Troubleshooting a scenario where making edits to a mongoDB item does not result in any updates

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

Unable to execute the new firebase on node server

There seems to be an issue with the navigation bar

What is the process for dynamically inserting a new object into an array of data objects in Vue.js?

Loading JSON models with raycasting and colliding with meshes in three.js

Sizing Children in Ant Design Inline Forms

Making Angular2 Templates More Efficient with Array.prototype.filter()

What is the behavior of an AngularJS controller when it encounters the res.json(false) value?

What is the secret to keeping a hover effect active?