Partage
  • Partager sur Facebook
  • Partager sur Twitter

JavaScript dans HTML (sur la page web)

    14 août 2018 à 14:40:57

    Bonjour,

    le sujet en dit peut-être déjà un peu, mais je vais préciser. Voici une version simplifiée de mon code JavaScript actuel :

    var Personnage = {
        //initialiser perso
        init: function (nom, age, niveau, pv, at, df, pieces) {
            this.nom = nom;
            this.age = age;
            this.niveau = niveau;
            this.pv = pv;
            this.at = at;
            this.df = df;
            this.pieces = pieces;
        },
        //attaque perso cible
        attaquer: function (cible) {
            if (this.pv > 0) {
                var degats = this.at;
                console.log(this.nom + " attaque " + cible.nom + " et lui fait " + degats + " points de dégâts.");
                cible.pv = cible.pv - degats;
                if (cible.pv > 0) {
                    console.log(cible.nom + " a encore " + cible.pv + " points de vie.");
                }
                else {
                    cible.pv = 0;
                    console.log(cible.nom + " est battu.");
                }
            }
        }
    };
    
    
    
    var Joueur = Object.create(Personnage);
    //intialise joueur
    Joueur.initJoueur = function (nom, age, niveau, pv, at, df, pieces) {
        this.init(nom, age, niveau, pv, at, df, pieces);
        this.pp = 15;
        this.xpProvisoire = 0;
        this.xp = 0;
    };
    //description joueur
    Joueur.decrire = function() {
        var description = this.nom + " est au niveau " + this.niveau + " avec " + this.xp + " points d'expérience. Il a " + this.pv + " points de vie, " + this.at + " points d'attaque, " + this.df + " points de défense et " + this.pp + " points de pouvoir.";
        return description;
    };
    
    //combat
    Joueur.combattre = function (adversaire) {
        this.attaquer(adversaire);
        if (adversaire.pv === 0) {
            console.log(this.nom + " a battu " + adversaire.nom + " et gagne " + adversaire.valeur + " points d'expérience et " + adversaire.pieces + " pièces.");
            this.xp += adversaire.valeur;
            this.pieces += adversaire.pieces;
            if (this.xp >= this.xpProvisoire/1.5 + 10*this.niveau) {
                this.niveau ++;
                this.xpProvisoire = this.xp;
                console.log("Vous montez d'un niveau. Félicitation !");
            }
        }
    };
    
    
    
    var Adversaire = Object.create(Personnage);
    //intialiser adversaire
    Adversaire.initAdversaire = function (nom, age, niveau, pv, at, df, pieces, genre, valeur) {
        this.init(nom, age, niveau, pv, at, df, pieces);
        this.genre = genre;
        this.valeur = valeur;
    };
    
    
    
    var joueurP = Object.create(Joueur);
    joueurP.initJoueur(prompt("Comment s'appelle ton personnage :"), 21, 1, 50, 10, 10, 0);
    
    
    
    
    
    
    //test combat
    var adversaire1 = Object.create(Adversaire);
    adversaire1.initAdversaire("machinBidule", 67, 1, 20, 5, 5, 5, "Ancien", 15);
    
    console.log("Sans introduction : un adversaire. " + adversaire1.nom + ", un " + adversaire1.genre + " engage un combat. Battez-le !");
    
    while (adversaire1.pv > 0 & joueurP.pv > 0) {
        adversaire1.attaquer(joueurP);
        if (joueurP.pv > 0) {
            console.log(joueurP.nom + " réplique.");
            joueurP.combattre(adversaire1);
        };
    };
    
    if (joueurP.pv > 0) {
        console.log("Vous avez gagné. Vos caractéristiques actuelles sont :");
        console.log("- " + joueurP.decrire());
    }
    else {
        console.log("Vous avez perdu. Vos caractéristiques actuelles sont :");
        console.log("- " + joueurP.decrire());
    };
    
    //combat2
    var adversaire1 = Object.create(Adversaire);
    adversaire1.initAdversaire("machinBidule", 67, 1, 20, 5, 5, 5, "Ancien", 15);
    
    console.log("Sans introduction : un adversaire. " + adversaire1.nom + ", un " + adversaire1.genre + " engage un combat. Battez-le !");
    
    while (adversaire1.pv > 0 & joueurP.pv > 0) {
        adversaire1.attaquer(joueurP);
        if (joueurP.pv > 0) {
            console.log(joueurP.nom + " réplique.");
            joueurP.combattre(adversaire1);
        };
    };
    
    if (joueurP.pv > 0) {
        console.log("Vous avez gagné. Vos caractéristiques actuelles sont :");
        console.log("- " + joueurP.decrire());
    }
    else {
        console.log("Vous avez perdu. Vos caractéristiques actuelles sont :");
        console.log("- " + joueurP.decrire());
    };

    Ce que je cherche à faire est en fait assez simple, mais je ne trouve pas la réponse : en un premier temps, j'aimerai pouvoir inscrire ce que j'ai mis en console.log pour le moment, sur une page web blanche associée au code.

    J'espère être assez clair, si vous avez besoin de plus d'explication, n'hésitez pas à demander.

    Merci d'avance !! 

    • Partager sur Facebook
    • Partager sur Twitter
      14 août 2018 à 17:25:09

      Bah, manipulation du DOM second chapitre de ce cours :

      https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript/1918282-manipuler-le-code-html-partie-1-2

      Tu verras les selecteurs(document.querySelector('.taClasse');) et les propriétés .innerHTML ou .textContent qui te permettront de modifier le contenuer.

      Exemple on a une div de class='vie'

      var vie = document.querySelector('.vie');
      vie.innerHTML = '<p><b> 100 </b>pt de vie</p>';



      • Partager sur Facebook
      • Partager sur Twitter

      JavaScript dans HTML (sur la page web)

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown