diff options
Diffstat (limited to 'doc/src/declarative/advtutorial.qdoc')
| -rw-r--r-- | doc/src/declarative/advtutorial.qdoc | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/doc/src/declarative/advtutorial.qdoc b/doc/src/declarative/advtutorial.qdoc index 598f47b..4807fd2 100644 --- a/doc/src/declarative/advtutorial.qdoc +++ b/doc/src/declarative/advtutorial.qdoc @@ -160,25 +160,25 @@ we cannot use \l Repeater to define the blocks. Instead, we will create the blocks in JavaScript. Here is the JavaScript code for generating the blocks, contained in a new -file, \c samegame.js: +file, \c samegame.js. The code is explained below. \snippet declarative/tutorials/samegame/samegame2/samegame.js 0 -The main function here is \c initBoard(). It creates an array to store all the game -blocks, then calls \c createBlock() to create enough blocks to fill the game canvas. +The \c startNewGame() function deletes the blocks created in the previous game and +calculates the number of rows and columns of blocks required to fill the game window for the new game. +Then, it creates an array to store all the game +blocks, and calls \c createBlock() to create enough blocks to fill the game window. -The \c createBlock() function creates a block using the \c Block.qml file +The \c createBlock() function creates a block from the \c Block.qml file and moves the new block to its position on the game canvas. This involves several steps: \list -\o \l {createComponent(url file)} is called to generate an element from \c Block.qml. +\o \l {createComponent(url file)}{createComponent()} is called to generate an element from \c Block.qml. If the component is ready, we can call \c createObject() to create an instance of the \c Block item. - (If a component is loaded remotely - over HTTP for example - then we would have to wait for the - component to finish loading before calling \c createObject()). \o If \c createObject() returned null (i.e. if there was an error while loading the object), print the error information. \o Place the block in its position on the board and set its width and height. - Also, store in the blocks array for future reference. + Also, store it in the blocks array for future reference. \o Finally, print error information to the console if the component could not be loaded for some reason (for example, if the file is missing). \endlist @@ -193,13 +193,13 @@ the JavaScript file as a \l{Modules#QML Modules}{module}: \snippet declarative/tutorials/samegame/samegame2/samegame.qml 2 This allows us to refer to any functions within \c samegame.js using "SameGame" -as a prefix: for example, \c SameGame.initBoard() or \c SameGame.createBlock(). -This means we can now connect the New Game button's \c onClicked handler to the \c initBoard() +as a prefix: for example, \c SameGame.startNewGame() or \c SameGame.createBlock(). +This means we can now connect the New Game button's \c onClicked handler to the \c startNewGame() function, like this: \snippet declarative/tutorials/samegame/samegame2/samegame.qml 1 -So, when you click the New Game button, \c initBoard() is called and generates a field of blocks, like this: +So, when you click the New Game button, \c startNewGame() is called and generates a field of blocks, like this: \image declarative-adv-tutorial2.png @@ -240,17 +240,17 @@ As this is a tutorial about QML, not game design, we will only discuss \c handle \section3 Enabling mouse click interaction -To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called \c gameCanvas to \c samegame.qml. It replaces the background as the item which contains the blocks, and accepts mouse input from the user. Here is the item code: +To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called \c gameCanvas to \c 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: \snippet declarative/tutorials/samegame/samegame3/samegame.qml 1 -The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l MouseArea for input. +The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l 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 \c tileSize, \c tileSize needs to be moved out of \c samegame.js and into \c samegame.qml as a QML property. +Since its size is bound to a multiple of \c blockSize, \c blockSize was moved out of \c samegame.js and into \c samegame.qml as a QML property. Note that it can still be accessed from the script. -The \l MouseArea simply calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function: +When clicked, the \l MouseArea calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function: \snippet declarative/tutorials/samegame/samegame3/samegame.js 1 @@ -258,7 +258,7 @@ Note that if \c score was a global variable in the \c{samegame.js} file you woul \section3 Updating the score -When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code: +When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code: \snippet declarative/tutorials/samegame/samegame3/samegame.js 2 @@ -287,7 +287,7 @@ Here is a screenshot of what has been accomplished so far: \image declarative-adv-tutorial3.png -Here is the QML code as it is now in \c samegame.qml: +This is what \c samegame.qml looks like now: \snippet declarative/tutorials/samegame/samegame3/samegame.qml 0 @@ -439,7 +439,7 @@ By following this tutorial you've seen how you can write a fully functional appl \o Build your application with \l {{QML Elements}}{QML elements} \o Add application logic \l{Integrating JavaScript}{with JavaScript code} \o Add animations with \l {Behavior}{Behaviors} and \l{QML States}{states} -\o Store persistent application data through online and offline methods +\o Store persistent application data using, for example, the \l{Offline Storage API} or \l XMLHttpRequest \endlist There is so much more to learn about QML that we haven't been able to cover in this tutorial. Check out all the |