• Travel

    Comprendre.

  • Take note

    Essayer.

  • Create

    Réussir.

Le choix, une nouvelle fois.

Projets SiteCAM

Le jeu du Puissance 3 avec Pierre Lefèvre & Fabien Lheureux
Projet. HTML. CSS & Javascript.

Début = Avril 2017.

Fin = Mai 2017.

Plateforme = En ligne.


Logiciels utilisés

 Photoshop Brackets

Jouer au jeu

Haut-de-page

Ce que nous devions faire.
Un jeu esthétiquement agréable et fonctionnel en Javascript. Opposant l'humain à l'ordinateur.
Ce que nous avons fait.

Réalisations.

Pour bien commencer, une maquette visuelle s'imposait.
D'un côté, une page d'accueil. Entrée d'un pseudo et validation pour commencer la partie.

Pour en savoir plus, survolez les images.

Puissance 4 Puissance 4 Puissance 4 Puissance 4 Puissance 4
De l'autre, le jeu en lui-même
Puissance 4 Puissance 4 Puissance 4 Puissance 4 Puissance 4 Puissance 4

Une réflexion autour de la grille de jeu.

Dimensions : 6 colonnes & 4 lignes.

Aidés par notre professeur, nous avons imaginé une grille de jeu comptant 4 colonnes et 4 lignes supplémentaires.
Soit une grille de 10 colonnes & 8 lignes.
Selon le schéma ci-dessous, nous n'avons fait apparaître qu'une partie de la grille (en jaune).

Plateau Excel


Les 2 colonnes à gauche. Les 2 colonnes à droite.
Les 2 lignes du haut. Les 2 lignes du bas.
Ont été utilisées pour la vérification de l'alignement des pions.

Une mise en page entièrement en CSS.

Selon la maquette de base, notre idée était de dessiner une grille de jeu sur Photoshop et de la placer au-dessus de la grille fonctionnelle.
Seulement, après de nombreux échecs de mise en page responsive, nous nous sommes penchés vers une mise en page utilisant uniquement le CSS.

Ce qui donnait du point de vue HTML.

1. <div id="plateau">
2. <div id="colonne0">
3. <div id="pion07" class="pasaffiche"></div>
4. <div id="pion06" class="pasaffiche"></div>
5. <div id="pion05" class="pasaffiche"></div>
6. <div id="pion04" class="pasaffiche"<>/div>
7. <div id="pion03" class="pasaffiche"></div>
8. <div id="pion02" class="pasaffiche"></div>
9. <div id="pion01" class="pasaffiche"></div>
10.<div id="pion00" class="pasaffiche"></div>
11. </div>
12. <div id="colonne1">
13. <div id="pion17" class="pasaffiche"></div>
14. <div id="pion16" class="pasaffiche"></div>
15. <div id="pion15" class="pasaffiche"></div>
16. <div id="pion14" class="pasaffiche"></div>
.........
......
..

22. </div>
131. </div>

Et du côté du CSS.
Les trous circulaires de la grille sont simplement le fruit d'un border-radius important.

1. #plateau {
2. border-style: solid;
3. border-color: #2A596E;
4. border-radius: 30px;
5. float: left;
6. margin-left: 17%;
7. background-color: #2A596E;
8. }
9.
10. #colonne0,
11. #colonne1 {
12. display: inline-block;
13. }
14.
15. .pasaffiche {
16. display: none;
17. }
18.
19. .affiche {
20. background-color: #3de3e1;
21. width: 102px;
22. height: 102px;
23. border-radius: 80px;
24. border: 2px #D16B45 solid;
25. }

Comme vous le voyez, les colonnes 0 et 1 font parties de la classe .pasaffiche à laquelle nous avons attribué un display: none;
Ce qui suit notre schéma plus haut. Les colonnes 2, 3, 4, 5, 6 & 7 sont quant à elles dans la classe .affiche où nous les affichons.

Pour plus d'informations concernant le style appliqué au jeu, je vous invite à regarder le code source de la page quand vous y jouerez. Bonne lecture.

Voilà qui est en fini de la partie facile. Passons au Javascript.

Javascript.

Fonction de placement des pions.

