Joan: Es crea la pàgina amb «=El Joc del Sudoku= *https://www.sudokubum.com/ Objectiu: #fer funcionar localment el sudoku #modificar algun aspecte de la funcionalitat Primer de tot mirem el codi...».

2021-01-18T19:26:39Z

Es crea la pàgina amb «=El Joc del Sudoku= *https://www.sudokubum.com/ Objectiu: #fer funcionar localment el sudoku #modificar algun aspecte de la funcionalitat Primer de tot mirem el codi...».

Pàgina nova

=El Joc del Sudoku=
*https://www.sudokubum.com/

Objectiu:
#fer funcionar localment el sudoku
#modificar algun aspecte de la funcionalitat

Primer de tot mirem el codi font i l'executem en local. Mirem el codi font i veiem els fitxers que ens faltes:
*CSS: css/styles.css
*JS: js/DLX.js i js/all.js
Veiem que el codi està fet amb JQuery.

descarreguem aquests fitxers que ens falten, amb les rutes correctes, i ja podem jugar localment al Sudoku.

Volem fer una modificació de la funcionalitat. Per exemple: anular la possibilitat de fer Pause en el joc.
Cerquem per ''click'' en el fitxer all.js, però és un embolic. El codi està ofuscat. Utilitzem el servei online:
*https://beautifier.io/
per tal de separar en línies el nostre codi js (el fitxer ''all.js'') i entendre una mica com funciona. Renombrem el nostre codi com a ''all2.js''.

Fem ''inspeccionar'' sobre l'element del rellotge, i veiem que podem localitzar la part del ''timer'' en el codi:
<pre>
Timer.prototype = {
set: function(t) {
return t = t.split(":"), this.hour = t[0], this.min = t[1], this.sec = t[2], this
},
bindFocus: function() {
var t = this;
clearInterval(this.focus), document.hasFocus && (t.focus = setInterval(function() {
document.hasFocus() ? t.paused && (window.clearInterval(this.refresh), t.go()) : t.stop()
}, 200))
},
events: function() {
...
var e = this,
r = $("<h2>").addClass("pauseGame").text(texts.pause),
i = !0;
this.el.on("click", t)
...
</pre>
Encara que sigui difícil d'entendre la part ''this.el.on("click", t)'' és la que associa l'event click sobre el timer, que activa o desactiva el pause. Per tant, comento o elimino les següents línies:
<pre>
var e = this,
r = $("<h2>").addClass("pauseGame").text(texts.pause),
i = !0;
this.el.on("click", t)
</pre>
Ja hem fet una modificació que afecta a la funcionalitat del joc.

==Guardar variables amb localStorage==
Veiem que podem guardar la partida que estem fent (''save''). I és que amb Javascript tenim la possibilitat de guardar variables en local, amb l'objecte ''localStorage'' (similar a com es fa amb les cookies, però amb un propòsit més general). Això és important perquè des de Javascript l'accés al disc dur està deshabilitat (seria un ''fallo'' de seguretat molt gran). Però sí que podem accedir de forma segura a guardar variables locals mitjançant ''localeStorage''. I això és el que es fa servir per guardar la partida.

Més informació:
*https://www.tiny.cloud/blog/javascript-localstorage/

{{Autor}}, gener 2021

Sudoku amb Javascript - Historial de revisió

Joan: Es crea la pàgina amb «=El Joc del Sudoku= *https://www.sudokubum.com/ Objectiu: #fer funcionar localment el sudoku #modificar algun aspecte de la funcionalitat Primer de tot mirem el codi...».