Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Offer me a good QML exercise
Forum Updated to NodeBB v4.3 + New Features

Offer me a good QML exercise

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
41 Posts 4 Posters 14.1k Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J.HilkJ J.Hilk

    @tomy hi,
    the first thing, that comes to my mind, seeing states and animations covered in this section, would be a basic an intersection similator.

    • Implementing the logic of trafic lights for the most efficient trafficflow
    • Car animation, picture of car, accelerating, decelerating or consistant speed depending on the current state of the traffic light
    • If you're feeling adventurous add a button for the User to insert cars into the system.

    Last part would most likly the most difficult one.

    But, thats just my idea, maybe someone else has a better one :)

    tomyT Offline
    tomyT Offline
    tomy
    wrote on last edited by tomy
    #4

    @J.Hilk
    Hi,
    It seems very good. A wide picture! It will be 3D I think.
    (Although I didn't mean only the last chapter, 5, all chapters 1 to 5!) :)

    Is it useful as well, or just a test criterion for me!? I'm ready to get my hands dirty but what about this idea:
    Up to now I've created a very good calculator program and a spreadsheet app using Qt. Although I'm not as familiar with QML as Qt but what's your opinion to plan the infrastructure of a good & useful QML app?
    If you agree, of course, I can fill the blanks of the puzzle (the whole useful program) using what I've learnt until now, and go on and complete the app alongside with reading and progressing with the next chapters of the book, until the program will be completed and useful for users.

    J.HilkJ 1 Reply Last reply
    0
    • J.HilkJ J.Hilk

      @tomy hi,
      the first thing, that comes to my mind, seeing states and animations covered in this section, would be a basic an intersection similator.

      • Implementing the logic of trafic lights for the most efficient trafficflow
      • Car animation, picture of car, accelerating, decelerating or consistant speed depending on the current state of the traffic light
      • If you're feeling adventurous add a button for the User to insert cars into the system.

      Last part would most likly the most difficult one.

      But, thats just my idea, maybe someone else has a better one :)

      tomyT Offline
      tomyT Offline
      tomy
      wrote on last edited by
      #5

      @J.Hilk
      Do you agree with my idea or is it better to have that intersection?

      1 Reply Last reply
      0
      • ? A Former User

        Hi! If you really have no idea, make a good old pocket calculator. Otherwise I'd say, don't waste your time on throw-away-code but start building something useful.

        tomyT Offline
        tomyT Offline
        tomy
        wrote on last edited by
        #6

        @Wieland
        I just saw that picture. That calculator is more advanced than mine that I've written by Qt. I bet it's very complex using QML. but anyway, since I have another calculator, this time I would like to work on some other thing.

        1 Reply Last reply
        0
        • tomyT tomy

          @J.Hilk
          Hi,
          It seems very good. A wide picture! It will be 3D I think.
          (Although I didn't mean only the last chapter, 5, all chapters 1 to 5!) :)

          Is it useful as well, or just a test criterion for me!? I'm ready to get my hands dirty but what about this idea:
          Up to now I've created a very good calculator program and a spreadsheet app using Qt. Although I'm not as familiar with QML as Qt but what's your opinion to plan the infrastructure of a good & useful QML app?
          If you agree, of course, I can fill the blanks of the puzzle (the whole useful program) using what I've learnt until now, and go on and complete the app alongside with reading and progressing with the next chapters of the book, until the program will be completed and useful for users.

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #7

          @tomy
          hi, sory for the late reply, I was away, friday till monday.

          3d is cool, I myself have jet to really do anything in 3D, so I would not be able to help you much.

          If you have a clear idea of an program in mind, that would be useful for you, than there is no need to go for the intersection.

          The intersection is just an idea for when you're bored. Go with your idea :-)


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          tomyT 1 Reply Last reply
          2
          • J.HilkJ J.Hilk

            @tomy
            hi, sory for the late reply, I was away, friday till monday.

            3d is cool, I myself have jet to really do anything in 3D, so I would not be able to help you much.

            If you have a clear idea of an program in mind, that would be useful for you, than there is no need to go for the intersection.

            The intersection is just an idea for when you're bored. Go with your idea :-)

            tomyT Offline
            tomyT Offline
            tomy
            wrote on last edited by
            #8

            @J.Hilk
            Hi my friend. Thanks for having you.

            What about a simple game. I've seen it but have forgotten its name for the time being but allow me please to describe it.

            There is room in which there is a ball. The gamer has a plate in hand at the bottom of the room. The ball comes down from up, naturally. The gamer moves the plate at the bottom of the room to the position the ball is coming down that way hitting and making it go up again. If the user doesn't move the plate properly and fast, the ball hits the bottom of the room and the game is over. With passing the time and the gamer's not allowing the ball to hit the bottom of the room, the speed of moving of the ball increases and the score of the user also goes upper! The winner between gamers is the one who gets the highest score.
            What do you think of this? :)

            J.HilkJ 1 Reply Last reply
            0
            • tomyT tomy

              @J.Hilk
              Hi my friend. Thanks for having you.

              What about a simple game. I've seen it but have forgotten its name for the time being but allow me please to describe it.

              There is room in which there is a ball. The gamer has a plate in hand at the bottom of the room. The ball comes down from up, naturally. The gamer moves the plate at the bottom of the room to the position the ball is coming down that way hitting and making it go up again. If the user doesn't move the plate properly and fast, the ball hits the bottom of the room and the game is over. With passing the time and the gamer's not allowing the ball to hit the bottom of the room, the speed of moving of the ball increases and the score of the user also goes upper! The winner between gamers is the one who gets the highest score.
              What do you think of this? :)

              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by
              #9

              @tomy you mean Pong ? :-)

              Go for it, always fun to recreate classic games in a fraction of the time the original took.


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              tomyT 1 Reply Last reply
              1
              • J.HilkJ J.Hilk

                @tomy you mean Pong ? :-)

                Go for it, always fun to recreate classic games in a fraction of the time the original took.

                tomyT Offline
                tomyT Offline
                tomy
                wrote on last edited by
                #10

                @J.Hilk
                Pong is much cooler but how to play such a two-player game on a smartphone? We need joysticks. So I go for the one-player version of the game.

                J.HilkJ 1 Reply Last reply
                1
                • tomyT tomy

                  @J.Hilk
                  Pong is much cooler but how to play such a two-player game on a smartphone? We need joysticks. So I go for the one-player version of the game.

                  J.HilkJ Offline
                  J.HilkJ Offline
                  J.Hilk
                  Moderators
                  wrote on last edited by
                  #11

                  @tomy ok,
                  but fyi, Most, if not all, smartphones have a multi touch screen, So it should be possible to play with 2 players.

                  alternatively, this could also be a good option for you to get into networking, to play on 2 phones via bluetooth or wlan. ;-)


                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                  Q: What's that?
                  A: It's blue light.
                  Q: What does it do?
                  A: It turns blue.

                  tomyT 2 Replies Last reply
                  1
                  • J.HilkJ J.Hilk

                    @tomy ok,
                    but fyi, Most, if not all, smartphones have a multi touch screen, So it should be possible to play with 2 players.

                    alternatively, this could also be a good option for you to get into networking, to play on 2 phones via bluetooth or wlan. ;-)

                    tomyT Offline
                    tomyT Offline
                    tomy
                    wrote on last edited by tomy
                    #12

                    @J.Hilk

                    alternatively, this could also be a good option for you to get into networking, to play on 2 phones via bluetooth or wlan. ;-)

                    I guess we have two parts, the first is designing the stuff and the last part is networking (via wlan).
                    I think it's too advanced for me, but I like it and go for that.

                    1 Reply Last reply
                    0
                    • J.HilkJ J.Hilk

                      @tomy ok,
                      but fyi, Most, if not all, smartphones have a multi touch screen, So it should be possible to play with 2 players.

                      alternatively, this could also be a good option for you to get into networking, to play on 2 phones via bluetooth or wlan. ;-)

                      tomyT Offline
                      tomyT Offline
                      tomy
                      wrote on last edited by tomy
                      #13

                      @J.Hilk

                      I started by a project named PingPong! I've reached that point up to now:

                      main.qml:

                      import QtQuick 2.8
                      import QtQuick.Window 2.2
                      
                      Window {
                          visible: true
                          width: 800
                          height: 600
                          title: qsTr("The Ping Pong game")
                      
                          Rectangle {
                              id: root
                              width: 700; height: 500
                              border.width: 10
                              border.color: "black"
                              color: "royalblue"
                              property int duration: 1000
                      
                         Racket {
                             x: 630; y: 100
                             color: "red"
                         }
                      
                         Racket {
                             x: 50; y: 100
                             color: "black"
                         }
                      
                         Ball {
                             id: ball
                             x: root.width/2 - 50
                             y: root.height/2
                         }
                      
                         Rectangle {
                             x: root.width/2
                             y: 10
                             width: 10
                             height: root.height - 20
                             color: "white"
                          }
                             
                        }
                      
                      }
                      

                      Ball.qml:

                      import QtQuick 2.8
                      
                      Rectangle {
                          width: 20; height: 20
                          x: 250; y: 250
                          color: "white"
                          radius: width/2
                      }
                      

                      Racket.qml:

                      import QtQuick 2.8
                      
                      Rectangle {
                          id: root
                          width: 15; height: 50
                          x: 400; y: 100
                          color: "red"
                      
                          MouseArea {
                              anchors.fill: parent
                              drag.target: root
                              drag.axis: Drag.YAxis
                              drag.minimumY: 10
                              drag.maximumY: 440
                          }
                      }
                      

                      I have this up to now:
                      0_1512464003457_Capture.PNG

                      The rackets work good with the mouse button but will they work as well with touching on smartphones?

                      Now what I need is animating the ball using Easing.Linear. The ball also should start animating when the program starts and recognizes the rackets and the top and down part of the table to reflect.
                      what should I read for these please?

                      J.HilkJ 1 Reply Last reply
                      2
                      • tomyT tomy

                        @J.Hilk

                        I started by a project named PingPong! I've reached that point up to now:

                        main.qml:

                        import QtQuick 2.8
                        import QtQuick.Window 2.2
                        
                        Window {
                            visible: true
                            width: 800
                            height: 600
                            title: qsTr("The Ping Pong game")
                        
                            Rectangle {
                                id: root
                                width: 700; height: 500
                                border.width: 10
                                border.color: "black"
                                color: "royalblue"
                                property int duration: 1000
                        
                           Racket {
                               x: 630; y: 100
                               color: "red"
                           }
                        
                           Racket {
                               x: 50; y: 100
                               color: "black"
                           }
                        
                           Ball {
                               id: ball
                               x: root.width/2 - 50
                               y: root.height/2
                           }
                        
                           Rectangle {
                               x: root.width/2
                               y: 10
                               width: 10
                               height: root.height - 20
                               color: "white"
                            }
                               
                          }
                        
                        }
                        

                        Ball.qml:

                        import QtQuick 2.8
                        
                        Rectangle {
                            width: 20; height: 20
                            x: 250; y: 250
                            color: "white"
                            radius: width/2
                        }
                        

                        Racket.qml:

                        import QtQuick 2.8
                        
                        Rectangle {
                            id: root
                            width: 15; height: 50
                            x: 400; y: 100
                            color: "red"
                        
                            MouseArea {
                                anchors.fill: parent
                                drag.target: root
                                drag.axis: Drag.YAxis
                                drag.minimumY: 10
                                drag.maximumY: 440
                            }
                        }
                        

                        I have this up to now:
                        0_1512464003457_Capture.PNG

                        The rackets work good with the mouse button but will they work as well with touching on smartphones?

                        Now what I need is animating the ball using Easing.Linear. The ball also should start animating when the program starts and recognizes the rackets and the top and down part of the table to reflect.
                        what should I read for these please?

                        J.HilkJ Offline
                        J.HilkJ Offline
                        J.Hilk
                        Moderators
                        wrote on last edited by
                        #14

                        @tomy
                        Hiho,

                        Internaly Qt does not differ between mouse clicks and touch events, so if it works fine with the mouse, than it should work fine on the phone display.

                        I don't think there is much to read upon for you, you should be able to do that "collision" with what you know.

                        E.g
                        You monitor the x-position of your ball. If it hits the x-position of one of the rackets, check if the y-positions of ball and racket overlap.
                        If yes : Stop old animation of ball and start new one if not, let animation finish and change score counter.


                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                        Q: What's that?
                        A: It's blue light.
                        Q: What does it do?
                        A: It turns blue.

                        tomyT 1 Reply Last reply
                        1
                        • J.HilkJ J.Hilk

                          @tomy
                          Hiho,

                          Internaly Qt does not differ between mouse clicks and touch events, so if it works fine with the mouse, than it should work fine on the phone display.

                          I don't think there is much to read upon for you, you should be able to do that "collision" with what you know.

                          E.g
                          You monitor the x-position of your ball. If it hits the x-position of one of the rackets, check if the y-positions of ball and racket overlap.
                          If yes : Stop old animation of ball and start new one if not, let animation finish and change score counter.

                          tomyT Offline
                          tomyT Offline
                          tomy
                          wrote on last edited by tomy
                          #15

                          @J.Hilk

                          For this point I changed the main.qml to this:

                          import QtQuick 2.8
                          import QtQuick.Window 2.2
                          
                          Window {
                              visible: true
                              width: 800
                              height: 600
                              title: qsTr("The Ping Pong game")
                          
                              Rectangle {
                                  id: root
                                  width: 700; height: 500
                                  border.width: 10
                                  border.color: "black"
                                  color: "royalblue"
                                  property int duration: 1000
                                  property real xPos: root.width
                                  property real yPos: Math.random()
                          
                             Racket {
                                 id: redRacket
                                 x: 630; y: 100
                                 color: "red"
                             }
                          
                             Racket {
                                 id: blackRacket
                                 x: 50; y: 100
                                 color: "black"
                             }
                          
                             Ball {
                                 id: ball
                                 x: root.width/2 - 50
                                 y: root.height/2
                             }
                          
                             Column {
                                 spacing: 3
                                 x: root.width/2
                                 y: 10
                          
                                   Repeater {
                                     model: 21
                                       delegate:  Rectangle {
                                                width: 5
                                                height: 20
                                                color: "white"
                                          }
                                       }
                               }
                          
                             ParallelAnimation {
                                      id: anim1
                                         NumberAnimation
                                         {
                                             target: ball
                                             properties: "x"
                                             to: root.xPos
                                             duration: root.duration
                                             easing.type: Easing.Linear
                                         }
                                         NumberAnimation
                                         {
                                             target: ball
                                             properties: "y"
                                             to: root.yPos
                                             duration: root.duration
                                             easing.type: Easing.Linear
                                         }
                                    }
                             function nextPos()
                             {
                               if(ball.x == redRacket.x && ball.y == redRacket.y)
                               {
                                   ParallelAnimation {
                                      id: anim2
                                         NumberAnimation
                                         {
                                             target: ball
                                             properties: "x"
                                             to: -root.xPos
                                             duration: root.duration
                                             easing.type: Easing.Linear
                                         }
                                         NumberAnimation
                                         {
                                             target: ball
                                             properties: "y"
                                             to: root.yPos
                                             duration: root.duration
                                             easing.type: Easing.Linear
                                         }
                                    }
                                }
                             }
                             
                              MouseArea {
                                  anchors.fill: ball
                                  onClicked:
                                  { anim1.restart(); anim2.restart() }
                              }
                            }
                          }
                          

                          The net is better and also I tried to make the ball animate on two opposite directions. But I get these errors:

                          qrc:/main.qml:76 Expected token ,'
                          qrc:/main.qml:78 Expected token `}'

                          By the way, the Math.random() function seems not to work!

                          J.HilkJ 1 Reply Last reply
                          2
                          • tomyT tomy

                            @J.Hilk

                            For this point I changed the main.qml to this:

                            import QtQuick 2.8
                            import QtQuick.Window 2.2
                            
                            Window {
                                visible: true
                                width: 800
                                height: 600
                                title: qsTr("The Ping Pong game")
                            
                                Rectangle {
                                    id: root
                                    width: 700; height: 500
                                    border.width: 10
                                    border.color: "black"
                                    color: "royalblue"
                                    property int duration: 1000
                                    property real xPos: root.width
                                    property real yPos: Math.random()
                            
                               Racket {
                                   id: redRacket
                                   x: 630; y: 100
                                   color: "red"
                               }
                            
                               Racket {
                                   id: blackRacket
                                   x: 50; y: 100
                                   color: "black"
                               }
                            
                               Ball {
                                   id: ball
                                   x: root.width/2 - 50
                                   y: root.height/2
                               }
                            
                               Column {
                                   spacing: 3
                                   x: root.width/2
                                   y: 10
                            
                                     Repeater {
                                       model: 21
                                         delegate:  Rectangle {
                                                  width: 5
                                                  height: 20
                                                  color: "white"
                                            }
                                         }
                                 }
                            
                               ParallelAnimation {
                                        id: anim1
                                           NumberAnimation
                                           {
                                               target: ball
                                               properties: "x"
                                               to: root.xPos
                                               duration: root.duration
                                               easing.type: Easing.Linear
                                           }
                                           NumberAnimation
                                           {
                                               target: ball
                                               properties: "y"
                                               to: root.yPos
                                               duration: root.duration
                                               easing.type: Easing.Linear
                                           }
                                      }
                               function nextPos()
                               {
                                 if(ball.x == redRacket.x && ball.y == redRacket.y)
                                 {
                                     ParallelAnimation {
                                        id: anim2
                                           NumberAnimation
                                           {
                                               target: ball
                                               properties: "x"
                                               to: -root.xPos
                                               duration: root.duration
                                               easing.type: Easing.Linear
                                           }
                                           NumberAnimation
                                           {
                                               target: ball
                                               properties: "y"
                                               to: root.yPos
                                               duration: root.duration
                                               easing.type: Easing.Linear
                                           }
                                      }
                                  }
                               }
                               
                                MouseArea {
                                    anchors.fill: ball
                                    onClicked:
                                    { anim1.restart(); anim2.restart() }
                                }
                              }
                            }
                            

                            The net is better and also I tried to make the ball animate on two opposite directions. But I get these errors:

                            qrc:/main.qml:76 Expected token ,'
                            qrc:/main.qml:78 Expected token `}'

                            By the way, the Math.random() function seems not to work!

                            J.HilkJ Offline
                            J.HilkJ Offline
                            J.Hilk
                            Moderators
                            wrote on last edited by
                            #16

                            @tomy
                            first of let me tell you, as a person with slight ocd-issues, the fact that your indenting is off, is driving me nuts x)

                            Anyway:

                            you define a function nextPos() and insinde the function-body you try to define a ParallelAnimation item and NumberAnimation items. That can't work.

                            only calculate assign values&properties in functions! Not new items.
                            In C++ you would, kind of, get way with it, but defenitly not in QML :-)


                            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                            Q: What's that?
                            A: It's blue light.
                            Q: What does it do?
                            A: It turns blue.

                            tomyT 1 Reply Last reply
                            2
                            • J.HilkJ J.Hilk

                              @tomy
                              first of let me tell you, as a person with slight ocd-issues, the fact that your indenting is off, is driving me nuts x)

                              Anyway:

                              you define a function nextPos() and insinde the function-body you try to define a ParallelAnimation item and NumberAnimation items. That can't work.

                              only calculate assign values&properties in functions! Not new items.
                              In C++ you would, kind of, get way with it, but defenitly not in QML :-)

                              tomyT Offline
                              tomyT Offline
                              tomy
                              wrote on last edited by
                              #17

                              @J.Hilk
                              Sorry, I don't know if there is an option that offer automatic indenting on Qt Creator. Do you mean the code looks ugly? :-)

                              Anyway,
                              The functions Math.random() and nextPos() and if-condition are fixed:

                              import QtQuick 2.8
                              import QtQuick.Window 2.2
                              
                              Window {
                                  visible: true
                                  width: 800
                                  height: 600
                                  title: qsTr("The Ping Pong game")
                              
                                  Rectangle {
                                      id: root
                                      width: 700; height: 500
                                      border.width: 10
                                      border.color: "black"
                                      color: "royalblue"
                                      property int duration: 1000
                                      property real xPos: root.width
                                      property real yPos: Math.random() * root.height
                              
                                 Racket {
                                     id: redRacket
                                     x: 630; y: 100
                                     color: "red"
                                 }
                              
                                 Racket {
                                     id: blackRacket
                                     x: 50; y: 100
                                     color: "black"
                                 }
                              
                                 Ball {
                                     id: ball
                                     x: root.width/2 - 50
                                     y: root.height/2
                                 }
                              
                                 Column {
                                     spacing: 3
                                     x: root.width/2
                                     y: 10
                                        Repeater {
                                          model: 21
                                           delegate: Rectangle {
                                                    width: 5
                                                    height: 20
                                                    color: "white"
                                                 }
                                           }
                                     }
                              
                                 ParallelAnimation {
                                    id: anim1
                                        NumberAnimation {
                                                 target: ball
                                                 properties: "x"
                                                 to: root.xPos
                                                 duration: root.duration
                                                 easing.type: Easing.Linear
                                             }
                                        NumberAnimation {
                                                 target: ball
                                                 properties: "y"
                                                 to: root.yPos
                                                 duration: root.duration
                                                 easing.type: Easing.Linear
                                             }
                                        }
                              
                                 ParallelAnimation {
                                    id: anim2
                                       NumberAnimation {
                                           target: ball
                                           properties: "x"
                                           to: -root.xPos
                                           duration: root.duration
                                           easing.type: Easing.Linear
                                       }
                                       NumberAnimation {
                                           target: ball
                                           properties: "y"
                                           to: root.yPos
                                           duration: root.duration
                                           easing.type: Easing.Linear
                                       }
                                  }
                              
                                 function nextPos() {
                              
                                   if(ball.x >= redRacket.x && ball.x <= redRacket.x + redRacket.height)
                                   {
                                     anim1.stop();
                                     anim2.start();
                                   }
                                 }
                              
                                  MouseArea {
                                      anchors.fill: ball
                                      onClicked: { anim1.start(); root.nextPos(); }
                                  }
                                }
                              }
                              

                              The x position of the ball is for when it hasn't been animated yet so it won't work in the condition. I need something like:

                              if (hit(ball,redRacket))
                              

                              The second is that in:

                              anim1.stop();
                              anim2.start();
                              

                              anim2.start() doesn't let anim1.start() work!

                              J.HilkJ 1 Reply Last reply
                              0
                              • tomyT tomy

                                @J.Hilk
                                Sorry, I don't know if there is an option that offer automatic indenting on Qt Creator. Do you mean the code looks ugly? :-)

                                Anyway,
                                The functions Math.random() and nextPos() and if-condition are fixed:

                                import QtQuick 2.8
                                import QtQuick.Window 2.2
                                
                                Window {
                                    visible: true
                                    width: 800
                                    height: 600
                                    title: qsTr("The Ping Pong game")
                                
                                    Rectangle {
                                        id: root
                                        width: 700; height: 500
                                        border.width: 10
                                        border.color: "black"
                                        color: "royalblue"
                                        property int duration: 1000
                                        property real xPos: root.width
                                        property real yPos: Math.random() * root.height
                                
                                   Racket {
                                       id: redRacket
                                       x: 630; y: 100
                                       color: "red"
                                   }
                                
                                   Racket {
                                       id: blackRacket
                                       x: 50; y: 100
                                       color: "black"
                                   }
                                
                                   Ball {
                                       id: ball
                                       x: root.width/2 - 50
                                       y: root.height/2
                                   }
                                
                                   Column {
                                       spacing: 3
                                       x: root.width/2
                                       y: 10
                                          Repeater {
                                            model: 21
                                             delegate: Rectangle {
                                                      width: 5
                                                      height: 20
                                                      color: "white"
                                                   }
                                             }
                                       }
                                
                                   ParallelAnimation {
                                      id: anim1
                                          NumberAnimation {
                                                   target: ball
                                                   properties: "x"
                                                   to: root.xPos
                                                   duration: root.duration
                                                   easing.type: Easing.Linear
                                               }
                                          NumberAnimation {
                                                   target: ball
                                                   properties: "y"
                                                   to: root.yPos
                                                   duration: root.duration
                                                   easing.type: Easing.Linear
                                               }
                                          }
                                
                                   ParallelAnimation {
                                      id: anim2
                                         NumberAnimation {
                                             target: ball
                                             properties: "x"
                                             to: -root.xPos
                                             duration: root.duration
                                             easing.type: Easing.Linear
                                         }
                                         NumberAnimation {
                                             target: ball
                                             properties: "y"
                                             to: root.yPos
                                             duration: root.duration
                                             easing.type: Easing.Linear
                                         }
                                    }
                                
                                   function nextPos() {
                                
                                     if(ball.x >= redRacket.x && ball.x <= redRacket.x + redRacket.height)
                                     {
                                       anim1.stop();
                                       anim2.start();
                                     }
                                   }
                                
                                    MouseArea {
                                        anchors.fill: ball
                                        onClicked: { anim1.start(); root.nextPos(); }
                                    }
                                  }
                                }
                                

                                The x position of the ball is for when it hasn't been animated yet so it won't work in the condition. I need something like:

                                if (hit(ball,redRacket))
                                

                                The second is that in:

                                anim1.stop();
                                anim2.start();
                                

                                anim2.start() doesn't let anim1.start() work!

                                J.HilkJ Offline
                                J.HilkJ Offline
                                J.Hilk
                                Moderators
                                wrote on last edited by J.Hilk
                                #18

                                @tomy Hiho

                                So, I took a look at your code. I'm not quite sure why it's not working like you want it to.
                                My guess would be, its quite difficult to click upon the ball when its in the window when its in the Racket.

                                So I simpliefied the situation a bit

                                I added 2 Properties and a timer to help:
                                The timer was needed in my testing, otherwise it would change animation an

                                property bool toTheRight: true
                                property bool delay: false
                                
                                Timer{
                                        id: delayTimer
                                        interval: 500; running:  false; repeat: false
                                        onTriggered: delay = false
                                }
                                onToTheRightChanged: {
                                        delay = true
                                        delayTimer.start()
                                }
                                

                                nextPos() was slighly changed, it currently only checks if the ball is past a line:

                                function nextPos() {
                                        if(!delay){
                                            if(ball.x + ball.width >= redRacket.x || ball.x <= blackRacket.x + blackRacket.width){
                                                toRight = !toRight
                                                console.log("Ball hits a racket")
                                                if(anim1.running)
                                                    anim1.stop()
                                                else
                                                    anim1.start()
                                
                                                if(anim2.running)
                                                    anim2.stop()
                                                else
                                                    anim2.start()
                                            }
                                       }
                                }
                                

                                The Ball item calls nextPos():

                                Ball {
                                       id: ball
                                       x: root.width/2 - 50
                                       y: root.height/2
                                       onXChanged: nextPos()
                                }
                                ...
                                MouseArea {
                                        anchors.fill: ball
                                        onClicked: { anim1.start(); /*root.nextPos();*/}
                                    }
                                

                                This works fine for me, its results in the ball pinging from one wall to the other.
                                Next step would be to add the player input conditions.

                                hope this helps.


                                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                Q: What's that?
                                A: It's blue light.
                                Q: What does it do?
                                A: It turns blue.

                                tomyT 1 Reply Last reply
                                2
                                • J.HilkJ J.Hilk

                                  @tomy Hiho

                                  So, I took a look at your code. I'm not quite sure why it's not working like you want it to.
                                  My guess would be, its quite difficult to click upon the ball when its in the window when its in the Racket.

                                  So I simpliefied the situation a bit

                                  I added 2 Properties and a timer to help:
                                  The timer was needed in my testing, otherwise it would change animation an

                                  property bool toTheRight: true
                                  property bool delay: false
                                  
                                  Timer{
                                          id: delayTimer
                                          interval: 500; running:  false; repeat: false
                                          onTriggered: delay = false
                                  }
                                  onToTheRightChanged: {
                                          delay = true
                                          delayTimer.start()
                                  }
                                  

                                  nextPos() was slighly changed, it currently only checks if the ball is past a line:

                                  function nextPos() {
                                          if(!delay){
                                              if(ball.x + ball.width >= redRacket.x || ball.x <= blackRacket.x + blackRacket.width){
                                                  toRight = !toRight
                                                  console.log("Ball hits a racket")
                                                  if(anim1.running)
                                                      anim1.stop()
                                                  else
                                                      anim1.start()
                                  
                                                  if(anim2.running)
                                                      anim2.stop()
                                                  else
                                                      anim2.start()
                                              }
                                         }
                                  }
                                  

                                  The Ball item calls nextPos():

                                  Ball {
                                         id: ball
                                         x: root.width/2 - 50
                                         y: root.height/2
                                         onXChanged: nextPos()
                                  }
                                  ...
                                  MouseArea {
                                          anchors.fill: ball
                                          onClicked: { anim1.start(); /*root.nextPos();*/}
                                      }
                                  

                                  This works fine for me, its results in the ball pinging from one wall to the other.
                                  Next step would be to add the player input conditions.

                                  hope this helps.

                                  tomyT Offline
                                  tomyT Offline
                                  tomy
                                  wrote on last edited by tomy
                                  #19

                                  @J.Hilk
                                  Thank you.
                                  Timer was very useful. I wrote this:

                                  import QtQuick 2.8
                                  import QtQuick.Window 2.2
                                  
                                  Window {
                                      visible: true
                                      width: 800
                                      height: 600
                                      title: qsTr("The Ping Pong game")
                                  
                                      Rectangle {
                                          id: table
                                          width: 700; height: 500
                                          border.width: 10
                                          border.color: "black"
                                          color: "royalblue"
                                  
                                     Racket {
                                         id: redRacket
                                         x: 630; y: 100
                                         color: "red"
                                     }
                                  
                                     Racket {
                                         id: blackRacket
                                         x: 50; y: 100
                                         color: "black"
                                     }
                                  
                                     Ball {
                                         id: ball
                                         x: table.width/2 - 50
                                         y: table.height/2
                                         property double ran: Math.random() + 0.5
                                         property double xincrement: ran
                                         property double yincrement: ran
                                     }
                                  
                                     Column {
                                         spacing: 3
                                         x: table.width/2
                                         y: 10
                                            Repeater {
                                              model: 21
                                               delegate: Rectangle {
                                                        width: 5
                                                        height: 20
                                                        color: "white"
                                                     }
                                               }
                                         }
                                  
                                     Timer {
                                       interval: 5; repeat: true; running: true
                                  
                                          onTriggered: {
                                              ball.x = ball.x + (ball.xincrement * 2.0);
                                              ball.y = ball.y + (ball.yincrement * 2.0);
                                  
                                              if((ball.x + ball.width  >= redRacket.x)  &&
                                                ((ball.y + ball.height >= redRacket.y)  &&
                                                 (ball.y + ball.height <= redRacket.y + redRacket.height)))
                                                     ball.xincrement *= (-1);
                                  
                                              if((ball.x - ball.width  <= blackRacket.x)  &&
                                                ((ball.y + ball.height >= blackRacket.y)  &&
                                                 (ball.y + ball.height <= blackRacket.y + blackRacket.height)))
                                                     ball.xincrement *= (-1);
                                  
                                               if(ball.y <= 0 || ball.y + ball.height >= table.height)
                                                    ball.yincrement *= (-1);
                                             }
                                          }
                                      }
                                   }
                                  

                                  It works fine but the players can't shoot the ball towards a target they want! The rackets are this way only for defending. I need to alter the code so that when the racket has speed upward or downward hitting the ball, the ball goes and gets acceleration on that direction. The real game has that feature.
                                  How can I do that, please?

                                  After that I'll go for other missing parts for the game.

                                  J.HilkJ 1 Reply Last reply
                                  0
                                  • tomyT tomy

                                    @J.Hilk
                                    Thank you.
                                    Timer was very useful. I wrote this:

                                    import QtQuick 2.8
                                    import QtQuick.Window 2.2
                                    
                                    Window {
                                        visible: true
                                        width: 800
                                        height: 600
                                        title: qsTr("The Ping Pong game")
                                    
                                        Rectangle {
                                            id: table
                                            width: 700; height: 500
                                            border.width: 10
                                            border.color: "black"
                                            color: "royalblue"
                                    
                                       Racket {
                                           id: redRacket
                                           x: 630; y: 100
                                           color: "red"
                                       }
                                    
                                       Racket {
                                           id: blackRacket
                                           x: 50; y: 100
                                           color: "black"
                                       }
                                    
                                       Ball {
                                           id: ball
                                           x: table.width/2 - 50
                                           y: table.height/2
                                           property double ran: Math.random() + 0.5
                                           property double xincrement: ran
                                           property double yincrement: ran
                                       }
                                    
                                       Column {
                                           spacing: 3
                                           x: table.width/2
                                           y: 10
                                              Repeater {
                                                model: 21
                                                 delegate: Rectangle {
                                                          width: 5
                                                          height: 20
                                                          color: "white"
                                                       }
                                                 }
                                           }
                                    
                                       Timer {
                                         interval: 5; repeat: true; running: true
                                    
                                            onTriggered: {
                                                ball.x = ball.x + (ball.xincrement * 2.0);
                                                ball.y = ball.y + (ball.yincrement * 2.0);
                                    
                                                if((ball.x + ball.width  >= redRacket.x)  &&
                                                  ((ball.y + ball.height >= redRacket.y)  &&
                                                   (ball.y + ball.height <= redRacket.y + redRacket.height)))
                                                       ball.xincrement *= (-1);
                                    
                                                if((ball.x - ball.width  <= blackRacket.x)  &&
                                                  ((ball.y + ball.height >= blackRacket.y)  &&
                                                   (ball.y + ball.height <= blackRacket.y + blackRacket.height)))
                                                       ball.xincrement *= (-1);
                                    
                                                 if(ball.y <= 0 || ball.y + ball.height >= table.height)
                                                      ball.yincrement *= (-1);
                                               }
                                            }
                                        }
                                     }
                                    

                                    It works fine but the players can't shoot the ball towards a target they want! The rackets are this way only for defending. I need to alter the code so that when the racket has speed upward or downward hitting the ball, the ball goes and gets acceleration on that direction. The real game has that feature.
                                    How can I do that, please?

                                    After that I'll go for other missing parts for the game.

                                    J.HilkJ Offline
                                    J.HilkJ Offline
                                    J.Hilk
                                    Moderators
                                    wrote on last edited by
                                    #20

                                    @tomy
                                    well, first you'll need to somehow monitor if the racket moved up or down as its last movement.

                                    I don't see how in the code examples you posted how you manage the "Racket-Movement" .

                                    but it doesn't matter much, it can be a property of the Racket Item

                                    #untested Stuff
                                    e.g:

                                    Rectangle {
                                           id: redRacket
                                           x: 630; y: 100
                                           color: "red"
                                    
                                           property int oldY: 100
                                           
                                           property bool upMovement: false
                                    
                                          onYChanged:{
                                              upMovement = y -oldY < 0  ? true : false
                                              oldY = y
                                          }
                                    
                                           width: 50
                                           height: 100
                                       }
                                    

                                    and when the Ball hits the racket you decrease the duration, and depending on the up or down movement you change the angle

                                    function onCollisionWithRacket(){
                                        root.duration = root.duration -10
                                        if(redRacket.upMovement){
                                            //Angle to the Top
                                        }else{
                                            //Angle to the bottom
                                        }
                                    }
                                    

                                    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                    Q: What's that?
                                    A: It's blue light.
                                    Q: What does it do?
                                    A: It turns blue.

                                    tomyT 1 Reply Last reply
                                    1
                                    • J.HilkJ J.Hilk

                                      @tomy
                                      well, first you'll need to somehow monitor if the racket moved up or down as its last movement.

                                      I don't see how in the code examples you posted how you manage the "Racket-Movement" .

                                      but it doesn't matter much, it can be a property of the Racket Item

                                      #untested Stuff
                                      e.g:

                                      Rectangle {
                                             id: redRacket
                                             x: 630; y: 100
                                             color: "red"
                                      
                                             property int oldY: 100
                                             
                                             property bool upMovement: false
                                      
                                            onYChanged:{
                                                upMovement = y -oldY < 0  ? true : false
                                                oldY = y
                                            }
                                      
                                             width: 50
                                             height: 100
                                         }
                                      

                                      and when the Ball hits the racket you decrease the duration, and depending on the up or down movement you change the angle

                                      function onCollisionWithRacket(){
                                          root.duration = root.duration -10
                                          if(redRacket.upMovement){
                                              //Angle to the Top
                                          }else{
                                              //Angle to the bottom
                                          }
                                      }
                                      
                                      tomyT Offline
                                      tomyT Offline
                                      tomy
                                      wrote on last edited by tomy
                                      #21

                                      @J.Hilk
                                      Thanks.
                                      I tried to make the work done and here is the code.
                                      I don't use the prior versions of the code (above) but this one.

                                      Ball.qml and Racket.qml are as before but main.qml is completely as below.

                                      As you see I haven't used a function and I don't know if it's needed or not.
                                      If possible please run that code to see its function. I don't think it's flawless.
                                      The code also to me is very messy. If it can make the work done using little changes, what to do for removing the problems from that please?

                                      import QtQuick 2.8
                                      import QtQuick.Window 2.2
                                      
                                      Window {
                                          visible: true
                                          width: 800
                                          height: 600
                                          title: qsTr("The PingPong Game")
                                      
                                          Rectangle {
                                              id: table
                                              width: 700; height: 500
                                              border.width: 10
                                              border.color: "black"
                                              color: "royalblue"
                                      
                                         Racket {
                                             id: redRacket
                                             x: 630; y: 100
                                             color: "red"
                                             property int  rOldy: y
                                             property bool rYmovement: false
                                             onYChanged: {
                                                 rYmovement = y - rOldy < 0 ? true : false
                                                 rOldy = y
                                             }
                                         }
                                      
                                         Racket {
                                             id: blackRacket
                                             x: 50; y: 100
                                             color: "black"
                                             property int  bOldy: y
                                             property bool bYmovement: false
                                             onYChanged: {
                                                 bYmovement = y - bOldy < 0 ? true : false
                                                 bOldy = y
                                             }
                                         }
                                      
                                         Ball {
                                             id: ball
                                             x: table.width/2 - 50
                                             y: table.height/2
                                             property double ran: Math.random() + 0.5
                                             property double xincrement: ran
                                             property double yincrement: ran
                                         }
                                      
                                         Column {
                                             spacing: 3
                                             x: table.width/2
                                             y: 10
                                                Repeater {
                                                  model: 21
                                                   delegate: Rectangle {
                                                            width: 5
                                                            height: 20
                                                            color: "white"
                                                         }
                                                   }
                                             }
                                      
                                         Timer {
                                           interval: 15; repeat: true; running: true
                                      
                                              onTriggered: {
                                                  ball.x = ball.x + (ball.xincrement * 2.0);
                                                  ball.y = ball.y + (ball.yincrement * 2.0);
                                      
                                                  if((ball.x + ball.width  >= redRacket.x)  &&
                                                    ((ball.y + ball.height >= redRacket.y)  &&
                                                     (ball.y + ball.height <= redRacket.y + redRacket.height)))
                                                      if(redRacket.rYmovement) {
                                                           ball.yincrement *= -1
                                                           ball.xincrement *= -1
                                                          redRacket.rYmovement = false
                                                         }
                                                       else ball.xincrement *= -1
                                      
                                                  if((ball.x - ball.width  <= blackRacket.x)  &&
                                                    ((ball.y + ball.height >= blackRacket.y)  &&
                                                     (ball.y + ball.height <= blackRacket.y + blackRacket.height)))
                                                      if(blackRacket.bYmovement) {
                                                           ball.yincrement *= -1
                                                           ball.xincrement *= -1
                                                          blackRacket.bYmovement = false
                                                         }
                                                       else ball.xincrement *= -1
                                      
                                                   if(ball.y <= 0 || ball.y + ball.height >= table.height)
                                                        ball.yincrement *= -1
                                                 }
                                             }
                                          }
                                       }
                                      
                                      
                                      J.HilkJ 1 Reply Last reply
                                      0
                                      • tomyT tomy

                                        @J.Hilk
                                        Thanks.
                                        I tried to make the work done and here is the code.
                                        I don't use the prior versions of the code (above) but this one.

                                        Ball.qml and Racket.qml are as before but main.qml is completely as below.

                                        As you see I haven't used a function and I don't know if it's needed or not.
                                        If possible please run that code to see its function. I don't think it's flawless.
                                        The code also to me is very messy. If it can make the work done using little changes, what to do for removing the problems from that please?

                                        import QtQuick 2.8
                                        import QtQuick.Window 2.2
                                        
                                        Window {
                                            visible: true
                                            width: 800
                                            height: 600
                                            title: qsTr("The PingPong Game")
                                        
                                            Rectangle {
                                                id: table
                                                width: 700; height: 500
                                                border.width: 10
                                                border.color: "black"
                                                color: "royalblue"
                                        
                                           Racket {
                                               id: redRacket
                                               x: 630; y: 100
                                               color: "red"
                                               property int  rOldy: y
                                               property bool rYmovement: false
                                               onYChanged: {
                                                   rYmovement = y - rOldy < 0 ? true : false
                                                   rOldy = y
                                               }
                                           }
                                        
                                           Racket {
                                               id: blackRacket
                                               x: 50; y: 100
                                               color: "black"
                                               property int  bOldy: y
                                               property bool bYmovement: false
                                               onYChanged: {
                                                   bYmovement = y - bOldy < 0 ? true : false
                                                   bOldy = y
                                               }
                                           }
                                        
                                           Ball {
                                               id: ball
                                               x: table.width/2 - 50
                                               y: table.height/2
                                               property double ran: Math.random() + 0.5
                                               property double xincrement: ran
                                               property double yincrement: ran
                                           }
                                        
                                           Column {
                                               spacing: 3
                                               x: table.width/2
                                               y: 10
                                                  Repeater {
                                                    model: 21
                                                     delegate: Rectangle {
                                                              width: 5
                                                              height: 20
                                                              color: "white"
                                                           }
                                                     }
                                               }
                                        
                                           Timer {
                                             interval: 15; repeat: true; running: true
                                        
                                                onTriggered: {
                                                    ball.x = ball.x + (ball.xincrement * 2.0);
                                                    ball.y = ball.y + (ball.yincrement * 2.0);
                                        
                                                    if((ball.x + ball.width  >= redRacket.x)  &&
                                                      ((ball.y + ball.height >= redRacket.y)  &&
                                                       (ball.y + ball.height <= redRacket.y + redRacket.height)))
                                                        if(redRacket.rYmovement) {
                                                             ball.yincrement *= -1
                                                             ball.xincrement *= -1
                                                            redRacket.rYmovement = false
                                                           }
                                                         else ball.xincrement *= -1
                                        
                                                    if((ball.x - ball.width  <= blackRacket.x)  &&
                                                      ((ball.y + ball.height >= blackRacket.y)  &&
                                                       (ball.y + ball.height <= blackRacket.y + blackRacket.height)))
                                                        if(blackRacket.bYmovement) {
                                                             ball.yincrement *= -1
                                                             ball.xincrement *= -1
                                                            blackRacket.bYmovement = false
                                                           }
                                                         else ball.xincrement *= -1
                                        
                                                     if(ball.y <= 0 || ball.y + ball.height >= table.height)
                                                          ball.yincrement *= -1
                                                   }
                                               }
                                            }
                                         }
                                        
                                        
                                        J.HilkJ Offline
                                        J.HilkJ Offline
                                        J.Hilk
                                        Moderators
                                        wrote on last edited by
                                        #22

                                        @tomy

                                        to make it a bit cleaner, if you for example moved some stuff to the Ball and Racket qml-files

                                        //Racket
                                        import QtQuick 2.8
                                        
                                        Rectangle {
                                            id: root
                                            width: 15; height: 50
                                            x: 400; y: 100
                                            color: "red"
                                        
                                            property int oldY: y
                                            property bool yMovement: false
                                            onYChanged: {
                                                yMovement = y - oldY < 0 ? true : false
                                                oldY = y
                                            }
                                        
                                            MouseArea {
                                                anchors.fill: parent
                                                drag.target: root
                                                drag.axis: Drag.YAxis
                                                drag.minimumY: 10
                                                drag.maximumY: 440
                                            }
                                        }
                                        
                                        //Ball.qml
                                        import QtQuick 2.8
                                        
                                        Rectangle {
                                            width: 20; height: 20
                                            x: 250; y: 250
                                            color: "white"
                                            radius: width/2
                                        
                                            property double ran: Math.random() + 0.5
                                            property double xincrement: ran
                                            property double yincrement: ran
                                        }
                                        

                                        Besides that I don't see what the problem is, theres at least 1 bug I run into whilst playing, x) but thats part of coding.

                                        If you thinks the animation is a but stuttery thats to be expected, you replaced a propertyanimation with a Timer and x/y changes.

                                        I believe, PropertyAnimation does some internal stuff to make the animation as smooth as possible, a change each refresh frame e.g. Where as with a timer aproeach you are fixed to 5 ms updates and in that you only increase the distance the ball is moved. That gonna look like jumps eventually ;-)


                                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                        Q: What's that?
                                        A: It's blue light.
                                        Q: What does it do?
                                        A: It turns blue.

                                        tomyT 1 Reply Last reply
                                        1
                                        • J.HilkJ J.Hilk

                                          @tomy

                                          to make it a bit cleaner, if you for example moved some stuff to the Ball and Racket qml-files

                                          //Racket
                                          import QtQuick 2.8
                                          
                                          Rectangle {
                                              id: root
                                              width: 15; height: 50
                                              x: 400; y: 100
                                              color: "red"
                                          
                                              property int oldY: y
                                              property bool yMovement: false
                                              onYChanged: {
                                                  yMovement = y - oldY < 0 ? true : false
                                                  oldY = y
                                              }
                                          
                                              MouseArea {
                                                  anchors.fill: parent
                                                  drag.target: root
                                                  drag.axis: Drag.YAxis
                                                  drag.minimumY: 10
                                                  drag.maximumY: 440
                                              }
                                          }
                                          
                                          //Ball.qml
                                          import QtQuick 2.8
                                          
                                          Rectangle {
                                              width: 20; height: 20
                                              x: 250; y: 250
                                              color: "white"
                                              radius: width/2
                                          
                                              property double ran: Math.random() + 0.5
                                              property double xincrement: ran
                                              property double yincrement: ran
                                          }
                                          

                                          Besides that I don't see what the problem is, theres at least 1 bug I run into whilst playing, x) but thats part of coding.

                                          If you thinks the animation is a but stuttery thats to be expected, you replaced a propertyanimation with a Timer and x/y changes.

                                          I believe, PropertyAnimation does some internal stuff to make the animation as smooth as possible, a change each refresh frame e.g. Where as with a timer aproeach you are fixed to 5 ms updates and in that you only increase the distance the ball is moved. That gonna look like jumps eventually ;-)

                                          tomyT Offline
                                          tomyT Offline
                                          tomy
                                          wrote on last edited by tomy
                                          #23

                                          @J.Hilk

                                          I replaced the PropertyAnimation with Timer because I didn't know how to achieve what I have now without Timer but with PropertyAnimation.
                                          The Timer works fine with smoothness but in this example I'd changed the interval from 2 to 15 to slow the movement of the ball for better testing.

                                          The game has defects even in this point unfortunately. And it's the feature of targeting.
                                          The if(redRacket.rYmovement) conditions code don't work as expected. I should think over them so that they work as needed.
                                          But a question here, does the y coordinate change relate to the "last" movement of the racket before the ball hits it?

                                          J.HilkJ 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved