Partage
  • Partager sur Facebook
  • Partager sur Twitter

Jeu js/canvas : fonction tir buggée

elle accélère le jeu sous firefox

Sujet résolu
valouxxx69
    21 décembre 2010 à 14:15:46

    Salut à vous!

    Je suis en train de faire un jeu avec une balle qui peut tirer sur des cibles. La fonction de tir est activé par un booléen via un keydown. Mais voila, sous firefox, elle fait accélérer le jeu aléatoirement (sous safari, aucun soucis). Et je ne vois pas pourquoi ni comment l'écrire autrement. Si quelqu'un a une idée? merci mille fois, ça fait un moment que je sèche dessus.

    Bien à vous!

    la partie du code pour le tir:
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// --------------------------------------    LES TIRS    ----------------------------------------------------------//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// array de stockage
var tirs = [];
var tir = false;

// Class Tir ---------------------------//
function Tir (x, y, vitesse_x, vitesse_y){
		
		this.x = x;
		this.y = y;
		this.vitesse_x = vitesse_x;
		this.vitesse_y = vitesse_y;
       	    
	    this.move_draw = function(){
	    	this.x += this.vitesse_x*2;
	    	this.y -= this.vitesse_y*2;	   
	    	ctx.fillStyle = "rgb(230,0,20)";
	    	cercle(this.x, this.y, 4); 	
	    };
	   
	    this.errase = function(numero_tir){
	    	if (this.x < 0
	    	|| this.y < 0
	    	|| this.x > canvas_width
	    	|| this.y > canvas_height
	    	)tirs.splice(numero_tir, 1);
	    }; 
}// End Tir

// Fonction activée par le keyDown espace
function createTir(tir){
		// on recupere les coords de la balle et son deplacement
		if (tir) tirs.push (new Tir (balls[0].x, balls[0].y, vitesse.x, vitesse.y));
}

// Keys down ------------- CLAVIER ----------------------------//
document.onkeydown = function(e){
        if (e.keyCode == 38) modif_vitesse = 0.3;       // up      	
		if (e.keyCode == 40) modif_vitesse = -0.3;      // down
		if (e.keyCode == 37) modif_angle = -Math.PI/25; // left
		if (e.keyCode == 39) modif_angle = Math.PI/25;  // right
		if (e.keyCode == 32) { 
			//createTir();
			tir = true;// espace
		}
}; 

document.onkeyup = function(e){
	switch (e.keyCode) {
    case 38: // up
        modif_vitesse = 0;
        break;
    case 40: // down
        modif_vitesse = 0;
        break;
    case 37: // left
        modif_angle = 0;
        break;
    case 39: // right
        modif_angle = 0;
        break;
    case 32: // espace
    	tir = false;
    	break;
    }	
};


    Et le code js complet pour tester :
    // --------------------------------------------------- VARIABLES -------------------------------------------//

var ctx;
var canvas;
var canvas_width = 800;
var canvas_height = 570;
var tempo = 10; //pour la fonction setInterval
var compteur = 0; // pour gérer l'apprition des blocs

//------------------------------------------------ Initialisation canvas-----------------------------------//

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





// ------------ Trainée ------------------ //
/*
var trainees = [];

//class trainées
 function Trainee (x, y){
 	
 	this.x = x;
 	this.y = y;
 
 	this.draw = function (this.x, this.y){
 		ctx.fillStyle = "rgb(240,240,240)";
 			cercle(this.x, this.y, 10);
 	}	
} 


function createTrainee(){
if (compteur == 50){
 	trainees.push(new Trainee (balls[0].x, balls[0].y));
}
}
createTrainee();
 */
 
 
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// -------------------------------------    LA BALLE    ---------------------------------------------------------// 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var taille_balle = 10; 
var balls = [];


