15 juin 2011
3
15
/06
/juin
/2011
19:07
Cet article ajoute simplement quelques états
et petites animations (pas forcement très jolies) à ce qui a
déja été fait.
Voila donc le fichier jeuQml.qml complet:
import QtQuick 1.0
Rectangle {
id: terrain
width: 360
height: 380
property int xBall: 153
property int yBall: 129
color: "darkBlue"
ColorAnimation on color {
id: terrainColor1
to: "yellow"; duration: 2000
}
ColorAnimation on color {
id: terrainColor2
to: "darkGreen"; duration: 2000
}
ColorAnimation on color {
id: terrainColor3
to: "green"; duration: 3000
}
ColorAnimation on color {
id: terrainColor4
to: "darkBlue"; duration: 4000
}
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
ColorAnimation on color {
id: balleColor1
to: "darkGreen"; duration: 1000
}
ColorAnimation on color {
id: balleColor2
to: "pink"; duration: 3000
}
ColorAnimation on color {
id: balleColor3
to: "yellow"; duration: 2000
}
ColorAnimation on color {
id: balleColor4
to: "darkgrey"; duration: 6000
}
}
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
}
transitions:[
Transition {
from: "*";
to: "plus10";
NumberAnimation{
properties: "x,y";
easing.type : Easing.OutQuart
duration: 2000
}
},
Transition {
from: "*";
to: "GameOver";
NumberAnimation{
easing.amplitude: 1
easing.period: 0.42
properties: "x,y";
easing.type : Easing.OutElastic
duration: 2000
}
}
]
Text {
id: text4
x: 168
y: 8
text: "text"
font.pixelSize: 12
opacity: 0
}
states: [
State {
name: "plus10"
PropertyChanges {
target: text2
x: 36
y: 146
anchors.topMargin: 146
anchors.leftMargin: 36
}
PropertyChanges {
target: hero1
x: -57
y: 209
}
PropertyChanges {
target: balle
x: -52
y: 114
}
PropertyChanges {
target: hero2
x: 411
y: 146
}
PropertyChanges {
target: text3
x: 176
y: 146
anchors.topMargin: 146
anchors.rightMargin: 176
}
PropertyChanges {
target: rectangle1
x: 114
y: 260
width: 134
height: 57
radius: 13
}
PropertyChanges {
target: text1
text: "Restart"
}
},
State {
name: "GameOver"
PropertyChanges {
target: text2
x: 41
y: 183
anchors.topMargin: 183
anchors.leftMargin: 41
}
PropertyChanges {
target: hero1
x: -57
y: 209
}
PropertyChanges {
target: balle
x: -52
y: 114
}
PropertyChanges {
target: hero2
x: 411
y: 146
}
PropertyChanges {
target: text3
x: 176
y: 183
anchors.topMargin: 183
anchors.rightMargin: 176
}
PropertyChanges {
target: rectangle1
x: 113
y: 50
width: 134
height: 57
radius: "13"
}
PropertyChanges {
target: text1
text: "Restart"
}
PropertyChanges {
target: mouse_area1
x: 0
y: 0
anchors.topMargin: 0
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
}
PropertyChanges {
target: text4
x: 146
y: 7
text: "Game Over"
verticalAlignment: "AlignTop"
opacity: 1
}
}
]
function refaireLeMonde(){
deplacerHero();
deplacerHero2();
deplacerBalle();
testCollision();
gestionScore();
//Javascript.moveBall();
//Javascript.moveHero();
}
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
}
}
Ici on compte le nombre de fois que la balle
touche la raquette pour modifier la couleur de fond,
et on définit différents états représentant le jeu en marche (lance le timer)
ou à l'arret, etc...