El Joc de les Pedres.

“Un jugador contra un altre, cara a cara, qui endevina la suma de pedres que duen a la mà, guanya”.

Per implementar el projecte haurem de fer un estudi de quatre parts:

  1. Estructura de dades.
  2. Algoritmes.
  3. Seqüència del Joc.
  4. Interfície de Joc.

S’ha decidit per aquesta opció “lenta” d’implementació per tal de poder aconseguir entredre cada part que participa en el projecte. És per això que algunes vegades repetirem implementacions, amb l’objectiu que puguin quedar clar cada una de les diferents parts.

1.Estructura de dades.

Durant una partida es necessita tenir estructures de dades que mantenguin l’estat de cada jugador, de cada jugada, així com altres elements que faran possible que el simulacre de joc sigui favorable. La programació Orientada a Objectes te una construcció ascendent, desde els elements més petits fins al més gros, ensamblant-se fins a formar l’aplicació final. També compta amb eines per adaptar i canviar els elements durant la implementació d’una manera fàcil.
Començarem per l’objecte Jugador és un participant, ha de mantenir les dades:
Variable Valor inicial Comentari
nom El valor s’inicialitza desde la crida amb un paràmetre
punts 0 Punts que té el jugador a la partida
dic “?” Valor que diu el jugador per encertar una jugada
duc “?” Nombre de pedres que durà el jugador a la mà
imatge new Image() Guarda espai per una imatge.

Implementació estructura Jugador ens quedarà:

