Animation: déplacements par vecteurs

Avis et amélioration?

11 novembre 2010 à 15:25:06

Bonjour à tous!

Apprenant le javascript, je m'amuse à l'utiliser plutôt en animation, avec la balise canvas (HTML5). C'est fun!!!

Je viens de faire une 'tite boule qui se déplace par le biais d'une simulation d'un vecteur vitesse, qui augmente en fonction des directions du clavier.
Mais bon, chuis un peu en reste, je n'arrive pas à améliorer mon système de déplacement. D'autres langage de progr ont une classe vecteur simplifiant bien le boulot si l'on veut faire de l'anim en respectant un peu les lois de la physique, mais pas JS snif.

Du coup je joue uniquement sur l'abscisse et l'ordonnées de mon vecteur (ce qui marche déjà pas mal) mais j'aimerai bien avoir un vecteur vitesse qui grandirai avec les fleches + et - et un vecteur direction qui viendrait agir en perpendiculaire du vecteur vitesse.
Mais là je sêche....

Déjà, je suis preneur d'avis sur la manière dont j'ai codé mon début d'application. J'apprend le js seulement depuis quelques semaines, je ne sais pas encore si il y des manières de faire à proscrire etc...

Ensuite, si quelqu'un a une idée pour m'orienter dans ma recherche "vectorielle", je vous écoute!!! (et si je ne post pas au bon endroit pour cet aspect là, je refermerai la porte sans bruit...)

Merci d'avance et bon code!

voici le JS :

//----------------------- Initialisation canvas-----------------------------------//
var ctx;
var canvas;

function init() {
	canvas = document.getElementById("canvas_jeu");
 	ctx = canvas.getContext("2d");
 	return setInterval(draw, tempo);
	}


// --------------------------- VARIABLES -------------------------------------------//
var canvas_width = 800;
var canvas_height = 570;
var tempo = 10;

var taille_balle = 10; 
var balls = [] ;// tableau si on veut en faire plusieurs

// initialisation du vecteur vitesse
var v_x = 0; 
var v_y = 0;

 
// ------------------------------------- LES BALLES ---------------------------------------------------------// 

// Class vecteur -------//
function vecteur (x, y){
	this.x = x;
	this.y = y;	
}

// declaration vecteur vitesse
var vitesse = new vecteur (v_x, v_y);


// Class Ball ---------------------------------------------//
function Ball(balleX, balleY, taille_balle) {
	
	//Attributs -- //
	this.balleX = balleX;
	this.balleY = balleY;
	this.taille_balle = taille_balle;	

	
	// Deplacement balles --//
	this.move = function() {
	       
	        // Canvas Collide
	        if (this.balleX  + this.taille_balle > canvas_width) this.balleX = canvas_width - this.taille_balle;
	        else if (this.balleX - this.taille_balle< 0) this.balleX = 0 + this.taille_balle;
	        if (this.balleY + this.taille_balle > canvas_height) this.balleY = canvas_height - this.taille_balle;
	        else if (this.balleY - taille_balle < 0) this.balleY = 0 + this.taille_balle;
			
			// On avance
	        this.balleX += vitesse.x;
	      	this.balleY -= vitesse.y;
	}
		
	// drawing balls --//
 	this.drawing = function(){
 		ctx.fillStyle = "rgb(240,240,240)";
	    	
	    	//corps
	    	cercle(this.balleX, this.balleY, this.taille_balle);
	    	
	    	//queue
	    	cercle(this.balleX - 13*vitesse.x, this.balleY + 13*vitesse.y, 6);
	    	cercle(this.balleX - 22*vitesse.x, this.balleY + 22*vitesse.y, 3);
	}

}//end class Ball


		

// ------------------------------------- L'ANIMATION ---------------------------------------------------------//

//ball generation
function createBall() {
		balls.push(new Ball(100, 200, taille_balle));
}
createBall();


