Jeu de l'Oie vintage

archag · le 11 février

Bjr, ma question passe pour du spam sur le forum pro où je m'étais inscrit. Je ne suis qu'un amateur du dimanche en matière de codage alors je cherche une providence et ce ne sera pas sur des forums actuels de professionnels que je trouverai. Il faut des forums plus généralistes aussi. Zebulon existe depuis longtemps quand on commençait avec l'informatique.

le link qui va sur le bricolage ( <== edit: désactivé au 15-02-24)

Ma motivation pour ce jeu de l'oie s'explique du fait que je l'ai repris d'un tiroir où il était depuis longtemps. Je l'ai scanné pour en faire un fond HTML. En fait ce jeu date du début des années 1920. Actualiser ce jeu de l'oie en version informatique devient passionnant.

Mon code est plein de profanations barbares alors que j'ai sué pour rassembler des bouts de HTML, CSS et de JS que j'ai glanés. J'obtiens un résultat très moyen mais qui commence à ressembler visuellement à ce que j'aurais voulu faire au propre niveau code.

Sinon je me doute que c'est un développement savant et épineux pour avoir ce résultat aux normes techniques. Etant donné que intégrer la machine comme 2d joueur est difficile on pense à la remplacer par un être humain en réseau par exemple. On peut imaginer un bouton en plus comme celui "lancer les dés" mais qui s'intitulerait "machine joue" et ferait avancer un pion automatiquement sur la case ad hoc... Bon, sinon si trop épineux à réaliser alors en réseau?

Bref actuellement on peut déjà mouvoir les pions à la souris avec deux souris USB sur un ordi mais c'est limité.

Si quelqu'un s'intéresse un peu à ça je peux mettre les codes.

Modifié le 15 février par archag
orthographe

Dylav · le 11 février

Bonsoir archag,

L'idée est intéressante, et le « plateau » est magnifique. :wink:

Pour les codes, je pourrais t'aider à les mettre aux normes. En revanche, je crains d'être aux limites de mes compétences pour ajouter un second joueur virtuel, car je ne maîtrise pas vraiment JavaScript.

archag · le 12 février

bjr Dylav et merci pour ta présence

au départ j'ai scanné en 2 moitiés le jeu ancien et abîmé et j'ai obtenu au final un JPG de 1970 x 1946 réduit par la suite en 887 x 876 pour le background du body. Il est donc photoshopé. Si la motivation advient alors je peux encore mieux traiter cette image mais on verra...

Alors voici le jeu.html . La seule façon de faire apparaître le link <a href> de la Charte du jeu de l'Oie sur un alignement différent que les 2 dés et le bouton "lancer les dés" a été d'user d'une balise du temps de Jules César càd <center>

<!DOCTYPE html>
<html lang="fr">
  
<head>
        <title>Jeu de l'Oie</title>

<style type="text/css">

.center {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

body
{ background-image: url("image/plateau.jpg");
  background-repeat: no-repeat;
background-position: center;
  background-size: inherit;
  }

#divbottom {
 position: relative;
 background-image: url("image/bottom.jpg");
 height: 128px;
 width: 887px;
 background-repeat: no-repeat;
 /* text-align: center; */
 margin-left: auto;
 margin-right: auto;
 display: flex; 
 /* align-items: center; */
  justify-content: left;
   }

div {
height: 748px;
width: 887px;
/* background-repeat: no-repeat; */
text-align: center;
margin-left: auto;
margin-right: auto;
display: flex; 
align-items: center; 
justify-content: center;  
   }

#my-div {
 background : dodgerblue;
 filter: alpha(opacity=80);
 opacity: 0.8;
 z-index: 10000;
 position: absolute;
 top: 25%;
  border     : 2px solid #d3d3d3;
  height     : 40px;
  width      : 40px;
  margin     : 5px; 
  cursor     : grab;
  }
.movCursor {
  cursor : grabbing;
  }

#m-div {
  background : red;
  filter: alpha(opacity=80);
  opacity: 0.8;
  z-index: 10000;
  position: absolute;
  top: 25%;
  /* left: 400px; */
  /* top: 350px; */
  border     : 2px solid #d3d3d3;
  height     : 40px;
  width      : 40px;
  margin     : 35px;
  cursor     : grab;
  }
.movCursor {
  cursor : grabbing;
  }


</style>

<script type="text/javascript">

/* La Charte popup. */
  var windowObjectReference = null; // variable globale
  function openChartePopup() {
    if (windowObjectReference == null || windowObjectReference.closed) {
      windowObjectReference = window.open(
        "charte.html","CharteWindowName","popup","_blank", 'width=400, height=100'
      );
    } else {
      windowObjectReference.focus();
    }
  }
