Semplice giochino javascript

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Ciao, potete darmi una mano? Vorrei implementare a questo codice una funzione che permetta di mettere i numeri in modo casuale all'apertura della pagina oppure tramite un pulsante senza modificare nulla nel codice in questione, grazie

HTML:
<html>
<head>
	<script language="javascript">
		immagine=new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif","12.gif","13.gif","14.gif","15.gif","0.gif")
		v=16
		function clik(n)
			{
			if ((v+4==n)||((n!=4)&&(n!=8)&&(n!=12)&&(v-1==n))||(v-4==n)||((n!=5)&&(n!=9)&&(n!=13)&&(v+1==n)))
				{
				document.images[n-1].src=immagine[0]
				document.images[v-1].src=immagine[n]
				m=immagine[v]
				immagine[v]=immagine[n]
				immagine[n]=m
				v=n
				}
			}
	</script>
</head>
<body>
	<div align="center">
	<img src="1.gif" onClick="clik(1)"><img src="2.gif" onClick="clik(2)"><img src="3.gif" onClick="clik(3)"><img src="4.gif" onClick="clik(4)"><br>
	<img src="5.gif" onClick="clik(5)"><img src="6.gif" onClick="clik(6)"><img src="7.gif" onClick="clik(7)"><img src="8.gif" onClick="clik(8)"><br>
	<img src="9.gif" onClick="clik(9)"><img src="10.gif" onClick="clik(10)"><img src="11.gif" onClick="clik(11)"><img src="12.gif" onClick="clik(12)"><br>
	<img src="13.gif" onClick="clik(13)"><img src="14.gif" onClick="clik(14)"><img src="15.gif" onClick="clik(15)"><img src="0.gif" onClick="clik(16)">
	</div>
</body>
</html>
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ciao, puoi provare cosi
all apertura della pagina (window.onload)
HTML:
<html>
    <head>
        <title>Senza titolo</title>
        <script type="text/javascript">
            immagine=new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif","12.gif","13.gif","14.gif","15.gif","0.gif")
            
            function random() {  
                return 0.5 - Math.round(Math.random());  
            } 
            window.onload = function(){
                var div = document.getElementById('div');
                      
                div.innerHTML = "";
                var c = 1;
                for(var i in immagine.sort(random)) {
                    div.innerHTML += "<img src='" + immagine[i] + "' alt='" + immagine[i] + "' onclick='clik(" + i + ")'/>";                    
                    if(c%5 == 0)
                        div.innerHTML += "<br/>";
                    c++
                }
                
            }
        </script>
    </head>
    <body>
        <div id="div"></div>
    </body>
</html>
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Ciao, i numeri finalmente sono casuali ma non li posso più spostare per riordinarli dall'uno fino al quindici, perchè hai modificato il codice. Non c'è un altro modo senza modificare nulla?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ho solamente omesso la funzione clik che non mi funzionava e non ho capito cosa vuoi che faccia
per il resto il codice html generato dal ciclo javascript è uguale al codice che avevi postato tu
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
la funzione click mi serve per poter spostare i numeri come nel gioco del quindici, i numeri con il .gif sono delle piccole immagini con i numeri sopra per questo non ti va perchè ho postato solamente il codice
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non avevo capito che si trattava del gioco del 15 :crying:
senza modificare il tuo codice credo sia impossibile
ho prvato cosi
HTML:
<html>
    <head>
        <title>Senza titolo</title>
        <script type="text/javascript">
            immagine=new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif","12.gif","13.gif","14.gif","15.gif")
            
            v=0    
                
            function clik(n)
            {
                
                if ((v+4==n)||((n!=4)&&(n!=8)&&(n!=12)&&(v-1==n))||(v-4==n)||((n!=5)&&(n!=9)&&(n!=13)&&(v+1==n)))
                {
                    
                    document.images[n].src = "0.gif"
                    document.images[v].src=immagine[n]
                    m=immagine[v]
                    immagine[v]=immagine[n]
                    immagine[n]=m
                    v=n
                }
            }
            window.onload = function(){
               
                function random() {  
                    return 0.5 - Math.round(Math.random());  
                } 
                
                var div = document.getElementById('div');
                      
                div.innerHTML = "";
                var c = 1;
                for(var i in immagine.sort(random)) {
                    if(immagine[i] == "0.gif")
                        v = i;
                    div.innerHTML += "<img src='" + immagine[i] + "' alt='" + immagine[i] + "' onclick='clik(" + i + ")'/>";                    
                    if(c%4 == 0)
                        div.innerHTML += "<br/>";
                    c++
                }                
            }
        </script>
    </head>
    <body>
        <div id="div"></div>
    </body>
