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
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [PHP] cambiare gli if in un url semplice PHP 1
L [PHP] convertire gli url ad forma semplice PHP 3
G Caricare una semplice Jpg con il PHP PHP 1
Federico.Marcelo qual è il modo più semplice per creare file GIF di alta qualità? Webdesign e Grafica 4
V Semplice barra di ricerca con filtro categorie prodotti E-Commerce 0
Z Semplice area privata in php PHP 6
M Un semplice saluto Presentati al Forum 1
T Visualizzare un Xml su un sito in modo semplice XML 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
J [PHP] sviluppare una semplice calcolatrice PHP 1
booklisa [PHP] Domanda semplice (apparantemente) PHP 4
R [PHP] Semplice form PHP 4
G [CERCO][Retribuito] Programmatore Windows per un semplice software Offerte e Richieste di Lavoro e/o Collaborazione 0
MarcoGrazia Costruire una semplice chat in PHP non è affatto semplice. PHP 3
G aiuto per semplice menu onclick HTML e CSS 6
T Problema Semplice Script Javascript 1
Mr. Alex D. Creazione semplice autorisponditore con redirect PHP 1
M Casella di ricerca completa, invece di semplice ricerca tra tag HTML e CSS 0
A Semplice applicazione con le facebook api PHP 1
Pi3tro [Richiesta]Semplice form PHP 6
R galleria immagini semplice a schermo intero jQuery 1
C Creare semplice timer in Visual Basic Visual Basic 0
Trapano Galleria immagini semplice PHP 5
S problema con ajax semplice login script Javascript 8
L [Java] Consigli progettuali per una semplice applicazione Java 6
Trapano query semplice? PHP 21
M Semplice pagina per inserire/leggere dati su database PHP 5
E semplice ciclo if!??!?!? :dipser: MS Access 0
L login semplice con array PHP 10
N Menu verticale semplice stile Yahoo WordPress 2
A una guida semplice in php PHP 2
L guida semplice per imparare jquery jQuery 5
A problema con un semplice form per un loggin in php PHP 2
D Redirect: come mai non funziona un semplice redirect? Apache 0
N Semplice timer Snippet PHP 0
P inizio con il php ... semplice aiuto!! PHP 12
L Semplice esercizio funzioni JavaScript Javascript 5
borgo italia phishing o malware o semplice truffa? Discussioni Varie 0
P Galleria immagini semplice Javascript 5
Web Designer Semplice Tutorial Photoshop Effetto Fantasma Photoshop 1
ste80 Problemuccio con semplice guestbook PHP 4
S semplice query che non funziona :( PHP 3
criric Semplice calendario Snippet PHP 0
S semplice link che però non compare dentro ad un DIV HTML e CSS 3
L aiuto per questa semplice regex PHP 5
S Semplice domanda con Javascript Javascript 3
M Semplice sito php/mysql...è veramente semplice ? PHP 5
neo996sps [codeingniter]: realizzare un semplice menu PHP 1

Discussioni simili