How to write a small game using HTML5 and JavaScript–BrikBrok

This post is a translation of a French article I wrote: https://blogs.msdn.com/b/eternalcoding/archive/2011/09/02/cahier-de-vacances-html-5-d-233-velopper-son-propre-jeu-de-casse-briques-en-html-5-avec-canvas-et-svg.aspx

Starter and full solution can be found here.

Summary

1. Introduction

   • Prerequisites

     • Setting up the background

       • Setting up the game

         • Conclusion

Introduction

The goal of this tutorial is discovering graphics development using SVG and Canvas (which are two majors technologies of HTML5).

To do so, we will write together a brick breaker game (à la Arkanoïd or Blockout). It will be composed of an animated background (using Canvas) and will use SVG for bricks, pad and ball.

You can try the final version here : https://www.catuhe.com/ms/en/index.htm

Prerequisites

• Visual Studio 2010 SP1

  • Web Standards Update : https://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

    • Internet Explorer 9

    Setting up the background

  The background is only an alibi to use a canvas. It will allow us to draw pixels in a given area. So we will use it to draw a space wormhole (yes, I love Stargate!). Users will have choice to display it or not using the mode button:

  

  You can note that we will add a performance counter in the right top corner (just to see the power of accelerated graphics )

  Setting up HTML5 page

  Starting from the index.htm file, we will add our canvas as child of the div “gameZone”:

  
  

  
  

  
  

  
  
  1. 
     <canvas id=”backgroundCanvas”>
     
  
  
  2. 
     Your browser doesn’t support HTML5. Please install Internet Explorer 9 :
     
  
  
  3. 
     <br />
     
  
  
  4. 
     <a href=”https://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie9_bow_Bing&WT.srch=1&mtag=SearBing">
     
  
  
  5. 
     https://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie9_bow_Bing&WT.srch=1&mtag=SearBing</a>
     
  
  
  6. 
     </canvas>
     
  
  

  
  

  
  

  
  

## Adding JavaScript code

The background is handled by _background.js_ file (what a surprise!). So we have to register it inside index.htm. So just before the body closing tag, we will add the following code: 

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:207b6d20-6407-4255-8fb7-c42a26cb1c5d" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
        <li>
          <span style="color:#0000ff"><</span><span style="color:#800000">script</span> <span style="color:#ff0000">type</span><span style="color:#0000ff">="text/javascript"</span> <span style="color:#ff0000">src</span><span style="color:#0000ff">="background.js"></</span><span style="color:#800000">script</span><span style="color:#0000ff">></span>
        </li>
      </ol>
    </div></p>
  </div></p>
</div>

## Setting up constants

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e3a7453b-0342-4d8e-b9a5-d93573d6aea1">
  First of all, we need constants to drive the rendering:
</div>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px">
  &nbsp;
</div>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:91de7cc4-c4e6-46c9-982a-2be0f89e2395" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
        <li>
          <span style="color:#0000ff">var</span> circlesCount = 100; <span style="color:#006400">// Circles count used by the wormhole</span>
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> offsetX = 70; <span style="color:#006400">// Wormhole center offset (X)</span>
        </li>
        <li>
          <span style="color:#0000ff">var</span> offsetY = 40; <span style="color:#006400">// Wormhole center offset (Y)</span>
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> maxDepth = 1.5; <span style="color:#006400">// Maximal distance for a circle</span>
        </li>
        <li>
          <span style="color:#0000ff">var</span> circleDiameter = 10.0; <span style="color:#006400">// Circle diameter</span>
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> depthSpeed = 0.001; <span style="color:#006400">// Circle speed</span>
        </li>
        <li>
          <span style="color:#0000ff">var</span> angleSpeed = 0.05; <span style="color:#006400">// Circle angular rotation speed</span>
        </li>
      </ol>
    </div></p>
  </div></p>
</div>

You can of course modify these constants if you want different effects on your wormhole. 

## Getting elements

We also need to keep reference to main elements of the html page:

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:d6482365-1bf8-42d5-adca-ddc74c0576c2" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
        <li>
          <span style="color:#0000ff">var</span> canvas = document.getElementById(<span style="color:#800000">"backgroundCanvas"</span>);
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> context = canvas.getContext(<span style="color:#800000">"2d"</span>);
        </li>
        <li>
          <span style="color:#0000ff">var</span> stats = document.getElementById(<span style="color:#800000">"stats"</span>);
        </li>
      </ol>
    </div></p>
  </div></p>
</div>

## How to display a circle?

