Initialisation de Quintus

var Q = new Quintus({
    development: true // On lance le mode développement, pour forcer le refresh des assets (images, fichiers JSON…). Attention à bien désactiver cela une fois en production !
})

Q.include([ // On indique quels composants inclure de base
    Quintus.Sprites, // Pour gérer les sprites (les calques en gros)
    Quintus.Scenes, // Pour gérer les scenes (les différentes pages, pour faire simple)
    Quintus.Anim, // Pour gérer les animations (sur des sprites, par exemple)
    Quintus['2D'], // Pour gérer la 2D : permet d'avoir des ennemis qui se déplacent et de détecter les collisions automatiquement
    Quintus.Input, // Pour gérer les contrôles (certains contrôles sont inclus de base, c'est assez pratique)
    Quintus.Touch, // Pour gérer les contrôles via une surcouche tactile (avec un joypad si nécessaire — c'est paramétrable)
    Quintus.UI // Pour afficher des boutons, du texte, etc.
])

var Q = new Quintus(/* Vos paramètres */).include([ /* Les composants */ ]);

/* Le premier paramètre permet d'indiquer l'id de notre canvas, vous pouvez aussi passer directement un objet du DOM ou ne rien spécifier si vous voulez que la librairie crée un canvas pour vous */
Q.setup('game', {
    maximize: false, // Inutile de modifier la taille du canvas (`true` permet d'étendre à toute la surface disponible)
    width: 300, // Largeur de base
    height: 320 // Hauteur de base
});

Q.controls();

Q.touch();

Q.scene('startGame', function(stage) { // On crée une nouvelle scène que l'on nomme. Une fois affichée la fonction sera appelée, avec en paramètre notre objet scène (dont on récupèrera quelques infos et auquel on balancera quelques objets)
    console.log('Écran de lancement affiché');
});

Q.stageScene('startGame', 0); // On affiche notre scène au rang 0, soit tout en bas de la pile (pensez à des calques, comme sous votre logiciel de dessin préféré ou à un z-index en CSS)

var sprite_bg = new Q.Sprite({ x: 0, y: 0, w: Q.width, h: Q.height, type: Q.SPRITE_UI });

sprite_bg.draw = function(ctx) { // Au moment de dessiner le sprite, on récupère le contexte 2D du canvas pour dessiner librement
    ctx.fillStyle = '#e0b232'; // On veut du jaune
    ctx.fillRect(this.p.x, this.p.y, this.p.w, this.p.h); // On dessine un rectangle de la taille du sprite
}

stage.insert(sprite_bg);

/* ----------
// Initialisation et paramétrisation de la librairie Quintus
----------*/

var Q = new Quintus({
    development: true // On lance le mode développement, pour forcer le refresh des assets (images, fichiers JSON…). Attention à bien désactiver cela une fois en production !
});

Q.include([ // On indique quels composants inclure de base
    Quintus.Sprites, // Pour gérer les sprites (les calques en gros)
    Quintus.Scenes, // Pour gérer les scenes (les différentes pages, pour faire simple)
    Quintus.Anim, // Pour gérer les animations (sur des sprites, par exemple)
    Quintus['2D'], // Pour gérer la 2D : permet d'avoir des ennemis qui se déplacent et de détecter les collisions automatiquement
    Quintus.Input, // Pour gérer les contrôles (certains contrôles sont inclus de base, c'est assez pratique)
    Quintus.Touch, // Pour gérer les contrôles via une surcouche tactile (avec un joypad si nécessaire — c'est paramétrable)
    Quintus.UI // Pour afficher des boutons, du texte, etc.
]);

Q.setup('gameCanvas', {
    maximize: false,
    width: 300,
    height: 320
});

Q.controls();
Q.touch();

/* ----------
Écran de démarrage du jeu 
----------*/

Q.scene('startGame', function(stage) {
    console.log('Écran de lancement affiché');
});

Q.stageScene('startGame', 0);

var sprite_bg = new Q.Sprite({ x: 0, y: 0, w: Q.width, h: Q.height, type: Q.SPRITE_UI });