</script>
  
<script src="script.js" charset="utf-8"></script>


    </head>

    <body>

<div class="dices" >

<center>
<br/><br/><br/><br/>


    <a href="charte.html"
    target="CharteWindowName"
    onclick="openChartePopup(); return false;"
    title="popup d'affichage de la Charte du Jeu de l'Oie"
    > <p style="color:black;"><strong>Charte du Jeu de l'Oie</strong> </p> </a>
            
<br/>
<img class="newdes" id="des0" src="./imagedes/dice1.png" alt="dès1" data-random="">
            <img class="newdes" id="des1" src="./imagedes/dice1.png" alt="dès1" data-random="">   

<button type="button" class="btn" onClick="rollTheDice()">Lancer les d&eacute;s</button>
</center>
</div>


<div id="divbottom" > 

<div id="m-div" > </div>
 <script>
const mDiv  = document.querySelector('#m-div');
mDiv.ref_ms = { x: 0, y: 0 };

mDiv.addEventListener('mousedown', (e) =>
  {
  mDiv.ref_ms.x = e.clientX;
  mDiv.ref_ms.y = e.clientY;
  mDiv.classList.add('movCursor')

  if (mDiv.style.transform !== '')
    {
    let [ mx, my ] = mDiv.style.transform.match(/-?\d*\.?\d+/g).map(Number);
    mDiv.ref_ms.x -= mx;
    mDiv.ref_ms.y -= my;
    }
  })
window.addEventListener('mousemove', e =>
  {
  if (mDiv.classList.contains('movCursor')
    && e.clientX > 0 && e.clientY > 0 )
    {
    mDiv.style = `transform: translate(${e.clientX - mDiv.ref_ms.x}px, ${e.clientY - mDiv.ref_ms.y}px);`;
    }
  })
window.addEventListener('mouseup', () =>
  {
  mDiv.classList.remove('movCursor')
  })
</script>

<div id="my-div"></div>
 <script>
const myDiv  = document.querySelector('#my-div');
myDiv.ref_ms = { x: 0, y: 0 };

myDiv.addEventListener('mousedown', (e) =>
  {
  myDiv.ref_ms.x = e.clientX;
  myDiv.ref_ms.y = e.clientY;
  myDiv.classList.add('movCursor')

  if (myDiv.style.transform !== '')
    {
    let [ mx, my ] = myDiv.style.transform.match(/-?\d*\.?\d+/g).map(Number);
    myDiv.ref_ms.x -= mx;
    myDiv.ref_ms.y -= my;
    }
  })
window.addEventListener('mousemove', e =>
  {
  if (myDiv.classList.contains('movCursor')
    && e.clientX > 0 && e.clientY > 0 )
    {
    myDiv.style = `transform: translate(${e.clientX - myDiv.ref_ms.x}px, ${e.clientY - myDiv.ref_ms.y}px);`;
    }
  })
window.addEventListener('mouseup', () =>
  {
  myDiv.classList.remove('movCursor')
  })
</script>


</div>

</body>
</html>

et script.js que j'ai récupéré d'un site Web d'écolage. C'est pour le lancer des dés.

/*
Id = # class = .
 Utilisation de Math.random pour faire un chiffre alléatoire entre 0 et 1, ce chiffre est à virgule
 Utilisation de Math.floor pour supprimer une virgule et utilisation de *6+1.
 document.querySelector permet
 */

function rollTheDice() {
    let nombre_des = document.getElementsByClassName("newdes").length;
    let total = 0;

    for (var compteur1 = 0; compteur1 <= nombre_des; compteur1++) {
        
        let nombre = Math.floor(Math.random() * 6) +1;
        /*alert(nombre)*/
        const elements = document.querySelector("img#des" + compteur1).setAttribute("src", "./imagedes/dice" + nombre + ".png");
        // On calcule le total : 
        total = total + nombre;

    }
    document.querySelector("#plusp1").textContent = "Le total des des est de : " + total;
    /*document.querySelector("img") représente la balise dans cours1.html
      .setAttribute("src", représente le src dans la balise img
      "./imagedes/dice" représente le chemin pour l'image
      + nombre représente la variable de courte portée ou est stocké un nombre de 1 à 6
      + ".png" représente le format de l'image 
      */

}

function newdes() {
    // let nombre_des = document.getElementsByClassName("newdes").length; sert à savoir le nombre de classe new des présent dans le code HTML.
    let nombre_des = document.getElementsByClassName("newdes").length;
    let clone = document.querySelector(".newdes").cloneNode(true);
    document.querySelector(".dices").appendChild(clone).setAttribute("id","des" + nombre_des);

    
   // alert("Le nombre de dès est de " + nombre_des);
}

