×

## Criando um novo jogo

Se você é um desenvolvedor que deseja colaborar com o iFractions criando um novo jogo, essa seção mostrará os passos mínimos para fazê-lo.

- ### 1. Criar um arquivo novo em `js/games/nomeDoJogo.js` contendo:

      /******************************
       * This file holds game states.
       ******************************/

      /** [GAME STATE]
       *
       * Write game documentation here
       *
       * @namespace
       */
      const nomeDoJogo = {
        /**
         * Main code
         */
        create: function () {
          // Your code goes here

          if (moodle) {
            navigation.add.right(['audio']);
          } else {
            navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
            navigation.add.right(['audio']);
          }

          game.timer.start(); // Set a timer for the current level (used in postScore())
          game.event.add('click', this.events.onInputDown);
          game.event.add('mousemove', this.events.onInputOver);
        },

        /**
         * Game loop
         */
        update: function () {
          // Your code goes here

          game.render.all();
        },

        utils: {
          // Your functions go here
        },

        events: {
          /**
           * Called by mouse click event
           *
           * @param {object} mouseEvent contains the mouse click coordinates
           */
          onInputDown: (mouseEvent) => {
            // Your code goes here

            navigation.onInputDown(x, y);
            game.render.all();
          },

          /**
           * Called by mouse move event
           *
           * @param {object} mouseEvent contains the mouse move coordinates
           */
          onInputOver: (mouseEvent) => {
            // Your code goes here

            navigation.onInputOver(mouseEvent.x, mouseEvent.y);
            game.render.all();
          },
        },

        fetch: {
          /**
           * Saves players data after level ends - to be sent to database

           *
           * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
           *
           * @see /php/save.php
           */
          postScore: () => {
            const data = ''; // Your query goes here
            sendToDatabase(data);
          },
        },
      };

- ### 2. Adicionar o arquivo criado no `<body>` em `index.html`

      <script src="./js/games/nomeDoJogo.js"></script>

- ### 3. Adicionar o novo estado do jogo no `<script>` em `index.html`

      game.state.add('nomeDoJogo', nomeDoJogo);

- ### 4. Adicionar as informações sobre o jogo novo na lista de jogos em `js/globals/globals_control.js`

      const gameList = [
        // ...
        {
          gameName: string, // Nome do jogo
          gameMode: string[], // Modos de jogo disponíveis
          gameOperation: string[], // Operações de jogo disponíveis
          gameDifficulty: number, // Nível máximo de dificuldade
          gameShape: string, // Figura geométrica que está representando a fração
          assets: {
            menu: { // centraliza informações necessárias no menu principal
              gameNameBtn: string, // ID do botão de seleção do jogo atual no menu principal
              infoBox: () => ({}) // Conteúdo informativo que aprece ao clicar no "?" ao lado do botão
            },
            customMenu: { // centraliza informações necessárias no menu secundário
              gameModeBtn: string[], // ID do botão de modo do jogo atual no menu secundário
              gameOperationBtn: string[], // ID do botão de operação
              auxiliarTitle: (x, y, offsetX, offsetH) => {}, // renderiza parte de elemento auxiliar no menu secundário
              infoBox: () => ({
                gameMode: {},
                gameDifficulty: {},
                gameMisc: {},
              }), // Conteúdo informativo que aparece ao clicar no "?" ao lado de cada botão
            },
            map: { // centraliza informações necessárias no mapa do jogo
              characterAnimation: (operation) => {}, // Parâmetros recebidos pela função de animar personagem no mapa
              character: (operation) => {}, // Sprite com animação do personagem principal do jogo percorrendo o mapa
              startBuilding: () => {}, // Lugar de onde o personagem sai no mapa
              endBuilding: () => {}, // Lugar que o personagem quer chegar ao percorrer o mapa
            },
            end: { // centraliza informações necessárias na tela final do jogo
              characterAnimation: () => ({}), // Parâmetros recebidos pela função de animar personagem na tela final
              character: () => ({}), // Sprite com animação do personagem principal do jogo na tela final
              building: () => ({}) // Lugar que o personagem quer chegar ao percorrer o mapa
            }
          }
        }
      ];

- ### 5. Adicionar as mídias que serão usadas no jogo atual em `js/globals/globals_tokens.js`

  A global `url` referencia todos arquivos de mídia usados dentro do iFractions. Novos itens podem ser adicionados em `boot` ou dentro de uma nova propriedade com o nome do jogo. Itens colocados em `boot` são carregados em cache assim que o iFractions inicia enquanto os dentro do uma propriedade com o nome do jogo só serão carregadas quando esse jogo for selecionado.

      const url: {
        // (esses itens serão carregados logo quando o ifractions é iniciado)
        // é preciso pelo menos colocar os ícones de menu associados ao novo jogo
        boot: {
          image: [
            ['game_<gameId>', <url>], // ícone do jogo no menu primario
          ],
          sprite: [
            ['mode_<gameId>', <url>], // ícone do modo de jogo no menu secundario
          ]
        },

        // (esse itens só serão carregados ao abrir o jogo)
        nomeDoJogo: {
          image: [
            ['<lugar de onde o personagem sai no mapa>', <url>],
            ['<lugar onde o personagem chegará no mapa>', <url>],
          ],
          sprite: [
            ['<spritesheet do personagem>', <url>],
          ],
          audio: [],
        }

      }

- ### 6. Adicionar novos assets

  Criar as novas figuras em:

  - `assets/img/icons_menu/nomeDoJogo.png` -> ícone de jogo na tela de menu principal.
  - `assets/img/icons_menu/nomeDoJogo_1.png` -> ícone de modo de jogo na tela de menu de customização.

Voltar