Posez votre question Signaler

Billard-francais en javascript

Messages postés
7
Date d'inscription
mardi 13 février 2018
Dernière intervention
26 février 2018
 -
Javascript / DHTML Posez votre question Signaler
Bonjour, j'ai fait un code de billard 3 boules, ça marche sur "firefox", j'aimerais le généraliser pour qu'il marche sur la plus-part des navigateurs: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>billard objet new</title>
    <style type="text/css">

p{
font-size:28px;
font-family:"Old English Fine";
color: rgb(220,220,220);
text-align:center;

}



</style>
  </head>

  <body  style="background-color:rgb(13,150,1);">
    <audio  src="boule2.wav" type="audio/wav">  
      
      <p>le navigateur n'admet pas HTML5 audio! Dommage!</p>
    </audio>
 <table rules="none">
 <tr>
 <td style="padding-top:0px;padding-left: 0px;"><canvas ></canvas></td>
 <td style="padding-left: 8px;" >
 
 
 <P>                                                                 
<FONT FACE="Old English Five"><FONT SIZE=6>BILLARD  FRANCAIS</FONT></FONT></P>
                               
 
 
 
 
 <div style="font-size:20px;text-align:center;">
 Pour lancer la boule du joueur, cliquer n'importe ou sur la table, la boule suivra la 
 droite qui va de son centre a l'extreme pointe de la souris</br></br> Pour revenir
 au debut du coup qui est en cours, il suffit d'enfoncer n'importe 
 quelle touche du clavier. Nous y sommes !  
 </div></td>
 </tr>
 </table>
    

    <script type="text/javascript">

 // setup canvas

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var width = canvas.width = 700;
var height = canvas.height = 440;


var d=35;
var D=0.996;
var band=0.85;
var vm=11.5;
var xl=0;
var yl=0;

var clik=false;
var touche=false;
var debut=true;
var volume=1;
var volumeAct=0.0;
var AudioContext = window.AudioContext;
var audioCtx = new AudioContext();
var myAudio = document.querySelector('audio');
var source = audioCtx.createMediaElementSource(myAudio);
var initialVol=1;




document.onclick=cliquer;
document.onkeydown=revenir;


function Ball(x, y, velX, velY, type) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.type = type;
  
}


Ball.prototype.draw = function() {

  
  ctx.beginPath();
 ctx.fillStyle="rgb(40,103,20)";                
 ctx.arc(this.x + d/20, this.y + d/20, d/2, 0, 2 * Math.PI);
 ctx.fill();
  
 ctx.beginPath();
 if (this.type==2) 
 ctx.fillStyle = "rgb(211,23,30)";
 else
 ctx.fillStyle = "rgb(200,200,255)";
 ctx.arc(this.x, this.y, d/2, 0, 2 * Math.PI);
 ctx.fill();
  
 ctx.beginPath();  
 ctx.fillStyle="rgb(255,255,255)";              
 ctx.arc(this.x-d/7, this.y-d/7, d/20, 0,2 * Math.PI);
 ctx.fill();

 if (this.type==1)   { 
 ctx.beginPath();
 ctx.fillStyle="rgb(0,0,0)";             
 ctx.arc(this.x+d/7, this.y+10, d/35, 0,2 * Math.PI);
 ctx.fill();
 }

 }


Ball.prototype.update = function() {
  
  if ((this.x + d/2) >= width) {
    this.velX = -band*(this.velX);
 this.x=width-d/2;
  }

  if ((this.x - d/2) <= 0) {
    this.velX = -band*(this.velX);
 this.x=0+d/2;
  }

  if ((this.y + d/2) >= height) {
    this.velY = -band*(this.velY);
 this.y = height-d/2;
  }

  if ((this.y - d/2) <= 0) {
    this.velY = -band*(this.velY);
 this.y=0+d/2;
  }
  this.velX= D * this.velX;
  this.velY= D * this.velY;
  this.x += this.velX;
  this.y += this.velY;
}