The wormhole is only a sequence of circles with different positions and sizes. So to draw it, we will use a circle function which is build around a depth, an angle and an intensity (the base color).

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ad6fc59a-f497-4275-9d93-26a8c55eac83">
  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
        <li>
          <span style="color: #0000ff">function</span> Circle(initialDepth, initialAngle, intensity) { <li style="background: #f3f3f3">
            }
          </li></ol> </div> </div> </div> 
          <pre></pre>

          <p>
            The angle and the intensity are private but the depth is public to allow the wormhole to change it.
          </p>

          <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:012ebe78-d859-4ae0-877a-a868e8ad4843">
            <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
              <div style="background: #fff; max-height: 500px; overflow: auto">
                <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                  <li>
                    <span style="color: #0000ff">function</span> Circle(initialDepth, initialAngle, intensity) { <li style="background: #f3f3f3">
                      <li>
                        <span style="color: #0000ff">var</span> angle = initialAngle; <li style="background: #f3f3f3">
                          <span style="color: #0000ff">this</span>.depth = initialDepth; <li>
                            <span style="color: #0000ff">var</span> color = intensity; <li style="background: #f3f3f3">
                              }
                            </li></ol> </div> </div> </div> 
                            <pre></pre>

                            <p>
                              We also need a public draw function to draw the circle and update depth, angle. So we need to define where to display the circle. To do so, two variables (x and y) are defined:
                            </p>

                            <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e6d91ee9-85b3-4faa-9d28-a9dff0c9d5d0">
                              <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                <div style="background: #fff; max-height: 500px; overflow: auto">
                                  <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                    <li>
                                      <span style="color: #0000ff">var</span> x = offsetX * Math.cos(angle); <li style="background: #f3f3f3">
                                        <span style="color: #0000ff">var</span> y = offsetY * Math.sin(angle);
                                      </li></ol> </div> </div> </div> 
                                      <pre></pre>

                                      <p>
                                        As x and y are in space coordinates, we need to project them into the screen:
                                      </p>

                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:0ca3ba8a-9cfb-4dee-9bb2-ef5e858a219c" class="wlWriterEditableSmartContent">
                                        <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                            <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                              <li>
                                                <span style="color:#0000ff">function</span> perspective(fov, aspectRatio, x, y) {
                                              </li>
                                              <li style="background: #f3f3f3">
                                                    <span style="color:#0000ff">var</span> yScale = Math.pow(Math.tan(fov / 2.0), -1);
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">var</span> xScale = yScale / aspectRatio;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                &nbsp;
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">var</span> M11 = xScale;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                    <span style="color:#0000ff">var</span> M22 = yScale;
                                              </li>
                                              <li>
                                                &nbsp;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                    <span style="color:#0000ff">var</span> outx = x * M11 + canvas.width / 2.0;
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">var</span> outy = y * M22 + canvas.height / 2.0;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                &nbsp;
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">return</span> { x: outx, y: outy };
                                              </li>
                                              <li style="background: #f3f3f3">
                                                }
                                              </li>
                                            </ol>
                                          </div>
                                        </div>
                                      </div>

                                      <pre></pre>

                                      <p>
                                        So final position of the circle is computed by the following code:
                                      </p>

                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c3a33e51-e2c1-4e1a-98a4-435c15d0a1cf">
                                        <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                            <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                              <li>
                                                <span style="color: #0000ff">var</span> x = offsetX * Math.cos(angle); <li style="background: #f3f3f3">
                                                  <span style="color: #0000ff">var</span> y = offsetY * Math.sin(angle); <li>
                                                    <li style="background: #f3f3f3">
                                                      <span style="color: #0000ff">var</span> project = perspective(0.9, canvas.width / canvas.height, x, y); <li>
                                                        <span style="color: #0000ff">var</span> diameter = circleDiameter / <span style="color: #0000ff">this</span>.depth; <li style="background: #f3f3f3">
                                                          <li>
                                                            <span style="color: #0000ff">var</span> ploX = project.x &#8211; diameter / 2.0; <li style="background: #f3f3f3">
                                                              <span style="color: #0000ff">var</span> ploY = project.y &#8211; diameter / 2.0;
                                                            </li></ol> </div> </div> </div> 
                                                            <pre></pre>

                                                            <p>
                                                              And using this position, we can simply draw our circle:
                                                            </p>

                                                            <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:21ecc93d-5b0b-4f92-9773-66c25055ddcc">
                                                              <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                  <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                    <li>
                                                                      context.beginPath(); <li style="background: #f3f3f3">
                                                                        context.arc(ploX, ploY, diameter, 0, 2 * Math.PI, <span style="color: #0000ff">false</span>); <li>
                                                                          context.closePath(); <li style="background: #f3f3f3">
                                                                            <li>
                                                                              <span style="color: #0000ff">var</span> opacity = 1.0 &#8211; <span style="color: #0000ff">this</span>.depth / maxDepth; <li style="background: #f3f3f3">
                                                                                context.strokeStyle = <span style="color: #800000">&#8220;rgba(&#8220;</span> + color + <span style="color: #800000">&#8220;,&#8221;</span> + color + <span style="color: #800000">&#8220;,&#8221;</span> + color + <span style="color: #800000">&#8220;,&#8221;</span> + opacity + <span style="color: #800000">&#8220;)&#8221;</span>; <li>
                                                                                  context.lineWidth = 4; <li style="background: #f3f3f3">
                                                                                    <li>
                                                                                      context.stroke();
                                                                                    </li></ol> </div> </div> </div> 
                                                                                    <pre></pre>

                                                                                    <p>
                                                                                      You can note that the circle is more opaque when it is closer.
                                                                                    </p>

                                                                                    <p>
                                                                                      So finally:
                                                                                    </p>

                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:85391355-6a2e-4342-bfd6-91cd2ae49850" class="wlWriterEditableSmartContent">
                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                            <li>
                                                                                              <span style="color:#0000ff">function</span> Circle(initialDepth, initialAngle, intensity) {
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  <span style="color:#0000ff">var</span> angle = initialAngle;
                                                                                            </li>
                                                                                            <li>
                                                                                                  <span style="color:#0000ff">this</span>.depth = initialDepth;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  <span style="color:#0000ff">var</span> color = intensity;
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  <span style="color:#0000ff">this</span>.draw = <span style="color:#0000ff">function</span> () {
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">var</span> x = offsetX * Math.cos(angle);
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> y = offsetY * Math.sin(angle);
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> project = perspective(0.9, canvas.width / canvas.height, x, y);
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">var</span> diameter = circleDiameter / <span style="color:#0000ff">this</span>.depth;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">var</span> ploX = project.x &#8211; diameter / 2.0;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> ploY = project.y &#8211; diameter / 2.0;
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.beginPath();
                                                                                            </li>
                                                                                            <li>
                                                                                                      context.arc(ploX, ploY, diameter, 0, 2 * Math.PI, <span style="color:#0000ff">false</span>);
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.closePath();
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> opacity = 1.0 &#8211; <span style="color:#0000ff">this</span>.depth / maxDepth;
                                                                                            </li>
                                                                                            <li>
                                                                                                      context.strokeStyle = <span style="color:#800000">"rgba("</span> + color + <span style="color:#800000">","</span> + color + <span style="color:#800000">","</span> + color + <span style="color:#800000">","</span> + opacity + <span style="color:#800000">")"</span>;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.lineWidth = 4;
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.stroke();
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">this</span>.depth -= depthSpeed;
                                                                                            </li>
                                                                                            <li>
                                                                                                      angle += angleSpeed;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">if</span> (<span style="color:#0000ff">this</span>.depth < 0) {
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                          <span style="color:#0000ff">this</span>.depth = maxDepth + <span style="color:#0000ff">this</span>.depth;
                                                                                            </li>
                                                                                            <li>
                                                                                                      }
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  };
                                                                                            </li>
                                                                                            <li>
                                                                                              };
                                                                                            </li>
                                                                                          </ol>
                                                                                        </div>
                                                                                      </div>
                                                                                    </div>

                                                                                    <p>
                                                                                    </p>

                                                                                    <h2>
                                                                                      Initialization
                                                                                    </h2>

                                                                                    <p>
                                                                                      With our circle function, we can have an array of circles that we will initiate more and more close to us with a slight shift of the angle each time:
                                                                                    </p>

                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:59e6b8f9-9a6f-44a1-8cb3-4bb601a1aed9">
                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                            <li>
                                                                                              <span style="color: #006400">// Initialization</span> <li style="background: #f3f3f3">
                                                                                                <span style="color: #0000ff">var</span> circles = []; <li>
                                                                                                  <li style="background: #f3f3f3">
                                                                                                    <span style="color: #0000ff">var</span> angle = Math.random() * Math.PI * 2.0; <li>
                                                                                                      <li style="background: #f3f3f3">
                                                                                                        <span style="color: #0000ff">var</span> depth = maxDepth; <li>
                                                                                                          <span style="color: #0000ff">var</span> depthStep = maxDepth / circlesCount; <li style="background: #f3f3f3">
                                                                                                            <span style="color: #0000ff">var</span> angleStep = (Math.PI * 2.0) / circlesCount; <li>
                                                                                                              <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < circlesCount; index++) { <li style="background: #f3f3f3">
                                                                                                                circles[index] = <span style="color: #0000ff">new</span> Circle(depth, angle, index % 5 == 0 ? 200 : 255); <li>
                                                                                                                  <li style="background: #f3f3f3">
                                                                                                                    depth -= depthStep; <li>
                                                                                                                      angle -= angleStep; <li style="background: #f3f3f3">
                                                                                                                        }
                                                                                                                      </li></ol> </div> </div> </div> 
                                                                                                                      <h2>
                                                                                                                        Computing FPS
                                                                                                                      </h2>

                                                                                                                      <p>
                                                                                                                        We can compute FPS by measuring the amount of time between two calls to a given function. In our case, the function will be <em>computeFPS</em>. It will save the last 60 measures and will compute an average to produce the desired result:
                                                                                                                      </p>

                                                                                                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:6b11d91b-436a-4ed9-97e0-e3994c39a454">
                                                                                                                        <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                            <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                              <li>
                                                                                                                                <span style="color: #006400">// FPS</span> <li style="background: #f3f3f3">
                                                                                                                                  <span style="color: #0000ff">var</span> previous = []; <li>
                                                                                                                                    <span style="color: #0000ff">function</span> computeFPS() { <li style="background: #f3f3f3">
                                                                                                                                      <span style="color: #0000ff">if</span> (previous.length > 60) { <li>
                                                                                                                                        previous.splice(0, 1); <li style="background: #f3f3f3">
                                                                                                                                          } <li>
                                                                                                                                            <span style="color: #0000ff">var</span> start = (<span style="color: #0000ff">new</span> Date).getTime(); <li style="background: #f3f3f3">
                                                                                                                                              previous.push(start); <li>
                                                                                                                                                <span style="color: #0000ff">var</span> sum = 0; <li style="background: #f3f3f3">
                                                                                                                                                  <li>
                                                                                                                                                    <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> id = 0; id < previous.length &#8211; 1; id++) { <li style="background: #f3f3f3">
                                                                                                                                                      sum += previous[id + 1] &#8211; previous[id]; <li>
                                                                                                                                                        } <li style="background: #f3f3f3">
                                                                                                                                                          <li>
                                                                                                                                                            <span style="color: #0000ff">var</span> diff = 1000.0 / (sum / previous.length); <li style="background: #f3f3f3">
                                                                                                                                                              <li>
                                                                                                                                                                stats.innerHTML = diff.toFixed() + <span style="color: #800000">&#8221; fps&#8221;</span>; <li style="background: #f3f3f3">
                                                                                                                                                                  }
                                                                                                                                                                </li></ol> </div> </div> </div> 
                                                                                                                                                                <h2>
                                                                                                                                                                  Drawing and animations
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  The canvas is a <strong>direct mode</strong> tool. This means that we have to reproduce all the content of the canvas every time we need to change something.
                                                                                                                                                                </p>

                                                                                                                                                                <p>
                                                                                                                                                                  And first of all, we need to clear the content before each frame. The better solution to do that is to use <em>clearRect</em>:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a5589b59-dd68-4019-91ce-1643f8cd7574" class="wlWriterEditableSmartContent">
                                                                                                                                                                  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color:#006400">// Drawing & Animation</span>
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">function</span> clearCanvas() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              context.clearRect(0, 0, canvas.width, canvas.height);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <pre></pre>

                                                                                                                                                                <p>
                                                                                                                                                                  So the full wormhole drawing code will look like:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:60a3e728-19b8-496d-a9eb-e5243048f51b" class="wlWriterEditableSmartContent">
                                                                                                                                                                  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color:#0000ff">function</span> wormHole() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              computeFPS();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              canvas.width = window.innerWidth;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              canvas.height = window.innerHeight &#8211; 130 &#8211; 40;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              clearCanvas();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> index = 0; index < circlesCount; index++) {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  circles[index].draw();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              }
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              circles.sort(<span style="color:#0000ff">function</span> (a, b) {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  <span style="color:#0000ff">if</span> (a.depth > b.depth)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                      <span style="color:#0000ff">return</span> -1;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  <span style="color:#0000ff">if</span> (a.depth < b.depth)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                      <span style="color:#0000ff">return</span> 1;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  <span style="color:#0000ff">return</span> 0;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              });
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <pre></pre>

                                                                                                                                                                <p>
                                                                                                                                                                  The sort code is used to prevent circles from overlapping.
                                                                                                                                                                </p>

                                                                                                                                                                <h2>
                                                                                                                                                                  Setting up mode button
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  To finalize our background, we just need to hook up the mode button to display or hide the background:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:2e1d93c1-ded2-4e5e-afff-d40dc4154536" class="wlWriterEditableSmartContent">
                                                                                                                                                                  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                    <div style="background: #fff; overflow: auto">
                                                                                                                                                                      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">var</span> wormHoleIntervalID = -1;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">function</span> startWormHole() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              <span style="color:#0000ff">if</span> (wormHoleIntervalID > -1)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                  clearInterval(wormHoleIntervalID);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              wormHoleIntervalID = setInterval(wormHole, 16);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).onclick = stopWormHole;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).innerHTML = <span style="color:#800000">"Standard Mode"</span>;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">function</span> stopWormHole() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              <span style="color:#0000ff">if</span> (wormHoleIntervalID > -1)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                  clearInterval(wormHoleIntervalID);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              clearCanvas();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).onclick = startWormHole;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).innerHTML = <span style="color:#800000">"Wormhole Mode"</span>;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          stopWormHole();
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <h1>
                                                                                                                                                                  <a id="setupgame"></a>Setting up the game
                                                                                                                                                                </h1>

                                                                                                                                                                <p>
                                                                                                                                                                  In order to simplify a bit the tutorial, the mouse handling code is already done. You can find all you need in the <em>mouse.js</em> file.&nbsp;
                                                                                                                                                                </p>

                                                                                                                                                                <p>
                                                                                                                                                                  <a href="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/0121.image_68A289F4.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/0121.image_5F00_68A289F4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="image" border="0"  src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/6560.image_thumb_2EB34708.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/6560.image_5F00_thumb_5F00_2EB34708.png" width="640" height="440" /></a>
                                                                                                                                                                </p>

                                                                                                                                                                <h2>
                                                                                                                                                                </h2>

                                                                                                                                                                <h2>
                                                                                                                                                                  Adding the game JavaScript file
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  The background is handled by <em>game.js</em> file. So we have to register it inside <em>index.htm</em>. So right before the body closing tag, we will add the following code:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:04782472-7d9a-4002-b72f-a0436cc39cf7">
                                                                                                                                                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color: #0000ff"><</span><span style="color: #800000">script</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">=&#8221;text/javascript&#8221;</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">=&#8221;game.js&#8221;></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <h2>
                                                                                                                                                                  Updating HTML5 page
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  The game will use <strong>SVG</strong> (Scalable Vector Graphics) to display the bricks, pad and ball. The SVG is a retained mode tool. So you don’t need to redraw all every time you want to move or change an item.
                                                                                                                                                                </p>

                                                                                                                                                                <p>
                                                                                                                                                                  To add a SVG tag in our page, we just have to insert the following code (just after the canvas):
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9f7f060d-d7e1-46a5-83bf-0a5e168f6584">
                                                                                                                                                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color: #0000ff"><</span><span style="color: #800000">svg</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8221;svgRoot&#8221;></span> <li style="background: #f3f3f3">
                                                                                                                                                                            <span style="color: #0000ff"><</span><span style="color: #800000">circle</span> <span style="color: #ff0000">cx</span><span style="color: #0000ff">=&#8221;100&#8243;</span> <span style="color: #ff0000">cy</span><span style="color: #0000ff">=&#8221;100&#8243;</span> <span style="color: #ff0000">r</span><span style="color: #0000ff">=&#8221;10&#8243;</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8221;ball&#8221;</span> <span style="color: #0000ff">/></span> <li>
                                                                                                                                                                              <span style="color: #0000ff"><</span><span style="color: #800000">rect</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8221;pad&#8221;</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">=&#8221;15px&#8221;</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">=&#8221;150px&#8221;</span> <span style="color: #ff0000">x</span><span style="color: #0000ff">=&#8221;200&#8243;</span> <span style="color: #ff0000">y</span><span style="color: #0000ff">=&#8221;200&#8243;</span> <span style="color: #ff0000">rx</span><span style="color: #0000ff">=&#8221;10&#8243;</span> <span style="color: #ff0000">ry</span><span style="color: #0000ff">=&#8221;20&#8243;/></span> <li style="background: #f3f3f3">
                                                                                                                                                                                <span style="color: #0000ff"></</span><span style="color: #800000">svg</span><span style="color: #0000ff">></span>
                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                              <pre></pre>

                                                                                                                                                                              <p>
                                                                                                                                                                                As you can note, the SVG starts with two already defined objects : a circle for the ball and a rectangle for the pad.
                                                                                                                                                                              </p>

                                                                                                                                                                              <h2>
                                                                                                                                                                                Defining constants and variables
                                                                                                                                                                              </h2>

                                                                                                                                                                              <p>
                                                                                                                                                                                In game.js file, we will start by adding some variables:
                                                                                                                                                                              </p>

                                                                                                                                                                              <pre></pre>

                                                                                                                                                                              <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:68a429c4-8f1a-4ac3-b1de-2af2df0b158b">
                                                                                                                                                                                <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                  <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                    <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                      <li>
                                                                                                                                                                                        <span style="color: #006400">// Getting elements</span> <li style="background: #f3f3f3">
                                                                                                                                                                                          <span style="color: #0000ff">var</span> pad = document.getElementById(<span style="color: #800000">&#8220;pad&#8221;</span>); <li>
                                                                                                                                                                                            <span style="color: #0000ff">var</span> ball = document.getElementById(<span style="color: #800000">&#8220;ball&#8221;</span>); <li style="background: #f3f3f3">
                                                                                                                                                                                              <span style="color: #0000ff">var</span> svg = document.getElementById(<span style="color: #800000">&#8220;svgRoot&#8221;</span>); <li>
                                                                                                                                                                                                <span style="color: #0000ff">var</span> message = document.getElementById(<span style="color: #800000">&#8220;message&#8221;</span>);
                                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                                              <p>
                                                                                                                                                                                                The ball will be defined by:
                                                                                                                                                                                              </p>

                                                                                                                                                                                              <ul>
                                                                                                                                                                                                <li>
                                                                                                                                                                                                  A position <li>
                                                                                                                                                                                                    A radius <li>
                                                                                                                                                                                                      A speed <li>
                                                                                                                                                                                                        A direction <li>
                                                                                                                                                                                                          Its previous position
                                                                                                                                                                                                        </li></ul> 
                                                                                                                                                                                                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a6f8559d-b981-4bcd-bf1f-1d6febdedc58">
                                                                                                                                                                                                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                            <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                              <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                  <span style="color: #006400">// Ball</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                    <span style="color: #0000ff">var</span> ballRadius = ball.r.baseVal.value; <li>
                                                                                                                                                                                                                      <span style="color: #0000ff">var</span> ballX; <li style="background: #f3f3f3">
                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> ballY; <li>
                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> previousBallPosition = { x: 0, y: 0 }; <li style="background: #f3f3f3">
                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> ballDirectionX; <li>
                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> ballDirectionY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                <span style="color: #0000ff">var</span> ballSpeed = 10;
                                                                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                              <pre></pre>

                                                                                                                                                                                                                              <p>
                                                                                                                                                                                                                                The pad will be defined by:
                                                                                                                                                                                                                              </p>

                                                                                                                                                                                                                              <ul>
                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                  Width <li>
                                                                                                                                                                                                                                    Height <li>
                                                                                                                                                                                                                                      Position <li>
                                                                                                                                                                                                                                        Speed <li>
                                                                                                                                                                                                                                          Inertia value (just to make things smoother <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Sourire" src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/8623.wlEmoticon-smile_6FC1C66C.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/8623.wlEmoticon_2D00_smile_5F00_6FC1C66C.png" />)
                                                                                                                                                                                                                                        </li></ul> 
                                                                                                                                                                                                                                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:aad41503-c202-4357-b66b-fed07785e1b3">
                                                                                                                                                                                                                                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                            <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                              <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                                  <span style="color: #006400">// Pad</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                    <span style="color: #0000ff">var</span> padWidth = pad.width.baseVal.value; <li>
                                                                                                                                                                                                                                                      <span style="color: #0000ff">var</span> padHeight = pad.height.baseVal.value; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> padX; <li>
                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> padY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> padSpeed = 0; <li>
                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> inertia = 0.80;
                                                                                                                                                                                                                                                            </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                            <pre></pre>

                                                                                                                                                                                                                                                            <p>
                                                                                                                                                                                                                                                              Bricks will be saved in an array and will be defined by:
                                                                                                                                                                                                                                                            </p>

                                                                                                                                                                                                                                                            <ul>
                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                Width <li>
                                                                                                                                                                                                                                                                  Height <li>
                                                                                                                                                                                                                                                                    Margin between them <li>
                                                                                                                                                                                                                                                                      Lines count <li>
                                                                                                                                                                                                                                                                        Columns count
                                                                                                                                                                                                                                                                      </li></ul> 
                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                        We also need an offset and a variable for counting destroyed bricks.
                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:19c1b02e-a946-426e-a442-942eaecec77d">
                                                                                                                                                                                                                                                                        <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                            <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                <span style="color: #006400">// Bricks</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                  <span style="color: #0000ff">var</span> bricks = []; <li>
                                                                                                                                                                                                                                                                                    <span style="color: #0000ff">var</span> destroyedBricksCount; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                      <span style="color: #0000ff">var</span> brickWidth = 50; <li>
                                                                                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> brickHeight = 20; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> bricksRows = 5; <li>
                                                                                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> bricksCols = 20; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> bricksMargin = 15; <li>
                                                                                                                                                                                                                                                                                                <span style="color: #0000ff">var</span> bricksTop = 20;
                                                                                                                                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                              <pre></pre>

                                                                                                                                                                                                                                                                                              <p>
                                                                                                                                                                                                                                                                                                And finally we also need the limits of the playground and a start date to compute session duration.
                                                                                                                                                                                                                                                                                              </p>

                                                                                                                                                                                                                                                                                              <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:02ffa719-cad2-46d9-a7c1-0ccaebcc469d">
                                                                                                                                                                                                                                                                                                <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                  <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                    <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                      <li>
                                                                                                                                                                                                                                                                                                        <span style="color: #006400">// Misc.</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> minX = ballRadius; <li>
                                                                                                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> minY = ballRadius; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> maxX; <li>
                                                                                                                                                                                                                                                                                                                <span style="color: #0000ff">var</span> maxY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                  <span style="color: #0000ff">var</span> startDate;
                                                                                                                                                                                                                                                                                                                </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                <h2>
                                                                                                                                                                                                                                                                                                                  Handling a brick
                                                                                                                                                                                                                                                                                                                </h2>

                                                                                                                                                                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:63327f88-eeaf-4151-846d-02548b7a1b47">
                                                                                                                                                                                                                                                                                                                  <p>
                                                                                                                                                                                                                                                                                                                    To create a brick, we will need a function that will add a new element to the svg root. It will also configure each brick with required information:
                                                                                                                                                                                                                                                                                                                  </p>

                                                                                                                                                                                                                                                                                                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                        <li>
                                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> rect = document.createElementNS(<span style="color: #800000">&#8220;https://www.w3.org/2000/svg&#8221;</span>, <span style="color: #800000">&#8220;rect&#8221;</span>); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                            svg.appendChild(rect); <li>
                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                rect.setAttribute(<span style="color: #800000">&#8220;width&#8221;</span>, brickWidth); <li>
                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color: #800000">&#8220;height&#8221;</span>, brickHeight); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                    <li>
                                                                                                                                                                                                                                                                                                                                      <span style="color: #006400">// Random green color</span>&nbsp; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> chars = <span style="color: #800000">&#8220;456789abcdef&#8221;</span>; <li>
                                                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> color = <span style="color: #800000">&#8220;&#8221;</span>; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                            <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0; i < 2; i++) { <li>
                                                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> rnd = Math.floor(chars.length * Math.random()); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                color += chars.charAt(rnd); <li>
                                                                                                                                                                                                                                                                                                                                                  } <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                    rect.setAttribute(<span style="color: #800000">&#8220;fill&#8221;</span>, <span style="color: #800000">&#8220;#00&#8221;</span> + color + <span style="color: #800000">&#8220;00&#8221;</span>);
                                                                                                                                                                                                                                                                                                                                                  </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                                                  <pre></pre>

                                                                                                                                                                                                                                                                                                                                                  <p>
                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:cee407f0-82b9-49af-a79f-f4ef6febd772">
                                                                                                                                                                                                                                                                                                                                                      The brick function will also provide a <em>drawAndCollide</em> function to display a brick and to check if there is a collision with the ball:
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:7a38ed5e-c7fe-4c1d-b96f-9e7444838db1" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">this</span>.drawAndCollide = <span style="color:#0000ff">function</span> () {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (isDead)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Drawing</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"x"</span>, position.x);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"y"</span>, position.y);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Collision</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballX + ballRadius < position.x || ballX &#8211; ballRadius > position.x + brickWidth)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballY + ballRadius < position.y || ballY &#8211; ballRadius > position.y + brickHeight)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Dead</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">this</span>.remove();
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  isDead = <span style="color:#0000ff">true</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  destroyedBricksCount++;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Updating ball</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  ballX = previousBallPosition.x;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballY = previousBallPosition.y;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      Finally the full brick function will look like:
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:fcb65aeb-7b67-41a1-baed-be7ac333e0bf" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#006400">// Brick function</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> Brick(x, y) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> isDead = <span style="color:#0000ff">false</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> position = { x: x, y: y };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> rect = document.createElementNS(<span style="color:#800000">"https://www.w3.org/2000/svg"</span>, <span style="color:#800000">"rect"</span>);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  svg.appendChild(rect);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"width"</span>, brickWidth);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"height"</span>, brickHeight);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Random green color</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> chars = <span style="color:#800000">"456789abcdef"</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> color = <span style="color:#800000">""</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> i = 0; i < 2; i++) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">var</span> rnd = Math.floor(chars.length * Math.random());
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      color += chars.charAt(rnd);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"fill"</span>, <span style="color:#800000">"#00"</span> + color + <span style="color:#800000">"00"</span>);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">this</span>.drawAndCollide = <span style="color:#0000ff">function</span> () {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (isDead)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Drawing</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      rect.setAttribute(<span style="color:#800000">"x"</span>, position.x);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      rect.setAttribute(<span style="color:#800000">"y"</span>, position.y);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Collision</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (ballX + ballRadius < position.x || ballX &#8211; ballRadius > position.x + brickWidth)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (ballY + ballRadius < position.y || ballY &#8211; ballRadius > position.y + brickHeight)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Dead</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">this</span>.remove();
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      isDead = <span style="color:#0000ff">true</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      destroyedBricksCount++;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Updating ball</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballX = previousBallPosition.x;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballY = previousBallPosition.y;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Killing a brick</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">this</span>.remove = <span style="color:#0000ff">function</span> () {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (isDead)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      svg.removeChild(rect);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                      Collisions with the pad and the playground
                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      The ball will also have collision functions that will handle collisions with the pad and the playground. These functions will have to update the ball direction when a collision will be detected.
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4694a0a5-0519-4962-b1d9-9a868f20ac70" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#006400">// Collisions</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> collideWithWindow() {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballX < minX) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballX = minX;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionX *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">else</span> <span style="color:#0000ff">if</span> (ballX > maxX) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballX = maxX;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionX *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballY < minY) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballY = minY;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">else</span> <span style="color:#0000ff">if</span> (ballY > maxY) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballY = maxY;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      lost();
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> collideWithPad() {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballX + ballRadius < padX || ballX &#8211; ballRadius > padX + padWidth)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballY + ballRadius < padY)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballX = previousBallPosition.x;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  ballY = previousBallPosition.y;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> dist = ballX &#8211; (padX + padWidth / 2);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionX = 2.0 * dist / padWidth;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> square = Math.sqrt(ballDirectionX * ballDirectionX + ballDirectionY * ballDirectionY);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionX /= square;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY /= square;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      <em>collideWithWindow</em> checks the limits of the playground and <em>collideWithPad</em> checks the limits of the pad (We add a subtle change here: the horizontal speed of the ball will be computed using the distance with the center of the pad).
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                      Moving the pad
                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      You can control the pad with the mouse or with the left and right arrows. The <em>movePad</em> function is responsible for handling pad movement. It will also handle the <strong>inertia</strong>:
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:31edfdac-5b87-4ec4-8a6d-219ad5e2db7f" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#006400">// Pad movement</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> movePad() {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  padX += padSpeed;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  padSpeed *= inertia;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (padX < minX)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      padX = minX;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (padX + padWidth > maxX)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      padX = maxX &#8211; padWidth;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      The code responsible for handling inputs is pretty <strong>simple</strong>:
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:25b7b2bb-7259-49a0-8939-19f195d91cc7" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              registerMouseMove(document.getElementById(<span style="color:#800000">"gameZone"</span>), <span style="color:#0000ff">function</span> (posx, posy, previousX, previousY) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  padSpeed += (posx &#8211; previousX) * 0.2;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              });
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              window.addEventListener(<span style="color:#800000">'keydown'</span>, <span style="color:#0000ff">function</span> (evt) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">switch</span> (evt.keyCode) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Left arrow</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">case</span> 37:
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          padSpeed -= 10;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">break</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Right arrow   </span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">case</span> 39:
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          padSpeed += 10;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">break</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              }, <span style="color:#0000ff">true</span>);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                      Game loop
                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      Before setting up the game loop we need a function to define the playground size. This function will be called when window is resized.
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:6a978274-8027-4aa0-995f-ca5cb7d50e88">
                                                                                                                                                                                                                                                                                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">function</span> checkWindow() { <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                maxX = window.innerWidth &#8211; minX; <li>
                                                                                                                                                                                                                                                                                                                                                                  maxY = window.innerHeight &#8211; 130 &#8211; 40 &#8211; minY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                    padY = maxY &#8211; 30; <li>
                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                    </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      By the way, the game loop is the <strong>orchestrator</strong> here:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9ac0018b-5083-48bb-8e67-a04caaf14330" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> gameLoop() {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  movePad();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Movements</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.x = ballX;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.y = ballY;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ballX += ballDirectionX * ballSpeed;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ballY += ballDirectionY * ballSpeed;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Collisions</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  collideWithWindow();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  collideWithPad();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Bricks</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> index = 0; index < bricks.length; index++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                      bricks[index].drawAndCollide();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Ball</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ball.setAttribute(<span style="color:#800000">"cx"</span>, ballX);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ball.setAttribute(<span style="color:#800000">"cy"</span>, ballY);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Pad</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  pad.setAttribute(<span style="color:#800000">"x"</span>, padX);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  pad.setAttribute(<span style="color:#800000">"y"</span>, padY);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">

                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Victory ?</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (destroyedBricksCount == bricks.length) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                      win();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                                      Initialization and victory
                                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      The first step of initialization is creating bricks:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:04c38d14-380b-49d0-8c7b-67fd62775f27" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> generateBricks() {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Removing previous ones</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> index = 0; index < bricks.length; index++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                      bricks[index].remove();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Creating new ones</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> brickID = 0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> offset = (window.innerWidth &#8211; bricksCols * (brickWidth + bricksMargin)) / 2.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> x = 0; x < bricksCols; x++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> y = 0; y < bricksRows; y++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                          bricks[brickID++] = <span style="color:#0000ff">new</span> Brick(offset + x * (brickWidth + bricksMargin), y * (brickHeight + bricksMargin) + bricksTop);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      The next step is about setting variables used by the game:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:39e8ec66-dedb-4f47-8246-2ffbd0031f7b" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> initGame() {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  message.style.visibility = <span style="color:#800000">"hidden"</span>;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  checkWindow();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>

                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  padX = (window.innerWidth &#8211; padWidth) / 2.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ballX = window.innerWidth / 2.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ballY = maxY &#8211; 60;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.x = ballX;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.y = ballY;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>

                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  padSpeed = 0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ballDirectionX = Math.random();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY = -1.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  generateBricks();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  gameLoop();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      Every time the user will change the window size, we will have to reset the game:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c61593d3-998c-491c-a1e5-2835fbb1cdbf">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              window.onresize = initGame;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      Then we have to attach an event handler to the new game button:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ccab9bc9-e132-406d-9270-4d172d330b3f">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> gameIntervalID = -1; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                <span style="color: #0000ff">function</span> startGame() { <li>
                                                                                                                                                                                                                                                                                                                                                                                  initGame(); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                    <li>
                                                                                                                                                                                                                                                                                                                                                                                      destroyedBricksCount = 0; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                        <li>
                                                                                                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">if</span> (gameIntervalID > -1) <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                            clearInterval(gameIntervalID); <li>
                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                startDate = (<span style="color: #0000ff">new</span> Date()).getTime(); ; <li>
                                                                                                                                                                                                                                                                                                                                                                                                  gameIntervalID = setInterval(gameLoop, 16); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                    } <li>
                                                                                                                                                                                                                                                                                                                                                                                                      <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                        document.getElementById(<span style="color: #800000">&#8220;newGame&#8221;</span>).onclick = startGame;
                                                                                                                                                                                                                                                                                                                                                                                                      </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                                                                                                      <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        Finally, we will add two functions for handling start and end of the game:
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:662cd033-60ad-4417-ac1a-c3335106d2d2" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                                                        <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                                                            <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                <span style="color:#0000ff">var</span> gameIntervalID = -1;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                <span style="color:#0000ff">function</span> lost() {
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    clearInterval(gameIntervalID);
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    gameIntervalID = -1;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>

                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    message.innerHTML = <span style="color:#800000">"Game over !"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    message.style.visibility = <span style="color:#800000">"visible"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                &nbsp;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                <span style="color:#0000ff">function</span> win() {
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    clearInterval(gameIntervalID);
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    gameIntervalID = -1;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                &nbsp;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    <span style="color:#0000ff">var</span> end = (<span style="color:#0000ff">new</span> Date).getTime();
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                &nbsp;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    message.innerHTML = <span style="color:#800000">"Victory ! ("</span> + Math.round((end &#8211; startDate) / 1000) + <span style="color:#800000">"s)"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    message.style.visibility = <span style="color:#800000">"visible"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                            </ol>
                                                                                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                                                                                                                                                                      <h2>
                                                                                                                                                                                                                                                                                                                                                                                                        <a id="conclusion"></a>Conclusion
                                                                                                                                                                                                                                                                                                                                                                                                      </h2>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        You are now a <strong>game developer</strong>! Using the power of accelerated graphics, we have developed a small game but with really interesting special effects!
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        <a href="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/0525.image_2727D79B.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/0525.image_5F00_2727D79B.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="image" border="0"  src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/1602.image_thumb_3F4B41F6.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/1602.image_5F00_thumb_5F00_3F4B41F6.png" width="640" height="400" /></a>
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        It’s now up to you to update the game to make it the next <strong>blockbuster</strong>!
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <h1>
                                                                                                                                                                                                                                                                                                                                                                                                        To go further
                                                                                                                                                                                                                                                                                                                                                                                                      </h1>

                                                                                                                                                                                                                                                                                                                                                                                                      <ul>
                                                                                                                                                                                                                                                                                                                                                                                                        <li>
                                                                                                                                                                                                                                                                                                                                                                                                          <a title="https://www.beautyoftheweb.com/" href="https://www.beautyoftheweb.com/">https://www.beautyoftheweb.com/</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                            <a title="https://ie.microsoft.com/testdrive/" href="https://ie.microsoft.com/testdrive/">https://ie.microsoft.com/testdrive/</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                              <a title="https://blogs.msdn.com/b/eternalcoding/archive/2011/07/25/feedback-of-a-graphic-development-using-html5-amp-javascript.aspx" href="https://blogs.msdn.com/b/eternalcoding/archive/2011/07/25/feedback-of-a-graphic-development-using-html5-amp-javascript.aspx">https://blogs.msdn.com/b/eternalcoding/archive/2011/07/25/feedback-of-a-graphic-development-using-html5-amp-javascript.aspx</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                                <a title="https://dev.w3.org/html5/spec/Overview.html" href="https://dev.w3.org/html5/spec/Overview.html">https://dev.w3.org/html5/spec/Overview.html</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                                  <a title="https://www.w3.org/TR/SVG/" href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    <a title="https://dev.w3.org/html5/spec/the-canvas-element.html" href="https://dev.w3.org/html5/spec/the-canvas-element.html">https://dev.w3.org/html5/spec/the-canvas-element.html</a>
                                                                                                                                                                                                                                                                                                                                                                                                                  </li></ul>