Estoy implementando un juego de dados, que almacenará los resultados de los 2 jugadores. Tengo un problema al guardar las puntuaciones, cuando hago console.log solo obtengo las puntuaciones nuevas. Cuál es el problema aquí?
window.onload = (event) => { throw_dice(); }; var scores = { player1: 0, player2: 0 }; function throw_dice() { let x = Math.floor(Math.random() * 6) + 1; let img1 = document.getElementById("img1"); let y = Math.floor(Math.random() * 6) + 1; let img2 = document.getElementById("img2"); img1.src = "./images/dice" + x + ".png"; img2.src = "./images/dice" + y + ".png"; if (x > y) { document.getElementById("title").innerHTML = "PLAYER 1 WINS"; scores.player1 = scores.player1 + 1; } else if (x == y) { document.getElementById("title").innerHTML = "DRAW"; } else { document.getElementById("title").innerHTML = "PLAYER 2 WINS"; scores.player2 = scores.player2 + 1; } saveScores(); getScores(); } function saveScores() { localStorage.setItem("score", JSON.stringify(scores)); } function getScores() { var x = localStorage.getItem('score'); console.log('x', JSON.parse(x)); }En la carga de la página, estás haciendo
var scores = { player1: 0, player2: 0 }; y luego actualizar ese objeto dentro throw_dice y guardarlo en el almacenamiento. En esa línea, debe recuperar el objeto del almacenamiento local en la carga de la página; de lo contrario, nunca leerá (y, por lo tanto, sobrescribirá) las puntuaciones existentes en el almacenamiento en saveScores .
var scores = JSON.parse( localStorage.getItem('score') || '{ "player1": 0, "player2": 0 }') );