Scacchiera in javascript

  • Autore discussione Autore discussione Mattia Campagna
  • Data d'inizio Data d'inizio
Pubblicità
Allora, i primi passi che vorrei fare sono questi:
- Una funzione in javascript che crei 32 div.
- Un file css che colori i quadratini.

Lo script deve dare un id ad ogni quadratino ed una classe (bianco o nero).
Penso a come potrei stendere il codice e lo posto magari...
 
Perchè devo creare i div a mano?
Oramai ho fatto una cosa del genere, quali problemi incappo a fare una cosa del genere?

Codice: 
function crea_scacchiera(){
	document.write('<div id=tavola>');
		var colore = "";
		var num = 0;
		for(i=0;i<8;i++)
		{
			for(j=0;j<8;j++)
				{
					((i+j)%2 !=0) ? colore='bianco' : colore='nero';
					document.write('<div class='colore' id='num'>');
					num++;
				}
		}
	document.write('</div>');
}
 
Perchè se uso document.createElement non saprei come chiudere il div che contiene gli altri, ovvero questo:

Codice: 
<div id=tavola>

Come lo modificheresti? :)
Ora farei al volo un paio di righe in css per gestire la dimensione ed il colore delle due classi, ovvero dei quadratini bianchi e dei quadratini neri.
 
Ok, ma creando dinamicamente la scacchiera non è meglio in quanto non devo manualmente creare 32 div?
Qualcosa del genere ad esempio:

Codice: 
function crea_scacchiera(){
	var tavola = document.createElement("div");
	var nuova_cella = document.createElement("div")
	var colore = "";
	var num = 0;
	for(i=0;i<8;i++)
	{
		for(j=0;j<8;j++)
		{
			tavola.appendChild(nuova_cella)
			((i+j)%2 !=0) ? colore='bianco' : colore='nero';
			setAttribute(????)
			num++;
		}
	}
}

Solo che devo capire come settare gli attributi del div per cambiare ad ogni cella classe ed id.
 
Che algoritmo vorresti usare?
Perché usare i div?
Io utilizzerei l'algoritmo usato dalla quell'utente che ha creato la dama: usi due immagini che hanno come sfondo/pedina il bianco o nero.
Quando vai a cliccare su quella pedina, lo sfondo cambia.
Non è più semplice?
 
Coi div miro ad ottenere una matrice, poi con css metterei lo sfondo.
La parte "estetica" vorrei tenerla separata dalla struttura, il professore lo preferisce.

- - - Updated - - -

Infatti avevo già pensato ad un file css così fatto:

Codice: 
#tavola {
	weight: 800px;
	height: 800px;
}


*.bianco
{
	margin: 0px;
	padding: 0px;
	weight: 100px;
	heignt: 100px;
	backgroung-color: white;
	z-index: 0;
}


*.nero
{
	margin: 0px;
	padding: 0px;
	weight: 100px;
	heignt: 100px;
	backgroung-color: black
	z-index: 0;
}
 
Ok, grazie davvero, mi stai dedicando più tempo di quanto me ne ha dedicato il mio professore di progettazione web.
 
