Pong QML 2d Game part 2

Les deux éléments créés dans l'article précédent vont maintenant être utilisés dans le fichier principal.

Le fichier JeuQml.qml:

 import QtQuick 1.0  

 Rectangle { 

  id: terrain 

  width: 360 

  height: 380 

  property int xBall: 153 

  property int yBall: 129 

  color: "darkBlue" 

  property int nbTouches: 0; 

  Timer { 

  id: timerFrame 

  interval: 16; running: false; repeat: true 

  onTriggered: refaireLeMonde() 

  } 

  Hero{ 

  id: hero1 

  color: "#000000" 

  radius: 5 

  focus: true; 

  RotationAnimation on rotation { 

  id: raquetteAnim 

  loops: 1 

  from: 0 

  to: 360 

  } 

  } 

  Hero{ 

  id: hero2 

  x: 316 

  y: 187 

  color: "#000000" 

  radius: 5 

  } 

  Ballle{ 

  id: balle 

  x: 153 

  y: 129 

  width: 10 

  height: 10 

  } 

  Rectangle { 

  id: rectangle1 

  x: 0 

  y: 360 

  width: 360 

  height: 20 

  radius: 10 

  anchors.horizontalCenter: parent.horizontalCenter 

  gradient: Gradient { 

  GradientStop { 

  position: 0 

  color: "#2d46c6" 

  } 

  GradientStop { 

  position: 1 

  color: "#6eeef9" 

  } 

  } 

  Text { 

  id: text1 

  text: "Start" 

  anchors.centerIn: parent 

  font.pixelSize: 12 

  } 

  MouseArea { 

  id: mouse_area1 

  anchors.fill: parent 

  onClicked: 

  if(terrain.state == "plus10" || terrain.state == "GameOver"){ 

  balle.x = xBall; 

  balle.y = yBall; 

  terrain.state = "*" 

  nbTouches = 0; 

  rectangle1.opacity = 0.0; 

  timerFrame.running = true; 

  } 

  else{ 

  rectangle1.opacity = 0.0; 

  timerFrame.running = true; 

  } 

  } 

  } 

  Text { 

  id: text2 

  text: "Nombre de touches:" 

  anchors.left: parent.left 

  anchors.leftMargin: 0 

  anchors.top: parent.top 

  anchors.topMargin: 0 

  font.pixelSize: 12 

  } 

  Text { 

  id: text3 

  text: "0" 

  anchors.top: parent.top 

  anchors.topMargin: 0 

  anchors.right: parent.right 

  anchors.rightMargin: 0 

  font.pixelSize: 12 

  } 

 Le fichier n'est pas complet, on se contente ici de positionner les éléments 

 comme la balle, et les deux raquettes (hero1,hero2). 

 On a aussi a disposition des éléments d'interface pour l'utilisateur, 

 comme un texte qui servira à afficher les scores, et un bouton 

 permettant de lancer le jeu. 

 Un timer est aussi créé, il permettra de gérer les évènements 

 comme le déplacement des différents éléments de jeu, et fera appel 

 à une fonction de gestion des collisions. C'est ce timer qui sera lancé lors du click sur le bouton. 

 Les fonctions sont les suivantes: 

 function refaireLeMonde(){ 

  deplacerHero(); 

  deplacerHero2(); 

  deplacerBalle(); 

  testCollision(); 

  gestionScore(); 

  } 

  function gestionScore(){ 

  text3.text = nbTouches.toString(); 

  if(nbTouches > 10){ 

  timerFrame.stop(); 

  rectangle1.opacity = 1.0; 

  terrain.state = 'plus10'; 

  } 

  if(nbTouches == 2){ 

  terrainColor1.start(); 

  balleColor1.start(); 

  } 

  if(nbTouches == 5){ 

  terrainColor2.start(); 

  balleColor2.start(); 

  } 

  if(nbTouches == 7){ 

  terrainColor3.start(); 

  balleColor3.start(); 

  } 

  if(nbTouches == 9){ 

  terrainColor4.start(); 

  balleColor4.start(); 

  } 

  } 

  function testCollision(){ 

  // Contact raquette 

  if(balle.x < hero1.x + hero1.width 

  && balle.y + balle.milieu > hero1.y 

  && balle.y + balle.milieu < hero1.y +hero1.height){ 

  balle.vecteurX = !balle.vecteurX 

  nbTouches++; 

  raquetteAnim.start(); 

  } 

  else { 

  if(balle.x + balle.milieu > hero2.x 

  && balle.y + balle.milieu > hero2.y 

  && balle.y + balle.milieu < hero2.y +hero2.height) 

  balle.vecteurX = !balle.vecteurX 

  } 

  // Contact mur droit 

  if(balle.x + balle.width > terrain.width) 

  balle.vecteurX = !balle.vecteurX 

  // Contact mur gauche 

  if(balle.x < 0){ 

  balle.vecteurX = !balle.vecteurX 

  timerFrame.stop(); 

  rectangle1.opacity = 1.0; 

  terrain.state = "GameOver" 

  } 

  // Contact mur haut 

  if(balle.y < 0 

  || balle.y + balle.height > terrain.height) 

  balle.vecteurY = !balle.vecteurY 

  } 

  function deplacerBalle(){ 

  if(balle.vecteurX) 

  balle.x += 2 

  else balle.x -= 2 

  if(balle.vecteurY) 

  balle.y -= 2 

  else balle.y += 2 

  } 

  function deplacerHero2(){ 

  if(balle.y > hero2.y) 

  hero2.y += 2 

  if(balle.y < hero2.y) 

  hero2.y -= 2 

  } 

  function deplacerHero(){ 

  if(hero1.r) 

  hero1.x += 2 

  if(hero1.l) 

  hero1.x -= 2 

  if(hero1.u) 

  hero1.y -= 2 

  if(hero1.d) 

  hero1.y += 2 

  } 

 La fonction refaireLeMonde() est appelée par le timer. 

 Elle est elle même subdivisé en fonction simple: 

• deplacerHero() fait appel aux propriétés définies dans l'élément héro
• deplacerBaller() fait aussi appel aux propriétés définies dans l'élément Balle
• deplacerHero2() fait en sorte de suivre la balle betement
• testCollision() verifie toutes les collisions possibles avec le décors, et ses éléments.
• Finalement, gestionScore() n'est pas utile ici, mais le sera dans le prochain article.

 
 Prochain article (ajout de petites animations et d'états) : Pong QML 2d Game part 3