XEngine démos

XEngine est un composé de 3 moteurs :

• un moteur graphique HTML5 : xdisplay
• un moteur physique HTML5 : xphysics
• un moteur audio HTML5 : xaudio

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

• Accueil
• Afficher des formes graphiques basiques
• Jouer des animations
• Gestion du clavier
• Détecter les collisions
• Jouer du son

<== Retour à InfoD74

Exemple de gestion des contrôles au clavier

Utilisez les flèches du clavier pour vous déplacer

Code Javascript

var c_x = 0, c_y = 0, COMP_XY = 4;
var canvas  = $('#game');
canvas = $(canvas)[0];
var context = canvas.getContext('2d');
  	
/* Moteur graphique */
xde = XDisplay_Engine;
xde.setContext(context);
xde.setDimensions($(canvas).width(), $(canvas).height());

/* Ajoute un cercle */  	
var circle = new cloneObject(XDisplay_Geo, true);
circle.setColor('rgb(100, 255, 0)');
circle.setCoords(80,80);
circle.setCircle(40, true);
xde.addObject(circle);
  	
/* Composantes de déplacement x et y suivant les touches appuyées */
$(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() {
  //met à jour les coordonnées du cercle
  circle.x += c_x;
  circle.y += c_y;
  xde.display();
}

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