Diferència entre revisions de la pàgina «Penjat HTML i Javascript»

De Wiki Eduard Lafitte
Jump to navigationJump to search
Línia 1: Línia 1:
A continuació, tenim un document HTML que ens simula el Joc del penjat, utilitzant funcions javascript:
A continuació, tenim un document HTML que ens simula el Joc del penjat, utilitzant funcions javascript:
   <html>
   <html>  
   <head>  
   <head>  
  <script type="text/javascript" src="funcions.js"></script>
  <script type="text/javascript" src="funcions.js"></script>
Línia 25: Línia 24:
Aquest seria el fitxer javascript ("'''funcions.js'''") que conté les funcions que s'utilitzen en la pàgina HTML anterior:
Aquest seria el fitxer javascript ("'''funcions.js'''") que conté les funcions que s'utilitzen en la pàgina HTML anterior:


  var cadena;
  var cadena;
 
  var totalerrors = 14;
  var totalerrors = 14;
   
   
  function inici()
  function inici()
   
   
  {  
  {  
  cadena = prompt("Entra una paraula");
  cadena = prompt("Entra una paraula");
  inicialitza();
  inicialitza();
  posar_guions(cadena);
  posar_guions(cadena);
  }  
  }  
   
   
   
   
Línia 49: Línia 39:
   
   
  {  
  {  
  formPenjat.lletres.value = "";
  formPenjat.lletres.value = "";
  formPenjat.errors.value = "";
  formPenjat.errors.value = "";
  formPenjat.text.value = "";
  formPenjat.text.value = "";
  formPenjat.lletres.focus;
  formPenjat.lletres.focus;
  }  
  }  
   
   
   
   
Línia 67: Línia 50:
   
   
  {  
  {  
  var valor = "";
  var valor = "";
  var paraula = cadena;
  var paraula = cadena;
  var encert = 0;
  var encert = 0;
  var errors = formPenjat.errors.value;
  var errors = formPenjat.errors.value;
  var guions = formPenjat.text.value;
  var guions = formPenjat.text.value;
 
 
  //Recorrem la paraula lletra per lletra per comprovar si la que hem
  //Recorrem la paraula lletra per lletra per comprovar si la que hem
  // introduit està.
  // introduit està.
   
   
  for (i=0;i<paraula.length;i++)
  for (i=0;i<paraula.length;i++)
  {
  {
  //La lletra existeix en la posició "i" de la paraula
  //La lletra existeix en la posició "i" de la paraula
  if (paraula[i]==lletra)
  if (paraula[i]==lletra)
      {
      {
valor += lletra;
valor += lletra;
encert=1;
    }
encert=1;
}
   
   
  //La lletra NO existeix en la posició "i" de la paraula
  //La lletra NO existeix en la posició "i" de la paraula
  else{
  else{
valor +=guions[i];
valor +=guions[i];
    }
}
  }
  }
   
   
Línia 113: Línia 78:
   
   
  if (encert==0)
  if (encert==0)
  {
  {
  errors += lletra + " ";
errors += lletra + " ";
  }
  }
   
   
Línia 124: Línia 86:
   
   
  if (paraula==valor)
  if (paraula==valor)
  {
  {
  alert("OK has endevinat la paraula: " + paraula);
alert("OK has endevinat la paraula: " + paraula);
  }
  }
   
   
 
 
  //Quan es cometen 7 errors  
  //Quan es cometen 7 errors  
  //(Fiquem 14 ja que per cada error afegeixo un espai)
  //(Fiquem 14 ja que per cada error afegeixo un espai)
   
   
  if  (errors.length >= totalerrors)
  if  (errors.length >= totalerrors)
  {
  {
  alert("Has FALLAT!!! La paraula era: " + paraula);
alert("Has FALLAT!!! La paraula era: " + paraula);
  }
  }
   
   
Línia 150: Línia 105:
   
   
  formPenjat.errors.value = errors;
  formPenjat.errors.value = errors;
  }
  }
   
   
Línia 157: Línia 111:
   
   
  function posar_guions(paraula)
  function posar_guions(paraula)
  {
  {
  formPenjat.text.value ="-";
  formPenjat.text.value ="-";
 
 
  for (i=1;i<paraula.length;i++)
  for (i=1;i<paraula.length;i++)
  {
  {
  formPenjat.text.value +="-";
formPenjat.text.value +="-";
  }
  }
   
   
  }
  }

Revisió del 23:58, 13 abr 2012

A continuació, tenim un document HTML que ens simula el Joc del penjat, utilitzant funcions javascript: 

 <html> 
 	<head> 
		<script type="text/javascript" src="funcions.js"></script>
	</head>

	<body onload="inicialitza();">

		<form name=formPenjat>

			<input type=button name=boto value="INICI del Joc" onclick="inici();">
			<input type=text name=lletres> 
			<input type=button value="Comprova lletra" name=boto onclick="comprova(formPenjat.lletres.value);">

			Paraula = <input type=text name=text>

			Errors = <input type=text name=errors>

		</form>
	</body>
</html>


Aquest seria el fitxer javascript ("funcions.js") que conté les funcions que s'utilitzen en la pàgina HTML anterior: 

var cadena;  
var totalerrors = 14;

function inici()

{ 
	cadena = prompt("Entra una paraula");
	inicialitza();
	posar_guions(cadena);
} 


function inicialitza()

{ 
	formPenjat.lletres.value = "";
	formPenjat.errors.value = "";
	formPenjat.text.value = "";
	formPenjat.lletres.focus;
} 



function comprova(lletra)

{ 
	var valor = "";
	var paraula = cadena;
	var encert = 0;
	var errors = formPenjat.errors.value;
	var guions = formPenjat.text.value;
	
	//Recorrem la paraula lletra per lletra per comprovar si la que hem
	// introduit està.

	for (i=0;i<paraula.length;i++)
		{
			//La lletra existeix en la posició "i" de la paraula
			if (paraula[i]==lletra)
			    {
				valor += lletra;
				encert=1;
			    }

			//La lletra NO existeix en la posició "i" de la paraula
			else{
				valor +=guions[i];
			    }
		}

		
	//Si no està la lletra en la paraula l'afegeix a errors

	if (encert==0)
		{
		   errors += lletra + " ";
		}

		
	//Quan s'encerta la paraula

	if (paraula==valor)
		{
		   alert("OK has endevinat la paraula: " + paraula);
		}

		
	//Quan es cometen 7 errors 
	//(Fiquem 14 ja que per cada error afegeixo un espai)

	if  (errors.length >= totalerrors)
		{
		   alert("Has FALLAT!!! La paraula era: " + paraula);
		}

		
	inicialitza();

	formPenjat.text.value = valor;

	formPenjat.errors.value = errors;
}




function posar_guions(paraula)
{
	formPenjat.text.value ="-";
	
	for (i=1;i<paraula.length;i++)
		{
		   formPenjat.text.value +="-";
		}

}
Obtingut de «https://wiki.portaledu.es/index.php?title=Penjat_HTML_i_Javascript&oldid=15759»