Spostamento di un div da posizione iniziale qualsiasi

[Gas75]

Salve, sto tentando di generalizzare un programmino che sposta un div mediante le frecce direzionali della tastiera. Succede che funziona benissimo se il div parte con

position: absolute;
top: 0px;
left: 0px;

Viceversa se inizia con delle coordinate differenti, queste vengono "azzerate" prima di iniziare a spostarsi...
Per quanto riguarda lo spostamento orizzontale...

if (tasto == 39) {
	sinistra = Number(sinistra.substring(0, sinistra.length-2)) + 25;
	// 50 è la larghezza del div
	if (sinistra <= x - 50) {
		document.getElementById("guardia").style.left = sinistra + "px";
	}
} else if (tasto == 37) {
	sinistra = Number(sinistra.substring(0, sinistra.length-2)) - 25;
	if (sinistra >= 0) {
		document.getElementById("guardia").style.left = sinistra + "px";
	}
}

Analoga situazione per gli spostamenti verticali, se premo la freccia giù il div si porta a top: 50px (evento su keyup e su keydown) anche se parte con top: 250px.
Letteralmente leggo in Ispeziona di Chrome che al div "guardia" top e left si resettano a 0 prima di incrementarsi e decrementarsi di 25 e poi concatenarsi a "px"...
Dove sbaglio? Grazie.

[KillerWorm]

Ciao, ci possono essere diversi fattori che incidono sul risultato.
La variabile sinistra dove e come la stai inizializzando?

Presumo ci sia qualcosa del genere prima di quelle condizioni:

var sinistra = document.getElementById("guardia").style.left;

Mi confermi?

In tal caso considera che la proprietà style, per un elemento HTML, riflette l'omonimo attributo style che è definito nel tag (come stile in linea). Per cui, via script, puoi recuperare i valori delle relative proprietà CSS (ad esempio left) attraverso la proprietà style.

In altre parole, se hai definito left attraverso l'attributo style (cioè nello stile in linea applicato al tag), allora puoi recuperarlo dalla proprietà style (attraverso JavaScript); se invece lo hai definito tramite CSS esterno, o incluso nel documento con <style>, allora la proprietà style.left risulta essere indefinita fintanto che non vai ad impostarla da script.

Per leggere lo stile di un elemento, a prescindere che sia applicato in linea o attraverso fogli di stile inclusi, puoi usare il metodo getComputedStyle().

In alternativa, se vuoi usare la proprietà style, dovrai definirne in precedenza le proprietà CSS

... o attraverso l'attributo style direttamente nel tag come stile in linea

<div id="guardia" style="left: 250px;"></div>
...
<script>console.log(document.getElementById("guardia").style.left);</script>

... o attraverso JavaScript

document.getElementById("guardia").style.left = "250px";
...
console.log(document.getElementById("guardia").style.left);

[Gas75]

Sì, le variabili sono definite esattamente come hai scritto nell'esempio, con style poiché fissate dal foglio CSS.
Strano perché in altre situazioni ricordo di aver prelevato e impostato tranquillamente valori di attributi CSS dal foglio di stile, non dal tag dell'elemento.
Comunque con l'attributo style nel tag funziona tutto.
Grazie.

[Gas75]

Salve, mi succede un'altra cosa strana.
Dopo aver mosso il mio div con i tasti direzionali, avvio una funzione fuga() che muove random un altro div "ladro".
In fuga(), dopo aver analizzato i vari casi in cui "ladro" si trova su un angolo o uno spigolo (inizialmente è nel div che circoscrive la "stanza" di gioco, leggermente a destra, mentre "guardia" è leggermente a sinistra), effettuo...

casuale = Math.floor(Math.random()*4);
				
	if (casuale == 0) {
		sopraL = Number(sopraL.substring(0, sopraL.length-2)) - 50;
		document.getElementById("ladro").style.top = sopraL + "px";
	} else if (casuale == 1) {
		sinistraL = Number(sinistraL.substring(0, sinistraL.length-2)) - 50;
		document.getElementById("ladro").style.left = sinistraL + "px";
	} else if (casuale == 2) {
		sinistraL = Number(sinistraL.substring(0, sinistraL.length-2)) + 50;
		document.getElementById("ladro").style.top = sinistraL + "px";
	} else if (casuale == 3) {
		sopraL = Number(sopraL.substring(0, sopraL.length-2)) + 50;
		document.getElementById("ladro").style.top = sopraL + "px";
	}

succede che la posizione iniziale di "ladro" è

<div id="ladro" style="top: 250px; left: 400px;">L</div>

Tuttavia capita che dopo la prima mossa di "guardia", salti a

<div id="ladro" style="top: 450px; left: 400px;">L</div>

L'aumento di top è correlato con casuale == 3, ma credo sia chiaro che in tal caso al valore di sopraL, che è

let sopraL = document.getElementById("ladro").style.top;

vada aggiunto 50, non 200!
Avvengono altri "salti" simili, sempre con "ladro" lontano dai bordi che "salta" sempre alterando l'attributo top del suo div, mai left.

[Gas75]

Trovato l'errore...

document.getElementById("ladro").style.top = sinistraL + "px";

Assegnavo il valore aggiornato per left a top...

[KillerWorm]

Trovato l'errore...

[Gas75]

Problema persistente in orizzontale.
Questo è il codice.

else if (sinistraL == 450) { // ladro allo spigolo destro
    casuale = Math.floor(Math.random()*3);
                
    if (casuale == 0) {
        sopraL = Number(sopraL.substring(0, sopraL.length-2)) - 50;
        document.getElementById("ladro").style.top = sopraL + "px";
    } else if (casuale == 1) {
        sinistraL = Number(sinistraL.substring(0, sinistraL.length-2)) - 50;
        document.getElementById("ladro").style.left = sinistraL + "px";
    } else if (casuale == 2) {
        sopraL = Number(sopraL.substring(0, sopraL.length-2)) + 50;
        document.getElementById("ladro").style.top = sopraL + "px";
    }
    
}

E qui allegata la situazione che si verifica...
js.jpg
Da dove prende quell'incremento di 50px?? Dovrebbe poter andare soltanto sopra, sotto o a sinistra!

Edit: ho messo un console.log(casuale) in quell'if, ma non mostra nulla! Entra in pratica nell'else finale in cui si considera che il div non sia su un bordo o su un angolo. Cosa sta succedendo, perché sinistraL == 450 risulta false quando è true??

[Gas75]

Trovato l'errore: i confronti negli if vanno fatti con le posizioni in pixel perché il metodo come prima cosa recupera i valori top e left che sono comprensivi di unità di misura.