IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

JavaScript tableau et animation


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2018
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2018
    Messages : 4
    Par défaut JavaScript tableau et animation
    Bonjour,
    je débute depuis peu en programmation . Je suis en train de réalisé un petit jeu en JavaScript, un genre de jeu de tir en 2D. Actuellement, j'essaie que mon personnage du jeu puisse tirer des balles, je n'arrive qu'à le faire tirer qu'une à la fois. J'ai fais des recherches un peu partout, et apparemment je dois utiliser un tableau. Sauf qu'à partir de là je n'y arrive pas du tout, je comprends pas le fonctionnement, et lorsque je copie et remplace les variables, ça ne marche pas. Donc je compte sur votre aide pour m'aider.

    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    function setup() {
      createCanvas(800,600)
      background(200)
    }
     
     
    var xr=50   //coordonnée x du gros rond (personnage)
    var yr=300  //coordonnée y du gros rond
    var ballela=false   //pas de balle tirée
     
     
    //Controle des deplacements du gros rond au fleches directionnels
    var rightPressed = false;
    var leftPressed = false;
    var upPressed= false;
    var downPressed= false;
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    function keyDownHandler(e) {
        if(e.keyCode == 39) {
            rightPressed = true;
        }
        else if(e.keyCode == 37) {
            leftPressed = true;
        }
        else if (e.keyCode ==40) {
            upPressed = true;
        }
        else if (e.keyCode==38) {
            downPressed=true
        }
    }
    function keyUpHandler(e) {
        if(e.keyCode == 39) {
            rightPressed = false;
        }
        else if(e.keyCode == 37) {
            leftPressed = false;
        }
        else if (e.keyCode==40) {
            upPressed=false
        }
        else if (e.keyCode==38) {
            downPressed=false
        }
    }
     
     
     
    function rond(){          //gros rond
      ellipse(xr,yr,50,50)
    }
    function curseur(){       //là ou on vise
      ellipse(mouseX,mouseY,20,20)
    }
    function tir(){
      xballe=xr           //la balle part du gros rond
      yballe=yr
      if (!ballela) {     //permet à la balle tirée de ne pas changer de direction
        xbd=xr            //xbd= coordonnée x de la balle au départ du tir
        ybd=yr            //ybd= coordonnée y de la balle au départ du tir
        xba=mouseX        //xba= coordonnée x de la balle à l'arrivé
        yba=mouseY        //yba= coordonnée y de la balle à l'arrivé
      }
      ballela=true        //déclenchement du tir
    }
    function balle(){
      if (ballela) {      // si la balle est tirée
        var dXM=sqrt(((xba-xbd)*(xba-xbd))+((yba-ybd)*(yba-ybd)))
        //distance départ-arrivé
        if (xballe<-5||yballe<-5||xballe>805||yballe>605) { //supression de la
          ballela=false                                     //balle si elle est
        }                                                   //sortie du canvas
        var tx=10*(xba-xbd)/dXM   //avancement x de la balle
        var ty=10*(yba-ybd)/dXM   //avancement y de la balle
        xballe=xballe+tx
        yballe=yballe+ty
        ellipse(xballe,yballe,5,5);   //dessin de la balle
      }
    }
     
     
    function draw() {
      rect(0,0,799,599)     //on efface tout
      if(rightPressed) {    // gros rond avance à droite
          xr = xr+7;
      }
      if(leftPressed) {     //gros rond avance à gauche
          xr=xr-7;
      }
      if (upPressed) {      //gros rond monte
          yr=yr+7
      }
      if (downPressed) {    //gros rond descend
          yr=yr-7
      }
      rond()
      curseur()
      if (mouseIsPressed) {   //quand on clique gauche
          tir()
      }
      balle()
    }
    merci!!

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Bonjour et bienvenue sur DVP.

    Ton code est insuffisant pour que l'on puisse vraiment se rendre compte de comment il fonctionne dans son contexte.
    Il faudrait donc que tu nous en montres plus, ce que tu as essayé de faire.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2018
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2018
    Messages : 4
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html lang="dr">
    <head>
      <meta http-equiv="X-UA-Compatible"content="IE=edge"/>
      <meta charser="utf-8">
      <title>p5.js></title>
      <link rel="stylesheet"href="style.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    </body>
    </html>
    j'ai ça dans mon html, mais sinon il est complet.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Ok il y a donc une lib embarquée, p5js, ce qui explique les manques.

    Je n'ai pas regardé plus avant cette lib mais dans l'état actuel il te faut à chaque nouveau tir mettre fin au tir en cours ce qui devrait se traduire par une rajout en tête de fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function tir(){
      ballela = false;   // mets fin au tir en cours
      xballe=xr           //la balle part du gros rond
      yballe=yr
      if (!ballela) {     //permet à la balle tirée de ne pas changer de direction
        xbd=xr            //xbd= coordonnée x de la balle au départ du tir
        ybd=yr            //ybd= coordonnée y de la balle au départ du tir
        xba=mouseX        //xba= coordonnée x de la balle à l'arrivé
        yba=mouseY        //yba= coordonnée y de la balle à l'arrivé
      }
      ballela=true        //déclenchement du tir
    }
    la deuxième chose que j'entrevois rapidement est que tu travailles avec des variables globales, sans déclaration avec le mot clé var par ailleurs, et que là il va te falloir gérer cela via un tableau d'objets, par exemple new Tir, pour les rendre indépendants.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2018
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2018
    Messages : 4
    Par défaut
    j'ai réussis à faire ce que j'avais voulu avec ce code :
    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    function setup() {
      createCanvas(800,600)
      background(200)
    }
     
     
    var xr=50
    var yr=300
    var tirs=[]
     
    var rightPressed = false;
    var leftPressed = false;
    var upPressed= false;
    var downPressed= false;
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    function keyDownHandler(e) {
        if(e.keyCode == 39) {
            rightPressed = true;
        }
        else if(e.keyCode == 37) {
            leftPressed = true;
        }
        else if (e.keyCode ==40) {
            upPressed = true;
        }
        else if (e.keyCode==38) {
            downPressed=true
        }
    }
    function keyUpHandler(e) {
        if(e.keyCode == 39) {
            rightPressed = false;
        }
        else if(e.keyCode == 37) {
            leftPressed = false;
        }
        else if (e.keyCode==40) {
            upPressed=false
        }
        else if (e.keyCode==38) {
            downPressed=false
        }
    }
     
     
     
    function rond(){
      ellipse(xr,yr,50,50)
    }
    function curseur(){
      ellipse(mouseX,mouseY,20,20)
    }
    function tir(){
      var xballe=xr
      var yballe=yr
      var dXM=sqrt(((mouseX-xr)*(mouseX-xr))+((mouseY-yr)*(mouseY-yr)))
      var tx=10*(mouseX-xr)/dXM
      var ty=10*(mouseY-yr)/dXM
      tirs.push (new Tir (xballe, yballe, tx, ty));
    }
     
    function Tir (xballe, yballe, tx, ty){
     
            this.xballe = xballe;
            this.yballe = yballe;
            this.tx = tx;
            this.ty = ty;
     
            this.draw = function(){
                this.xballe += this.tx;
                this.yballe += this.ty;
                ellipse(this.xballe,this.yballe,5,5);
            };
            this.errase = function(){
                if (this.xballe < 0
                || this.yballe < 0
                || this.xballe > 800
                || this.yballe > 600
                )tirs.splice();
            }
    }
     
    function draw() {
      rect(0,0,799,599)
      if(rightPressed) {
          xr = xr+7;
      }
      if(leftPressed) {
          xr=xr-7;
      }
      if (upPressed) {
          yr=yr+7
      }
      if (downPressed) {
          yr=yr-7
      }
      rond()
      curseur()
      if (mouseIsPressed) {
          tir()
      }
      for (var i = 0; i < tirs.length; i++) {
        tirs[i].draw()
      }
    }

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    C'est pas mal mais il y a quand même quelque chose qui ne va pas à savoir que tu crées des new Tir mais que jamais tu ne les détruits quand ils sont hors cadre.

    Ajoute en fin de ta fonction draw les lignes suivantes pour t'en rendre compte
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
      // juste pour voir
      textSize(20);
      fill(255, 0, 0);
      text("tirs.length : " + tirs.length, 10, 20);
    Il te faut donc tester si le Tir est dans le cadre, tu as fait l'ébauche avec this.errase = function(){ mais tu ne l'utilises pas, et donc détruire celui-ci si il a atteint les limites.

    J'aurais vu quelque chose comme, en ayant une méthode pour Tir
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    this.inCadre = function(){
        return !(this.xballe < 0 || this.yballe < 0 || this.xballe > 800 || this.yballe > 600 );
    }
    et en revoyant la fonction draw comme ceci
    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
    function draw() {
      //  rect(0,0,799,599)
      background(255); // utilisation fonction de la bibli
      if (rightPressed) {
        xr = xr + 7;
      }
      if (leftPressed) {
        xr = xr - 7;
      }
      if (upPressed) {
        yr = yr + 7;
      }
      if (downPressed) {
        yr = yr - 7;
      }
      rond();
      curseur();
      if (mouseIsPressed) {
        tir();
      }
    /* OUT 
        for (var i = 0; i < tirs.length; i++) {
          tirs[i].draw()
        }
    end OUT */
      var i = tirs.length;
      while (tirs[--i]) {
        if (tirs[i].inCadre()) {
          tirs[i].draw();
        }
        else {
          tirs.splice(i, 1);    // destruction élément qui n'est plus concerné
        }
      }
      // juste pour voir
      textSize(20);
      fill(255, 0, 0);
      text("tirs.length : " + tirs.length, 10, 20);
    }

  7. #7
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2018
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2018
    Messages : 4
    Par défaut
    C'est fait! Merci pour tes aides!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. parsing d'une variable javascript tableau
    Par Hydex dans le forum Général Python
    Réponses: 4
    Dernier message: 04/05/2010, 22h38
  2. Rollover javascript tableau
    Par sitschner dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 31/05/2008, 22h26
  3. Syntaxe PHP/Javascript, tableau
    Par Melimelo dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 13/06/2007, 13h36
  4. [JavaScript] tableau ayant pour clé la valeur de plusieurs colonnes
    Par killysui dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 17/04/2007, 13h23
  5. popup javascript sous une animation flash
    Par saint-pere dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/08/2006, 15h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo