laira
/
iFractions-doc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212
							<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
<!DOCTYPE html>
<html lang='pt-br'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>

  <meta name="description" content="Collection of educational games for teaching fractions" />
  <meta name="keywords" content="ifractions, ifrações, fraction, game, private data, math, moodle" />

  <link rel="icon" type="image/ico" href="../../assets/flag_icon.png">
  <link rel="stylesheet" href="../../style/bootstrap/bootstrap.min.css">
  <link rel='stylesheet' href="../../style/style.css">

  <title>iFractions | Área do Desenvolvedor</title>

  <link rel="stylesheet" href="../../style/prism/prism-default.css">
  <script src="../../script/prism/prism.js"></script>
</head>

<body class="container-flex">

  <!-- menu superior -->
  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
  </nav>

  <!-- botao de voltar ao inicio da pagina -->
  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
    class="btn btn-primary">&uparrow;</button>

  <!-- modal -->
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="myModal-img" src="">
    <div id="caption"></div>
  </div>

  <!-- header -->
  <header class="jumbotron jumbotron-flex p-5">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="../../index.html">Início</a></li>
        <li class="breadcrumb-item"><a href="../documentacao.html">Documentação</a></li>
        <li class="breadcrumb-item active" aria-current="page">Área do Desenvolvedor - Conhecendo o código</li>
      </ol>
    </nav>
    <h1 id='' class='display-4'>Conhecendo o código</h1>
    <p class="lead">
      Essa página apresenta os conteúdos
      dos arquivos <code>gameMechanics.js</code> e
      <code>globals.js</code>. Para visualizar a documentação detalhada dos parâmetros usados nas
      funções em <code>gameMechanics.js</code> e das variáveis globais, bem como sobre os estados do iFractions
      clique <a href='https://www.ime.usp.br/~laira/ifractions-doc/'>aqui (desatualizado)</a>. Basta navegar pelo menu
      lateral.
      Esta documentação gerada usando <a href='https://jsdoc.app/'>JSDoc</a> está em inglês e cobre apenas a
      porção de javascript do código.
    </p>
    <hr class="display-4">
  </header>

  <!-- pagina -->
  <main class='container-flex'>
    <div class="row">
      <!-- menu de navegacao lateral -->
      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet">
      </div> -->
      <div class="col-lg-2 text-start p-1"></div>

      <div class="col-lg-8 px-5">

        <!-- titulo -->

        <!-- agora o site ta como read only e nao consigo mudar de volta para ifractions-doc (minusculo) - será pq usei mt? tentar novamente depois
    
            OLD: A documentação detalhada dos parâmetros usados nas funções do iFractions e mais está disponível em <a href='https://www.ime.usp.br/~laira/ifractions-doc/'>link</a>. Basta navegar pelo menu lateral, que lista os estados, objetos e variáveis (globais) do código. Esta documentação está em inglês e cobre exclusivamente a porção de javascript do código. 
          -->

        <section id="estado">
          <h2>Estados de jogo</h2>

          <p>
            Como mencionado anteriormente, um estado é um tipo especial de objeto que possui algumas funções
            que
            seguem
            um
            comportamento predefinido: <b>preload</b>, <b>create</b> e <b>update</b>. Nessa seção veremos mais
            sobre
            o
            comportamento de cada uma dessas funções.
          </p>

          <ol type='A'>
            <li><b>Preload</b>

              <p>
                O <code><b>preload</b></code> é a primeira função a ser executada quando um estado é chamado.
                Ela
                está
                encarregada de
                carregar todos elementos de mídia para o cache e chamar o <code>create</code>. Ela
                <u>executa uma única vez</u>
                e
                o <code>create</code> só é chamado depois do último elemento de mídia ser carregado.
              </p>

              <p>
                É uma função <u>opcional</u> &minus; se o estado atual não precisar de nenhum elemento
                de
                mídia novo ela não
                precisa
                existir.
              </p>
            </li>

            <li><b>Create</b>

              <p>
                O <code><b>create</b></code> é chamado pelo <code>preload</code> logo após todas mídias serem
                carregadas
                no
                cache. Ele
                <u>executa uma única vez</u>. Contém "código principal" do estado atual &minus; desenho
                da
                tela,
                definição de variáveis, criação de eventos etc. Ao fim da sua execução, chama o
                <code>update</code>
                &minus;
                se
                existir.
              </p>

              <p>
                É uma função <u>necessária</u> &minus; precisa existir em todos estados, caso contrário
                não
                tem como mudar de
                estado.
              </p>
            </li>

            <li><b>Update</b>

              <p>
                O <code><b>update</b></code> é chamado logo após o fim da execução do <code>create</code>.
                Está
                sincronizado
                com o laço de
                jogo (<i>game loop</i>) e contém o código que reage a mudanças durante a execução. Aqui fica o
                código que
                reage
                a ações do jogador.
                <u>Continua sendo executado iterativamente enquanto não sair do estado</u>.
              </p>

              <p>
                É uma função <u>opcional</u> &minus; algumas telas, por exemplo, só aguardam clique de
                mouse, ou seja, a única
                forma
                de mudar de estado é por um evento, não precisando de <code>update</code> pois ações de
                eventos
                ficam em
                funções
                próprias.
              </p>

              <!-- PENSAR SOBRE O FATO DO CANVAS NEM O CONTEXT ESTAR INCLUSO NO JSDOC POR ESTAREM NO INDEX

            colocar template de estado

            -->
            </li>
          </ol>

          <section id="estado__codigo">
            <h3>No código</h3>

            <p>
              A tabela abaixo mostra a lista com todos estados do iFractions e em que arquivo estão contidos.
            </p>

            <table class='center-box mb-3'>
              <tr>
                <th><b>Estado</b></th>
                <th><b>Arquivo</b></th>
              </tr>
              <tr class="border-top">
                <td>boot</td>
                <td><code>js/menus/menus_boot.js</code></td>
              </tr>
              <tr class="border-top">
                <td>lang<br>loadLang</td>
                <td><code>js/menus/menus_lang.js</code></td>
              </tr>
              <tr class="border-top">
                <td>name</td>
                <td><code>js/menus/menus_name.js</code></td>
              </tr>
              <tr class="border-top">
                <td>menu</td>
                <td><code>js/menus/menu_main.js</code></td>
              </tr>
              <tr class="border-top">
                <td>customMenu</td>
                <td><code>js/menus/menu_custom.js</code></td>
              </tr>
              <tr class="border-top">
                <td>map</td>
                <td><code>js/screens/map.js</code></td>
              </tr>
              <tr class="border-top">
                <td>end</td>
                <td><code>js/screens/end.js</code></td>
              </tr>
              <tr class="border-top">
                <td>studentReport</td>
                <td><code>js/moodle/studentReport.js</code></td>
              </tr>
              <tr class="border-top">
                <td>squareOne</td>
                <td><code>js/games/squareOne.js</code></td>
              </tr>
              <tr class="border-top">
                <td>circleOne</td>
                <td><code>js/games/circleOne.js</code></td>
              </tr>
              <tr class="border-top">
                <td>squareTwo</td>
                <td><code>js/games/squareTwo.js</code></td>
              </tr>
            </table>

            <p>
              É interessante perceber que, de forma simplista, os estados podem ser divididos em duas
              categorias: os
              que
              unicamente carregam elementos de mídia no cache e as telas.
            </p>

            <p>
              Considere a figura abaixo que corresponde ao fluxo principal do jogo usando
              como parâmetros chamadas de estado. Com exceção dos estados <code>boot</code> e <code>loadLang</code>
              que
              só
              fazem
              carregamento, todos os outros estados correspondem a telas no jogo.
            </p>

            <div class="text-center">
              <img src='../../assets/fluxoDeEstados.png' class='ifr__img img-responsive w-75'
                alt='Fluxo principal de estados.'>
            </div>

            <p>
              Quando abrimos o iFractions no navegador, o arquivo <code>index.html</code> é executado,
              carregando
              todos
              arquivos do diretório <code>js/</code>, inicializando o Canvas, e criando referência para todos
              estados.
              Então o
              primeiro estado é chamado: <code>boot</code>. Este estado carrega no cache toda mídia necessária
              para
              as
              telas
              de selecionar linguagem e inserir nome, além dos ícones persistentes em todas as telas. Os
              outros
              elementos
              de
              mídia são carregados a medida que vão sendo necessários quando um estado novo é chamado.
            </p>
          </section>

        </section>

        <hr class="display-4" />

        <section id="mechanics">
          <h2>O arquivo <code class='clear'>gameMechanics.js</code></h2>

          <p>
            O arquivo <code>js/gameMechanics.js</code> é como uma caixa de ferramenta que contém tudo que o
            iFractions
            usa
            durante a construção do código. Foi desenvolvido pelo LInE-IME-USP, com o intuito de diminuir
            dependência
            de
            arcabouços de terceiros quando não se mostrava necessário.
          </p>

          <p>
            Usando o prefixo <code>game</code>, este arquivo provê diversas funções que fazem o gerenciamento
            de
            elementos
            de
            jogabilidade, elementos visuais e sonoros etc, que são usadas em todos outros arquivos JavaScript.
            A
            seguir
            temos a lista das funcionalidades providas por esse arquivo.
          </p>

          <section id="mechanics__estado">
            <h3>1 Gerenciando o comportamento dos estados</h3>

            <p>
              Como apresentado <a href="#estado">anteriormente</a>, os estados são objetos que se comportam
              seguindo
              certas características. O <code>game.state</code> contém todo código que define esses
              comportamentos,
              além
              ser
              responsável por fazer a preparação para transicionar entre estados (limpar eventos, fila de
              mídia,
              variáveis
              etc). Ele provê as seguintes funções:
            </p>

            <ul>
              <li>
                Criar um novo estado:
                <pre><code class='language-js'>game.state.add(&lt;params>)</code></pre>
              </li>
              <li>
                Chama/inicia o estado
                <pre><code class='language-js'>game.state.start(&lt;params>)</code></pre>
              </li>
            </ul>
          </section>

          <section id="mechanics__laco">
            <h3 id=''>2 Laço de jogo (<i>Game loop</i>)</h3>

            <p>
              Quando a função <b>update</b> é chamada dentro de um estado, o laço de jogo é iniciado
              (<code>game.loop</code>), sendo executando iterativamente até a saída do estado atual. Ele
              permite que
              verifiquemos a cada iteração se houve mudança no código por ação do usuário, e é por meio dele
              que é
              possível
              redesenhar tela, estabelecer um temporizador em segundos, executar animação de sprite etc.
            </p>

            <p>
              É importante notar que elas <b>não</b> devem ser usadas diretamente, sendo chamadas pelo
              gerenciador
              de
              estados. Abaixo, as funções disponíveis:
            </p>

            <ul>
              <li>
                Inicia o laço de jogo:
                <pre><code class='language-js'>game.loop.start()</code></pre>
              </li>
              <li>
                Encerra o laço de jogo:
                <pre><code class='language-js'>game.loop.stop()</code></pre>
              </li>
            </ul>

          </section>

          <section id="mechanics__midia">
            <h3>3 Carregando arquivos de mídia para o cache</h3>

            <p>
              O <code>game.load</code> recebe um vetor com os caminhos (URL) para arquivos de mídia e os
              carrega
              para o
              <b>cache</b>.
            </p>

            <p>
              Ele deve ser usado <b>exclusivamente</b> dentro da função <b>preload</b> de um estado,
              garantindo que
              a
              função <b>create</b> só seja chamada quando todos elementos de mídia terminarem de ser
              carregados.
              <i>É importante notar que um elemento de mídia não pode ser usada se não tiver sido antes
                carregado no
                cache.</i>
            </p>

            <p>
              As funções abaixo carregam elementos de mídia:
            </p>

            <!-- A cada URL carregada, ela chama <code>game.load.informMediaIsLoaded()</code>, que recebe a quantidade de elementos carregados até o momento e o total.
        
            Quando tudo for carregado, essa função chama <code>game.load.isPreloadDone()</code>, que verifica se todos tipos de mídia necessário para a página foram completamente carregados e por fim chama <code>game.state.create()</code>.
        
          -->

            <ul>
              <li>
                Arquivos de idioma:
                <pre><code class='language-js'>game.load.lang(&lt;url>)</code></pre>
              </li>
              <li>
                Audios:
                <pre><code class='language-js'>game.load.audio(&lt;urls>)</code></pre>
              </li>
              <li>
                Imagens:
                <pre><code class='language-js'>game.load.image(&lt;urls>)</code></pre>
              </li>
              <li>
                Spritesheets:
                <pre><code class='language-js'>game.load.sprite(&lt;urls>)</code></pre>
              </li>
            </ul>

          </section>

          <section id="mechanics__cache">
            <h3>4 Como essa mídia é carregada no cache</h3>

            <p>
              Levando em consideração que o iFractions é uma aplicação de página única, uma "mudança de tela"
              dentro
              do
              jogo corresponde, na verdade, a desenhar novos elementos gráficos no Canvas, sobrescrevendo a
              tela
              anterior.
            </p>

            <p>
              Dessa forma, diferente de uma aplicação de varias páginas, onde a cada carregamento os elementos
              de
              mídia
              ficam
              prontos antes do código executar, ele utiliza chamadas assíncronas tanto para carregar os
              arquivos
              necessários
              logo no inicio do programa, como para carregar novos elementos durante a execução.
            </p>

            <p>
              Para isso, os arquivos de idioma e de áudio são carregados usando <b>Fetch API</b> e imagens (e
              <i>spritesheets</i>) usando <b>HTMLImageElement</b>, ambos nativos do JavaScript.
            </p>
          </section>

          <section id="mechanics__i18n">
            <h3>5 Sobre o formato dos arquivos de idioma</h3>

            <p>
              Estes arquivos não precisam de extensão todo seu conteúdo segue o formato
              <code>&lt;chave>=&lt;tradução></code>, onde
              as traduções não requerem uso de aspas.
            </p>

            <p class="text-center">
              <b>Ex:</b> <code>insert_name=DIGITE SEU NOME</code> (trecho do arquivo
              <code>/assets/lang/pt_BR</code>).
            </p>

            <p>
              Quando o usuário seleciona um idioma, a função
              <code>game.load.lang(&lt;caminho para arquivo>)</code>
              é
              chamada.
              Nela o conteúdo do arquivo referente ao idioma escolhido é acessado usando o Fetch API. A função
              então
              quebra
              esse texto em <b>chave</b> e <b>tradução</b> usando a quebra de linha como indicativo de que a
              tradução
              encerrou, e os salva num objeto que pode ser acessado da forma <code>game.lang.&lt;chave></code>
              (como é possível ver na <a href="#mechanics__usaMidia">próxima seção</a> ).
            </p>

            <div class="text-center mb-3">
              <img src='../../assets/lang_files.png' class='ifr__img img-responsive' style='width:150px;'
                alt='No iFractions, os arquivos usados para fazer a tradução dos textos ficam no diretório /assets/lang.'>
            </div>
          </section>

          <section id="mechanics__usaMidia">
            <h3 id=''>6 Usando arquivos de idioma e áudio diretamente</h3>
            <p>
              O <code>gameMechanics.js</code> contém os objetos <code>audio, lang, image</code> e
              <code>sprite</code>,
              onde os elementos de mídia são salvos pelo <code>game.load</code> porém apenas
              <code>audio</code> e
              <code>lang</code> devem ser acessados diretamente.
            </p>

            <p>
              Abaixo a forma de acesso desse tipos de mídia:
            </p>

            <ul>
              <li>
                Toca o som:
                <pre><code class='language-js'>game.audio.&lt;nome do audio>.play()</code></pre>
              </li>
              <li>
                Retorna a tradução associada àquela chave de acordo com o idioma selecionado pelo jogador:
                <pre><code class='language-js'>game.lang.&lt;chave da palavra></code></pre>
              </li>
            </ul>

            <p>
              Já os objetos <code>image</code> e <code>sprite</code> <b>não</b> devem ser acessados
              diretamente, mas
              sim
              por meio da função <code>game.add</code> &minus; <a href="#mechanics__canvasIndireto">seção 7</a> &minus;
              que salva os
              elementos
              gráficos
              na
              <b>fila de mídia</b> para o estado atual. A fila de mídia é usada <b>exclusivamente</b> por
              <code>game.render</code>, que é chamado pelo gerenciados de estados. Mais sobre os detalhes
              dessa
              implementação
              na <a href="#mechanics__canvasDireto">seção 8</a></span>.
            </p>

          </section>

          <section id="mechanics__canvasIndireto">
            <h3 id=''>7 Desenhando na tela (indiretamente)</h3>

            <p>
              As funções providas por <code>game.add</code> podem ser usadas sempre que for desejado colocar
              algum elemento gráfico na tela. No entanto, é importante notar que, por si só, ela não renderiza esses
              elementos na tela. Todo desenho no Canvas é realizado por <code>game.render</code> (<a
                href="#mechanics__canvasDireto">seção
                8</a>), que é chamado pelo gerenciador de estados quando este redesenha o Canvas. Assim, o papel das
              funções abaixo é adicionar esses elementos para a fila de renderização. Obs.:
              <i>Os parâmetros em negrito são obrigatórios enquanto os outros são opcionais.</i>
            </p>

            <ul>
              <li>
                Imagem:
                <pre><code class='language-js'>game.add.image(&lt;params>)</code></pre>
                <code>&lt;params> = <b>x, y, img</b>, scale, alpha</code>
              </li>
              <li>
                Spritesheet:
                <pre><code class='language-js'>game.add.sprite(&lt;params>)</code></pre>
                <code>&lt;params> = <b>x, y, img</b>, curFrame, scale, alpha</code>
              </li>
              <li>Texto:
                <pre><code class='language-js'>game.add.text(&lt;params>)</code></pre>
                <code>&lt;params> = <b>x, y, text, style</b>, align</code>
              </li>
            </ul>

            <p>
              Figuras geométricas também podem ser criadas usando <code>game.add.graphic</code>:
            </p>

            <ul>
              <li>
                Retângulo:
                <pre><code class='language-js'>game.add.graphic.rect(&lt;params>)</code></pre>
                <code>&lt;params> = <b>x, y, width, height</b>, lineColor, lineWidth, fillColor, alpha</code>
                <br>
              </li>
              <li>
                Círculo:
                <pre><code class='language-js'>game.add.graphic.circle(&lt;params>)</code></pre>
                <code>&lt;params> = <b>x, y, diameter</b>, lineColor, lineWidth, fillColor, alpha</code>
              </li>
              <li>
                Arco:
                <pre><code class='language-js'>game.add.graphic.arc(&lt;param>)</code></pre>
                <code>&lt;params> = <b>x, y, diameter, angleStart, angleEnd</b>, anticlockwise, lineColor, lineWidth, fillColor, alpha</code>
                <br>
              </li>
              <li>
                Linha (em construção):
                <pre><code class='language-js'>game.add.graphic.line(&lt;param>)</code></pre>
                <code>&lt;params> = <b>x0, y0</b>, x1, y1, lineWidth, lineColor, alpha</code>
                <br>
              </li>
            </ul>

            <section id="mechanics__canvasIndireto__props">

              <h4>7.1 Algumas propriedades disponíveis para esses elementos</h4>

              <ul>
                <li>
                  Pivô:
                  <pre><code class='language-js'>&lt;mídia>.anchor(&lt;valor horizontal>,&lt;valor vertical>)</code></pre>
                </li>
                <li>
                  Adicionar sombra na figura:
                  <pre><code class='language-js'>&lt;mídia>.shadow = &lt;valor booleano></code></pre>
                </li>
                <li>
                  Rotação:
                  <pre><code class='language-js'>&lt;mídia>.angle = &lt;ângulo em graus></code></pre>
                </li>
                <li>
                  Transparência:
                  <pre><code class='language-js'>&lt;mídia>.alpha = &lt;valor entre 0 e 1></code></pre>
                </li>
              </ul>

              <p>
                A tabela abaixo apresenta uma visualização das propriedades disponíveis
                para
                cada
                elemento
                gráfico adicionado usando <code>game.add</code>. Em verde temos os parâmetros obrigatórios na
                criação,
                em
                amarelo o parâmetros opcionais, em azul as outras propriedades que podem ser usadas e em
                branco as
                propriedades
                que o elemento não tem acesso.
                <!-- 
              ver se tem rotação na criação do objeto ou se ele pode so ser adicionado depois e considerado por game.render 
            -->
              </p>

              <div class='center'>

                <!--<table class='center-box' style='border-left: none; border-top: none'>-->
                <table class='table table-bordered'>
                  <thead>
                    <tr>
                      <td></td>
                      <th><span class='vertical'><b>image</b></span></th>
                      <th><span class='vertical'><b>sprite</b></span></th>
                      <th><span class='vertical'><b>text</b></span></th>
                      <th><span class='vertical'>geom.<b>rect</b></span></th>
                      <th><span class='vertical'>geom.<b>circle</b></span></th>
                      <th><span class='vertical'>geom.<b>arc</b></span></th>
                      <th><span class='vertical'>(em progresso)<br>geom.<b>line</b></span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>x</th>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td></td>
                    </tr>
                    <tr>
                      <th>y</th>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>img</th>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>scale</th>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>alpha</th>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td class='table-primary'></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>curFrame</th>
                      <td></td>
                      <td class='table-warning'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>width</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-success'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>height</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-warning'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>text</th>
                      <td></td>
                      <td></td>
                      <td class='table-success'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <th>style</th>
                      <td></td>
                      <td></td>
                      <td class='table-success'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <th>align</th>
                      <td></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <th>font</th>
                      <td></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>fill</th>
                      <td></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>lineColor</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>lineWidth</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>fillColor</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td class='table-warning'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>diameter</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-success'></td>
                      <td class='table-success'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>angleStart</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td class='table-success'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>angleEnd</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td class='table-success'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>anticlockwise</th>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td class='table-warning'></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>xAnchor</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>yAnchor</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>anchor</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>xWithAnchor</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>yWithAnchor</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>

                    </tr>
                    <tr>
                      <th>shadow</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td class='table-primary'></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <th>shadowColor</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                    </tr>
                    <tr>
                      <th>shadowBlur</th>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td class='table-primary'></td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>

                <p>
                  Lista de propriedades de cada elemento gráfico adicionados usando <code
                    class='language-js'>game.add</code> &minus; em verde
                  os parametros obrigatórios na criação; em amarelo os parametros opcionais; em azul as outras
                  propriedades disponíveis.
                </p>

              </div>

            </section>

          </section>

          <section id="mechanics__canvasDireto">
            <h3>8 Desenhando na tela (diretamente)</h3>

            <p>
              Em <code>game.render</code> está o código que pega um objeto previamente criado em
              <code>game.add</code>
              e
              desenha na tela usando as propriedade do elemento Canvas.
            </p>

            <p>
              Ele utiliza uma fila de renderização &minus; <code>game.render.queue</code> &minus; para
              estabelecer a
              ordem
              de
              desenho
              na
              tela e é chamada <b>exclusivamente</b> pelo gerenciador de estados &minus; que redesenha a tela
              a cada
              chamada
              do
              laço de jogo.
            </p>

            <p>
              É importante notar que o processo de desenho na tela foi dividido em <code
                class='language-js'>game.add</code>
              e
              <code>game.render</code> por conta do laço de jogo, que redesenha a tela diversas
              vezes.
            </p>

            <p>
              <b>Resumindo a estrutura:</b> <code>game.add</code> cria o elemento e o salva na fila
              de renderização e
              <code>game.render</code> (re)desenha os elementos da fila de renderização na tela sempre que é
              chamado
              pelo
              gerenciador de estados &minus; <code>game.state</code> &minus; que, por sua vez, segue o tempo
              estabelecido pelo
              laço
              de
              jogo &minus; <code>game.loop</code>.
            </p>

            <ul>
              <li>
                Desenha no Canvas todos elementos que estão na na fila de renderização:
                <pre><code class='language-js'>game.render.all()</code></pre>
              </li>
              <li>
                Limpa a fila de renderização. É chamado pelo gerenciador de estados ao sair de um estado para
                que
                elementos antigos não sigam sendo redesenhados na tela:
                <pre><code class='language-js'>game.render.clear()</code></pre>
              </li>
            </ul>

          </section>

          <section id="mechanics__matematica">
            <h3>9 Funções matemáticas</h3>

            <!-- adicionar novas -->

            <p>
              Algumas funções são necessárias diversas vezes no jogo então foram centralizadas em
              <code>game.math</code>.
            </p>

            <ul>
              <li>
                Retorna um inteiro entre dois números
                <pre><code class='language-js'>game.math.randomInRange(&lt;params>)</code></pre>
              </li>
              <li>
                Retorna um divisor aleatório de um número:
                <pre><code class='language-js'>game.math.randomDivisor(&lt;params>)</code></pre>
              </li>
              <li>
                Converte de grau para radiano:
                <pre><code class='language-js'>game.math.degreeToRad(&lt;params>)</code></pre>
              </li>
              <li>
                Retorna a distância do centro de um ícone para o ponteiro do mouse:
                <pre><code class='language-js'>game.math.distanceToPointer(&lt;params>)</code></pre>
              </li>
              <li>
                verifica se ponteiro está sobre um ícone (frequentemente usada para validar eventos de mouse):
                <pre><code class='language-js'>game.math.isOverIcon(&lt;params>)</code></pre>
              </li>
            </ul>

          </section>

          <section id="mechanics__mouse">
            <h3 id=''>10 Eventos de mouse</h3>

            <p>
              O <code>game.event</code> encapsula <b>eventos</b> para que sejam usados pelo gerenciador de
              estado.
              Atualmente, ele captura eventos de mouse e toque de tela.
            </p>

            <ul>
              <li>
                Captura evento de clique de mouse (e toque de tela):
                <pre><code class='language-js'>game.event.add('click',&lt;função>)</code></pre>
              </li>
              <li>
                Captura evento de movimento de mouse. Usado para ver se o ponteiro está sobre um ícone:
                <pre><code class='language-js'>game.event.add('move',&lt;função>)</code></pre>
              </li>
            </ul>

            <p>
              É importante entender a forma como o Canvas lida com eventos. Elementos desenhados no Canvas não
              são
              isolados do
              mesmo, assim, o evento é capturado pelo Canvas como um todo e não pelo elemento separadamente.
            </p>

            <p>
              Assim, quando um evento é capturado, a função definida como parâmetro na criação do evento é
              chamada.
              Por
              convenção usamos os nomes <code>onInputOver()</code> e <code>onInputDown()</code> e precisam ser
              declaradas
              dentro do estado que contém o
              evento.
            </p>

            <p>
              Assim, quando estas funções são chamadas, sabemos que um evento foi capturado pelo Canvas, mas
              não
              sabemos
              se o
              ponteiro está sobre um elemento válido. Então essas funções devem fazer essa verificação. Para
              isso
              usamos
              sempre que possível a função <code>game.math.isOverIcon()</code>,
              que
              recebe
              a lista de ícones válidos e as coordenadas do ponteiro e retorna se este está sobre algum deles.
            </p>

          </section>

          <section id="mechanics__animacao">
            <h3>11 Animação de sprites</h3>

            <!-- O Spritesheet é... -->
            <p>
              As funções providas por <code>game.animation</code> gerenciam as animações do jogo. Essas
              animações
              são
              feitas iterando pelos frames de um <i>spritesheet</i> a cada iteração do laço de jogo.
            </p>

            <ul>
              <li>
                Começa a executar uma animação:
                <pre><code class='language-js'>game.animation.play(&lt;params>)</code></pre>
              </li>
              <li>
                Para uma animação:
                <pre><code class='language-js'>game.animation.stop(&lt;params>)</code></pre>
              </li>
            </ul>

            <p>
              Uma vez que seja adicionada a propriedade <code>animation</code> a um sprite ele pode ser
              animado
              usando
              estas
              funções acima.
            </p>

            <ul>
              <li>
                Adiciona a um <i>spritesheet</i> a propriedade de animação:
                <pre><code class='language-js'>&lt;sprite>.animation = [&lt;nome>,[&lt;frames>]]</code></pre>
              </li>
            </ul>

          </section>

          <section id="mechanics__temp">
            <h3 id=''>12 Temporizador</h3>

            <p>
              Usado no iFractions para calcular o tempo que o jogador levou para terminar um jogo, o
              <code>game.timer</code> está associado ao laço de jogo e conta os segundos passados
              desde o inicio do seu contador até o fim.
            </p>

            <ul>
              <li>
                Inicia o contador:
                <pre><code class='language-js'>game.timer.start()</code></pre>
              </li>
              <li>
                Para o contador:
                <pre><code class='language-js'>game.timer.stop()</code></pre>
              </li>
              <li>
                Retorna o tempo percorrido:
                <pre><code class='language-js'>game.timer.elapsed</code></pre>
              </li>
            </ul>
          </section>

        </section>

        <hr class=" display-4" />

        <section id="global">
          <h2>O arquivo <code class='clear'>globals.js</code></h2>

          <p>Em construção...</p>

          <!-- <p>
            O arquivo <code>/js/globals.js</code> contém variáveis, objetos e funções globais do iFractions,
            possuindo
            informações como <code>gameType, levelType, sublevelType, gameDifficulty</code>, que definem a
            escolha
            do
            jogo atual, como ilustrado pela tabela <span>\ref{tab:niveis}</span>). -->

          <!-- Expandir.
              
              item -> <code>url</code> - contém as URL para os arquivos de mídia; usado para parâmetro para
              <code>game.load</code>; divide as URL por tela onde é carregada e tipo de mídia.
            -->
          </p>

        </section>

        <div class="d-flex justify-content-between">
          <a class="btn btn-primary" href='./page_2.html' role="button">Voltar - tecnologias utilizadas</a>
        </div>

      </div>

      <div class="col-lg-2 p-1"></div>
    </div>
  </main>

  <!-- rodape -->
  <footer id='footer' class="container-flex mt-5 py-5 text-center"></footer>

</body>

<script src="../../script/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../../script/index.js"></script>
<script>
  updateMenu(2);
</script>

</html>