/*
part dédiée au drag & drop du pion
*/

var mouse_down = false;

function on_mouse_down_square(event) {
 mouse_down=true;
}

function on_mouse_up(event){
 mouse_down=false;
}

document.onmousemove = on_mouse_move;

document.onmouseup = on_mouse_up;

function on_mouse_move(event) {
  if (mouse_down === true) {
    document.querySelector('#square').style.left = event.clientX-50+'px';
    document.querySelector('#square').style.top = event.clientY-50+'px';

  }
}

puis à côté de ces deux 1ers fichiers il y a charte.html étant un fichier minimaliste dans son état actuel mais il faut dire que je n'arrive pas à redimensionner la fenêtre de ce popup

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Charte du Jeu de l'Oie</title>
<style type="text/css">


</style>
        
        <script src="script.js" charset="utf-8"></script>
    </head>
    <body>
<table style="width: 400px;"><tbody>
<tr>
<td style="text-align: center;">La Charte du Jeu de l'Oie&nbsp;</td>
</tr>
<tr>
<td>
<p>Pour deux joueurs</p>
</td>
</tr>
<tr>
<td>
<ul style="list-style-type: square;">
<li>Un lancer de dés menant au n°9 sur la case de l'oie engage le joueur à relancer immédiatement les dés. Si le joueur n'atteint plus 9 alors rien n'échoit et c'est au suivant de lancer les dés. Mais si 3 et 6 advenaient, cela mènerait en case n°26. Si 4 et 5 advenaient, le joueur se placera en case n°53. Quand le lancer de dés revient au tour du joueur placé en case 26 ou 53, si les dés comptabilisent encore 9 alors le joueur arrive en 63. Il a gagné. </li>
<li>Qui ira sur le n°6 où il y a un pont paiera le prix convenu et finira illico au n°12 pour se noyer sous ce second pont.</li>
<li>Qui ira au n°19, où il y a une hostellerie, paiera le prix convenu et se reposera en passant son tour.</li>
<li>Qui ira au n°31, tombera dans le puits et paiera le prix convenu pour retourner à la case de l'oie n°9 et suivre son règlement déjà édicté en début de charte. </li>
<li>Qui ira sur la case n°42 où il y a un labyrinthe paiera le prix convenu et retournera au n°30.</li>
<li>Qui ira au n°52, où il y a une prison, paiera le prix convenu et attendra là en passant son tour deux fois.</li>
<li>Qui ira au n°58 où il y a une tête de mort paiera le prix convenu et recommencera le jeu.</li>
<li>Qui ira au n°59 retournera sur la case n°54.</li>
<li>Pour atteindre la Chance finale du n°63, il faut le nombre de points exact, autrement le joueur sera obligé de reculer sur les cases comptées...</li>
</ul>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>

</table></body></html>

ensuite il y a 2 dossiers avec les images: "imagedes" (avec 6 PNG de dés) et "image" avec 2 JPG , plateau.jpg et bottom.jpg , ce dernier fichier graphique étant utilisé pour positionner les deux pions (bleu, rouge) sur la case départ avec le génie qui montre Bonne chance.

Modifié le 12 février par archag
fichiers graphiques

nthor · le 13 février

C'est cool comme projet ça

archag · le 13 février

~~j'essaie avec canvas et~~ il faut recommencer tout le script alors que ce n'est pas à but lucratif ni professionnel ni pour un examen...

Modifié le 14 février par archag

Dylav · le 14 février

Bonsoir archag,

Dans l'immédiat, je n'ai pas ajouté de fonctionnalité supplémentaire à ton application. J'ai juste,

épuré au maximum le code HTML en externant la feuille de style et les scripts dans un sous-dossier Modules,
regroupé toutes les images dans un seul sous-dossier Images. J'y ai ajouté une favicône jdloie (qui apparaît à gauche de l'onglet dasn le navigateur, et que tu pourras remplacer), et une image dice0 (dés avant le lancer initial), qui est en GIF parce que je ne sais pas manipuler le PNG,
remplacé le JavaScript de la popup par un module plus simple, qui fonctionne bien : elle l'ouvre centrée dans l'écran, et on peut faire disparaître la scrollbar en agrandissant la popup vers le haut.

Les modules

