Variabili globali e funzioni

[Floky]

Salve a tutti! Ho da poco iniziato a studiare Javascript tramite tutorial in internet (w3c school, html.it, codecademy ecc...) e mi sono imbattuto nel seguente problema:

Nella funzione LANCIADADI calcolo il risultato ottenuto dal lancio dei due dadi. Vorrei utilizzare il risultato, messo dentro la variabile sommaDadi, in un altra funzione ovvero STARTGAME, quindi avevo pensato di creare la variabile in modo globale, al di fuori delle funzioni affinch� potessi usarla ovunque. Il problema � che non funziona, quando la richiamo mi da valore 0 e non il valore ottenuto dentro la funzione LANCIADADI.

Mi viene da pensare che le variabili sommaDadi (globale) e quella sommaDadi all'interno della funzione (locale) siano due variabili diverse con lo stesso nome.. mi sembra di aver capito cosi leggendo le guide.

Ma allora come fare per poter aggiornare il valore di una variabile globale dall'interno di una funzione?

Ho provato a leggere su w3c school ma non sono riuscito a capire (di solito le spiegazioni sono abbastanza chiare).

La funzione LANCIADADI viene invocata quando schiaccio su un button quindi non voglio richiamarla a codice (es. lanciaDadi() altrimenti vengono lanciati i dadi senza schiacciare il button.

Spero di essere stato abbastanza chiaro nel descrivere il problema.

var player = "PLAYER";
        var computer = "COMPUTER";
        var vitaPlayer = 6;
        var vitaComputer = 6;
        var counter = 0;
        var sommaDadi = 0;


        function lanciaDadi() {
            var randomNumber1 = Math.floor(Math.random() * 6) + 1;
            var randomNumber2 = Math.floor(Math.random() * 6) + 1;
            
            document.getElementById("numberFirstDice").innerHTML = randomNumber1;
            document.getElementById("numberSecondDice").innerHTML = randomNumber2;


            if (randomNumber1 >= randomNumber2) {
                sommaDadi += (randomNumber1 * 10) + randomNumber2;
            }
            else {
                sommaDadi += (randomNumber2 * 10) + randomNumber1;
            }
        }


        function startGame() {
            document.getElementById("player").innerHTML = player;
            document.getElementById("computer").innerHTML = computer;


            document.getElementById("vitaPlayer").innerHTML = "VITA: " + vitaPlayer;
            document.getElementById("vitaComputer").innerHTML = "VITA: " + vitaComputer;


            if (counter % 2 == 0) {
                document.getElementById("player").style.backgroundColor = "green";
                document.getElementById("valoreDadiPlayer").innerHTML = sommaDadi;


            }

[Marcolino's]

Se ho capito bene, startGame() inizializza il programma e quindi scrive all'interno di alcuni campi nella pagina alcuni valori, compresa la famigerata sommaDadi.
Ovviamente se non inizializzi ( con var ) sommaDadi all'interno di una funziione qualsiasi, viene usata quella globale se esiste ( è il tuo caso ).
Da quello che ho compreso questa riempie all'inizio "valoreDadiPlayer" se counter ha un valore pari, e zero lo è ( 0 modulo di 2 = 0 ), quindi inizializza il gioco mettendo 0, il valore di default. Giusto?
Poi?
Tu dici che lanciaDadi() viene chiamata alla pressione di un tasto nella pagina, ma che succede dopo?
lanciaDadi() giustamente fa solo quello, ma non mostra il risultato, come vengono mostrati i risultati dei lanci?

[Floky]

Ciao innanzitutto grazie per la risposta.

Si corretto quello che dici.

In sostanza gestisco i turni con:

if (counter % 2 == 0) {
    document.getElementById("player").style.backgroundColor = "green";
    document.getElementById("valoreDadiPlayer").innerHTML = sommaDadi;
}

else {
    #turno computer
}

Essendo inizialmente counter impostato a 0 il primo tiro spetta a player, che si evidenzier� di verde e dovrebbe visualizzare il risultato (valoreDadiPlayer)

Successivamente quando clicco di nuovo il button � computer che si deve evidenziare (per indicare il turno) e il risultato deve comparire in sommaDadiComputer.

Il codice che attualmente c'� in startGame all'inizio era tutto nella funzione lanciadadi e tutto funzionava. Cliccavo una prima volta e il risultato compariva nella colonna player, cliccavo una seconda volta e comprariva nella colonna computer e cosi via.

Volevo per� suddividere il codice in pi� funzioni per renderlo pi� capibile e infine richiamare le varie funzioni in una sola. Da qui la necessit� di rendere sommaDadi una variabile globale affinch� possa utilizzare il suo valore anche in altri funzioni ma il problema � che rimane sempre 0.

Eppure come mi hai detto, nella funzione io ho scritto solo sommaDadi (senza var) quindi dovrebbe essere globale.

Leggendo la tua risposta mi ha fatto venire in mente che il problema sia startGame.

Nel codice completo postato all'inizio in fondo a tutto io richiamo startGame();

Forse il problema � che viene eseguito solo una volta e quindi non aggiorna il risultato ad ogni click del button?

[Floky]

Tu dici che lanciaDadi() viene chiamata alla pressione di un tasto nella pagina, ma che succede dopo?
lanciaDadi() giustamente fa solo quello, ma non mostra il risultato, come vengono mostrati i risultati dei lanci?

Si esatto, lanciaDadi() viene chiamata quando clicco sul button. Dopo non succede niente.

Quando clicco sul button vedo solo cambiare i numeri dei due dadi ma non mi viene restituito la somma.

Ancor prima di cliccare vedo gi� lo 0 nel campo "valoreDadiPlayer" in quanto prende il valore della variabile globale sommaDadi che ho impostato a 0.. se invece la dichiaro soltanto (var sommaDadi) esce undefined.

Ora ho fatto un piccola prova:

var sumDice = 0;


function lanciaDadi() {
    sumDice = 12;
    #oppure sumDice += 12;
    #oppure window.sumDice = 12;
}


function startGame() {
	document.getElementById("valoreDadiComputer").innerHTML = sumDice;
	console.log(sumDice);
}
			
startGame();

Il risultato � sempre 0 non 12.

[cavicchiandrea]

var sumDice = 0;


function lanciaDadi() {
    
    sumDice += 12;
    
}


function startGame() {
lanciaDadi()
    document.getElementById("valoreDadiComputer").innerHTML = sumDice;
    console.log(sumDice);
}
            
startGame();

[Floky]

Nel modo che mi hai indicato funziona ma nel mio contesto non va bene.

Mi spiego.

Se in startGame() dichiaro lanciaDadi() questa si esegue da sola senza che io clicco sul button.

In pratica ancor prima di cliccare i dadi sono gi� stati lanciati.

Il grosso secondo problema (correggetemi se sbaglio) � che essendo startGame() eseguita una sola volta (quando a codice la invoco) i turni non vengono considerati cio� viene eseguito il codice una volta ma quando counter viene incrementato (per passare il turno) ovviamente il codice non viene rieseguito.. MENTRE se il codice lo sposto tutto nella funzione lanciaDadi() tutto funziona perfettamente perche ad ogni click la funzione viene richiamata (e in questo caso posso fare a meno pure della variabile globale)

Possibile che devo scrivere tutto in una sola funzione?

Avevo provato a fare questo esercizio in python (anche qui sono un dilettante allo sbaraglio) e non avevo incontrato queste difficolt�..

In pratica come l'esempio di Andrea se voglio usare una variabile globale devo prima invocarne la funzione che la contiene?

function startGame(){
lanciaDadi()
document.getElementById("valoreDadiComputer").innerHTML = sumDice;
console.log(sumDice);
}

startGame();Non � possibile richiamare solo la variabile?

[cavicchiandrea]

Se togli l'esecuzione starGame() in fondo si eseguirà al click

[Floky]

Perfetto grazie.

Vorrei chiedervi se avete dei consigli per buoni libri cartacei su Javascript, che siano abbastanza aggiornati e chiari (che non diano per scontato nulla). Preferirei che fossero italiani ma se non ve ne fossero di validi va bene anche in lingua inglese (ma non troppo tecnico). Finora ho sempre letto tutorial in internet (w3c school, codecademy, html.it e altro) per farmi una conoscenza di base ma non � sempre facile reperire informazioni complete, aggiornate e soprattutto leggere molte ore al pc lo trovo estenuante. Stavo guardando su amazon ma come al solito si trovano pareri diversi.. quindi chiedo vostri consigli in quanto ci siete passati prima di me nella ricerca di testi validi.

Il massimo sarebbe un libro che tratti anche html5 e css3. Avevo adocchiato questo per� � del 2012... https://www.amazon.it/HTML5-CSS3-Jav...rds=javascript forse cose come i flexbox CSS3 non ci saranno..

Ero indeciso se aprire una nuova discussione o se chiedere qui quindi mi scuso in anticipo se ho sbagliato posto.

Grazie!

[cavicchiandrea]

Le discussioni sui libri sono soggettive, se quello che hai adocchiato ti ispira prendolo senza farti scrupoli. Il consiglio è prendi prima un livello base è una volta appresso passa ad un livello esperto, non mescolare js css html compra libri specifici almeno all'inizio.

[Floky]

Ciao ragazzi, sono tornato sul "pezzo" e lo stavo cercando di fare utilizzando anche gli oggetti.

Javascript:

var mioNome = prompt("Inserisci il tuo nome");
mioNome = mioNome.toUpperCase();


function Player(nome) {
	this.nome = nome;
	this.vita = 6;
	this.lancioDadi = function() {
		var randomNumber1 = Math.floor(Math.random() * 6) + 1;
		var randomNumber2 = Math.floor(Math.random() * 6) + 1;


		document.getElementById("numberFirstDice").innerHTML = randomNumber1;
		document.getElementById("numberSecondDice").innerHTML = randomNumber2;


		if (randomNumber1 >= randomNumber2) {
			var sumDice = (randomNumber1 * 10) + randomNumber2;
			return sumDice;
		}


		else {
			var sumDice = (randomNumber2 * 10) + randomNumber1;
			return sumDice;
		}
	};


}


var giocatore = new Player(mioNome);
var computer = new Player("COMPUTER");
var turno = 0;








document.getElementById("player").innerHTML = giocatore.nome;
document.getElementById("computer").innerHTML = computer.nome;


function cambiaNumero() {
	var x = prompt("scrivi");
}


function startGame() {


	


	if (turno % 2 === 0) {
		
		document.getElementById("vitaPlayer").innerHTML = giocatore.vita;
		document.getElementById("valoreDadiPlayer").innerHTML = giocatore.lancioDadi();
		
		
		
		
		turno += 1;
	}


	else {
		
		document.getElementById("vitaComputer").innerHTML = computer.vita;
		document.getElementById("valoreDadiComputer").innerHTML = computer.lancioDadi();


		turno += 1;
	}
}

Html:

<div class="tokyo container-fluid">
		<h2>tokyo game</h2>
		<div class="board">
			<div class="sectionPlayer">
				<h3 id="player"></h3>
				<span id="vitaPlayer"></span>
				<span id="valoreDadiPlayer" onclick="cambiaNumero()"></span>
			</div>
			<div class="sectionDice">
				<div id="dadoUno">
					<span id="numberFirstDice"></span>
				</div>
				<button id="rollDice" onclick="startGame()">Lancia i dadi</button>
				<div id="dadoDue">
					<span id="numberSecondDice"></span>
				</div>
			</div>
			<div class="sectionComputer">
				<h3 id="computer"></h3>
				<span id="vitaComputer"></span>
				<span id="valoreDadiComputer"></span>
			</div>
		</div>
	</div>

Tra i tanti problemi, attualmente sono impantanato con le prompt() in quanto ho notato che non vengono eseguite nel punto giusto in cui sono inserite.

Mi spiego meglio. Ad inizio codice, quando la pagina viene aperta compare la prima prompt che chiede di inserire il nome. Fin qui tutto ok.
Il problema � che durante il gioco dovr� inserire altre prompt. Ad esempio, dopo che il giocatore o il computer hanno lanciato i dadi si dovrebbe dare l'opportunit� di inserire un numero (lo stesso uscito con il lancio dei dadi oppure, bleffando, un altro numero).

Qui le regole del gioco: https://it.wikipedia.org/wiki/Tokyo_(gioco)

Io avevo pensato di fare cosi. Una volta visualizzato il tiro dei dadi, cliccando sul numero stesso far partire un prompt che chieda di inserire il numero (e magari poi salvarlo come attributo dell'oggetto e.g. this.numeroDichiarato). Il problema � che il secondo prompt parte ancor prima che il punteggio dei dati sia mostrato a schermo. Schiaccio il button, parte subito il prompt e poi viene mostrato il punteggio, cosa sbagliata ovviamente. Ho fatto altre prove su altri codici (esempi su w3c school) ma il risultato � lo stesso ovvero i prompt vengono eseguiti prima delle altre istruzioni pure se si trovano dopo. Ovviamente sbaglio in qualcosa ma ieri sono stato ore a cercare di capire ma non c'� stato verso.

PS: Ho preso alla fine questi due volumi: https://www.amazon.it/HTML-CSS-Javas...rds=javascript