1
2
3
4
5
6
7
8
9
10
11
12
13
function Jugador(nom){
this.nom = nom;
this.punts = 0;
this.dic = -1;
this.duc = -1;
this.imatge = new Image();

this.inicia = function(nom){
this.nom = nom;
this.puntsP="";
this.dic="?";
this.duc="?";
this.punts=0; }
Implementació estructura Partida. Ha de permetre controlar tota la informació referent a una partida.

1
2
3
4
5
6
7
8
9
10
11
12
13
function Partida(){
    var nPedres=Number(document.getElementById("nPedres").value);
    var nJugadors=Number(document.getElementById("nJugadors").value);
    var nPunts=Number(document.getElementById("nPunts").value);
    var voltes=0;
    var a=document.getElementById("nom1").value;
    var j1 = new Jugador(document.getElementById("nom1").value);
    var j2 = new Jugador(document.getElementById("nom2").value);
    var canvas = document.getElementById('canvasJoc');
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas.getContext('2d');
    var fons= new Image();
...

Exercici. Cream els constructors del nostre Joc.

A partir dels estudis de projecte hem de crear un objecte que contengui les seves propietats. Toca fer un constructor per a cada un dels objectes:

  • Partida:
    • nBolles: Nombre de bolles que tendrà cada jugador.
    • nPunts: Nombre de punts que dura cada partida.
    • llistaJugadors: Llista de Jugadors que participen. En principi sols farem dos jugadors.
    • llistaTorn: llista de tots els nombres que s’han dit durant el torn i no es poden repetir.
  • Jugador:
    • nom: Nom de un jugador.
    • punts: Punts acumulats durant una partida.
    • dic: El que dirà el judagor.
    • duc: El que duu dins la mà el jugador.
  • Joc: És l’estructura que controlarà els esdeveniments del joc. En el primer cas rearà una Partida amb dos jugadors i haurà de controlar la Sequència de Joc, s’explicarà i s’implementarà més endavant.

Solució:

Codi exemple per resoldre l’exercici. Nota: malgrat sigui tasca de l’exercici següent, en aquest codi s’ha afegit un mètode escriu(). Aquest permet executar de manera correcte el gruix del projecte, més endavant haurem de modificar per tal que sigui l’algoritme que s’encarregui de pintar els canvis a l’interfície gràfica. Amb aquest codi cream els elements que participaran al joc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 <script>
function Jugador(){
//CONSTRUCTOR DELS JUGADORS.
//INICIALITZAM AMB PARÀMETRES BOLLES =3, DIC=-1, DUC=-1
//DESPRÈS AFEGIREM EL MÈTODES QUE ENS PERMETEN MODIFICAR AQUESTS VALORS.
    this.nom = "Computadora";
    this.punts = 0;
    this.dic = -1;
    this.duc = -1;
}

function Partida(){
//PARÀMETRES DEL PROGRAMA.
//LA PARTIDA S'EXECUTA.
    this.nBolles=3;
    this.nPunts=5;
    this.nJugadors=2;
this.llistaTorn=[];

//DINS D'AQUESTA ESTRUCTURA DE PARTIDA
//HI TENDREM ELS JUGADORS.
    this.j1= new Jugador();
    this.j2= new Jugador();
   
    this.escriu = function(){
    //Aquesta funció mostrarà totes les sortides de programa
    //Serà la funció que tocarà l'interfície.
   
    //Aquesta sortida és sols d'exemple i a la part de algoritmes es
    // veura modificada pels algoritmes corresponents.
        document.getElementById('demo').innerHTML = this.j1.nom;
        document.getElementById('demo').innerHTML += ", punts: " + this.j1.punts;
        document.getElementById('demo').innerHTML += ", diu: " + this.j1.dic;
        document.getElementById('demo').innerHTML += ", duu: " + this.j1.duc;
    };
}

function joc(){
    /*AQUESTA FUNCIÓ ES DEDICARÀ A CONTROLAR TOTS ELS ELEMENTS
    DEL JOC.
        * CONTENDRÀ SEQÜÈNCIA DE JOC.
       
    */

    //Dins el Joc cream una nova partida
    var p = new Partida();
    //aquí baix tendrem el bucle de joc
    //Per ara escriurem un resultat
    p.escriu();
}



</script>
<h2>My First JavaScript</h2>
<button type="button"> pitja el botó per crear una partida i mostrar el jugador 1 inicialitzat </button>
<p id="demo">Aquí tendrem la sortida amb tots els elements del programa</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 <script>
function Jugador(){
    this.nom = "Computadora";
    this.punts = 0;
    this.dic = -1;
    this.duc = -1;
   
    this.demanaDuc = function(){
        this.duc = prompt("Jugador " + this.nom + ", quantes duus?");
    };
    this.demanaDic = function(){
        this.dic = prompt("Jugador " + this.nom + ", quantes dius?");
    };
    this.creaDuc = function(nBolles){
        this.duc = Math.floor((Math.random() * (nBolles+1)));
    };
    this.creaDic = function(nBolles,nJugadors){
        this.dic = this.duc + (Math.floor((Math.random() * (nBolles+1))));
    };
    this.estatJoc = function (){
        return this.nom + ", duc:" + this.duc + " i dic " + this.dic;};
}


var j1= new Jugador();
var j2= new Jugador();

var bolles=3;

function escriu(){
//aquesta funció ha d'escriure els resultats de tots els jugadors.
j1.creaDuc(bolles);
j2.creaDuc(bolles);

j1.creaDic(bolles,2);
j2.creaDic(bolles,2);

return j1.estatJoc() + j2.estatJoc();
}

</script>
<h2>My First JavaScript</h2>
<button type="button"> Crida Escriu.</button>  

2.Algorismes de Joc

Dades que circulen per dins del programa.

Aquest estudi del joc ens proporcionarà quins són els algoritmes que posarem dins de la seqüència de joc. Pot ser que l’usuari hagi d’introduir dades als algoritmes. Al post anterior varem fer un exercici on l’ordinador donava un nombre depenent els paràmetres nombre de jugadors i nombre de bolles. En aquest punt hem de pensar quins algoritmes necessitam.

Exercici. Crear ordanigrames dels algoritmes de joc.

Crea els ordanigrames dels algoritmes de joc. S’ha de pensar com resoldre cada situació que ens marca la seqüència de joc.

3. Seqüència del joc.

La millor forma de veure quines parts té un projecte, un joc en aquest cas, és jugar-hi. Saber anotar quines són les passes que segeix el joc, quins casos excepcionals pot tenir, qui i quan guanya, qui perd, etc. La primera idea és tenir un camí que ha de seguir el bucle de joc. Per això hem d’analitzar quin ús en feim de les dades que va generant el joc. D’aquestes dades podem dir que unes són dades de partida, usades i visibles per tots els jugadors i dades de jugador. És per això que desprès diferenciarem entre dades de jugador i dades de partida. Aquesta part de dades de jugadro i de partida és necessari esmentar-la aquí ja que ja ho usam. Si ens fixam podem dir que abans de jugar es decideix:

  • Quantes pedres tendrà cada jugador.
  • A quants de punts s’acaba la partida.
  • Nombre de jugadors que juguen, al nostre cas començarem amb sols dos jugadors.

PantallaInicidePartida(nom jugadors, pedres, punts)—> Juga(A,B)—-> Torn_A—–> Torn_B—-> Resultat(mostra qui guanya)  —-> (bucle) fins arribar als punts de guanyar—> final, mostra resultats.

Exercici. Crear ordanigrama de Seqüencia de joc.

Crea l’ordanigrama de les seqüències de joc. No has d’implementar cap algorisme, posa nom a cada situació que es presenti.

Presentació en construcció

admin2on batxilleratEl Joc de les Pedres. 'Un jugador contra un altre, cara a cara, qui endevina la suma de pedres que duen a la mà, guanya'. Per implementar el projecte haurem de fer un estudi de quatre parts: Estructura de dades. Algoritmes. Seqüència del Joc. Interfície de Joc. S'ha decidit per aquesta opció...Blog Aula Informàtica Gimnèsia