span><span class="n">y</span> <span class="o">=</span> <span class="n">row</span> <span class="o">*</span> <span class="n">blockSize</span><span class="p">;</span>
        <span class="n">dynamicObject</span><span class="o">.</span><span class="n">width</span> <span class="o">=</span> <span class="n">blockSize</span><span class="p">;</span>
        <span class="n">dynamicObject</span><span class="o">.</span><span class="n">height</span> <span class="o">=</span> <span class="n">blockSize</span><span class="p">;</span>
        <span class="n">board</span><span class="p">[</span><span class="n">index</span><span class="p">(</span><span class="n">column</span><span class="p">,</span> <span class="n">row</span><span class="p">)]</span> <span class="o">=</span> <span class="n">dynamicObject</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s2">&quot;error loading block component&quot;</span><span class="p">);</span>
        <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="n">component</span><span class="o">.</span><span class="n">errorString</span><span class="p">());</span>
        <span class="k">return</span> <span class="n">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="n">true</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>The <code class="docutils literal"><span class="pre">startNewGame()</span></code> 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 <code class="docutils literal"><span class="pre">createBlock()</span></code> to create enough blocks to fill the game window.</p>
<p>The <code class="docutils literal"><span class="pre">createBlock()</span></code> function creates a block from the <code class="docutils literal"><span class="pre">Block.qml</span></code> file
and moves the new block to its position on the game canvas. This involves several steps:</p>
<ul class="simple">
<li><code class="docutils literal"><span class="pre">Qt.createComponent()</span></code> is called to
generate an instance of <code class="docutils literal"><span class="pre">Block.qml</span></code>.  If the component is ready,
we can call <code class="docutils literal"><span class="pre">createObject()</span></code> to create an instance of the <code class="docutils literal"><span class="pre">Block</span></code>
item.</li>
<li>If <code class="docutils literal"><span class="pre">createObject()</span></code> returned null (that is, if there was an error
while loading the object), print the error information.</li>
<li>Place the block in its position on the board and set its width and
height.  Also, store it in the blocks array for future reference.</li>
<li>Finally, print error information to the console if the component
could not be loaded for some reason (for example, if the file is
missing).</li>
</ul>
</div>
<div class="section" id="connecting-javascript-components-to-qml">
<h2>Connecting JavaScript components to QML<a class="headerlink" href="#connecting-javascript-components-to-qml" title="Permalink to this headline">¶</a></h2>
<p>Now, call the JavaScript code in <code class="docutils literal"><span class="pre">samegame.js</span></code> from your QML files.
To do this, add the following line to <code class="docutils literal"><span class="pre">samegame.qml</span></code> to import
the JavaScript file as a module:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="s2">&quot;samegame.js&quot;</span> <span class="k">as</span> <span class="n">SameGame</span>
</pre></div>
</div>
<p>This lets you to refer to any functions within <code class="docutils literal"><span class="pre">samegame.js</span></code> using “SameGame”
as a prefix: for example, <code class="docutils literal"><span class="pre">SameGame.startNewGame()</span></code> or <code class="docutils literal"><span class="pre">SameGame.createBlock()</span></code>.
This means you can now connect the New Game button’s <code class="docutils literal"><span class="pre">onClicked</span></code> handler to the <code class="docutils literal"><span class="pre">startNewGame()</span></code>
function, like this:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span>        <span class="n">Button</span> <span class="p">{</span>
            <span class="n">anchors</span> <span class="p">{</span> <span class="n">left</span><span class="p">:</span> <span class="n">parent</span><span class="o">.</span><span class="n">left</span><span class="p">;</span> <span class="n">verticalCenter</span><span class="p">:</span> <span class="n">parent</span><span class="o">.</span><span class="n">verticalCenter</span> <span class="p">}</span>
            <span class="n">text</span><span class="p">:</span> <span class="s2">&quot;New Game&quot;</span>
            <span class="n">onClicked</span><span class="p">:</span> <span class="n">SameGame</span><span class="o">.</span><span class="n">startNewGame</span><span class="p">()</span>
        <span class="p">}</span>
</pre></div>
</div>
<p>So, when you click the New Game button, <code class="docutils literal"><span class="pre">startNewGame()</span></code> is called to generate a field of blocks, like this:</p>
<div class="figure align-center">
<img alt="../../_images/declarative-adv-tutorial2.png" src="../../_images/declarative-adv-tutorial2.png" />
</div>
<p>Now that the screen of blocks is ready, you can start adding the game mechanics.</p>
<p>[Previous <a class="reference internal" href="samegame1.html#samegame1"><span class="std std-ref">QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks</span></a>] [Next <a class="reference internal" href="samegame3.html#samegame3"><span class="std std-ref">QML Advanced Tutorial 3 - Implementing the Game Logic</span></a>]</p>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <p>© 2018 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/license/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.</p>
    </div></div>
    <div