</html>
ma non mi convince questa condizione che hai usato
Codice:
if ((v+4==n)||((n!=4)&&(n!=8)&&(n!=12)&&(v-1==n))||(v-4==n)||((n!=5)&&(n!=9)&&(n!=13)&&(v+1==n)))
non sempre l'immagine si sposta, ritenterò appena ho un po di tempo
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
ok, grazie per la risposta in effetti a volte l'immagine non si sposta comunque è gia' un bel passo avanti, grazie ancora
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
cambia la condizione con questa
Codice:
(v+4==n || v+1==n || v-4==n || v-1==n)
ma ancora qualcosa non mi convince
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Come posso fare per inserire un messaggio che dice "hai vinto" completando il gioco?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, non sono srrivatto a testare questa potrebbe essere una soluzione
HTML:
<html>
    <head>
        <title>Senza titolo</title>
        <script type="text/javascript">
            immagine=new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif","12.gif","13.gif","14.gif","15.gif")
            
            v=0    
            function verifica_Combinazione()  
            {
                var images = document.getElementById('div').getElementsByTagName('img');
                document.getElementById('img').innerHTML = "";
                for(var x = 0; x < images.length; x ++) {
                    document.getElementById('img').innerHTML += images[x].alt + " - " + immagine[x] + "<br/>";
                    if(images[x].alt != immagine[x]) {                        
                        return false;
                    }
                }
                return true;                
            }
            
            function clik(n)
            {
                document.getElementById('valoren').innerHTML = "posizione click : " + n
                document.getElementById('valorev').innerHTML = "posizione vuoto : " + v
                if (v+4==n || v+1==n || v-4==n || v-1==n)
                {
                    document.getElementById('condizione').innerHTML = "condizione vera";
                    document.images[n].src = "0.gif"
                    document.images[v].src=immagine[n]
                    m=immagine[v]
                    immagine[v]=immagine[n]
                    immagine[n]=m
                    v=n
                }else{
                    document.getElementById('condizione').innerHTML = "condizione falsa";
                }
                if(verifica_Combinazione() === true) {
                    alert("Complimenti");
                }
            }
            window.onload = function() {
               
                function random() {  
                    return 0.5 - Math.round(Math.random());  
                } 
                
                var div = document.getElementById('div');
                      
                div.innerHTML = "";
                var c = 1;
                for(var i in immagine.sort(random)) {
                    if(immagine[i] == "0.gif")
                        v = i;
                    div.innerHTML += "<img src='" + immagine[i] + "' alt='" + immagine[i] + "' onclick='clik(" + i + ")'/>";                    
                    if(c%4 == 0)
                        div.innerHTML += "<br/>";
                    c++
                }                
            }
        </script>
    </head>
    <body>
        <div id="div"></div>
        <div id="valoren"></div>
        <div id="valorev"></div>
        <div id="condizione"></div>
        <div id="img"></div>
    </body>