// Play
function draw(){
       
        // On efface la zone
        ctx.fillStyle = "rgb(0,0,0)";
        rect (0, 0, canvas_width, canvas_height)
        
        // parcours tableau balls pour animer                       
        for(var i = 0; i < balls.length; i++) {
			balls[i].move();
			balls[i].drawing();
        } 
       
}//fin draw




// lancement -------//
init();




// --------------------------------------- Clavier -----------------------------------------------------//

var coef_acceleration = 0.1; // pour faire avancer
var frein = 0.05;            // pour l'inertie


// Key down
document.onkeydown = function(e){
         if (e.keyCode == 38) vitesse.y += coef_acceleration; // up
		 if (e.keyCode == 37) vitesse.x -= coef_acceleration; // left
		 if (e.keyCode == 39) vitesse.x += coef_acceleration; // right
		 if (e.keyCode == 40) vitesse.y -= coef_acceleration; // down
		 if (e.keyCode == 32) createBall(); 
} 

// Key up       
document.onkeyup = function(e) {
		switch (e.keyCode) {
			case 38: // up
				v_y += frein;
				break;
			case 37: // left
				v_x -= frein;
				break;
			case 39: // right
				v_x += frein;
				break;
			case 40: // down
				v_y -= frein;
				break;
		}
}//*/



/   
// ------------------------------------------ FORME GEO-------------------------------------------------
         
         function cercle (x, y, r){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, (Math.PI/180)*360, true);
            ctx.fill();
         	}

En version complete avec HTML pour copier/coller directement dans un fichier html (a priori, non supporté par IE!)

<!DOCTYPE Html>
<html>
  <head>
    <title>Buballs</title>
    <style type="text/css">
      canvas { 
      		position: absolute;
      		top: 70px;
      		left: 200px;
      		border: 1px solid black;
      		-moz-border-radius: 10px 10px 10px 10px; 
			-webkit-border-radius: 10px 10px 10px 10px;          
			-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
			-webkit-border-top-right-radius: 10px; /* pour Chrome */
			box-shadow: 1px 1px 12px #555;      	
      }
    </style>
  </head>
  
  <body >
 	<p> Deplace moi avec les fleches <p>
	<canvas id="canvas_jeu" width="800" height="570" onmousemove="souris(event);"></canvas>
 	


<script type="text/javascript" src="buballs.js">



//----------------------- Initialisation canvas-----------------------------------//
var ctx;
var canvas;

function init() {
	canvas = document.getElementById("canvas_jeu");
 	ctx = canvas.getContext("2d");
 	return setInterval(draw, tempo);
	}


// --------------------------- VARIABLES -------------------------------------------//
var canvas_width = 800;
var canvas_height = 570;
var tempo = 10;

var taille_balle = 10; 
var balls = [] ;// tableau si on veut en faire plusieurs

// initialisation du vecteur vitesse
var v_x = 0; 
var v_y = 0;

 
// ------------------------------------- LES BALLES ---------------------------------------------------------// 

// Class vecteur -------//
function vecteur (x, y){
	this.x = x;
	this.y = y;	
}

// declaration vecteur vitesse
var vitesse = new vecteur (v_x, v_y);


// Class Ball ---------------------------------------------//
function Ball(balleX, balleY, taille_balle) {
	
	//Attributs -- //
	this.balleX = balleX;
	this.balleY = balleY;
	this.taille_balle = taille_balle;	

	
	// Deplacement balles --//
	this.move = function() {
	       
	        // Canvas Collide
	        if (this.balleX  + this.taille_balle > canvas_width) this.balleX = canvas_width - this.taille_balle;
	        else if (this.balleX - this.taille_balle< 0) this.balleX = 0 + this.taille_balle;
	        if (this.balleY + this.taille_balle > canvas_height) this.balleY = canvas_height - this.taille_balle;
	        else if (this.balleY - taille_balle < 0) this.balleY = 0 + this.taille_balle;
			
			// On avance
	        this.balleX += vitesse.x;
	      	this.balleY -= vitesse.y;
	}
		
	// drawing balls --//
 	this.drawing = function(){
 		ctx.fillStyle = "rgb(240,240,240)";
	    	
	    	//corps
	    	cercle(this.balleX, this.balleY, this.taille_balle);
	    	
	    	//queue
	    	cercle(this.balleX - 13*vitesse.x, this.balleY + 13*vitesse.y, 6);
	    	cercle(this.balleX - 22*vitesse.x, this.balleY + 22*vitesse.y, 3);
	}

}//end class Ball


		