Ball.prototype.collisionDetect = function() {
  for (var j = 0; j < balls.length; j++) {
    if (!(this === balls[j])) {
 
      var dx = this.x - balls[j].x;
      var dy = this.y - balls[j].y;
      var distance = Math.sqrt(dx * dx + dy * dy);

 if (distance < d) {
var phi=Math.atan2(this.velY,this.velX);              
var alpha=Math.atan2(balls[j].y-this.y,balls[j].x-this.x);   

if (alpha<0)  {
alpha=alpha + Math.PI*2;
}
if (alpha>Math.PI*2)  {
alpha=alpha-Math.PI*2;
}

var gama=phi-alpha;                      
var phi1=Math.atan2(balls[j].velY,balls[j].velX);          
var gama1=phi1-alpha;                  
var mb=Math.sqrt(this.velX*this.velX+this.velY*this.velY);       
var ma=mb*Math.cos(gama); 
var mc=mb*Math.sin(gama);
var m1b1=Math.sqrt(balls[j].velX*balls[j].velX+balls[j].velY*balls[j].velY);
var m1a1=m1b1*Math.cos(gama1); 
var m1c1=m1b1*Math.sin(gama1);

this.velX=m1a1*Math.cos(phi1-gama1)+mc*Math.sin(Math.PI+phi-gama); 
this.velY=m1a1*Math.sin(phi1-gama1)-mc*Math.cos(Math.PI+phi-gama); 
balls[j].velX=ma*Math.cos(phi-gama)+m1c1*Math.sin(Math.PI+phi1-gama1);
balls[j].velY=ma*Math.sin(phi-gama)+m1c1*Math.cos(Math.PI+phi1-gama1);

this.x= this.x-( balls[j].x -this.x)/30;balls[j].x=balls[j].x+( balls[j].x -this.x)/30;
this.y= this.y-( balls[j].y -this.y)/30;balls[j].y=balls[j].y+( balls[j].y-this.y)/30;
   
volumeAct=volume*(ma+m1a1)/vm*1.15; 
bruit(); 
   }
    }
  }
}

Ball.prototype.depart = function() {
if (this.type==1)  {

var xa=this.x;
var ya=this.y;
var phi=Math.atan2(yl-ya,xl-xa);
  this.velX=vm*Math.cos(phi);
 this.velY=vm*Math.sin(phi);
 }
 clik=false;
}

var xm=[];
var ym=[];
var balls=[];
 
 function loop() {
 
 ctx.fillStyle = 'rgb(26,188,2)';

  ctx.fillRect(0, 0, width, height); 

var  n=0;
 
 if   (balls.length<3)  {
n=n+1;
 var ball = new Ball(150,150,0,0,n);
          balls.push(ball);
n=n+1;
 var ball = new Ball(150,290,0,0,n);
          balls.push(ball);
    
n=n+1;
 var ball = new Ball(550,220,0,0,n);
          balls.push(ball);    
  }
  
 

  for (var i = 0; i < balls.length; i++) {
    
  if (clik)  {
 balls[i].depart();
 }   
 balls[i].update();
 balls[i].collisionDetect();
 balls[i].draw();
  
 }

  requestAnimationFrame(loop);
 }

loop();


 function cliquer(event) {
 debut=false;
 document.title="x:"+event.pageX+"px, y:"+Math.floor(event.pageY)+"px";
 if (event.pageX<710&&event.pageX>10&&event.pageY<450&&event.pageY>10)  {  
  yl = event.pageY-10;                 
  xl = event.pageX-10;       

 for (var i = 0; i < balls.length; i++) {
xm[i]=balls[i].x;
ym[i]=balls[i].y;
 }
clik=true;  
}
 }


// define variables
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;
var songLength;