// Class Ball ---------------------------------------------//
function Ball(x, y, taille_balle) {    //up, down, gauche, droite
	
	//Attributs -- //
	this.x = x;
	this.y = y;
	this.taille_balle = taille_balle;
	
	
	// Deplacement balles --//
	this.move = function() {
	       
	        // Canvas Collide
	        if (this.x  + this.taille_balle > canvas_width) this.x = canvas_width - this.taille_balle;
	        else if (this.x - this.taille_balle< 0) this.x = 0 + this.taille_balle;
	        if (this.y + this.taille_balle > canvas_height) this.y = canvas_height - this.taille_balle;
	        else if (this.y - taille_balle < 0) this.y = 0 + this.taille_balle;
			
			norme_vitesse += modif_vitesse;
			angle += modif_angle;
			// on l'empeche de reculer
		 	if (norme_vitesse < 0) norme_vitesse = 0;
		 	// on limite la vitesse
		 	if (norme_vitesse > 6) norme_vitesse = 6;
         	
			vitesse.x = Math.sin (angle) * norme_vitesse;
			vitesse.y = Math.cos (angle) * norme_vitesse;

			// On avance
	        this.x += vitesse.x;
	      	this.y -= vitesse.y;
	};
	
	// Blocs collide
	this.checkCollide = function (bloc) {
			if ( this.x + this.taille_balle - vitesse.x <= bloc.x 
			|| this.x - this.taille_balle - vitesse.x >= bloc.x + bloc.L_bloc
			|| this.y + this. taille_balle + vitesse.y<= bloc.y
			|| this.y - this.taille_balle + vitesse.y >= bloc.y + bloc.H_bloc
			) collide = false;
			else collide = true;
			if (collide) stop_game();
	};
	
	// Cibles collide
	this.cible_collide = function(cible) {
		if ( this.x + this.taille_balle - vitesse.x <= cible.x 
			|| this.x - this.taille_balle - vitesse.x >= cible.x
			|| this.y + this. taille_balle + vitesse.y<= cible.y
			|| this.y - this.taille_balle + vitesse.y >= cible.y
			) collide = false;
			else collide = true;
			if (collide) stop_game();
	};

	
		
	// drawing balls --//
 	this.drawing = function(){
 			ctx.fillStyle = "rgb(240,240,240)";
 			ctx.strokeStyle = 'rgb(0,0,0)';
	    	
	    	//corps
	    	cercle(this.x, this.y, this.taille_balle);
	    	
	    	//queue
	    	if (modif_angle === 0) {
        		decalage_queue_x = 0;
        		decalage_queue_y = 0;
	    	} else if (modif_angle > 0) {
        		decalage_queue_x = -vitesse.y*2;
        		decalage_queue_y = vitesse.x*2;
    		} else {
        		decalage_queue_x = vitesse.y*2;
        		decalage_queue_y = -vitesse.x*2;
    		}
	    	
	    	cercle(this.x - 6*vitesse.x + decalage_queue_x, this.y + 6*vitesse.y - decalage_queue_y, 6);
	    	cercle(this.x - 11*vitesse.x, this.y + 11*vitesse.y, 3);
	    	line(this.x, this.y, this.x - 5*vitesse.x + decalage_queue_x, this.y + 5*vitesse.y - decalage_queue_y);
			line(this.x - 7*vitesse.x + decalage_queue_x, this.y + 7*vitesse.y - decalage_queue_y, this.x - 11*vitesse.x, this.y + 11*vitesse.y);
	
			//if (compteur % 5 == 0) cercle(this.x - 11*vitesse.x + 2, this.y + 11*vitesse.y + 2, 3);
			//if (compteur % 10 == 0) cercle(this.x - 11*vitesse.x - 2, this.y + 11*vitesse.y - 2, 3);
			
	
	};

}//end class Ball

//ball generation
function createBall() {
		balls.push(new Ball(20, 470, taille_balle));
		//balls.push(new Ball(500, 470, taille_balle));
}
createBall();



// ------------------------------------- GESTION DEPLACEMENT BALLE ---------------------------------------------------------// 

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

// Coordonnées vecteur vitesse de base
var v_x = 0;
var v_y = 2;

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

// norme du vecteur
var norme_vitesse = Math.sqrt(v_x^2 + v_y^2);
var modif_vitesse = 0;

// angle de départ
var angle = 0;
var modif_angle = 0;

// pour "courber" la queue de la balle quand elle tourne
var decalage_queue_x = 0;
var decalage_queue_y = 0;


// Keys down ------------- CLAVIER ----------------------------//
document.onkeydown = function(e){
        if (e.keyCode == 38) modif_vitesse = 0.3;       // up      	
		if (e.keyCode == 40) modif_vitesse = -0.3;      // down
		if (e.keyCode == 37) modif_angle = -Math.PI/25; // left
		if (e.keyCode == 39) modif_angle = Math.PI/25;  // right
		if (e.keyCode == 32) { 
			//createTir();
			tir = true;// espace
		}
}; 

