Loading...

Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.

Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.

Jogos Educacionais

O Nova inclui uma solução própria para integração de jogos educacionais

Similar à solução de infográficos, com forte orientação para implementação de jogos, servindo um sistema de preload para áudios, html de template, arquivos de imagem e dados.

Implementando

O sistema de incorporação de jogos se dá pelo componente nm-jogos através do atribudo data-active.

Por padrão, os jogos são chamados dentro de um popup utilizando o sistema de popup do framework. Para tanto, são necessários três elementos: a chamada do popup, o conteúdo do popup com a chamada para o componente de jogo e o compoenente do jogo em si.

<div 
	id="forca_containner"  					// ID para identificação do container do jogo
	data-active="nm_jogo"  					// Comando para ativar módulo de jogo e identificá-lo como tal 
	data-href="nm-forca"   					// Nome de referência utilizado para compor nomes default para demais atributos [ ex: nm-forca ]
	data-folder="./extras/"					// Opcional - Local onde a posta com o jogo se encontra relativamente à tela [ Default: ./extras/nm-forca ]

	data-script								// Opcional - caminho para o arquivo principal de javascript [ Default: js/main.js ]
	data-style								// Opcional - caminho para o arquivo principal de css [ Default: css/estilo.css ]
	data-style								// Opcional - caminho para o arquivo principal de template [ Default: game.html ]
	data-init									// Opcional - função para ativação do jogo [ Default: id só com letras e números somado à Init, nmforcaInit ]
	data-perguntas="data/jogo_palavras.xml"	// Opcional - atributo extra
></div>

Função Construtora

O construtor básico do jogo será uma função dentro do arquivo principal de script que será ativada passando o objeto jQuery do elemento DOM com a chamada do jogo e uma pequena biblioteca com funções úteis.

var exemploInit = function( $containner, utilLib ){
	/* Seus códigos */
};

Utils

O objeto utilLib dispõem alguns métodos de apoio padronizados. As duas principais funções são:

cssTransform( $elem, val )

A função aplica uma transformação através da string ao objeto, via css, incluido os devidos prefixos.

 utilLib.cssTransform('.nucleo', 'scale( 0.5 )')

Atenção: a função sobreescreve qualquer transformação que o objeto já tenha.

preload( requestList, callback )

A função controla o carregamento de diversos recursos e retorna, ao fim de todas as dependências para uma função callback, um objeto com as respectivas referências.

extras.preload(
	[
		{ type:"data",  src: './data/jogo-perguntas.json', id:'perguntas' },
		{ type:"audio", src: './audios/jogo-trilha.mp3', id:'trilha' },
		{ type:"image", src: './img/jogo-bg.jpg', id:'bg' },
		{ type:"quest", url: './data/jogo-questionario.xml', basic: true, id:'questionario' },
	],
	function( libDependencias ){
		jogo.init(libDependencias); // use aqui a sua função
		nm.sounds.start( libDependencias.trilha );

		console.log('Dependências carregadas');
});

Como visto no exemplo, o preload permite carregar sons, imagens, arquivos de dados ( json ou xml ) e um questionário. Cada qual desses contendo suas propriedades e métodos.

Clique em cada um para um documentação mais detalhes.