QML Advanced Tutorial 3 - Implementing the Game Logic

Enabling mouse click interaction

To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called gameCanvas to samegame.qml. It replaces the background as the item which contains the blocks. It also accepts mouse input from the user. Here is the item code:

         Item {
             id: gameCanvas

             property int score: 0
             property int blockSize: 40

             width: parent.width - (parent.width % blockSize)
             height: parent.height - (parent.height % blockSize)
             anchors.centerIn: parent

             MouseArea {
                 anchors.fill: parent
                 onClicked: SameGame.handleClick(mouse.x, mouse.y)
             }
         }

The gameCanvas item is the exact size of the board, and has a score property and a MouseArea to handle mouse clicks. The blocks are now created as its children, and its dimensions are used to determine the board size so that the application scales to the available screen size. Since its size is bound to a multiple of blockSize, blockSize was moved out of samegame.js and into samegame.qml as a QML property. Note that it can still be accessed from the script.

When clicked, the MouseArea calls handleClick() in samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates gameCanvas.score with the current score if necessary. Here is the handleClick() function:

 function handleClick(xPos, yPos) {
     var column = Math.floor(xPos / gameCanvas.blockSize);
     var row = Math.floor(yPos / gameCanvas.blockSize);
     if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
         return;
     if (board[index(column, row)] == null)
         return;
     //If it's a valid block, remove it and all connected (does nothing if it's not connected)
     floodFill(column, row, -1);
     if (fillFound <= 0)
         return;
     gameCanvas.score += (fillFound - 1) * (fillFound - 1);
     shuffleDown();
     victoryCheck();
 }

Note that if score was a global variable in the samegame.js file you would not be able to bind to it. You can only bind to QML properties.

 function victoryCheck() {
     //Award bonus points if no blocks left
     var deservesBonus = true;
     for (var column = maxColumn - 1; column >= 0; column--)
         if (board[index(column, maxRow - 1)] != null)
         deservesBonus = false;
     if (deservesBonus)
         gameCanvas.score += 500;

     //Check whether game has finished
     if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1)))
         dialog.show("Game Over. Your score is " + gameCanvas.score);
 }

 import QtQuick 1.0

 Rectangle {
     id: container

     function show(text) {
         dialogText.text = text;
         container.opacity = 1;
     }

     function hide() {
         container.opacity = 0;
     }

     width: dialogText.width + 20
     height: dialogText.height + 20
     opacity: 0

     Text {
         id: dialogText
         anchors.centerIn: parent
         text: ""
     }

     MouseArea {
         anchors.fill: parent
         onClicked: hide();
     }
 }

     Dialog {
         id: dialog
         anchors.centerIn: parent
         z: 100
     }

 import QtQuick 1.0

 Item {
     id: block

     property int type: 0

     Image {
         id: img

         anchors.fill: parent
         source: {
             if (type == 0)
                 return "../shared/pics/redStone.png";
             else if (type == 1)
                 return "../shared/pics/blueStone.png";
             else
                 return "../shared/pics/greenStone.png";
         }
     }
 }

 import QtQuick 1.0
 import "samegame.js" as SameGame

 Rectangle {
     id: screen

     width: 490; height: 720

     SystemPalette { id: activePalette }

     Item {
         width: parent.width
         anchors { top: parent.top; bottom: toolBar.top }

         Image {
             id: background
             anchors.fill: parent
             source: "../shared/pics/background.jpg"
             fillMode: Image.PreserveAspectCrop
         }

         Item {
             id: gameCanvas

             property int score: 0
             property int blockSize: 40

             width: parent.width - (parent.width % blockSize)
             height: parent.height - (parent.height % blockSize)
             anchors.centerIn: parent

             MouseArea {
                 anchors.fill: parent
                 onClicked: SameGame.handleClick(mouse.x, mouse.y)
             }
         }
     }

     Dialog {
         id: dialog
         anchors.centerIn: parent
         z: 100
     }

     Rectangle {
         id: toolBar
         width: parent.width; height: 30
         color: activePalette.window
         anchors.bottom: screen.bottom

         Button {
             anchors { left: parent.left; verticalCenter: parent.verticalCenter }
             text: "New Game"
             onClicked: SameGame.startNewGame()
         }

         Text {
             id: score
             anchors { right: parent.right; verticalCenter: parent.verticalCenter }
             text: "Score: Who knows?"
         }
     }
 }