XEngine démos

XEngine est un composé de 3 moteurs :

Vous trouvez ici des démonstrations pour chacun des moteurs de XEngine.
Télécharger XEngine

<== Retour à InfoD74

Exemple de détection de collisions

Voici un exemple d'utilisation de XPhysics pour détecter les collisions entre différents éléments graphiques.
Utilisez les flèches du clavier pour vous déplacer

var c_x = 0, c_y = 0, COMP_XY = 4;
var canvas  = $('#game');
canvas = $(canvas)[0];
var context = canvas.getContext('2d');
  	
/* Moteur physique */
xpe = XPhysics_Engine,
xpe.setDisplayDimensions($(canvas).width(), $(canvas).height());

/* Moteur graphique */
xde = XDisplay_Engine;
xde.setContext(context);
xde.setDimensions($(canvas).width(), $(canvas).height());

/* Rectangle control par le jouer */
var rect = new cloneObject(XDisplay_Geo, true);
rect.setColor('rgb(255, 128, 0)');
rect.setName('player');
rect.setCoords(0,20);
rect.setHitbox('circle',60);
rect.setCircle(60, true);
//ajout au moteur graphique
xde.addObject(rect);
//ajout au moteur physique
xpe.addObject(rect);

/* Rectangle basique */
var rect2 = new cloneObject(XDisplay_Geo, true);
rect2.setColor('rgb(255, 0, 255)');
rect2.setName('rect');
rect2.setCoords(60,60);
rect2.setHitbox('rect',60,50);
rect2.setRect(60, 50, true);
//ajout au moteur graphique
xde.addObject(rect2);
//ajout au moteur physique
xpe.addObject(rect2);

/* Rectangle basique */
var rect3 = new cloneObject(XDisplay_Geo, true);
rect3.setColor('rgb(10, 255, 10)');
rect3.setName('rect2');
rect3.setCoords(140,100);
rect3.setHitbox('rect',60);
rect3.setRect(60, 50, true);
//ajout au moteur graphique
xde.addObject(rect3);
//ajout au moteur physique
xpe.addObject(rect3);

/* Rectangle basique */
var circle = new cloneObject(XDisplay_Geo, true);
circle.setColor('rgb(10, 255, 10)');
circle.setName('circle');
circle.setCoords(200,160);
circle.setHitbox('circle',50,50);
circle.setCircle(50, true);
//ajout au moteur graphique
xde.addObject(circle);
//ajout au moteur physique
xpe.addObject(circle);

var text = new cloneObject(XDisplay_Text, true);
text.setColor('rgb(255, 0, 0)');
text.setName('collision');
text.setCoords(0,280);
text.setText('');
//ajout au moteur graphique
xde.addObject(text);
  	
/* Composantes de dplacement x et y suivant les touches appuyes */
$(document).keydown(function(event){
  	
  switch(event.keyCode)
  {
    case 38:
    	c_y = -COMP_XY;
    	event.preventDefault();
    break;
    	       
    case 40:
    	c_y = COMP_XY;
    	event.preventDefault();
    break;
    	       
    case 37:
    	c_x = -COMP_XY;
    	event.preventDefault();
    break;
    	       
    case 39:
    	c_x = COMP_XY;
    	event.preventDefault();
    break;
    	      
  }
       
}).keyup(function(event) {
 
  switch(event.keyCode)
  {
    case 38:
    case 40:
    	c_y = 0;
    break;
    	       
    case 37:
    case 39:
    	c_x = 0;
    break;
  }
                 
});

function display() {
  	
   xde.display();
  rect.x += c_x;
  rect.y += c_y;
  //collision ?
  var collisions = xpe.check_collision(rect);
  text.setText('Collision(s) : '+collisions.length); 
}

displaying = setInterval(display, 1000/xde.fps);