Style.css est la feuille de style qui gère la présentation de la page principale
Charte.css est la feuille de style qui gère la présentation de la pop-up
Random.js est le script qui gère les lancers de dés
Popupcentree.js est le script qui gère l'ouverture de la pop-up
mDiv.js et myDiv.js sont les scripts qui gèrent les deux pions (respectivement le rouge et le bleu

Nota

on pourrait regrouper les deux feuilles de style, mais c'est beaucoup moins simple qu'on pourrait le croire
on pourrait n'avoir qu'un module de gestion de pion, car les deux scripts sont parfaitement identiques, mais il faudrait lui fournir un paramètre externe (genre rouge ou bleu), et j'avoue que cela dépasse mes compétences actuelles.

Évolutions fonctionnelles

Montrer à qui c'est le tour de jouer
Vérifier l'avancement du pion en fonction du lancer de dés, ou alors le faire avancer automatiquement
Tenir compte en automatique des effets des cases spéciales
Prévoir une option qui remplacerait le second joueur par la machine elle-même
Etc...

À partir du second point ci-dessus, il faut « géographiser» au préalable le plateau, c'est-à-dire déterminer la position (X,Y) du centre de chaque case pour pouvoir y placer chaque pion à bon escient. Ça fait du boulot !

Tu trouveras ci-joint un fichier compressé contenant l'ensemble de la structure de l'application.

archag · le 15 février

Dylav après avoir vu, lu & su ta réalisation voici d'abord un tonnerre d'applaudissements reconnaissants.

Et quelques commentaires: pour ne pas s'empoisonner la vie on peut changer des points de la charte du jeu. En fait on peut écrire ce que l'on veut comme marche à suivre pour éviter l'un ou l'autre boulet de script.

Si le pion joueur se bouge à la souris cela rappelle le jeu IRL, et aussi le côté original et simple de ce jeu de 1920 est restitué mais je suppose que une automatisation éviterait cette sorte de sélection parasite qui devine les div... Cela apparaît parfois quand on manipule les pions à la souris mais tant pis je crois que c'est mineur vis à vis d'une automatisation exogène totale de ce jeu vintage. (évidemment résoudre le problème de cette sélection bleue sans automatiser serait le fin du fin...)

Au final je vote pour un pion joueur qui se bouge à la souris (comme c'est déjà le cas) et le pion machine automatisé.

Dans une version deux joueurs en réseau faut-il une automatisation des deux pions?? Ou bien y a t il une soluce d'hébergement serveur qui permettrait la simultanéité sur les pions non automatisés?

EDIT:

pour la version mono joueur

simulation bouton machine

on peut voir un bouton (fake... sans fonction actuellement) ajouté qui ferait jouer la machine.

La version deux joueurs (en ligne) n'aurait pas de bouton supplémentaire mais est ce possible que deux personnes cliquent sur Lancer les dés du jeu placé sur un espace Web?

Modifié le 15 février par archag

Dylav · le 15 février

Dans l'immédiat, j'ai un peu la flemme de me lancer dans de grands travaux... :roll:

J'ai juste une suggestion mineure à te présenter : avoir des pions ronds plutôt que carrés. Il suffit d'utiliser la propriété CSS border-radius. Ci-dessous en rouge les modifications à apporter à la feuille de style Style.css,
- j'ai fait passer les dimensions du pion de 40 à 50 px,
- j'ai introduit la propriété border-radius.

Citation

#my-div {
background : dodgerblue;
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
position: absolute;
top: 25%;
border        : 2px solid #d3d3d3;
height        : 50px;
width         : 50px;
margin        : 5px;
cursor        : grab;
border-radius : 50%;
}

#m-div {
background : red;
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
position: absolute;
top: 25%;
/* left: 400px; */
/* top: 350px; */
border        : 2px solid #d3d3d3;
height        : 50px;
width         : 50px;
margin        : 35px;
cursor        : grab;
border-radius : 50%;
}

Tu pourrais également tenter de donner au pion un effet d'épaisseur en utilisant la propriété box-shadow. J'ai fait quelques essais dans ce sens, mais les ai trouvés peu concluants...

À noter par ailleurs que la classe movCursor est inutilement définie en double dans la feuille de style Style.css.

archag · le 15 février

j'ai remplacé le dice0.gif par du PNG

edit: voila, ouf !

Modifié le 15 février par archag

Dylav · le 15 février

J'ai trouvé un moyen d'améliorer encore le rendu des pions. Modifie la propriété border de la façon suivante

border : 5px double black;

On a alors vraiment l'impression de jetons de plastique colorés.

De plus, pour le rouge, j'ai enlevé la transparence. Je trouve que cela donne encore mieux l'apparence d'un véritable pion.

Citation

filter: alpha(opacity=80);
opacity: 0.8;

Connexion

Pas encore inscrit ?

Jeu de l'Oie vintage

Messages recommandés

archag

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

archag

Lien vers le commentaire

Partager sur d’autres sites

nthor

Lien vers le commentaire

Partager sur d’autres sites

archag

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

archag

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

archag

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer