Bonjour je débute dans la programmation et j'aurais besoin d'un petit coup de main si possible.

J'ai réalisé un petit Escape game en html/css avec quelques commandes js.
J'ai réussi à faire à peu près ce que je souhaitais mais voilà quelques problèmes persistent dont un en particulier.

Je voulais faire techniquement un inventaire personnalisé par joueur. Dans le concept, le joueur cliquera sur soit un objet soit un bouton ramasser et obtiendrait l'objet.

Il faudrait que l'objet se mette dans son "inventaire" disponible sur une page html et avoir éventuellement l'affichage d'un lien descriptif de l'objet.

J'ai contourné jusqu'ici le soucis en faisant apparaître un lien de l'objet dans la salle, mais du coup tout me monde a la visibilité sur les objets de tout le monde, la liste complète des objets pour visibilité du joueur se trouvant dans un menu déroulant. Donc le joueur qui commence vois les objets fin de game.

Je suis preneur avec joie de toute aide à ce sujet.

ps : jai envisagé la possibilité de faire cet inventaire avec un panier e commerce revisité mais alors les tutoriels affluent sur le sujet à l'aide de quantité prix caractéristiques ect... inutile du coup et non cohérente

6 réponses


Hello :)

Alors pour ton système d'inventaire il faudrait que tu utilises un event, et une instance d'inventaire devrait etre lié au joueur, quand un joueur selectionne un objet ça créée une instance d'inventaire dans la base de données qui serait lié au joueur

Tu peux montrer le code de la class Joueur et Inventaire? et aussi le code qui permet de récupérer l'objet?

Pour la création de table :

CREATE DATABASE Escapegame;

CREATE TABLE users
(
id INTEGER NOT NULL AUTO_INCREMENT PRIMARY KEY,

pseudo VARCHAR (100) NOT NULL UNIQUE,

passeword VARCHAR (100) NOT NULL,

email VARCHAR (100) NOT NULL UNIQUE
) ;

CREATE TABLE objet
(

id INTEGER NOT NULL AUTO_INCREMENT PRIMARY KEY,

nom VARCHAR (100) NOT NULL UNIQUE,

categorie VARCHAR (100) NOT NULL

) ;

Pour la l'insertion des objets :

INSERT INTO 'objet' ('nom','categorie')

VALUES

('Abricot', 'Vegetaux et animaux'),

('Eau','Vegetaux et animaux'),

('Feuille mielleuse', 'Vegetaux et animaux'),

('Graine mysterieuse','Vegetaux et animaux'),

ECT

Méthode précédente

<area href="Plantations2_ete.html"></a>
<area href="Feuille_mielleuse.html"></a>

<form action="Action_émeraude2.html" onsubmit="return valider();">
<label for="reponse">Objet à utiliser :</label>
<input type="text"name="reponse" id="reponse" >
<button> Valider la réponse </button>
<imput type="submit" value = "ok"/>
</form>

<script type ="text/javascript">
   function valider(){
     console.log(reponse.value);

            if(reponse.value == "Eau-Puits printemps-Plantation printemps") {
        document.links[0].href = "Plantations2_ete.html";
        alert( document.links[0].href);
        } else if(reponse.value == "Grande feuille-Terrier été-Ruche printemps") {  
        document.links[0].href = "Feuille mielleuse.html";
        alert( document.links[0].href);
        } else{  
            alert ("Faux, relisez bien.");
        return false;
            }

Merci pour la réponse, et pour le coup du coup la commande pour récupérer l'objet je l'ai pas encore créer justement puisque le soucis est de lié chaque objet a l'utilisateur

Okay alors vu ta base il te faudrait un pivot

En gros ça donnerait ça:

Table user:
id: INT Autoincrement Primary
pseudo: String
password: String Hash256
email: String

Table objet:
id: INT Autoincrement PRIMARY
nom: String
category: String

Table Pivot user_objet:
user_id: INT Reference => user.id INDEX
objet_id: INT Reference => objet.id
quantity: INT

A chaque fois qu'un utilisateur va récupérer un objet, ça va créer une nouvelle ligne dans user_object avec en user_id l'id du joueur et en objet l'id de l'objet, ensuite quand le joueur ouvre son inventaire il faudra faire une requete pour récupérer toutes les lignes de user_objet qui ont comme user_id l'id du joueur, et ensuite lister tous les objets qui correspondent à l'object_id de chaque lignes récupérées, le user_id tu le fou en index pour que la recherche soit plus rapide

Ensuite si un joueur possède déjà un objet et qu'il en trouve un deuxième, il ne faut pas créer une nouvelle ligne, mais simplement incrémenter la colonne quantity du user_object

Tu as un exemple pour créer ton pivot ici: https://stackoverflow.com/questions/14676342/ms-sql-creating-many-to-many-relation-with-a-junction-table (la réponse validée)

Et si tu veux faire des recherches sur Google, c'est une relation SQL Many to Many que tu essayes de faire :p

Si tu le fait en PHP tu récupères le user_id qui est loggé et l'objet tu le passes en request, et si tu passes par JS tu fait la même chose coté PHP mais tu utilises Axios pour appeler le controller depuis le JS :p

Entendu merci beaucoup, le tuto a l'air tres clair je vais le tester déjà pour la table pivot.
C'est beaucoup de maîtrise de langage x)

Donc si mon formulaire est en js avec ses conditions, je l'appelle avec axios pour qu'il me récupère l'objet id php et me le mette avec son user si j'ai bien compris.

Je vais tester ça et si j'ai des questions je reviendrais, merci beaucoup

De rien :p

Ah oui faut bien comprendre le code pour faire ce genre de système x)

Alors si ton formulaire a un attribut actionpour pointer vers une page PHP, ça se fera en PHP

Sinon il faudrait faire un event JS quand tu cliques sur le bouton submit du formulaire, et axios sert à faire un pont entre ta page et PHP, en gros tu fait un truc dans le genre:

axios.post('/traitement.php', {
    user_id: session('user_id'), // On va dire que tu as enregistré le user_id dans la session, si ce n'est pas fait faudra faire un input type hidden et mettre la value dedans
    object_id: document.getElementById('object_id').value, // Valeur de object id dans le formulaire,
}).then((response) => {
    console.log(response) // A la fin de ton code coté PHP tu vas faire un return, ce que tu return sera stocké dans cette variable
    /* Bon la tu fait le comportement que ta page doit avoir après que PHP ai fini de faire son taf, par ex: */
    alert("L'objet a été ajouté à votre inventaire")
}).catch((error) => { // Si il y a eu un problème
    console.log(error)
    alert('Il y a eu un problème')
})