document.onkeyup = function(e){
	switch (e.keyCode) {
    case 38: // up
        modif_vitesse = 0;
        break;
    case 40: // down
        modif_vitesse = 0;
        break;
    case 37: // left
        modif_angle = 0;
        break;
    case 39: // right
        modif_angle = 0;
        break;
    case 32: // espace
    	tir = false;
    	break;
    }	
};



//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// --------------------------------------        LES BLOCS     ---------------------------------------------------------//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// -------------------------------------- LES BLOCS HORIZONTAUX----------------------------------------------------------//

// array de stockage
var blocsH = [];

//Class Bloc
function BlocH (x, y, L_bloc, H_bloc, radius, color, vitesse) {

	this.x = x;
	this.y = y;
	this.L_bloc = L_bloc;
	this.H_bloc = H_bloc;
	this.color = color;
	this.radius = radius;
	this.vitesse = vitesse;
	
	this.move = function () {
		// on applique des déplacements différents au fil du temps (représenté par le compteur)
		if (compteur < 500) {
			this.x -= 1.5-this.vitesse*-2;
		}
		else if (compteur > 500 && compteur <= 1000 ) {
			this.x -=1.5-this.vitesse*2;
		} 
		else if (compteur > 1000 ){
			this.x -=2-this.vitesse*4;
			
		}
		else if (compteur > 1500){
			this.x -=1.5-this.vitesse*2;
		}
		else if (compteur > 2000){
			this.x -= 1.5-this.vitesse*-2;
		}	
	};
	
	// suppression des blocs s'ils sortent du canvas
	this.errase = function (numero_bloc){
		if (this.x< -200 || this.L_bloc < 5 || this.H_bloc<5) blocsH.splice(numero_bloc, 1);
	};
	
	this.draw = function() {
		ctx.fillStyle = 'rgb('+this.color+',200 ,'+this.color+')';
		roundedRect(this.x, this.y, this.L_bloc, this.H_bloc, this.radius);
	};
}// end blocs

function createBlocH() {
	// ---------------//     x          //        y           //   width   //  height // radius // color // vitesse     
	blocsH.push(new BlocH(canvas_width, random(canvas_height + 200) - 200, random(100), random(150), 5, random(100), Math.random()));
}

// -------------------------------------- LES BLOCS VERTICAUX----------------------------------------------------------//

// array de stockage
var blocsV = [];

//Class Bloc
function BlocV (x, y, L_bloc, H_bloc, radius, color, vitesse) {

	this.x = x;
	this.y = y;
	this.L_bloc = L_bloc;
	this.H_bloc = H_bloc;
	this.color = color;
	this.radius = radius;
	this.vitesse = vitesse;
	
	this.move = function () {
		// on applique des déplacements différents au fil du temps (représenté par le compteur)
		if (compteur < 500) {
			this.y -= 1.5-this.vitesse*-2;
		}
		else if (compteur > 500 && compteur <= 1000 ) {
			this.y -=1.5-this.vitesse*2;
		} 
		else if (compteur > 1000 ){
			this.y -=2-this.vitesse*4;
			this.x -= Math.random() - 1;
		}
		else if (compteur > 1500){
			this.y -=1.5-this.vitesse*2;
		}
		else if (compteur > 2000){
			this.y -= 1.5-this.vitesse*-2;
		}	
	};
	
	// suppression des blocs s'ils sortent du canvas
	this.errase = function (numero_bloc){
		if (this.y < -200  || this.L_bloc < 5 || this.H_bloc<5) blocsV.splice(numero_bloc, 1);
	};
	
	this.draw = function() {
		ctx.fillStyle = 'rgb('+this.color+',200 ,'+this.color+')';
		roundedRect(this.x, this.y, this.L_bloc, this.H_bloc, this.radius);
	};
}// end blocs