</html>
ti ho postato tutto compreso i div in cui lo script scrive quello che fa per trovare eventuali errori
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
il codice non funziona, appena clicco su una casella compare la scritta "complimenti" senza che abbia spostato nulla
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
provalo cosi
HTML:
<html>
    <head>
        <title>Senza titolo</title>
        <script type="text/javascript">
            immagine=new Array("1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif","12.gif","13.gif","14.gif","15.gif","0.gif")
            
        v=0    
        function verifica_Combinazione()  
        {
            var images = document.getElementById('div').getElementsByTagName('img');                
            document.getElementById('img').innerHTML = "";
            for(var x = 0; x < images.length; x ++) {
                var parseimg = parseInt(immagine[x]) - 1;
                if(parseimg < 0)
                    parseimg = 15;
                document.getElementById('img').innerHTML += (images[x].id) + " - " + parseimg + "<br/>";
                if(images[x].id != parseimg) {                        
                    return false;
                }
            }
            return true;                
        }
            
        function clik(n)
        {
            document.getElementById('valoren').innerHTML = "posizione click : " + n
            document.getElementById('valorev').innerHTML = "posizione vuoto : " + v
            if (v+4==n || v+1==n || v-4==n || v-1==n)
            {
                document.getElementById('condizione').innerHTML = "condizione vera";
                document.images[n].src = "0.gif"
                document.images[v].src=immagine[n]
                m=immagine[v]
                immagine[v]=immagine[n]
                immagine[n]=m
                v=n
            }else{
                document.getElementById('condizione').innerHTML = "condizione falsa";
            }
            if(verifica_Combinazione() === true) {
                alert("Complimenti");
            }
        }
        window.onload = function() {
               
            function random() {  
                return 0.5 - Math.round(Math.random());  
            } 
                
            var div = document.getElementById('div');
                      
            div.innerHTML = "";
            var c = 1;
            for(var i in immagine.sort(random)) {
                if(immagine[i] == "0.gif")
                    v = i;
                div.innerHTML += "<img id='" + i + "' src='" + immagine[i] + "' alt='" + immagine[i] + "' onclick='clik(" + i + ")'/>";                    
                if(c%4 == 0)
                    div.innerHTML += "<br/>";
                c++
            }                
        }
        </script>
    </head>
    <body>
        <div id="div"></div>
        <div id="valoren"></div>
        <div id="valorev"></div>
        <div id="condizione"></div>
        <div id="img"></div>
    </body>
</html>
ho modificato l'ordine dell'array iniziale, ho aggiunto un id ai tag img e ho cambiato il controllo che verra fatto sull id
man mano che ordini i numeri dovresti vedere apparire nel div sotto la tabella le varie condizioni
non ho testato fino alla fine
prova a debuggare anche tu
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
ok, ho testato tutto è funziona, si possono togliere le condizioni sotto la tabella vero? al suo posto potrei mettere tipo una finestrella che conta le mosse? grazie ancora per l'aiuto
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
basta che togli gli innerHTML e ne lasci solo uno che conta i click
Codice:
var contatore = 0;
function clik(n)
        {
            contatore++;
            document.getElementById('conta').innerHTML = contatore + " mosse";
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Ma eliminare gli InnerHTML significa che devo cancellare quei ".InnerHTML" alla fine di ogni document.getElementByid ecc. sparsi per il codice? E il contatore mosse lo devo inserire nel function click(n) già presente o ne devo creare un'altro?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
no devi eliminare tutta la riga
Codice:
 document.getElementById('condizione').innerHTML = "condizione vera";
e anche il div associato
HTML:
<div id="condizione"></div>
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
ok sistemato tutto, ora per concludere l'esercizio oltre il contatore mosse vorrei inserire il tempo che trascorre. Come posso fare?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
puoi inserire un qualsiasi timer javascript al primo click che viene effettuato
HTML:
var contatore = 0;
function clik(n)
        {
            if(contatore == 0)
                    start_timer();
            contatore++;
            document.getElementById('conta').innerHTML = contatore + " mosse";
puoi poi interromperlo quando i numeri sono tutti a loro posto
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Non funziona appena inserisco

if(contatore == 0)
start_timer();

non mostra ne le mosse e neanche il tempo
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
start_timer(); deve esistere come funzione
Codice:
function start_timer() {
     // tutto il codice necessario per visualizzare il timer
}
non l'ho scritto perche c'è ne pieno il web