Créer un jeu en ligne tour par tour

**mathieu** · 26/05/2022, 13h36

Envoyé par Séb.

Avec Vue / Alpine tu peux très facilement mettre à jour des portions de tes pages (ou tes pages complètes si besoin) sans les recharger et selon l'état du plateau de jeu en BdD obtenu avec fetch() ou Axios.

j'ai essayé alpine mais je ne comprend pas la documentation pour modifier une valeur "message_attente".
dans le test je veux la changer après quelques secondes pour simuler la modification après un appel à "fetch".

Code html :

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
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
<script src="//unpkg.com/alpinejs" defer></script>
 
</head>
<body>
 
<style>
        [x-cloak]
        {
                display : none;
        }
        
        .message_attente
        {
                background : #9E9;
                font-size : 200%;
        }
        
</style>
 
<div x-cloak x-data="{message_attente : false}" x-show="message_attente" class="message_attente">
	message de test
</div>
 
 
<script>
"use strict";
 
document.addEventListener("DOMContentLoaded", function () {
        
        console.clear();
        
        
        setTimeout(function () {
                
                console.log("appel Alpine.store(message_attente, true)");
                
                Alpine.store("message_attente", true);
                
                
        }, 1500);
        
        
        
        
});
 
 
</script>
 
 
</body>
</html>

**abdel783** · 26/05/2022, 14h21

je crois il te manque le "https" pour charger les ressources Alpine

**mathieu** · 28/05/2022, 08h46

au final, j'ai fait un exemple sans utiliser de bibliothèque.
la boucle tourne en continue pour gérer le cas où un joueur se connecte puis il repart.

Code html :

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
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
</head>
<body>
 
 
<style>
        .zone_message.cache
        {
                display : none;
        }
</style>
 
 
<div class="zone_message cache attente_joueur">Attente de l'autre joueur…</div>
<div class="zone_message cache joueur_present">
	Joueur présent&nbsp;: <span class="nom_joueur"></span>
</div>
 
 
<script>
"use strict";
 
document.addEventListener("DOMContentLoaded", () => {
        
        console.clear();
        
        boucle_page();
        
        
});
 
 
function boucle_page()
{
        
        fetch("informations_joueur.php")
        .then(reponse => {return reponse.json();})
        .then(informations_joueur => {
                
                // traitement des données recues
                
                if (!informations_joueur["present"]) {
                        
                        afficher_message("attente_joueur", {});
                        
                } else {
                        
                        afficher_message("joueur_present", {
                                "nom_joueur" : informations_joueur["nom"],
                        });
                        
                        
                        // ici la gestion des boutons "prêt" des 2 joueurs
                        
                        
                }
                
                
                // rafraichir dans 2 secondes
                setTimeout(boucle_page, 2000);
                
        });
        
}
 
 
function afficher_message(nom_zone, donnees)
{
        let zones = document.querySelectorAll(".zone_message");
        
        
        zones.forEach(zone => {
                
                if (!zone.classList.contains(nom_zone)) {
                        zone.classList.add("cache");
                } else {
                        
                        zone.classList.remove("cache");
                        
                        if ("joueur_present" === nom_zone) {
                                
                                let nom_joueur = zone.querySelector(".nom_joueur");
                                nom_joueur.textContent = donnees["nom_joueur"];
                                
                        }
                        
                }
                
        });
        
        
}
 
 
</script>

Créer un jeu en ligne tour par tour

PHP & Base de données

Discussions similaires

Partager

Partager