function createBlocV() {
	// ---------------//     x          //        y           //   width   //  height // radius // color // vitesse     
	blocsV.push(new BlocV(random(canvas_width), canvas_height, random(100), random(150), 5, random(100), Math.random()));
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// --------------------------------------- CIBLES ------------------------------------------------------------//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// array de stockage
var cibles = [];

// Class Cible ----------//
function Cible(x,y,rayon){
	this.x = x;
	this.y = y;
	
	// deplacement alternatif de la cible
	//var angle=0;
	//var pt_depart_x = this.x;
	//var pt_depart_y = this.y;
	
	//Move
	this.move_draw = function() {
		this.x--;
		//deplacement alternatif
		//this.x = this.rayon * Math.cos(angle) + pt_depart_x;
	    //this.y = this.rayon * Math.sin(angle) + pt_depart_y;
	    //angle += 0.05;
		ctx.fillStyle = "rgb(60,0,140)";
	    cercle(this.x, this.y, 10);
	};
	
	// Tirs collide
	this.collide = function(tir){
		if (tir.x  <= this.x - 10 
		|| tir.x >= this.x + 10
		|| tir.y <= this.y -10
		|| tir.y >= this.y +10){
			alive = true;
		}
		else{
			alive = false;
		}
	};
	
	// Blocs collide
	this.checkCollide = function (bloc) {
			if ( this.balleX + this.taille_balle - vitesse.x <= bloc.blocX 
			|| this.balleX - this.taille_balle - vitesse.x >= bloc.blocX + bloc.L_bloc
			|| this.balleY + this. taille_balle + vitesse.y<= bloc.blocY
			|| this.balleY - this.taille_balle + vitesse.y >= bloc.blocY + bloc.H_bloc
			) collide = false;
			else collide = true;
	}
	
	// Effacement
	this.errase = function(cible){
		if (!alive){
		cibles.splice(cible, 1);
		cibles.push( new Cible(800, 550, 30, 60));
		
		}
	};		 		
}// End class

// Generation des cibles
function createCible(){
	cibles.push( new Cible(800, 550, 30, 60));
	cibles.push( new Cible(900, 350, 50, 60));
	cibles.push( new Cible(840, 250, 60, 60));
	cibles.push( new Cible(970, 150, 80, 60));
}
createCible();


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// --------------------------------------    LES TIRS    ----------------------------------------------------------//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// array de stockage
var tirs = [];
var tir = false;

// Class Tir ---------------------------//
function Tir (x, y, vitesse_x, vitesse_y){
		
		this.x = x;
		this.y = y;
		this.vitesse_x = vitesse_x;
		this.vitesse_y = vitesse_y;
       	    
	    this.move_draw = function(){
	    	this.x += this.vitesse_x*2;
	    	this.y -= this.vitesse_y*2;	   
	    	ctx.fillStyle = "rgb(230,0,20)";
	    	cercle(this.x, this.y, 4); 	
	    };
	   
	    this.errase = function(numero_tir){
	    	if (this.x < 0
	    	|| this.y < 0
	    	|| this.x > canvas_width
	    	|| this.y > canvas_height
	    	)tirs.splice(numero_tir, 1);
	    }; 
}// End Tir

// Fonction activée par le keyDown espace
function createTir(tir){
		// on recupere les coords de la balle et son deplacement
		if (tir) tirs.push (new Tir (balls[0].x, balls[0].y, vitesse.x, vitesse.y));
}


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



// Play
function draw(){
       
        // On efface la zone
        ctx.fillStyle = "rgb(0,0,0)";
        rect (0, 0, canvas_width, canvas_height)
        
        // Score et gestion apparition des blocs
        compteur++;
		if (compteur % 40 == 0) {
			createBlocH();
			createBlocV();
		}
		 
       createTir(tir);
        
		// ------- Drawing & moving & collide -------- //                  
        
		// Balle
		for(var i = 0; i < balls.length; i++){
			balls[i].drawing();
			balls[i].move();
		}
		        
        // Blocs
        for (var j = 0; j < blocsH.length; j++) blocsH[j].draw();
        for (var k = 0; k < blocsV.length; k++) blocsV[k].draw();	

		// Collide blocs horizontaux
 		for(var i = 0; i < balls.length; i++) {
          	for (var j = 0; j < blocsH.length; j++) {	 
				collide = false;
				blocsH[j].move();
				balls[i].checkCollide(blocsH[j]);
				blocsH[j].errase(j);
			}
        }
        
        // Collide blocs verticaux
 		for(var i = 0; i < balls.length; i++) {
          	for (var k = 0; k < blocsV.length; k++) {	 
				collide = false;
				blocsV[k].move();
				balls[i].checkCollide(blocsV[k]);
				blocsV[k].errase(k);
			}
        }
        
        // Collide cible
        for(var i = 0; i < balls.length; i++) {
        	for (var c = 0; c < cibles.length; c++){
        		balls[i].cible_collide(cibles[c]);
        	}
        }
       
		// Tirs et cibles
		for (var c = 0; c < cibles.length; c++) cibles[c].move_draw();
		for (var t = 0; t < tirs.length; t++) tirs[t].move_draw();
		for (var c = 0; c < cibles.length; c++){
			for (var t = 0; t < tirs.length; t++){
				cibles[c].collide(tirs[t]);
				cibles[c].errase(c);
				tirs[t].errase(t);
			}
		}
		

		// Mise à jour du score
		updateStat();
		
}//fin draw


// ------------------------------ GAME GESTION --------------------------------------------- //


function updateStat() {
	document.getElementById('score').innerHTML = Math.round(compteur/100);
}

function stop_game(){
	clearInterval(launch);
	alert ('looser, t\'as perdu!');
	
	play_game();
}

function play_game (){
	balls = new Array();
	blocsH = new Array();
	blocsV = new Array();
	//var v_x = 0;
	var v_y = 2;
	var modif_angle = 0;
	modif_vitesse = 0;
	compteur = 0;
	createBall();
	init();
}
	



///////////////////////////////////////////////////////////////////////////////////////////////////////   
// ------------------------------------------ LIBRARY -------------------------------------------------//
///////////////////////////////////////////////////////////////////////////////////////////////////////

 
		function random(N) {
      		return (Math.floor((N)*Math.random()+1));
			}
        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();
			}
			
		function roundedRect(x,y,width,height,radius){
  			ctx.beginPath();
  			ctx.moveTo(x,y+radius);
 			ctx.lineTo(x,y+height-radius);
  			ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  			ctx.lineTo(x+width-radius,y+height);
  			ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  			ctx.lineTo(x+width,y+radius);
  			ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  			ctx.lineTo(x+radius,y);
  			ctx.quadraticCurveTo(x,y,x,y+radius);
 			 ctx.fill();
		}


    Et le htm associé :

    <!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> Up / down pour acceler et freiner</p>
  <p> Gauche / droite pour tourner </p>
  <p> Espace pour tirer </p>
  <p> Ne pas toucher les blocs !!! </p>
 	
 	<input type="submit" value="Start" onClick="init()"/>
 	
	<div>Score: <span id="score">0</span></div>

	<canvas id="canvas_jeu" width="800" height="570"></canvas>
 	
 	<script type="text/javascript" src="buballsVSblocs_Esquives.js"></script>
 	
  </body>