Esempio:
Codice: 
<html><head>
<script type="text/javascript" src="scacchiera.js"> </script>
<title>Scacchiera</title>
</head>
<body style="background-color: gray;">
</body>
</html>
Codice: 
function image(){


 var img1, img2, br;
br=document.createElement("br"); 
img1= new Image();
 img2= new Image();
 
 img1.src="http://i46.tinypic.com/2z8421s.png";
 img2.src="http://i48.tinypic.com/2zjjcye.png";
 for (i=0; i<3; i++)
  {  
 img1= new Image();
 img2= new Image();
 img1.src="http://i46.tinypic.com/2z8421s.png";
 img2.src="http://i48.tinypic.com/2zjjcye.png";
 document.body.appendChild(img1);
 document.body.appendChild(img2);
}
 document.body.appendChild(br);
for (i=0; i<3; i++)
  {  
 
 img1= new Image();
 img2= new Image();
 img1.src="http://i46.tinypic.com/2z8421s.png";
 img2.src="http://i48.tinypic.com/2zjjcye.png";
 document.body.appendChild(img2);
 document.body.appendChild(img1);
}    
 br=document.createElement("br"); 
 document.body.appendChild(br);
  for (i=0; i<3; i++)
  {  
 img1= new Image();
 img2= new Image();
 img1.src="http://i46.tinypic.com/2z8421s.png";
 img2.src="http://i48.tinypic.com/2zjjcye.png";
 document.body.appendChild(img1);
 document.body.appendChild(img2);
} 
 br=document.createElement("br"); 
 document.body.appendChild(br);
  for (i=0; i<3; i++)
  {  
 img1= new Image();
 img2= new Image();
 img1.src="http://i46.tinypic.com/2z8421s.png";
 img2.src="http://i48.tinypic.com/2zjjcye.png";
 document.body.appendChild(img2);
 document.body.appendChild(img1);
} 
 br=document.createElement("br"); 
 document.body.appendChild(br);
}




document.addEventListener("DOMContentLoaded",image, false );
window.onload=function()
{
var img = document.getElementsByTagName("img");
for (i = 0; i<img.length; i++)
 {


img[i].onclick = function()
 {
  
 if (this.src == "http://i46.tinypic.com/2z8421s.png")
 {
 this.src="http://i49.tinypic.com/vuts7.png";
 } 
 else if (this.src == "http://i48.tinypic.com/2zjjcye.png") 
 {this.src = "http://i46.tinypic.com/33z2r90.png";
  }
 }
}
}
Quest è solo un abbozzo. L'ho fatto solo per farti vedere la mia idea.
Infatti, manca la parte di scacchiera con posizioni nulle.
L'algoritmo è sicuramente migliorabile, ma questo spetta a te.
Spero tu abbia capito cosa intendo, se hai qualche dubbio sul codice, dimmi pure.
 
mmh.. coi div mi risultava facile perchè potrei numerarli e poi giocare coi loro indici.
avevo in mente una cosa del genere, solo che questa è fatta male perchè resa col document.write e con le tabelle.

Codice: 
<HTML><HEAD>
<style type="text/css">
#dama {
border: 1px solid maroon;
border-collapse:collapse;
}
#dama td.scuro {
  padding:0px;
  width:80px;
  height:80px;
 background-color: #deb887
  }
#dama td.chiaro {
  padding:0px;
  width:80px;
  height:80px;
  background-color:#fdf5e6
  }
</style>
</HEAD>
<BODY>
<script type="text/javascript">
 var colore;
document.write('<table id = "dama">');	
for (i=1; i<=8; i++) {	
document.write('<tr>') 	
for (j=1; j<=8; j++) {	
 if ((i+j) % 2 !=0) {
      document.write('<td class= "scuro">')
   }
        else {document.write('<td class= "chiaro">')}        
        document.write('   </td>');
       }	
document.write('</tr>');	
}	
document.write('</table>');	
document.close();	
</script>
</BODY>
</HTML>

Vorrei provare a modificare questo, dividendo intanto il file in tre pezzi, un foglio .css un foglio.js ed un foglio.html
Quando creo il foglio.js non so come richiamare lo script nella pagina html perchè se lo richiamo con la funzione onLoad sembra ignorarmi.

Sono andato ai colloqui ed il professore mi ha consigliato di usare una struttura in html iuttosto che una scacchiera di immagini, sostiene che per gestire poi gli eventi successivamente mi rimarrà più semplice :skept:
 
Per includere gli script js: <script type="text/javascript" src="indirizzo.js"></script>
Intendi questo?
Sono andato ai colloqui ed il professore mi ha consigliato di usare una struttura in html iuttosto che una scacchiera di immagini, sostiene che per gestire poi gli eventi successivamente mi rimarrà più semplice
skept.gif.pagespeed.ce.ooHxcbJXQr.gif
Clicca per espandere...
Non ho capito...
 
Pubblicità
Pubblicità
Indietro
Top