Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12

Discussione: Costruire Scacchiera

  1. #1

    Costruire Scacchiera

    Ciao ragazzi, ho un problema e spero mi possiae aiutare.
    Qui il testo: Si costruisca in javascript una scacchiera 10x10, con colori di background BIANCO e NERO
    alternati, con due pedine inizialmente posizionate nelle caselle (0,9) e (9,0) ed individuate da due
    colori di background, ROSSO e BLU. Una volta costruita la scacchiera, bisognerà evidenziare a
    schermo, con un timeout di 2 secondi, la sequenza di mosse presente in un file di testo, con il
    seguente formato:
    x1,y1
    x2,y2
    ...
    xN,yN
    Le mosse (alternativamente pedina ROSSA e pedina BLU), dovranno essere ottenute dal server,
    attraverso una chiamata AJAX così fatta:
    getPosition.php?
    Il file di testo risiede sul server e può essere aggiornato dinamicamente da un form, presente nella
    stessa pagina della scacchiera, in cui inserire le mosse e che contiene quattro campi, due per il
    ROSSO e due per il BLU.
    Lo script javascript valida le mosse, infatti le pedine possono muovere solo sulle caselle
    BIANCHE. Se una mossa non è corretta, viene visualizzato un alert box e la mossa ignorata; se
    invece non sono disponibili nuove mosse, semplicemente aspetta lʼinserimento di una nuova mossa
    da parte dellʼutente. Se una pedina arriva sulla casella occupata dall’altra pedina, questa viene
    mangiata e il gioco si interrompe, visualizzando a schermo un alert box con il colore del vincitore.



    Ecco il mio codice
    file: index.html
    codice:
    <HTML>
    <HEAD>
    <SCRIPT type="text/javascript" src="scacchi.js"> </SCRIPT>
    </HEAD>
    
    <BODY>
    <SCRIPT>
    scacchiera();//costruisco la scacchiera
    gioca();//inizio a giocare
    </SCRIPT>
    <INPUT type="text" id="txt"/>mossarossaX</br>
    <INPUT type="text" id="txt"/>mossarossaY</br>
    <INPUT type="text" id="txt"/>mossabluX</br>
    <INPUT type="text" id="txt"/>mossabluY</br>
    
    <INPUT type="BUTTON" value="INVIA" onclick="newMove()"/>
    </BODY>
    </HTML>
    file getposition.php
    codice:
    <?php
    $file=file('mosse.txt');
    //la richiesta
    $mossa=$_REQUEST['moveNumber'];
    //controllo se la mossa esiste
    if($mossa>=sizeof($file)||$mossa<0)
    echo -1; //non esiste
    else
    echo trim($file[$mossa]); //ritorno il valore corrispondente nel file
    ?>
    file scacchi.js
    codice:
    var oldColorG; //serve per ripristinare il colore della prima pedina selezionata
    var oldColorV; //serve per ripristinare il colore della seconda pedina selezionata
    var oldMoveG; //la vecchia posizione della prima pedina
    var oldMoveV; //la vecchia posizione della seconda pedina
    var xhr=getXMLHttpRequest(); //l'oggetto XMLHttpRequest per comunicare con il server
    
    //mi costruisco la mia scacchiera
    function scacchiera()
    {
    	document.write('<table cellpadding=10 cellspacing=2 border=3px');
    	for(i=0;i<10;i++)
    	{
    		document.write('<tr>'); //creo le righe
    		for(j=0;j<10;j++)
    		{
    			((i+j)%2 !=0) ? colore='white' : colore='black'; //creo il colore di background bianco e nero alternati
    			document.write('<td id='+i+','+j+' bgcolor='+colore+' width=50 height=50> </td>');
    		} //con <td> mi creo la cella
    		document.write('</tr>');
    	}
    	document.write('</table>');
    	document.getElementById("0,9").setAttribute('bgcolor','yellow');//la prima pedina
            document.getElementById("9,0").setAttribute('bgcolor','green');//seconda pedina
    	oldColor1='black';
    	oldColor2='white';
    	oldMove1="0,9";
    	oldMove2="9,0";
    }
    
    function getXMLHttpRequest()
    {
    	if(XMLHttpRequest)
    	return new XMLHttpRequest();
    	else
    	{
    		try
    		{ //eccezione per Internet Explorer 6.0 o minori
    			return new ActiveXObject("Msxml2.XMLHTTP");
    		}
    		catch(e)
    		{
    			try
    			{
    				return new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch(e)
    			{}
    		}
    	}
    	return false;
    }
    Poi non riesco più a continuare, mi manca cioè l'ultimo punto:
    Lo script javascript valida le mosse, infatti le pedine possono muovere solo sulle caselle
    BIANCHE. Se una mossa non è corretta, viene visualizzato un alert box e la mossa ignorata; se
    invece non sono disponibili nuove mosse, semplicemente aspetta lʼinserimento di una nuova mossa
    da parte dellʼutente. Se una pedina arriva sulla casella occupata dall’altra pedina, questa viene
    mangiata e il gioco si interrompe, visualizzando a schermo un alert box con il colore del vincitore.

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,132
    Due cose:
    A) Le verifiche/compiti vanno eseguiti personalmente altrimenti cosa servono?
    B) ID tutti uguali id="txt" meglio di no, visto che devono essere univoci.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    A) Lo sò, infatti è da giorni che ci sbatto la testa ma non riesco a venirne fuori.
    B)OK, grazie :-)

  4. #4

    Re: Costruire Scacchiera

    Originariamente inviato da sicula83
    mi manca cioè l'ultimo punto:
    Lo script javascript valida le mosse, infatti le pedine possono muovere solo sulle caselle
    BIANCHE. Se una mossa non è corretta, viene visualizzato un alert box e la mossa ignorata; se
    invece non sono disponibili nuove mosse, semplicemente aspetta lʼinserimento di una nuova mossa
    da parte dellʼutente. Se una pedina arriva sulla casella occupata dall’altra pedina, questa viene
    mangiata e il gioco si interrompe, visualizzando a schermo un alert box con il colore del vincitore.
    Hai una scacchiera con "i" righe (da 0 a 9) e "j" colonne (sempre da 0 a 9)
    e due pedine, una in 0-9 (riga 0 colonna 9) ed una in 9-0 (riga 9 colonna 0).
    Cioè le pedine sono rispettivamente nell'angolo in alto a desta e nell'angolo in basso a sinistra.

    Considerando che le pedine possono muoversi solo in avanti e di una sola casella, per ogni pedina hai (al massimo) due mosse valide (al massimo perchè se la pedina è sul bordo, hai un'unica mossa valida):
    La pedina deve "avanzare" di una sola riga
    (quindi se sei sulla riga 0, le uniche mosse valide sono quelle della riga 1, se sei sulla riga 2, quelle delle riga 3, e così via)
    E deve avanzare "in diagonale"
    quindi se sei sulla colonna 3, le uniche mosse valide sono quelle sulle colonne 2 e 4 (cioè 3-1 e 3+1).

    Quindi la pedina in 0,9 può andare solo in 1,8 (perchè 1,10 non esiste).
    Una volta che viene mossa in 1,8 ha due mosse possibili: 2,7 e 2,9

    Per validare le mosse dovrai quindi conoscere la posizione attuale della pedina.
    Quando inserisci la pedina nella scacchiera:
    document.getElementById("0,9").setAttribute('bgcol or','yellow');//la prima pedina

    devi inizializzare una variabile che salvi la posizione della pedina, variabile che dovrai poi aggiornare dopo gli spostamenti, se validi:
    var pedinaNordPosition="0,9"; //sarebbe più comodo un array....

    Quando conosci la posizione, puoi confrontarla con la mossa che ti viene chiesto di eseguire. Se "i" e "j" sono la riga e la colonna in cui si trova la pedina:
    La pedina Nord può andare solo in (i+1,j-1) o in (i+1,j+1) (sempre che i+1 e j+1 siano minori di 10)

    Ovviamente la pedina Sud (riga 9) dovrà muovere nella direzione opposta, quindi
    (i-1,j-1) o (i-1,j+1)

  5. #5
    Allora ho sistemato il codice ma le pedine non si muovono e non capisco come mai
    file scacchi.js
    codice:
    var oldColorG; //serve per ripristinare il colore della prima pedina selezionata
    var oldColorV; //serve per ripristinare il colore della seconda pedina selezionata
    var oldMoveG; //la vecchia posizione della prima pedina
    var oldMoveV; //la vecchia posizione della seconda pedina
    var xhr=getXMLHttpRequest(); //l'oggetto XMLHttpRequest per comunicare con il server
    
    //mi costruisco la mia scacchiera
    function scacchiera()
    {
    	document.write('<table cellpadding=10 cellspacing=2 border=3px');
    	for(i=0;i<10;i++)
    	{
    		document.write('<tr>'); //creo le righe
    		for(j=0;j<10;j++)
    		{
    			((i+j)%2 !=0) ? colore='white' : colore='black'; //creo il colore di background bianco e nero alternati
    			document.write('<td id='+i+','+j+' bgcolor='+colore+' width=50 height=50> </td>');
    		} //con <td> mi creo la cella
    		document.write('</tr>');
    	}
    	document.write('</table>');
    	document.getElementById("0,9").setAttribute('bgcolor','yellow');//la prima pedina
            document.getElementById("9,0").setAttribute('bgcolor','green');//seconda pedina
    	oldColor1='black';
    	oldColor2='white';
    	oldMove1="0,9";
    	oldMove2="9,0";
    }
    
    function getXMLHttpRequest()
    {
    	if(XMLHttpRequest)
    	return new XMLHttpRequest();
    	else
    	{
    		try
    		{ //eccezione per Internet Explorer 6.0 o minori
    			return new ActiveXObject("Msxml2.XMLHTTP");
    		}
    		catch(e)
    		{
    			try
    			{
    				return new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch(e)
    			{}
    		}
    	}
    	return false;
    }
    
    
    ///////////////////////////////////////////////////////////////////////////
    var puntatoreMossa; //tiene traccia delle mosse
    var giocatore; //tiene traccia di chi sara' il giocatore
    
    function gioca()
    {
    	//xhr.onreadystatechange=callback;
    	puntatoreMossa=0;
    	giocatore="yellow";
    	setTimeout('richiestaNewMossa('+puntatoreMossa+')',1000);
    }
    
    //funzione che richiede una nuova mossa
    function richiestaNewMossa(puntatoreMossa)
    {
    	xhr.onreadystatechange=function()
    	{
    	if(xhr.readyState==4)
    	if(xhr.status==200)
    
    	{
    		rispNewMossa(xhr.responseText);
    	}
    	xhr.open("GET","getPosition.php?",true);
    	xhr.send(null);
    }
    	}
    
    //risposta nuova mossa
    function rispNewMossa()
    {
    	if(risposta)
    	{
    		var coord=risposta.split(",");
    		if(document.getElementById(coord[0]+","+coord[1]).getAttribute('bgcolor')=="black")
    		{
    			alert("Mossa ignorata:sei su una casella bianca");
    		}
    		else if((coord[0]+","+coord[1])==oldMove1 && giocatore=="red")
    		{
    			document.getElementById(oldMove2).setAttribute('bgcolor',"white");
    			document.getElementById(coord[0]+","+coord[1].setAttribute('bgcolor',"red"));
    			alert("Il giocatore rosso ha mangiato!");
    		}
    		else if((coord[0]+","+coord[1])==oldMove2 && giocatore=="red")
    		{
    			document.getElementById(oldMove1).setAttribute('bgcolor',"white");
    			document.getElementById(coord[0]+","+coord[1].setAttribute('bgcolor',"red"));
    			alert("Il giocatore rosso ha mangiato!");
    		}
    		else if(giocatore=="red")
    		{
    			document.getElementById(oldMove1).setAttribute('bgcolor',"white");
    			oldMove1=coord[0]+","+coord[1];
    			document.getElementById(coord[0]+","+coord[1].setAttribute('bgcolor',"red"));
    			giocatore=red;
    		}	
    		puntatoreMossa++;
    		setTimeout('richiestaNewMossa('+puntatoreMossa+')',1000);	
    	}
    	else
    		{
    			//fine mosse
    		}
    	}
    
    
    function addMove()
    {
    	var x = document.getElementById("x").value;
    	var y = document.getElementById("y").value;
    
    	xhr.onreadystatechange=function()
    	{
    		if (xhr.readyState==4 )
    		if (xhr.status==200)
    		respMove(xhr.responseText);
    	}
    	xhr.open("GET","addPosition.php?x="+x+"&y="+y,true);
    	xhr.send();
    }
    function rispostaNewMossa(resp)
    {	
    	richiestaNewMossa(puntatoreMossa);
    }
    //file addPosition.php
    [code]
    <?php

    if(isset($_GET["x"],$_GET["y"]))
    {
    $x = $_GET["x"];
    $y = $_GET["y"];
    $file = fopen("mosse.txt","a");
    if($file)
    {
    fputs($file,"x$x,y$y;",4096);
    fclose($file);
    echo 1;
    return;
    }
    echo -1;
    }

    ?>
    [code]

    //file getPosition.php
    codice:
    <?php
    $file=file('mosse.txt');
    //la richiesta
    $mossa=$_REQUEST['moveNumber'];
    //controllo se la mossa esiste
    if($mossa>=sizeof($file)||$mossa<0)
    echo -1; //non esiste
    else
    echo trim($file[$mossa]); //ritorno il valore corrispondente nel file
    ?>
    Dove sbaglio???

  6. #6
    function rispNewMossa(risposta)

  7. #7
    si vero, avevo dimenticato di passare il parametro,grazie...però non va lo stesso :-(

  8. #8
    document.getElementById(coord[0]+","+coord[1].setAttribute('bgcolor',"red"));
    dovrebbe essere:
    document.getElementById(coord[0]+","+coord[1]).setAttribute('bgcolor',"red");
    l'errore è ripetuto in più punti.

    Per il debug puoi usare la consolle degli errori di Firefox.

  9. #9
    uso scite ed eclipse ma non mi dà alcun errore...non capisco infatti.

  10. #10
    Originariamente inviato da sicula83
    uso scite ed eclipse ma non mi dà alcun errore...non capisco infatti.
    Prova con un browser del mondo reale

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.