</html>
    • Partager sur Facebook
    • Partager sur Twitter
    Golmote
    • Javascript
      21 décembre 2010 à 14:55:11

      Ah, je t'avais bien dit qu'elle bugguait ta fonction ! :p

      Et si la dernière fois je ne parvenais pas à comprendre pourquoi, ça y est, eurêka, j'ai trouvé ! ^^


      En fait, quand tu cliques sur start, le bouton garde le focus...
      Et ensuite, chaque onkeyup sur la touche Espace appuie de nouveau sur le bouton start ! :p Donc ça "redémarre" le jeu, sans pour autant stopper le précédent. Résultat ça va deux fois plus vite à chaque fois ^^

      La solution est le code suivant :
      e.preventDefault();
      à mettre au début de tes fonctions onkeydown (au cas où) et onkeyup (vu que c'est elle qui entraîne le bug :p ). (Cette fonction est incompatible avec IE, mais je crois que tu t'en fiches :) )


      Soit dit en passant, tu as oublié de déclarer ta variable "launch" en globale, je crois. ;)
      • Partager sur Facebook
      • Partager sur Twitter
      valouxxx69
        21 décembre 2010 à 15:34:40

        roh t'es un chef ! ;)

        merci merci merci!!!

        J'aurai jamais trouvé un truc comme ça (mes connaissances sont encore très limitées).

        Ouais pour la compatibilité, j'm'en moque (tant que canvas ne sera pas supporté)

        Pour le launch je ne sais pas trop. J'ai essayé plusieurs technique de fonction init() avec le setInterval (sans en comprendre toute les subtilités)
        Je vais me repencher dessus de toute façon. Il faut que j'améliore le système : une vraie fonction de lancement / initialisation de jeu (Le bouton start n'est pas top (et pour preuve avec ce bug) c'était plus pour tester facilement le jeu en lui même. ) , une fonction de game over qui évitera cet insupportable pop-up, etc...

        Encore du boulot et des choses à apprendre quoi!!! :)

        a plus!
        • Partager sur Facebook
        • Partager sur Twitter

        Jeu js/canvas : fonction tir buggée

        × 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