function getData() {
  source = audioCtx.createBufferSource();
  request = new XMLHttpRequest();
  request.open('GET', 'boule2.wav', true);
  request.responseType = 'arraybuffer';
  request.onload = function() {
    var audioData = request.response;
    audioCtx.decodeAudioData(audioData, function(buffer) {
        myBuffer = buffer;
        songLength = buffer.duration;
        source.buffer = myBuffer;
        source.playbackRate.value = 1;
        
        var nivo = audioCtx.createGain();
 source.connect(nivo);
 nivo.connect(audioCtx.destination);
  nivo.gain.value =volumeAct;
      },
      function(e){"erreur dans le decodage du son" + e.err});
  }
  request.send();
}

function bruit() {
  getData();
  source.start(0);
 
}
 
 
 function revenir()   {
 if (!debut)  {
for (var i = 0; i < balls.length; i++) {
balls[i].x=xm[i];
balls[i].y=ym[i];
balls[i].velX=0;
balls[i].velY=0;
}
}

} 

</script>
  </body>
</html>
Afficher la suite 

Votre réponse

Répondre au sujet

5 réponses

Meilleure réponse
Signaler Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
1
Merci
dans l'idée il faut utiliser new audio() au lancement de la page qui crée un objet audio en precisant le src du fichier et déjà on évitera de devoir faire une requête a chaque fois que le son est exécuté puis pour lancer le son (la fonction son) on utilise la méthode currentTime afin de positionné le son au début (0)puis un play() pour lancer le son quand au niveau de son il faut utilisé la méthode volume en définissant une valeur entre 0 pas de son et 1 son au maximum.

de cette façon ça devrait bien fonctionner

sinon j'ai essayé le jeux et il fonctionne bien les collision sont nickel.

rien ne sert de courir il faut partir a point.
cours Forest cours !

Merci @karamel 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 105 internautes ce mois-ci

Signaler Commenter la réponse de danBill7
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Dernière intervention
26 février 2018
 -
merci karamel !


je vai essayer ton idée, ca va me prendre un moment!

comment faire pour le rendre compatible avec d'autres navigateurs?

comment faire pour mettre sur le forum le fichier 'boule2.wav' (19,2 k)
Commenter la réponse de @karamel
Signaler Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
bonjour

je pense qu'en supprimant la partie audiocontexte et en remplacent le tout par un simple play() pour lancer le son sa doit suffir. 

document.querySelector('audio').play()
Commenter la réponse de @karamel
Signaler Commenter la réponse de danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Dernière intervention
26 février 2018
0
Merci
merci karamel !

je n'ai pas encore essayé ta suggestion, parceque je ne sais pas bien ou la placer ! est-ce-qu'elle remplace ma fonction 'bruit()'? qu'est ce que je fais avec le volume qui dépend de la force du choc?

est-ce que tu a fait marcher le jeu ? qu'en pense-tu ? il faut que je communique le fichier son : boule2.wav
Commenter la réponse de danBill7
Signaler Commenter la réponse de zimou130
Messages postés
3
Date d'inscription
vendredi 23 février 2018
Dernière intervention
24 février 2018
0
Merci
Bonjour j'essaie j'effet rétro mais soit ça fait sauter la bille soit elle se stop direct après avoir touché une autre bille .. Une aide svp ? Merci d'avance !

***Modération CCM
Signaler Commenter la réponse de danBill7
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Dernière intervention
26 février 2018
 -
bonjour

1 jouer sur 'firefox' pour l'instant
2 il n'y a pas d'effet rétro; on clique n'importe ou sur la table, le centre de la boule pointée va dans la direction de l'extrème pointe de la souri
3 si la boule pointée attaque une boule bille-en-tête toute son énergie est entièrement transmise à la boule touchée, et de se fait elle reste sur place après le choc
Commenter la réponse de zimou130
Signaler Commenter la réponse de danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Dernière intervention
26 février 2018
0
Merci
bonjour,

on peut jouer ici https://danbill7.github.io
Commenter la réponse de danBill7

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.