[CANVAS] Comment créer un but à l'objet

HenriLika

22 mai 2017 à 11:08:18

Bonjour,

j'écris ce topic car j'ai comme projet de réaliser un canvas animé.

Mon canvas a comme but d'atteindre le but : petit carré bleu

Pour ceux qui s'y connaissent j'aimerais savoir comment peut on faire cela et afficher une information

lorsque le but est atteint

Je vous fournit mon code

<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">

            window.onload = function() {
                // Variable qui correspond au canvas
                var monCanvas = document.getElementById("monCanvas");
                // Dimensions du canvas
                var width = monCanvas.width;
                var height = monCanvas.height;
                // contexte graphique 2D
                var ctx = monCanvas.getContext('2d');
				
				// Initialisation des coordoonéees de la cibl
				// var dessineFond = new dessineFond(Math.floor(Math.random() * 300), 270);


                // Inititialisation des coordonnées et vitesses du smiley
                var smiley = new Smiley(Math.floor(Math.random() * 300), 0, (10 * Math.random()) - 5, (10 * Math.random()) - 5);

                // Lancement de l'animation
                anime();

                function anime() {
                    // 1) On dessine le fond du canvas
                    dessineFond();

                    // 2) On déplace le smiley
                    smiley.deplaceToi();

                    // 3) On regarde si le smiley touche un mur
                    checkWallCollision(smiley);

                    // 3) On dessine le smiley
                    smiley.dessineToi();

                    // On demande une nouvelle frame d'animation
                    window.requestAnimationFrame(anime);
					
					
                }

                function dessineFond() {
                    // On efface l'écran
                    ctx.clearRect(0, 0, monCanvas.width, monCanvas.height);

                    //background
				    ctx.fillStyle = "black";
                    ctx.fillRect(0, 0, monCanvas.width, monCanvas.height);
                    ctx.beginPath();
                    ctx.fillStyle = "blue";
                    ctx.fillRect(270, 270, 30, 30);					

                    //box
                    ctx.strokeStyle = "#000000";
                    ctx.strokeRect(5, 5, 300, 300);
                }

                // fonction smiley qui stocke ses coordonnées et sa vitesse
                // et qui possède deux méthodes pour se dessiner et se déplacer
				
                function Smiley(x, y, vx, vy) {
                    this.x = x;
                    this.y = y;
                    this.vx = vx;
                    this.vy = vy;
                    this.radius = 0;

    this.dessineToi = function() {
        //smiley
          ctx.beginPath();
          ctx.fillStyle = "red";
          ctx.fillRect(this.x, this.y, 30, 30);
		  ctx.moveTo(this.x + 1, this.y + 1);
        ctx.lineWidth = 5;
        ctx.stroke();
    }; 
	                    this.deplaceToi = function() {
                        this.x += this.vx;
                        this.y += this.vy;
                    };
                }

                function checkWallCollision(objet) {
                    if (objet.x < objet.radius) {
                        objet.x = objet.radius;
                        objet.vx *= -1;
                    }
                    if (objet.x > width - (objet.radius)) {
                        objet.x = width - (objet.radius);
                        objet.vx *= -1;
                    }
                    if (objet.y < objet.radius) {
                        objet.y = objet.radius;
                        objet.vy *= -1;
                    }
                    if (objet.y > height - (objet.radius)) {
                        objet.y = height - (objet.radius);
                        objet.vy *= -1;
                    }
                }


            }
			
    </script>
  </head>
  

    <body>

        <canvas id="monCanvas" width="300" height="300">
            Votre navigateur ne supporte pas la balise HTML5 Canvas.
        </canvas>

    </body>

</html>

Merci àvous bonne journée

Krogoth

22 mai 2017 à 11:59:44

Bonjour,

Tu es sur que c'est TON code? Tu es capable de détecter les collisions avec les murs mais pas avec ton but??

Un petit +1 si je vous ai aidé est toujours appréciable :).

HenriLika

22 mai 2017 à 12:04:33

ca rebondit lors des contact avec le mur, mais ca ne considere pas le carre bleu comme un objet a part.

moi j'aimerais que le carre rouge ait comme but le carre bleu et que lorsque le rouge est arrivé sur bleu il s'arrete dessus

le code estbien le mien mais je me suis basé d'un autre de base

-
Edité par HenriLika 22 mai 2017 à 12:05:48

HenriLika

28 mai 2017 à 10:33:33

Up?

Arthur222

28 mai 2017 à 23:37:15

Comme ça :

function anime() { 
   //...
   if (!smiley.fini) smiley.deplaceToi();
   

function Smiley(x, y, vx, vy) {                    
        //...
        this.fini = false;


this.deplaceToi = function() {
    //...
    if ( this.x > 270 && this.y > 270 ) this.fini = true;
};

ninjavascript

29 mai 2017 à 9:49:07

Que veux tu faire exactement ?

Faire en sorte que ton carré rouge se déplace en direction du carré bleu quelque soient leurs positions dans le canvas ?

Le calcul de la direction devra être fait dynamiquement ?

-
Edité par ninjavascript 29 mai 2017 à 9:49:49