// ------------------------------------- L'ANIMATION ---------------------------------------------------------//

//ball generation
function createBall() {
		balls.push(new Ball(100, 200, taille_balle));
}
createBall();


// Play
function draw(){
       
        // On efface la zone
        ctx.fillStyle = "rgb(0,0,0)";
        rect (0, 0, canvas_width, canvas_height)
        
        // parcours tableau balls pour animer                       
        for(var i = 0; i < balls.length; i++) {
			balls[i].move();
			balls[i].drawing();
        } 
       
}//fin draw




// lancement -------//
init();




// --------------------------------------- Clavier -----------------------------------------------------//

var coef_acceleration = 0.1; // pour faire avancer
var frein = 0.05;            // pour l'inertie


// Key down
document.onkeydown = function(e){
         if (e.keyCode == 38) vitesse.y += coef_acceleration; // up
		 if (e.keyCode == 37) vitesse.x -= coef_acceleration; // left
		 if (e.keyCode == 39) vitesse.x += coef_acceleration; // right
		 if (e.keyCode == 40) vitesse.y -= coef_acceleration; // down
		 if (e.keyCode == 32) createBall(); 
} 

// Key up       
document.onkeyup = function(e) {
		switch (e.keyCode) {
			case 38: // up
				v_y += frein;
				break;
			case 37: // left
				v_x -= frein;
				break;
			case 39: // right
				v_x += frein;
				break;
			case 40: // down
				v_y -= frein;
				break;
		}
}//*/



/   
// ------------------------------------------ FORME GEO-------------------------------------------------
         
         function cercle (x, y, r){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, (Math.PI/180)*360, true);
            ctx.fill();
         	}
	



</script>
  </body>
</html>

Tillertan

11 novembre 2010 à 15:44:36

Ta version HTML à copier coller ne marche pas du tout. Il manque plein de truc à priori, ou est la fonction Souris ?

Si on utilise <script type="text/javascript" src="buballs.js"> on met pas de JS dans la balise aussi sinon il n'est pas interprété.

valouxxx69

11 novembre 2010 à 15:55:52

ah fuck, j'ai oublié de virer le lien buballs.js (sur mon ordi, le html et le js sont séparé)
... et l'action souris qui servait pour la "v1", désolé.

Là le déplacement se fait par les fleches clavier, gérées à la fin du script.

---> code corrigé:

<!DOCTYPE Html>
<html>
  <head>
    <title>Buballs</title>
    <style type="text/css">
      canvas { 
      		position: absolute;
      		top: 70px;
      		left: 200px;
      		border: 1px solid black;
      		-moz-border-radius: 10px 10px 10px 10px; 
			-webkit-border-radius: 10px 10px 10px 10px;          
			-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
			-webkit-border-top-right-radius: 10px; /* pour Chrome */
			box-shadow: 1px 1px 12px #555;      	
      }
    </style>
  </head>
  
  <body >
 	<p> Deplace moi avec les fleches <p>
	<canvas id="canvas_jeu" width="800" height="570"></canvas>
 	<script type="text/javascript">
 	

//----------------------- Initialisation canvas-----------------------------------//
var ctx;
var canvas;

function init() {
	canvas = document.getElementById("canvas_jeu");
 	ctx = canvas.getContext("2d");
 	return setInterval(draw, tempo);
	}


// --------------------------- VARIABLES -------------------------------------------//
var canvas_width = 800;
var canvas_height = 570;
var tempo = 10;

var taille_balle = 10; 
var balls = [] ;// tableau si on veut en faire plusieurs