sprite_bg.draw = function(ctx) { // Au moment de dessiner le sprite, on récupère le contexte 2D du canvas pour dessiner librement
    ctx.fillStyle = '#e0b232'; // On veut du jaune
    ctx.fillRect(this.p.x, this.p.y, this.p.w, this.p.h); // On dessine un rectangle de la taille du sprite
}

stage.insert(sprite_bg);

// # Quintus moving ball example
//
// [Run the example](../quintus/examples/ball/index.html)
//
// This is one of the simplest possible examples of using 
// Quintus that doesn't use the scene/stage functionality, 
// but rather just creates a single sprite and steps and 
// draws that sprite
//
// The goal of the example is to demonstrate the modularity
// of the engine and the ability to only include the components
// you actually need.


// Wait for the load event to start the game.
window.addEventListener("load",function() {

  // Create an instance of the engine, including only
  // the `Sprites` module, and then call setup to create a
  // canvas element on the page. If you already have a 
  // canvas element in your page, you can pass the element
  // or it's id as the first parameter to set up as well.
  var Q = window.Q =  Quintus().include("Sprites").setup({ width: 400, height: 400 });

  // The `MovingSprite` class is a descendant of the base `Sprite` class,
  // all it does is add in a step method to Sprite that runs the standard
  // 2D motion equations using properties vx, vy for the velocity and ax, ay 
  // to calculate the new x and y positions.
  Q.MovingSprite.extend("Ball",{
    // Sprites by default expect either a `sheet` or an `asset` property
    // to draw themselves, but by overriding the draw method you can draw a 
    // shape directly on the canvas instead. 
    draw: function(ctx) {
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.arc(-this.p.cx,
              -this.p.cy,
              this.p.w/2,0,Math.PI*2); 
      ctx.fill();

    }
  });

  // Create a new instance of the `Ball` Sprite,
  // passing in the size, position, velocity, and 
  // acceleration
  var ball = window.ball = new Q.Ball({ w:  20,  h:   20, 
                                        x:  30,  y:  300, 
                                       vx:  30, vy: -100, 
                                       ax:   0, ay:   30 });

  // You can start the game loop directly by
  // calling `gameLoop` with a callback and Quintus
  // will set up a requestAnimationFrame powered game loop
  // for you. Most examples don't call `gameLoop` directly as
  // calling `stageScene` will start a game loop that takes care
  // of clearing the canvas and updating and drawing all the stages
  // for you.
  Q.gameLoop(function(dt) {
      // Clear the canvas 
      Q.clear();

      // Move the ball `dt` forward in time
      ball.update(dt);

      // Render the ball onto the canvas context.
      ball.render(Q.ctx);
  });


  // ## Possible Experimentations:
  // 
  // 1. Try adding multiple balls of different positions and sizes
  //    and looping over them manually in game loop
  // 2. Change the clear color of the canvas
  // 3. Add in the `Scenes` module and create and stage a scene.
});

Uncaught ReferenceError: stage is not defined

document.querySelector('div').innerHTML = 'foo'

Q.scene('startGame', function(stage) {
    Q.stageScene('startGame', 0);

    var sprite_bg = new Q.Sprite({ x: 0, y: 0, w: Q.width, h: Q.height, type: Q.SPRITE_UI });

    sprite_bg.draw = function(ctx) { // Au moment de dessiner le sprite, on récupère le contexte 2D du canvas pour dessiner librement
        ctx.fillStyle = '#e0b232'; // On veut du jaune
        ctx.fillRect(this.p.x, this.p.y, this.p.w, this.p.h); // On dessine un rectangle de la taille du sprite
    }

    stage.insert(sprite_bg);
});

/* ----------
// Initialisation et paramétrisation de la librairie Quintus
----------*/

var Q = new Quintus({
    development: true // On lance le mode développement, pour forcer le refresh des assets (images, fichiers JSON…). Attention à bien désactiver cela une fois en production !
});

