jeu de l'oie

**archar** · 07/02/2024, 01h44

Bjr j'ai retrouvé un jeu de l'oie des années 1920 avec un graphisme spécifique vintage attractif et je l'ai scanné pour obtenir un jpg (1970 x 1946 px) or il m'est venu à l'idée de faire "revivre" ce jeu en l'intégrant à une page Web. Je ne sais pas si c'est possible mais j'imagine ce qu'il y a de plus simple. Juste deux dés virtuels et pouvoir positionner des pions (deux) sur l'itinéraire graphique du jeu avec la souris de l'ordi ou le doigt sur la tablette. Il n'y aurait que deux joueurs: l'usager humain contre la machine ou alors deux humains en réseau..? Voila les premiers jalons.

Edit: un code JS simple récupéré sur un site d'apprentissage permet de lancer les dés

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/*
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);
}

et le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Cours</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="script.js" charset="utf-8"></script>
    </head>
    <body>
        <h1>Jouer aux dès</h1>
 
        <div class="dices">
            <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="">
        </div>
 
        <button type="button" class="btn" onClick="rollTheDice()">Lancer les dès</button>
 
        <p id="plusp1"></p>
 
    </body>
</html>

j'ai récupéré ces codes parce que ils sont à ma portée de débutant mais reste à savoir si Java Script donne la possibilité de déplacer soi-même un pion à la souris sur un graphique background (le jeu de l'oie)

**mathieu** · 07/02/2024, 22h49

il y a un peu plus d'un an, j'avais fait un jeu de l'oie qui s'installe sur un site wordpress :
https://www.developpez.net/forums/d2.../#post11894484
le but était de faire un serveur multijoueur fonctionnel donc je n'ai pas du tout approfondi la partie affichage. et donc la seule interaction de l'utilisateur est de cliquer pour lancer les dés et ensuite c'est le code javascript qui fait bouger les pions.

mais ensuite vous pouvez faire quelque chose de plus évolué.
regardez par exemple cette page qui montre différents effets utilisables dans une balise "canvas" et la lecture de la position de la souris :
https://developer.mozilla.org/fr/doc...B4le_de_souris

**archar** · 08/02/2024, 12h41

je cherche un code JS qui place une icône sur une page Web comme ce que on fait sur un Bureau Windows par exemple. Sur mon PC je peux déplacer les icônes sur le Bureau et les agencer en les positionnant... Si je déplace une icône alors elle restera à sa nouvelle place. Je cherche à appliquer ce principe sur un fond graphique placé dans un div de style de mon fichier html.

sur les links fournis on trouve des possibilités mais je n'ai pas vu le bouger -- déposer

Edit; c'est bon j'ai ajouté un bout de code JS pour le drag & drop d'un pion par exemple. Je peux positionner le pion sur le jeu de l'oie.

Maintenant pour compléter le jeu je cherche à placer un 2d pion attribué au deuxième joueur... mais avant de placer le jeu en réseau (ce sera une version ultérieure de ce jeu) je regarde si la machine peut mouvoir le 2d pion automatiquement suite au lancer de dés quand c'est à son tour. Pour simplifier on pourrait cliquer sur un bouton "machine joue" pour lancer les dés et voir le pion aller automatiquement sur la bonne case du jeu de l'oie. On devrait pouvoir manipuler le pion de la machine si nécessaire (certaines cases du jeu sont soumises à la charte du jeu de l'oie)

Si c'est trop compliqué j'essaierai de placer le jeu en réseau

**archar** · 09/02/2024, 08h51

mon code est plein de profanations barbares alors que j'ai sué pour rassembler des bouts de HTML et de JS que j'ai glanés. J'obtiens un résultat très moyen mais qui commence à ressemble à ce que j'aurais voulu faire au propre. 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. En fait ce jeu date du début des années 1920. Il a été acquis par des aïeux que je ne connais que par photographies. Actualiser ce jeu de l'oie en version informatique devient un phénomène spatio-temporel. Je ne suis pas professionnel du code et sans avoir besoin de gagner ma vie avec ça et bien j'ai quand même des justifications valables je crois...

le fichier html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr">
 
 
<head>
        <title>Jeu de l'Oie</title>
 
<style type="text/css">
 
div {
   background-image: url("image/plateau.jpg");
height: 950px;
   width: 887px;
 text-align: center;
margin-left: auto;
  margin-right: auto;
display: flex;
  align-items: center;
 justify-content: center; 
   }
#square
{
  position:absolute;
  height:40px;
  width:40px;
  /* left: 800px;*/
  /* top: 350px;*/
  background: #000;
  background-color:red;
border: 3px rgb(136, 219, 219) solid;
cursor: pointer;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
</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=100, height=100'
      );
 
/*La Charte sera affichée par-dessus les éventuelles autres fenêtres.*/
 
    } else {
      windowObjectReference.focus();
/* sinon la référence existe et la fenêtre n'est pas fermée on peut donc l'amener devant avec la méthode focus()sans avoir à recréer la fenêtre ou à recharger la ressource référencée. */
    }
  }
</script>
 
<script src="script.js" charset="utf-8"></script>
    </head>
    <body>
<table class="center"><tbody>
<tr>
<td><div id="square" onmousedown="on_mouse_down_square(event)">pion</div>
</td>
</tr>
<tr>
<td>
<div class="dices">
<a href="charte.html"
    target="CharteWindowName"
    onclick="openChartePopup(); return false;"
    title="popup d'affichage de la Charte du Jeu de l'Oie"
    >. Charte du Jeu de l'Oie .</a>
            <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és</button>
    </div>
</td>
</tr>
</tbody>
 
</table> 
 
 
</body>
</html>

un script JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
57
58
59
60
61
62
63
64
65
66
 
/*
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';
 
  }
}

à côté de ces deux premiers fichiers j'ai encore
>> un fichier charte.html pour le popup des explications
>> un dossier imagedes avec 6 fichiers PNG (les dés)
>> un dossier image avec plateau.jpg dedans... C'est le jeu de l'oie avec ses cases.
OK. Je prends ce que on voudra bien me laisser comme amélioration... Que faire pour le mieux? Merci.

**Mat.M** · 10/02/2024, 18h02

salut Archar je conseille de se tourner vers une API genre Babylon JS parce que développer ce genre de jeu en simple Javascript ça risque d'être compliqué.

jeu de l'oie

Développement 2D, 3D et Jeux

Discussions similaires

Partager

Partager