WE - Projecte joc

El joc es pot desenvolupar de moltes maneres i es pot personalitzar al gust de cadascú. Però, s'han d'entendre diferents conceptes que anirem aprenent en aquest projecte com són:

• Variables

• Condicionals (if, else)

• Repeticions (bucle for)

• Funcions

El procés és:

• D'entrada s'ocultaran els llapis de color verd

• Al fer clic a un llapis negre, aquest s'oculta i es mostra el verd

• Al fer clic a un llapis verd, aquest s'oculta i es mostra el negre

• Al presionar una tecla si s'ha pressionat un llapis negre, es modificarà el nom del jugador, en cas contrari no

Per això, hem d'aplicar el següent codi:

Botons verds, Torn de, Fletxes, X gran, O gran i Tornar a començar --> Default

S'han d'ocultar amb la instrucció:

NomElement.opacity = 0; //NomElement és el nom de cada element

Frame --> Default

//Canviarem el text per defecte dels noms dels jugadors a Jugador1 i Jugador2

TextJugador1.setText('Jugador1');

TextJugador2.setText('Jugador2');

//Crearem una variable que no es veu per guardar el nom del jugador, per defecte estarà buit

document.NomJugador1 = '';

document.NomJugador2 = '';

//Crearem variables que ens indicaran si s'està editant el nom o no

document.EditantJugador2 = false;

document.EditantJugador1 = false;

Llapis negre (EditarJ1 i EditarJ2) --> Mouseclic

//Farem que al fer clic al llapis negre, s'oculte aquest i es mostre el verd. A més, indicarem que la variable anterior de EditantJugador1 o 2 passe a ser verdadera (true)

EditarJ1.opacity = 0;

FetJ1.opacity = 1;

document.EditantJugador1 = true;

//A més, tornem a indicar que el nom del jugador com anem a editar-lo, serà un text buit

document.NomJugador1 = '';

Llapis verd (FetJ1 i FetJ2) --> Mouseclic

//Farem que al fer clic al llapis verd, s'oculte aquest i es mostre el negre. A més, indicarem que la variable anterior de EditantJugador1 o 2 passe a ser falsa (false)

EditarJ1.opacity = 1;

FetJ1.opacity = 0;

document.EditantJugador1 = false;

Frame --> Keydown

//Hem de comprovar que al presionar una tecla, si la variable EditantJugador1 o 2 és verdadera, s'escriurà en la variable NomJugador1 o 2 la lletra presionada.

if(document.EditantJugador1) {

document.NomJugador1 += key; //afegir al nom la tecla presionada

TextJugador1.setText(document.NomJugador1); //canviar el text amb el valor de la variable

}

if(document.EditantJugador2) {

document.NomJugador2 += key;

TextJugador2.setText(document.NomJugador2);

}

ARA PROVA EL CODI!

Frame --> Default

//Anem a crear una variable IniciarJoc que siga per defecte a false, perquè serà el que ocorrerà abans de polsar a Iniciar

document.Iniciar = false;

//Ara anem a crear una funció iniciarPartida. Una funció és una agrupació d'instruccions que es pot executar des de molts llocs. Aquesta funció s'executarà quan fem clic al botó iniciar.

document.iniciarPartida = function() {

//Al fer clic

document.Iniciar = true;

//Ocultar text d'Iniciar, els llapis verds i negres

TextIniciar.opacity = 0;

EditarJ1.opacity = 0;

FetJ1.opacity = 0;

EditarJ2.opacity = 0;

FetJ2.opacity = 0;

//Mostrar el text de tornar a començar, el text de torn de i la fletxa cap al jugador 1

//La fletxa cap al jugador 2 s'ocultarà

TextTornarComencar.opacity=1;

TextTornDe.opacity = 1;

TornJ1.opacity = 1;

TornJ2.opacity = 0;

//Creem una variable que emmagatzeme de qui és el torn, es començarà sempre per el jugador 1

document.Torn = 1;

//Per últim les variables on indicavem si s'estava editant el nom dels jugadors les posarem a false

document.EditantJugador2 = false;

document.EditantJugador1 = false;

}

Text Iniciar --> Mouseclick

//Executar la funció que hem creat abans:

document.iniciarPartida();

Frame --> Default

//Crear una funció que s'anomene crearJugada on li passarem la posició X i Y d'on volem posar cada jugada

document.crearJugada = function(posX, posY) {

}

Dins d'aquesta funció anem a comprovar si s'ha fet clic a Iniciar, perquè no volem afegir jugades si no s'ha fet clic a iniciar

if(document.Iniciar == true) {

}

Dins d'aquesta comprovació comprovarem si el torn és el del jugador 1 o del jugador 2

if(document.Torn == 1) {

//Ací es posaran les instruccions necessàries quan el torn és del jugador 1

} else {

//Ací es posaran les instruccions necessàries quan el torn és del jugador 2

}

Dins de si el torn és del jugador 1 afegirem les següents instruccions:

var clonDeX = X.clone(); //Creem una copia de la X gran que tenim en pantalla

clonDeX.x = posX; //Li canviem la posició de eixa X que hem creat

clonDeX.y = posY; //Li canviem la posició de eixa X que hem creat

clonDeX.opacity = 1; //Mostrem la X que hem creat

//Canviem el torn a 2 i a més ocultem la fletxa que va al jugador 1 i mostrem la fletxa que va al jugador 2

document.Torn = 2;

TornJ2.opacity = 1;

TornJ1.opacity = 0;

Dins de si el torn és del jugador 2 afegirem les següents instruccions:

• Crea un clon de O

• Canvia la posició del clon

• Mostra el clon

• Canvia el torn a 1

• Mostra la fletxa del jugador 1

• Oculta la fletxa del jugador 2

Per fer que torne a començar el joc hem de fer diferents accions:

• Crear una llista per afegir els dibuixos de les X i dels O

• Al iniciar el joc, cridar a una funció que s'encarregue d'esborrar les X i les O de la llista

Per tant, els passos a seguir són:

• Al script per defecte del frame

document.clons = [];

• Al script per defecte crear una funció borrarClons

document.borrarClons = function() {

for(var i = 0; i < document.clons.length; i++) {

document.clons[i].remove();

}

document.clons = [];

}

• Al fer clic a iniciar que crida a la funció iniciar, s'ha de cridar a la funció borrarClons:

iniciar: document.borrarClons();

• Per últim, a la funció crearJugada, al final de la creació del clonDeX i clonDeO, hem d'afegir-los a la llista clons:

crearJugada --> document.clons.push(clonDeX); i document.clons.push(clonDeO);

Per fer qui guanya es molt avançat... XD