Q.include([ // On indique quels composants inclure de base
    Quintus.Sprites, // Pour gérer les sprites (les calques en gros)
    Quintus.Scenes, // Pour gérer les scenes (les différentes pages, pour faire simple)
    Quintus.Anim, // Pour gérer les animations (sur des sprites, par exemple)
    Quintus['2D'], // Pour gérer la 2D : permet d'avoir des ennemis qui se déplacent et de détecter les collisions automatiquement
    Quintus.Input, // Pour gérer les contrôles (certains contrôles sont inclus de base, c'est assez pratique)
    Quintus.Touch, // Pour gérer les contrôles via une surcouche tactile (avec un joypad si nécessaire — c'est paramétrable)
    Quintus.UI // Pour afficher des boutons, du texte, etc.
]);

Q.setup('gameCanvas', {
    maximize: false,
    width: 300,
    height: 320
});

Q.controls();
Q.touch();

/* ----------
Écran de démarrage du jeu 
----------*/

Q.scene('startGame', function(stage) {
    Q.stageScene('startGame', 0);

    var sprite_bg = new Q.Sprite({ x: 0, y: 0, w: Q.width, h: Q.height, type: Q.SPRITE_UI });

    sprite_bg.draw = function(ctx) { // Au moment de dessiner le sprite, on récupère le contexte 2D du canvas pour dessiner librement
        ctx.fillStyle = '#e0b232'; // On veut du jaune
        ctx.fillRect(this.p.x, this.p.y, this.p.w, this.p.h); // On dessine un rectangle de la taille du sprite
    }

    stage.insert(sprite_bg);
});

// # Quintus moving ball example
//
// [Run the example](../quintus/examples/ball/index.html)
//
// This is one of the simplest possible examples of using 
// Quintus that doesn't use the scene/stage functionality, 
// but rather just creates a single sprite and steps and 
// draws that sprite
//
// The goal of the example is to demonstrate the modularity
// of the engine and the ability to only include the components
// you actually need.


// Wait for the load event to start the game.
window.addEventListener("load",function() {

  // Create an instance of the engine, including only
  // the `Sprites` module, and then call setup to create a
  // canvas element on the page. If you already have a 
  // canvas element in your page, you can pass the element
  // or it's id as the first parameter to set up as well.
  var Q = window.Q =  Quintus().include("Sprites").setup({ width: 400, height: 400 });

  // The `MovingSprite` class is a descendant of the base `Sprite` class,
  // all it does is add in a step method to Sprite that runs the standard
  // 2D motion equations using properties vx, vy for the velocity and ax, ay 
  // to calculate the new x and y positions.
  Q.MovingSprite.extend("Ball",{
    // Sprites by default expect either a `sheet` or an `asset` property
    // to draw themselves, but by overriding the draw method you can draw a 
    // shape directly on the canvas instead. 
    draw: function(ctx) {
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.arc(-this.p.cx,
              -this.p.cy,
              this.p.w/2,0,Math.PI*2); 
      ctx.fill();

    }
  });

  // Create a new instance of the `Ball` Sprite,
  // passing in the size, position, velocity, and 
  // acceleration
  var ball = window.ball = new Q.Ball({ w:  20,  h:   20, 
                                        x:  30,  y:  300, 
                                       vx:  30, vy: -100, 
                                       ax:   0, ay:   30 });

  // You can start the game loop directly by
  // calling `gameLoop` with a callback and Quintus
  // will set up a requestAnimationFrame powered game loop
  // for you. Most examples don't call `gameLoop` directly as
  // calling `stageScene` will start a game loop that takes care
  // of clearing the canvas and updating and drawing all the stages
  // for you.
  Q.gameLoop(function(dt) {
      // Clear the canvas 
      Q.clear();

      // Move the ball `dt` forward in time
      ball.update(dt);

      // Render the ball onto the canvas context.
      ball.render(Q.ctx);
  });


  // ## Possible Experimentations:
  // 
  // 1. Try adding multiple balls of different positions and sizes
  //    and looping over them manually in game loop
  // 2. Change the clear color of the canvas
  // 3. Add in the `Scenes` module and create and stage a scene.
});