Article Augmentation des ressources en "temps réel"

Article Augmentation des ressources en "temps réel" - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Article Augmentation des ressources en "temps réel" (/showthread.php?tid=8219)

Augmentation des ressources en "temps réel" - Xenos - 14-09-2020

Augmentation des ressources en "temps réel"

Bonjour les jeuPHPiens,

En lisant le titre, vous avez du vous dire :
“Encore un tuto sur les ressources en temps réel !”

Et bien, oui. Dans ce tuto, je vais vous expliquer comment réaliser un script qui permet d'afficher des ressources ( jusqu'ici pas compliqué, si ?) qui augmentent en temps réel, donc plus besoin de rafraichir la page.
L'avantage de la méthode que je vais vous présenter est que l'on utilise pas AJAX, le script est donc très simple.

Script de base

Tout d'abord, on récupère les ressources du joueur, et le nombre de ressources que produit son usine, et le timestamp de la dernière mise à jour des ressources.
Je pense que cela vous savez le faire, donc pour faire un script simple qui marche sans bdd, on va directement mettre :

// Initialisation des variables

$iRessourcesDepart = 100; // le joueur possède au départ 100 unités de bois par exemple

$iProductionParSeconde = 1; // Sa menuiserie produit 1 bout de bois par seconde

$iTempsDerniereModif = time() - (2 * 60); // On va dire que la dernière mise à jour a été effectué il y a 2 min.

Ensuite, on calcule le nombre de secondes écoulées depuis la dernière mise à jour :

$iTempsActuel = time();

$iTempsEcoule = $iTempsActuel - $iTempsDerniereModif ; //  Dans notre exemple, ce sera 2 min soit 2*60 = .... 120 s (^^)

Puis nous calculons le nombre de ressources produites durant le temps écoulé et on le met a jour dans la bdd.:

$iRessourceProduite = $iProductionParSeconde * $iTempsEcoule;

 

$iRessourceTotale = $iRessourcesDepart + $iRessourceProduite;

 

// Mise a jour dans la bdd

//[...]

Voila jusqu'ici c'était une gestion de ressources simple.

Script javascript qui permet le "temps réel"

Tout d'abord, on créé un page html toute simple qui affiche le nombre de ressource que le joueur possède :

<html>

<head>

</head>

<body>

   <p>Votre menuiserie à produit <span id="ressource"><?php echo $iRessourceTotale; ?></span> morceaux de bois.</p>

</body>

</html>

On va maintenant attaquer le tout petit script javascript entre les balise head. On initialise les variables :

<script type="text/javascript">

var iRessourcesDepart = <?php echo $iRessourceTotale; ?>; 

var iProductionParSeconde = <?php echo $iProductionParSeconde; ?>;

var iSecondes = 0;

On créé la fonction augentation_ressource() :

function augmentation_ressource(){

   document.getElementById("ressource").innerHTML = iRessourcesDepart+(iProductionParSeconde*iSecondes); 

   iSecondes++;

   setTimeout("augmentation_ressource()",1000);

}

Enfin pour que la fonction augmentation_ressource() débute, on l'appelle dans la balise body :

<body onload="augmentation_ressource()">

Script final

<?php

// Initialisation des variables

$iRessourcesDepart = 100; // le joueur possède au départ 100 unités de bois par exemple

$iProductionParSeconde = 1; // Sa menuiserie produit 1 bout de bois par seconde

$iTempsDerniereModif = time() - (2 * 60); // On va dire que la dernière mise à jour a été effectué il y a 2 min. 

 

//on calcule le nombre de secondes écoulées depuis la dernière mise à jour

$iTempsActuel = time();

$iTempsEcoule = $iTempsActuel - $iTempsDerniereModif ; //  Dans notre exemple, ce sera 2 min soit 2*60 = .... 120 s (^^)

 

// On calcule le nombre de ressources produites durant le temps écoulé

$iRessourceProduite = $iProductionParSeconde * $iTempsEcoule;

 

$iRessourceTotale = $iRessourcesDepart + $iRessourceProduite;

 

// Mise a jour dans la bdd

//[...]

?>

<html>

<head>

    <script type="text/javascript">

        var iRessourcesDepart = <?php echo $iRessourceTotale; ?>;

        var iProductionParSeconde = <?php echo $iProductionParSeconde; ?>;

        var iSecondes = 0;

        function augmentation_ressource(){

 

            document.getElementById("ressource").innerHTML = iRessourcesDepart+(iProductionParSeconde*iSecondes);

            iSecondes++;

            setTimeout("augmentation_ressource()",1000);

 

        }

    </script>

</head>

<body onload="augmentation_ressource()">

<p>Votre menuiserie à produit <span id="ressource"><?php echo $iRessourceTotale; ?></span> morceaux de bois.</p>

</body>

</html>

Voila, c'est enfin terminé.

NemeSiS_eliTe, content de son premier tuto de prog