1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Billard-francais en javascript

danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Statut
Membre
Dernière intervention
26 février 2018
 - Modifié le 18 févr. 2018 à 19:12
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Statut
Membre
Dernière intervention
26 février 2018
 - 26 févr. 2018 à 18:26
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>

5 réponses

Réponse 1 / 5
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
 144
Modifié le 23 févr. 2018 à 20:26
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 !
1
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Statut
Membre
Dernière intervention
26 février 2018
24 févr. 2018 à 15:31
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)
0
Réponse 2 / 5
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
 144
20 févr. 2018 à 19:03
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()
0
Réponse 3 / 5
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Statut
Membre
Dernière intervention
26 février 2018
23 févr. 2018 à 16:54
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
0
Réponse 4 / 5
zimou130
Messages postés
3
Date d'inscription
vendredi 23 février 2018
Statut
Membre
Dernière intervention
24 février 2018
Modifié le 8 juin 2018 à 15:59
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
0
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Statut
Membre
Dernière intervention
26 février 2018
24 févr. 2018 à 15:12
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
danBill7
Messages postés
7
Date d'inscription
mardi 13 février 2018
Statut
Membre
Dernière intervention
26 février 2018
26 févr. 2018 à 18:26
bonjour,

on peut jouer ici https://danbill7.github.io
0