1. function placepion(c) {
2. var a = 2;
3. while ((document.getElementById('pion' + c + "" + a).value == 1 ||
      document.getElementById('pion' + c + "" + a).value == 2) && a<=4) {
5.       a = a + 1;
6.      }
7.
8.       document.getElementById('pion' + c + "" + a).style.backgroundColor = '#C60800';
9.
10.     document.getElementById('pion' + c + "" + a).value = 1;
11.
12.     nbrpioncolonne[c] = nbrpioncolonne[c] + 1;
13.
14. if (nbrpioncolonne[c] == 4) {
15.     document.getElementById('bouton' + c).disabled = 'true';
16.     }

Il s'agit ici d'une partie de la fonction placepion(), pour laquelle je vais apporter quelques explications.

Notez avant tout qu'elle prend un paramètre, c (l.1), il correspond à la colonne sélectionnée.
La fonction placepion n'est lancée au clic que sur les colonnes 2 à 7, les colonnes affichées.

La condition ici (l.3) peut paraître compliquée mais elle ne l'ai pas.

Littéralement, tant que nous trouvons un pion posé dans la colonne c, nous passons à celui du dessus.

Les valeurs 1 et 2 correspondent respectivement aux pions posés par l'humain et ceux posés par l'ordinateur.

Si l'explication ne vous semble pas claire, je vous invite à regarder le schéma de la grille au-dessus.

Nous avons aussi une condition portant sur la ligne a (l.3). Nous devons prendre en compte le fait d'avoir une colonne pleine. Si tel est le cas (l.14), on bloque le bouton (l.15), elle n'est plus jouable.

Si vous avez quelconque question, ne pas hésiter à m'en faire part.

Pour cela, rendez-vous sur la page contact.

Camille Robin. Site Web Portfolio. Codé main.
Projet.

Début = Septembre 2017.

Fin = Octobre 2017.

Plateforme = En ligne.


Logiciels utilisés

 Photoshop Illustrator
Brackets Sublime Texte

Haut-de-page

A partir de mon expérience web acquise dans les cours d'HTML, de CSS, de Javascript et de PHP, j'ai conçu et développé ce site.
A noter que je n'ai pas utilisé de framework comme Boostrap, au profit d'un design responsive codé main.

Réalisations.

Le responsive design.

Devices

Les Medias Queries = la solution. Ils permettent de définir des proporiétés de style selon la taille l'écran sur lequel s'affiche le site. Dans mon cas, le CSS comporte deux conditions.

1. @media screen and (max-width: 768px) {
2.           body #menu {
3.                 ...
4.               }
5.      }
6. @media screen and (min-width: 769px) and (max-width: 980px) {
7.           body #menu {
8.                 ...
9.               }
10.      }

Il est vivement recommandé d'en utiliser plusieurs. On les appelle les breakpoints.

En savoir +

Les fonctionnalités.

Comme vous avez pu le voir, ou vous le verrez, certains mots clés de mon parcours changent de couleurs.
Ici, CSS et Javascript travaillent main dans la main pour dynamiser cette page.

Pour le CSS, 2 classes.
.pasCouleur & .Couleur

J'ai utilisé la propriété display: inline;
Un span étant un élément vide, même avec un id, il n'est pas possible d'en changer la classe en javascript.
C'est là qu'interviennent les <div> que j'ai affiché en ligne.

1. .pasCouleur {
2. background-color: none;
3. color: black;
4. transition: all 1s;
5. display: inline;
6.       }
7.
8. .Couleur {
9. background-color: #2D2D2D;
10. color: white;
11. transition: all 1s;
12. display: inline;
13.      }

Du côté du Javascript
1. function miseEnCouleurCV() {
2.    var a = (Math.floor(Math.random() * 11) + 1);
3. document.getElementById('element' + a).className= "Couleur";
4.    for (i = 1; i < a; i++) {
5. document.getElementById('element' + i).className = "pasCouleur";
6.    }
7.    for (i = a + 1; i < 14; i++) {
8. document.getElementById('element' + i).className = "pasCouleur";
9.    }
10. }

Pour faire simple, cette fonction prend un nombre aléatoire a compris 1 et 11.
Cela correspond à mon nombre d'id appelé element, suivi par 1, 2,... 11 dans le HTML.
Cette fonction change alors la classe du a ième élément.

Pour apporter du dynamisme dans l'affichage, je repasse la classe de tous les autres éléments à .pasCouleur.
Les deux for servent à cibler tous les autres éléments sauf celui choisi aléatoirement.

Enfin, la fonction est lancée à intervalle régulier tant que vous restez sur la page par une autre fonction lancementDeChangeCouleurCV.

1. function lancementDeChangeCouleurCV() {
2. setInterval(miseEnCouleurCV, 1200);
3. }

Si vous êtes intéressés et souhaitez aller plus loin, je vous invite à inspecter le code source de l'ensemble des pages.