// initialisation du vecteur vitesse
var v_x = 0; 
var v_y = 0;

 
// ------------------------------------- LES BALLES ---------------------------------------------------------// 

// Class vecteur -------//
function vecteur (x, y){
	this.x = x;
	this.y = y;	
}

// declaration vecteur vitesse
var vitesse = new vecteur (v_x, v_y);


// Class Ball ---------------------------------------------//
function Ball(balleX, balleY, taille_balle) {
	
	//Attributs -- //
	this.balleX = balleX;
	this.balleY = balleY;
	this.taille_balle = taille_balle;	

	
	// Deplacement balles --//
	this.move = function() {
	       
	        // Canvas Collide
	        if (this.balleX  + this.taille_balle > canvas_width) this.balleX = canvas_width - this.taille_balle;
	        else if (this.balleX - this.taille_balle< 0) this.balleX = 0 + this.taille_balle;
	        if (this.balleY + this.taille_balle > canvas_height) this.balleY = canvas_height - this.taille_balle;
	        else if (this.balleY - taille_balle < 0) this.balleY = 0 + this.taille_balle;
			
			// On avance
	        this.balleX += vitesse.x;
	      	this.balleY -= vitesse.y;
	}
		
	// drawing balls --//
 	this.drawing = function(){
 			ctx.fillStyle = "rgb(240,240,240)";
	    	
	    	//corps
	    	cercle(this.balleX, this.balleY, this.taille_balle);
	    	
	    	//queue
	    	cercle(this.balleX - 13*vitesse.x, this.balleY + 13*vitesse.y, 6);
	    	cercle(this.balleX - 22*vitesse.x, this.balleY + 22*vitesse.y, 3);
	}

}//end class Ball


		

// ------------------------------------- L'ANIMATION ---------------------------------------------------------//

//ball generation
function createBall() {
		balls.push(new Ball(100, 200, taille_balle));
}
createBall();


// Play
function draw(){
       
        // On efface la zone
        ctx.fillStyle = "rgb(0,0,0)";
        rect (0, 0, canvas_width, canvas_height)
        
        // parcours tableau balls pour animer                       
        for(var i = 0; i < balls.length; i++) {
			balls[i].move();
			balls[i].drawing();
        } 
       
}//fin draw




// lancement -------//
init();




// --------------------------------------- Clavier -----------------------------------------------------//

var coef_acceleration = 0.1; // pour faire avancer
var frein = 0.05;            // pour l'inertie


// Key down
document.onkeydown = function(e){
         if (e.keyCode == 38) vitesse.y += coef_acceleration; // up
		 if (e.keyCode == 37) vitesse.x -= coef_acceleration; // left
		 if (e.keyCode == 39) vitesse.x += coef_acceleration; // right
		 if (e.keyCode == 40) vitesse.y -= coef_acceleration; // down
		 if (e.keyCode == 32) createBall(); 
} 

// Key up       
document.onkeyup = function(e) {
		switch (e.keyCode) {
			case 38: // up
				v_y += frein;
				break;
			case 37: // left
				v_x -= frein;
				break;
			case 39: // right
				v_x += frein;
				break;
			case 40: // down
				v_y -= frein;
				break;
		}
}//*/



///////////////////////////////////////////////////////////////////////////////////////////////////////   
// ------------------------------------------ FORME -------------------------------------------------//
///////////////////////////////////////////////////////////////////////////////////////////////////////

         function line (ax, ay, bx, by){
        	ctx.beginPath();
		 	ctx.moveTo(ax,ay);
		 	ctx.lineTo(bx,by);
		  	ctx.stroke();
          	} 
         function cercle (x, y, r){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, (Math.PI/180)*360, true);
            ctx.fill();
         	}
		function rect(x,y,w,h) {
 			ctx.beginPath();
 			ctx.rect(x,y,w,h);
 			ctx.closePath();
 			ctx.fill();
			}
 	
 	</script>
  </body>
</html>