JavaScript tableau et animation

Version imprimable

Bonjour,:salut:
je débute depuis peu en programmation:ptdr: . 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.:calim2: 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.:lol:

Code:

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!!:mrgreen:

26/11/2018, 16h15
NoSmoking

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.

Code:

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.

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:

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.

j'ai réussis à faire ce que j'avais voulu avec ce code :

Code:

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()
  }
}

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:

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:

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:

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);
}

27/11/2018, 19h14
nrrrobert

C'est fait! Merci pour tes aides!:mrgreen::merci: