Examen Javascript

per Roger Borrell — darrera modificació 2020-03-25T15:18:00+01:00


Estem desenvolupant un joc sobre la pel.licula "The host".

Objectiu


L'objectiu es que Gang-du, el protagosnista, trobi a la seva filla Hyun-seo, i la rescati sense ser devorat per la criatura gegant.

El monstre te raptada a Hyun-seo en algun dels multiples desaigues que envolten el riu Han a Seul, la capital de corea del sud.

Gang-du haura de visitar cada una dels desaigues per intentar trovar la seva filla, combatre el monstre i matar-lo.

Les autoritats intentaran impedir que Gang-du accedeixi a les zones restringides del riu.

El Joc finalitza si more Hyun-seo, si more Gang-du, o be finalitza amb exit quan Gang-du mata al monstre i allibera la seva filla.


Energies


El monstre tindra un magatzem d'energia vital, que quan s'esgoti morira . L'energia inicial sera de 20 punts. Per cada bala que l'impacti, el monstre, perdra 1 punt.

Gang-du tambe tindra un magatzem d'energia vital, que de la mateixa manera, quan s'esgoti morira. L'energia inicial sera de 20 punts. Per cada mosegada del monstre que rebia Gang-du perdra 1 punt.

Hyun-seo tindra un magatzem d'energia vital de 20 punts pero cada minut perdra un punt. Al cap de 20 minuts Hyun-seo morira de desnutricio.


Cal crear:

  • Les variables per emmagatzemar les energies.
  • Les respectives funcions que faran disminuir les energies de Hyun-seo ,de Gang-du i del monstre.
  • Una funcio que serveixi per informar de que el joc s'ha acabat. Cal informar de la rao per la qual s'ha acabat. Per exemple: "Hyun-seo, ha mort de desnutricio. Game over"

Resultat

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>The Host Game</title>
	</head>
	<body>
		<script type="text/javascript">
			var energiaGangdu=20;
			var energiaHyunseo=20;
			var energiaMonstre=20;
			
			function disminuirEnergiaGangdu()
			{
				energiaGangdu--;
				gameOver()
			}
			
			function disminuirEnergiaHyunseo()
			{
				
				energiaHyunseo--;
				gameOver()
			}
			
			function disminuirEnergiaMonstre()
			{
				
				energiaMonstre--;
				gameOver()
			}
			
			setInterval('disminuirEnergiaHyunseo()',6)
			
			function gameOver()
			{
				if (energiaGangdu==0)
				{
					alert("Gangdu ha mort! GAME OVER");
				}
				else if (energiaHyunseo==0)
				{
					alert("Hyunseo ha mort de desnutricio! GAME OVER");
				}
				
				else if (energiaMonstre==0)
				{
					alert("Felicitats has conseguit matar el monstre! GAME OVER");
				}
				
			}
			
			
		</script>
		
	</body>
</html>


Visualitzacio de les energies


Per visualitzar les energies utilitzarem una barra de progres com les de la figura:

proges_energies1











Aquestes barres de progres serien molt dificils de fer, si les haguessim de fer des de cero, pero molt senzilles si utilitzem una llibreria en la qual ja esta feta. Nomes hem d'apendre a fer servir la llibreria progressbar.js. A l'inici de l'script teniu les instruccions de com funciona:

To use:

Inbetween the <head> tags, put:

	<script src="PATH TO SCRIPT/progressbar.js" type="text/javascript"></script>

Wherever you want a progress bar, put:

	<script type="text/javascript">
		var myProgBar = new progressBar(
			1,         //border thickness
			'#000000', //border colour
			'#a5f3b1', //background colour
			'#043db2', //bar colour
			400,       //width of bar (excluding border)
			20,        //height of bar (excluding border)
			1          //direction of progress: 1 = right, 2 = down, 3 = left, 4 = up
		);
	</script>

Once the page has loaded, you can then contol the progress bar using:

	<script type="text/javascript">

myProgBar.setBar(0.5);       //set the progress bar to indicate a progress of 50%
myProgBar.setBar(0.1,true);  //add 10% to the progress bar's progress
myProgBar.setBar(0.1,false); //subtract 10% from the progress bar's progress
myProgBar.setCol('#ff0000'); //change the colour of the progress bar
alert( 'Current progress is ' + myProgBar.amt ) // read current progress

	</script>

Cada una de les questions val 1 punt:

  1. Es molt important, en projectes grans, tenir el codi ben ordenat, d'altra manera ens perdrem rapidament. Coloca les funcions propies del joc: Ex: disminuirEnergiaGangdu a la capçalera de la pagina.
  2. Enllaça el fitxer extern progressbar.js de manera que en puguem fer servir les funcions.
  3. Crea un boto que tingui com a text: Iniciar partida
  4. En premer el boto iniciar partida, s'executa la funcio gameStart()
  5. La funcio gameStart() es la responsable de començar el joc, i per tant ha de llençar el compte enrera de Hyunseo
  6. Crea tres barres de progres per visualitzar l'energia dels proragonistes, com les de la figura.
  7. Crea una matriu anomenada colors de tres elements.
  8. Guarda a la matriu colors els colors: verd, carbassa i vermell ( '#04ffb2', '#ff7020', '#ff0000')
  9. Fes que quan l'energia restant sigui menys d'un 30% (0.3) el color sigui el carbassa
  10. Fes que quan l'energia restant sigui menys d'un 10% (0.1) el color sigui el vermell
  11. Si la pagina valida amb HTML (+0,5) , si valida en XHTML (+1)

Comprimeix tots els fitxers en un de sol i envia-m'ho al meu correu rborrell@iespuigcastellar.xeill.net


proges_energies2