Introdução aos Tipos Abstratos de Dados em Jogos

Prévia do material em texto

03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 1/41
introdução
Introdução
PROGRAMAÇÃO E INTEGRAÇÃO DE JOGOSPROGRAMAÇÃO E INTEGRAÇÃO DE JOGOS
INTRODUÇÃO AOS TIPOS ABSTRATOSINTRODUÇÃO AOS TIPOS ABSTRATOS
DE DADOSDE DADOS
Autor: Me. Victor de Assis Rodrigues
Revisor : Emerson dos Santos Paduan
IN IC IAR
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 2/41
Nesta unidade, faremos uma introdução aos Tipos Abstratos de Dados. Discorreremos sobre a
importância da abstração para representação e resolução de problemas, além da relação com
o processo de desenvolvimento de jogos digitais e os aspectos do mecanismo de jogos.
Na sequência, analisaremos a mecânica de alocação de memória, com dados homogêneos e
heterogêneos. Nesse contexto, discorreremos sobre as diferenças entre usar matrizes e
ponteiros e suas utilizações.
Após a abordagem desses conceitos, aprenderemos a aplicá-los na prática, usando uma
linguagem de programação para criação de jogos digitais. Para isso, criaremos um jogo de
labirinto usando a técnica de jogos tile maps , com a linguagem de programação Javascript no
HTML 5.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 3/41
Nesse tópico, conheceremos os tipos abstratos de dados e sua importância para a área de
programação em jogos. Além disso, explicaremos a importância do planejamento antes de se
começar um novo projeto e também como introduzir a linguagem Javascript com HTML 5, que
utilizaremos para desenvolver os exercícios e demais atividades dessa disciplina.
Criação de Jogos: Por Onde Começar?
Antes de começarmos a abordar os elementos que compõem os mecanismos de games, é
importante falar sobre o processo de produção. Imagine que você e um colega tenham
vontade de produzir um jogo. A dúvida é: por onde começar?
O processo da produção de jogos se assemelha bastante ao do desenvolvimento de software
comum (FERRARI et al., 2014), entretanto um jogo digital possui características que aumentam
a complexidade e estimulam o desa�o (BRITTO, 2011).
É diferente quando comparamos, por exemplo, um projeto de animação interativa e um jogo
digital. Na animação interativa, o usuário possui poucas opções de personalização e interação,
enquanto o jogo digital oferece várias formas de se explorar a diversão e fornecer experiências
inesquecíveis ao jogador (BRITTO, 2011).
Dentre os mecanismos que podemos adotar para engajamento do jogador, podemos citar a
criação de menus e interfaces coesos e objetivos, a inserção de desa�os e resoluções de
problemas, mecânicas variadas, evolução gradativa de habilidades e equipamentos do jogador,
dentre diversas outras (SCHUYTEMA, 2008). Na prática, para implementá-las, precisamos
representar as informações necessárias no mundo computacional e conseguir gerenciar esses
dados de forma e�ciente.
Tipos Abstratos de DadosTipos Abstratos de Dados
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 4/41
Assim, todo projeto começa com a ideia ou, em outras palavras, com o que de fato pretende
ser desenvolvido. Em seguida, o projeto entra em seu ciclo de vida tradicional com as etapas de
análise, projeto, implementação, teste e manutenção (FERRARI et al ., 2014).
Abstração e Estrutura de Dados
Agora que já discutimos um pouco sobre as etapas do desenvolvimento de jogos digitais,
começaremos a nos aprofundar em mecanismos que compõem um game.
O primeiro passo é entendermos o valor da abstração em nosso dia a dia, independentemente
da idade que temos e da natureza dos desa�os que enfrentamos.
A informática é considerada a ciência das informações. É nesse campo que investigamos a
manipulação, organização e utilização de dados dos eventos que ocorrem no mundo
(LAUREANO, 2008). Com a evolução da tecnologia, muitos dados sobre comportamentos e
processos são gerados, inclusive em jogos digitais e plataformas de games, o que reforça ainda
mais a importância de técnicas rápidas e seguras de gerenciar e recuperar essas informações.
As estruturas de dados nada mais são do que “[...] formas otimizadas de armazenamento e
tratamento das informações eletronicamente” (LAUREANO, 2008, p. 237). Muitas dessas formas
são inspiradas em situações reais do dia a dia, mecanismos presentes no mundo e
incorporados de forma adaptada para o mundo computacional (LAUREANO, 2008).
Análise
Nessa fase é feito um levantamento de requisitos, ou
seja, desde a descrição narrativa do jogo, até seus
objetivos, enredo formas de interação e mecanismos
de recompensa.
freepik.com
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 5/41
A abstração é uma ferramenta aplicada ao processo de aquisição de conhecimento, e é
essencial para a resolução de problemas. Consiste em selecionar quais características mais
importantes de um assunto ou contexto que se deseja esclarecer e elaborar descrições
adequadas, permitindo que a caracterização dos conceitos seja reduzida a seu per�l mais
conveniente (ALMEIDA, 1981; CAPRA, 1983 apud SAYÃO, 2001).
Abstração nos Mecanismos de Jogos de Cartas
Analisaremos por um momento o jogo de poker. Fique tranquilo caso você não saiba as regras,
pois não iremos aprofundar nesse aspecto. Levantaremos apenas alguns mecanismos
presentes nos jogos de cartas em geral.
Toda carta possui um naipe e um valor. Se fossemos implementar esse jogo no computador,
essas informações seriam bastantes relevantes e devem ser armazenadas. Sabemos também
que o valor dessas duas informações não muda no decorrer do jogo, ou seja, um “K” (Rei) de
Copas no início do jogo ainda será um “K” de Copas no �nal. Na Figura 1.1, é ilustrado um
exemplo padrão de cartas de um baralho.
Quando as cartas estão no baralho, existe um mecanismo correto para distribuição aos
jogadores. Podemos dizer que as cartas estão organizadas em uma pilha e que, quando
distribuídas, devem ser retiradas sempre do mesmo ponto do baralho (acima ou abaixo),
nunca no meio.
Além disso, temos outras operações que são realizadas em outros jogos: embaralhar as cartas,
reordenar as cartas em ordem crescente ou decrescente, recolocar uma carta no topo. Muitas
dessas operações possuem regras bem de�nidas que devem ser implementadas também no
computador.
Assim, reconhecendo as características dos elementos dos jogos, que passaremos a chamar de
atributos , e os mecanismos que os jogos possuem, que começaremos a chamar de
Figura 1.1 - Cartas de um baralho
Fonte: Michael Brown / 123RF.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 6/41
operadores , de�niremos qual o tipo abstrato de dados mais adequado para implementá-los
no computador.
De�inição de Tipo Abstrato de Dados
De acordo com Cerqueira, Celes e Rangel (2008), um tipo abstrato de dados (TAD) pode ser
visto como uma estrutura capaz de agrupar dados de um mesmo domínio e os procedimentos
necessários para gerenciar esses dados.
Assim, levando em conta o pensamento de Ferrari (2014), o papel do TAD não é de�nir a
implementação que vai ser escrita em determinada linguagem de programação, mas, sim,
fornecer a ideia de como aquela estrutura de dados vai operar, e seu nome é Tipo Abstrato de
dados.
Assim, como exemplo do que foi apresentado na Seção 1.2.1, podemos de�nir o tipo abstrato
do baralho de cartas, conforme a Quadro 1.1:
Nas próximas seções, abordaremos mais detalhadamente a implementação de uma TAD,
utilizando como suporte a linguagem de programação Javascript.
Dentre as vantagens deutilizarmos os TADs, temos (DOVICCHI, 2008; FERRARI, 2014;
LAUREANO, 2008):
Facilidade de programar sem se preocupar com detalhes de implantação: se
precisamos devolver uma carta para o baralho, em vez de nos preocuparmos com o
status da pilha e das cartas, basta apenas chamar o operador correspondente.
Facilidade em preservar a integridade dos dados: desde que utilize os operadores
do tipo de dados abstratos, os dados serão gerenciados e preservados de forma
segura.
Maior potencial de reutilização de código: por se tratar de estruturas abstratas,
uma mesma estrutura de dados pode ser utilizada em diversos contextos. Por
exemplo, um TAD para o baralho de poker pode ser reutilizado para o jogo de
paciência, uma vez que os mecanismos são idênticos.
Dessa forma, um Tipo Abstrato de Dados reúne duas propostas: a concepção de uma estrutura
de dados, baseando-se em todas as características do problema, e também as propriedades
Quadro 1.1 - De�nição de TAD para Baralho de Cartas
Fonte: Elaborado pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 7/41
técnicas para implementação nos computadores. Exploraremos melhor esses conceitos
técnicos nas próximas seções.
praticar
Vamos Praticar
Leia o trecho a seguir:
“Um tipo de dado é um conceito abstrato, de�nido por um conjunto de propriedades
lógicas. Assim que um tipo de dado abstrato é de�nido e as operações válidas envolvendo
esse tipo são especi�cadas, podemos implementar esse tipo de dado (ou uma
aproximação)” (TENENBAUM; LANGSAM; AUGENSTEIN, 1995, p. 11).
Sobre os tipos abstratos de dados, assinale a alternativa correta:
a) Quando queremos implementar um elemento do mundo real para o computador, devemos
implementar todos os aspectos relacionados ao elemento.
b) As características presentes nos objetos são chamadas de operadores, e todos os eventos e
mecanismos que um objeto fornece para interação são chamados de atributos.
c) O objetivo de um Tipo Abstrato de Dados é representar os aspectos detalhados de
implementação de um elemento do mundo real em um computador.
d) Abstração pode ser considerada como a re�exão das características mais importantes de
um determinado elemento ou contexto.
e) Uma das vantagens de programar com TAD é o foco e preocupação com detalhes de
implantação em uma linguagem de programação.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 8/41
Quando dizemos que precisamos armazenar um valor, estamos nos referindo a reservar uma
parte da memória do computador para esse propósito.
Quando precisamos alocar memória para um conjunto de elementos como todas as cartas do
baralho, precisamos ter espaço na memória do computador para armazenar cada um dos
membros desse conjunto.
Os tipos de dados utilizados por um algoritmo podem ser classi�cados em dois grupos:
atômicos ou compostos. Os tipos atômicos são aqueles cujos valores não podem ser divisíveis,
por exemplo, números inteiros, números reais, caracteres e valores lógicos booleanos
(LAUREANO, 2008).
Tipos de Dados e Uso deTipos de Dados e Uso de
MemóriaMemória
reflita
Re�ita
No ramo da computação, existem diversas formas de representarmos
conceitos e objetos do mundo real. Até eventos aleatórios podem ser
representados por meio da geração de números randômicos, que,
dependendo do número sorteado, gera uma ação. O importante sempre é
buscar a melhor forma de implementação e pensar quais características são
necessariamente essenciais para o contexto.
Fonte: Elaborado pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=uczP… 9/41
Já os tipos compostos são aqueles resultantes pelo agrupamento de um conjunto de valores
em uma estrutura, assim também são chamados de tipos estruturados (LAUREANO, 2008). A
representação de um carro em um jogo digital seria um exemplo de tipo composto. Repare
que ele possui várias características, como: nome, marca, aceleração, velocidade �nal, teor de
frenagem, entre diversas outras. Todas esses atributos, quando agrupados em uma única
estrutura, de�ne um tipo de dados chamado Carro. Qualquer Carro que for criado dentro do
jogo terá as características que foram de�nidas.
Dados Homogêneos
Dentre as estruturas de dados existentes, temos aqueles que utilizam apenas um tipo de dado,
denominados dados homogêneos. As estruturas mais conhecidas são os vetores e matrizes,
muito utilizadas em jogos digitais.
Vetores
Vetor consiste em uma estrutura de dados linear que, para ter seus dados endereçados,
necessita apenas de um índice. De acordo com Laureano (2008), utiliza-se um vetor para
armazenar uma lista de valores do mesmo tipo, armazenando mais de um valor na mesma
variável.
Um vetor possui um determinado número de células, em que cada célula armazena um dos
valores. Cada célula possui seu índice, que a permite ser referenciada.
Os vetores possuem alocação estática , dessa forma, é preciso declarar, no momento da
criação, a quantidade de posições serão utilizadas. A alocação estática é quando uma parte
da memória é determinada em tempo de compilação, no momento que uma variável é
de�nida. Para o vetor, esse tipo de alocação também é sequencial, ou seja, os elementos são
alocados na memória, um ao lado do outro, o que facilita sua localização (LAUREANO, 2008).
Não é possível realizar a inclusão ou exclusão de índices durante a execução do programa, uma
vez que parte da memória já foi destinada para a variável.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 10/41
Figura 1.2 - Ilustração do jogo da memória com cores
Fonte: Elaborada pelo autor.
Por exemplo, um jogo da memória com cores, conforme ilustrado na Figura 1.2, no qual o
usuário deve repetir a sequência de cores que é apresentado e a cada rodada vencida, uma
nova cor é adicionada, pode ser representado mediante um vetor com inclusão de um novo
índice a cada rodada.
No Quadro 1.2, é possível veri�car a atribuição das cores ao vetor.
Quadro 1.2 - Atribuição das cores no vetor
Fonte: Elaborado pelo autor.
Todas as posições podem ser acessadas por meio de seu índice. Por exemplo, no vetor
jogoMemoria[2], estamos acessando o vetor na posição 2, encontraremos, então, a cor Azul.
Obs.: na maioria das linguagens de programação, o vetor inicia no índice 0, então, um vetor de
5 posições terá sua última posição acessada por meio do nomeVetor[4].
Os vetores podem ser classi�cados como dados homogêneos, uma vez que todo seu conteúdo
é composto do mesmo tipo e corresponde a uma mesma posição de memória, identi�cado
pelo mesmo nome, individualizado por índices.
Na memória, os índices de vetores são armazenados lado a lado.
Exemplo: vetorAnimais[3] = [Gato],[Cachorro],[Peixe];
vetorCores[2] = [Azul],[Rosa]
Rodada 1: Vermelho <vazio> <vazio> <vazio>
Rodada 2: Vermelho Azul <vazio> <vazio>
Rodada 3: Vermelho Azul Azul <vazio>
Rodada 4: Vermelho Azul Azul Verde
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 11/41
Na memória:
Figura 1.3 - Atribuição das cores no vetor
Fonte: Elaborada pelo autor.
É possível encontrar linguagens que suportam estruturas conhecidas como vetores dinâmicos.
Esse recurso de programação possibilita criar um vetor em tempo de execução, entretanto não
é possível adicionar ou remover índices ao vetor criado, uma vez que é necessário de�nir a
quantidade de elementos no momento da alocação de memória (LAUREANO, 2008).
Matrizes
Outra estrutura de dados homogênea é a matriz. Ela consiste em uma estrutura bidimensional
ou multidimensional que possui alocação estática e sequencial.
A matriztambém possui um tamanho de�nido, tendo todos os elementos do mesmo tipo, e
cada célula possui um único valor. Costuma ser representada por linhas e colunas, dessa
forma, precisa de dois índices para referenciar uma posição, na qual um índice representa a
linha e o outro índice representa a coluna.
Na memória, os elementos são alocados continuamente feito linha por linha ou coluna por
coluna.
Em jogos 2D, nos quais o personagem anda pela tela, a montagem do cenário pode ser feita
utilizando uma matriz, técnica denominada tile maps . O valor 0 representa o caminho pelo
qual onde o personagem pode andar, já o valor 1 representa um determinado obstáculo, o
valor 2 outro obstáculo e assim por diante. A Figura 1.4 ilustra um exemplo de uma matriz
voltada para criação de um cenário no jogo, no qual está a representação dos valores da
matriz, em (a), enquanto em (b) o cenário foi criado com base na técnica.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 12/41
Esse cenário é representado por uma matriz 6,8 (6 linhas por 8 colunas). Para acessar a posição
linha 5, coluna 5, podemos representar matrizCenario [4,4], lembrando que iniciamos no índice
0.
Ponteiros e Referências
Algumas linguagens de programação, como exemplo, a linguagem C/C++, implementam o
conceito de ponteiros. O ponteiro é um tipo de variável que guarda o endereço de memória
que é armazena a informação (LAUREANO, 2008).
Em outras linguagens, entretanto, o conceito de ponteiros está implícito na Programação
Orientada a Objetos. Nesses casos, não existe a possibilidade de acesso direto ao endereço de
memória em que está alocada a informação, pois todas as operações são realizadas de forma
interna.
Dessa forma, os tipos de referência a memória e acesso ao dado pode ser realizado de três
formas (DOVICCHI, 2008):
Direta: utilizando o nome da variável ou identi�cador.
Indexada: por meio do índice vetorial, matricial ou dimensional.
Endereçada: utilizando apontadores ou ponteiros em linguagens que suportam esse
recurso.
Uma confusão muito comum na utilização de ponteiros é entender quando trabalhamos com
seu valor e quando estamos trabalhando com a informação apontada por ele (LAUREANO,
2008). O valor do ponteiro é o endereço de memória da informação, enquanto que a
informação apontada por ele é um dado que possui um tipo de�nido (inteiro, real, caractere ou
até mesmo outro ponteiro). O Quadro 1.3 exempli�ca esse conceito.
Figura 1.4 - Ilustração da atribuição das cores no vetor
Fonte: Elaborada pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 13/41
Quadro 1.3 - Conceito de ponteiros
Fonte: Elaborado pelo autor.
Como pode ser visto no Quadro 1.3, temos um exemplo de alocação de memória utilizando
duas variáveis. A variável Num1 é do tipo inteiro e foi armazenada na posição 0xcc02 .   A
variável PtNum1 é um ponteiro para o tipo inteiro, isto é, seu valor não armazena um inteiro e
sim um endereço da memória. No exemplo, o PtNum1 está apontando para a variável Num1 ,
ou seja, o valor de PtNum1 é o endereço de memória da variável Num1 .
De�nimos, então, que PtNum1 está apontando para Num1. O valor do ponteiro é 0xcc02, ou
seja, o endereço de memória de Num1. A informação apontada pelo ponteiro é 3, pois é a
informação que está no endereço de memória 0xcc02.
Dados Heterogêneos
Segundo Laureano (2008), os dados heterogêneos são estruturas de dados que podem
armazenar vários valores, porém esses valores são de tipos diferentes. Outro nome muito
utilizado para esse tipo de dado é registro .
Tipos de�inidos pelo programador
Algumas linguagens de programação possuem o paradigma orientado a objetos, como é o caso
do Java, C++, C# e Javascript.  Nesse paradigma, podemos de�nir atributos e métodos contidos
em um domínio do problema e organizá-los em uma estrutura, a qual chamamos de classes
(RICARTE, 2008). Todos elementos que forem criados usando essa estrutura serão chamados
de objetos daquela classe.
Imagine que você goste de jogar futebol e que criará uma classe chamada jogador. Quais as
características necessárias para representar a classe jogador? Podemos, por exemplo,
especi�car como características da classe jogador o seu nome, o número da camisa, posição
que você joga, número de gols feitos. Essas características são chamadas de atributos . Já para
as ações do jogador, precisamos analisar quais ele executa como, por exemplo, o toque de
bola, chute, desarme, corrida. Para essas ações damos o nome de métodos .
Memória RAM
Endereço 0xcc01 0xcc02 0xcc03 0xcc04 0xcc05 0xcc06 0xcc07 0xcc08
Nome
variável
Num1 PtNum1
Valor 3 0xcc02
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 14/41
Repare que, nesse caso, não estamos armazenando todas as informações do jogador como o
nome dos pais, número do CPF ou comida favorita. Conforme discutido na Seção 1.2, a
abstração de dados sugere que sejam representadas de modo computacional apenas as
informações importantes para o domínio do problema, e muitas das informações que
compõem a pessoa não são importantes para o contexto.
O código representa uma implementação da classe Jogador.
Com frequência, utilizamos os tipos de�nidos pelo programador com ponteiros. Essa técnica
permite alocar memória de forma dinâmica. A alocação dinâmica é quando se reserva parte
da memória em tempo de execução. Quando, durante a execução, a variável ou estrutura
deixar de ser utilizada, essa memória é liberada (LAUREANO, 2008).
praticar
Vamos Praticar
Quando trabalhamos com dados em um algoritmo, podemos notar que cada um possui uma natureza
distinta, que corresponde a números, letras, frases. De acordo com o tipo, existem operações que
podem ou não fazer sentido quando aplicados a eles.
Fonte: LAUREANO, Marcos. Estrutura de Dados com Algoritmo e C . São Paulo: Brasport,
2008.
Assinale a alternativa correta:
a) Matriz é uma estrutura de armazenamento heterogênea do tipo unidimensional.
b) Os vetores são estruturas de dados homogêneas que aceitam diversos tipos de dados.
c) Ponteiros sempre irão armazenar um endereço de memória, independente de qual é o tipo
da variável que estão apontando.
d) Uma vez que um endereço de memória foi armazenado em uma variável do tipo ponteiro, a
variável não poderá mais ser utilizada para armazenar outros valores.
e) Exemplos de linguagens de programação que implementam ponteiros são C, C++, Java e C#.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 15/41
Nesta seção, iremos aplicar os conceitos vistos de Tipo Abstrato de Dados na prática. Para isso,
vamos utilizar a linguagem javascript com HTML 5. Essa linguagem foi escolhida pela
simplicidade de instalação e acesso, bem como pelo crescente número de aplicações e jogos
que utilizam essa tecnologia.
Primeiro Projeto com HTML5
O HTML 5 trouxe diversas funcionalidades ao HTML que bene�cia todo tipo de desenvolvedor
da Web Aberta. Suas principais diretrizes de inovação são (MOZILLA, 2019a):
Semântica: possível referenciar de forma mais precisa os elementos e conteúdos.
Conectividade: novas formas de conexão e comunicação aos servidores.
O�-line e armazenamento: permitem novas estruturas de armazenamento de
dados e manutenção de forma o�-line .
Multimídia: facilita o uso de vídeos e áudios com tags e mecanismos particulares.
Grá�cos e efeitos 2D/3D: fornece diversas formas de representação e efeitos
grá�cos.
Acesso ao dispositivo: oferece diversos suporte a dispositivos de entrada e saída.
Estilização: viabiliza aos autores a escrita de tema mais arrojados.
Outra novidade do HTML 5 são os elementos Canvas e WebGL, que permitem �exibilizar a
interaçãode páginas HTML e jogos digitais. Esses elementos oferecem diversas funcionalidades
de criação de efeitos, animações e tratamento de eventos.
Segundo Estevarengo (2016), o HTML 5 é considerado uma linguagem simples, com boa curva
de aprendizado e que disponibiliza as funcionalidades necessárias para o aprendizado de
Iniciando um ProjetoIniciando um Projeto
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 16/41
diversos conceitos.
Conceitos Básicos de HTML
O HTML “[...] é uma linguagem especializada, dedicada à construção e exibição de páginas Web”
(HTML, 1999). Ela é formada basicamente por tags , que são comandos especiais interpretados
por um navegador Web, e também por texto comum, que pode ser apresentado para o usuário
diretamente (HTML, 1999).
Uma característica da linguagem HTML é que se por algum motivo ocorrer algum erro de
sintaxe no código, o trecho em questão será ignorado pelo navegador. Já na maioria das outras
linguagens, é lançado um erro e a execução do código ou programa é suspensa.
Na linguagem HTML, as tags começam e �nalizam, respectivamente, com os caracteres “<”
(menor) e “>” maior (HTLM, 1999). Assim, um comando HTML pode ser dado por uma palavra
reservada com a adição desses caracteres, como por exemplo: <title>, <html>, <body>, <hr>.
Alguns comandos precisam também da indicação de �nalização, representada pelo caractere
de divisão “/”, conforme o exemplo:
#Formatação original#
<h1>Título da página</h1>
#Formatação original#
Nesse exemplo, usamos um caractere de �nalização para indicar qual o texto que deverá ser
aplicado quando utilizamos o comando h1, empregado para criação de títulos da página.
Muitas tags permitem a utilização de parâmetros. Os parâmetros são instruções de
customização que podem ser informadas após a abertura das tags . É possível informar vários
parâmetros separando-os por meio de um espaço, conforme exemplo:
#Formatação original#
<input type="button" value="Clique">
#Formatação original#
No texto acima, inserimos uma tag input, responsável por criar elementos interativos para
formulários. Existem dois parâmetros : type , que de�nirá o tipo do elemento (nesse caso, um
botão), e value , que de�nirá o texto apresentado para o usuário dentro do botão.
Caso o(a) aluno(a) tenha pouco conhecimento na linguagem HTML, di�culdades na elaboração
e entendimento de algum código apresentado, as indicações de leitura são importantes para
apoio no seu desenvolvimento.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 17/41
Início com Canvas API
O Canvas API fornece mecanismos para desenho grá�cos por meio do elemento HTML canvas .
Esse elemento possui muitas formas de utilização, tanto para jogos como também para
visualização de dados e multimídia (MOZILLA, 2019b).
Antes de iniciarmos com o canvas, precisamos criar um arquivo no computador chamado
“pagina.html”. Como o próprio nome sugere, o arquivo terá o formato de um documento HTML
( HyperText Markup Language ), linguagem padrão para desenvolvimento de páginas Web, e que
deve possuir as quatro tags principais: html , head , title e body (MEYER, 2018).
Assim, seu código deve ser de�nido como segue:
#Formatação original#<html>
<head>
<title>Oi Mundo - Canvas HTML 5</title>
</head>
<body>
Esse é o elemento canvas:
<!-- colocar aqui a tag canvas -->
</body>
</html>
#Formatação original#
Lembre-se de colocar o código acima em um arquivo HTML, conforme foi dito anteriormente.
Você pode escrever o código em um bloco de notas, ou em outro editor de texto, e salvar o
arquivo especi�cando um nome e a extensão . html .
Note que no código existe um espaço para colocar o elemento canvas. Vamos trocar a linha em
questão pelo código abaixo:
#Formatação original#
<canvas id="canvas"></canvas>
#Formatação original#
É possível também especi�car alguns atributos desse objeto, como altura ( height ), largura (
width ) e estilo de borda ( border ). Esses atributos são colocados dentro da própria tag canvas .
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 18/41
Assim, após a de�nição dos estilos e da substituição, o seu código HTML deve ser parecido com
este:
#Formatação original#
<html>
<head>
<title>Oi Mundo - Canvas HTML 5</title>
</head>
<body>
Esse é o elemento canvas: <br \><br \>
<canvas id="canvas" width="400" height="300" style="border:1px solid #000000;">
</canvas>
</body>
</html>
#Formatação original#
Executando o Código
Para executar o código, podemos abrir o arquivo HTML em um navegador. A maioria dos
navegadores atuais possui as funcionalidades do HTML 5, então, certi�que-se que o seu
saiba mais
Saiba mais
Caso queira se aprofundar nos conceitos de estilização
HTML, CSS e Javascript, existem ótimas opções
disponíveis on-line , com exemplos e desa�os. O
W3Schools é uma boa opção para aprender, testar
exemplos e treinar.
Fonte: Elaborado pelo autor.
ACESSAR
https://www.w3schools.com/css/css_border.asp
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 19/41
navegador esteja atualizado e tenha esse suporte.
A Figura 1.5, a seguir, mostra o resultado obtido após esse procedimento:
Desenhando no Canvas com Javascript
Javascript é uma linguagem de programação que possui funcionalidades para acessar partes
de documentos HTML, incluindo estilos CSS. Ela é considerada uma linguagem interpretada, ou
seja, quando rodamos o programa, o código é interpretado pelo navegador e executado linha
por linha. Esse conceito é diferente de outras linguagens compiladas, como o C++, que todo o
código é transcrito para uma linguagem de mais baixo nível antes da execução pelo
processador (MEYER, 2018).
Para que seja possível utilizar os comandos do javascript em nossos projetos, temos
basicamente duas formas: inserir o código diretamente no arquivo .html ou criar um novo
arquivo com extensão .js, relacionada ao javascript. Aqui, iremos utilizar apenas a primeira
forma.
Nosso objetivo, nesta seção, é desenhar um elemento dentro do canvas utilizando a linguagem
javascript. Para isso, precisamos primeiro recuperar o elemento canvas do nosso HTML com o
comando document.getElementById():
#Formatação original#
const canvas = document.getElementById('canvas');
#Formatação original#
Em seguida, devemos de�nir onde queremos desenhar nossa forma, se é no plano
bidimensional (2D) ou tridimensional (3D). Para esse ambiente, damos o nome de contexto e
podemos recuperá-lo com o comando getContext():
Figura 1.5 - Visualização do elemento Canvas
Fonte: Elaborada pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 20/41
#Formatação original#
canvas.getContext("2d");
#Formatação original#
Agora que já de�nimos qual o contexto do nosso trabalho, podemos desenhar nossas formas
nesse contexto. O canvas possui um sistema de coordenadas bidimensional, sendo que a
coordenada (0,0) está localizada no campo superior esquerdo, conforme ilustrado na Figura
1.8.
Figura 1.6 - Sistema de coordenadas do canvas
Fonte: Elaborada pelo autor.
Para desenhar um retângulo, utilizamos o método �llRect(), que como parâmetros para o
método informamos, respectivamente, comprimento, altura e coordenadas x e y no plano 2D.
Observe que x e y ligam o canto superior esquerdo da imagem à coordenada x e y na tela.
Além disso, podemos de�nir a cor do preenchimento com o atributo do contexto �llStyle.
#Formatação original#
ctx.�llStyle = 'green';
ctx.�llRect(10, 10, 150, 100);
#Formatação original#
O seu código deve ser parecido com este:
#Formatação original#<html>
<head>
<title>Oi Mundo - Canvas HTML 5</title>
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 21/41
</head>
<body>
Esse é o elemento canvas: <br \><br \>
<canvas id="canvas" width="400" height="300" style="border:1px solid #000000;">
</canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
ctx.�llStyle = 'green';
ctx.�llRect(10, 10, 150, 100);
</script>
</body>
</html>
#Formatação original#
A Figura 1.7, a seguir, mostra o resultado obtido após esse procedimento:
Desenhando uma Imagem no Canvas
Figura 1.7 - Desenhando um quadrado no canvas
Fonte: Elaborada pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 22/41
Nesta seção, aprenderemos a exibir uma imagem no canvas. A imagem utilizada por ser
qualquer uma que você tenha disponível. Para os exemplos seguintes, utilizaremos a imagem
ilustrada na Figura 1.8:
Para desenhar a imagem que queremos no canvas, podemos salvar a imagem no mesmo
diretório do arquivo .html. Caso a imagem se encontrar em outro diretório, devemos
referenciar corretamente o caminho no código. Para o exemplo, o arquivo de imagem foi
renomeado para sprite.jpg .
Primeiro criaremos uma variável que será do tipo de um elemento image do HTML, conforme o
código seguinte. Isso permitirá alocar, em memória, uma estrutura de dados que conterá todos
os atributos e operadores responsáveis por exibir uma imagem:
#Formatação original#
var imagem = new Image();
#Formatação original#
Em seguida, precisamos especi�car qual o arquivo de imagem que será utilizado. Você pode
informar o caminho completo do arquivo ou, como é o caso desse exemplo, informar apenas o
nome do arquivo, uma vez que este se encontra no diretório da página HTML.
#Formatação original#
imagem.src = 'sprite.jpg';
#Formatação original#
No caso especí�co de uma imagem, podemos imprimi-la no canvas apenas quando ela já tiver
sido carregada pelo navegador. Assim, iremos utilizar o método drawImage(), relacionado ao
Figura 1.8 - Exemplo de sprite
Fonte: Adaptada de Freepik. com.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 23/41
contexto, dentro do evento onload() da imagem. O evento onload(), como o próprio nome
sugere, será executado após a imagem ter sido completamente carregada.
#Formatação original#
imagem.onload = function() {
ctx.drawImage(imagem, 110, 150, 80, 100);
}
#Formatação original#
Perceba que, no exemplo, passamos cinco parâmetros para o método drawImage(). O primeiro
parâmetro é a referência da imagem, no nosso caso, a variável imagem . O segundo e o
terceiro parâmetros são, respectivamente, as coordenadas x e y da localização da imagem no
canvas. O quarto e quinto parâmetros são, respectivamente, o comprimento e altura da
imagem.
O código completo deve ser parecido com o que está neste botão a seguir:
A Figura 1.9 mostra o resultado obtido após essas alterações:
Nesta seção, vimos como é possível trabalhar com o elemento canvas utilizando, de forma
conjunta, a linguagem de marcação HTML e a linguagem de programação Javascript. A partir de
agora, aplicaremos os Tipos Abstratos de Dados vistos durante esse curso (pilhas, �las, listas,
árvores etc.), utilizando exemplos práticos e contextualizados para o mundo dos games. Ótima
diversão!
Figura 1.9 - Visualização da imagem dentro do canvas
Fonte: Elaborada pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 24/41
praticar
Vamos Praticar
A elaboração de um jogo pode ser complexa e desa�adora. Elementos como interface, suporte aos
efeitos de animação, dinâmica e uso de memória devem ser avaliados. Por isso, a escolha de uma boa
linguagem de programação aliada com uma game engine, muitas vezes, é decisiva para o resultado
�nal. Assinale a alternativa que corresponda às características presentes no HTML 5:
a) Semântica, conectividade, suporte multimídia e suporte aos dispositivos.
b) Semântica, balanceamento de carga no servidor, infraestrutura e inteligência arti�cial.
c) Conectividade, suporte multimídia, acesso às lojas digitais e dispositivos integrados.
d) Suporte multimídia, semântica, biometria, infraestrutura e gerador de problemas.
e) Suporte multimídia, adaptação e gerador de problemas, mecanismos prontos de telas e
inventários.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 25/41
Nas seções 2.1 e 2.2, vimos as características de dados homogêneos e heterogêneos e sua
utilização em jogos digitais. Veremos, agora, esses conceitos de forma prática, utilizando a
linguagem javascript com HTML. Para isso, criaremos um jogo de labirinto e usaremos uma
técnica bastante popular em jogos 2D chamada tilemaps .
Tiles e Tilemaps
Imagine que você gostaria de criar um jogo conforme a Figura 1.10, a seguir. Caso escolhesse
carregar a imagem inteira, uma grande quantidade de memória iria ser utilizada
desnecessariamente.
Aplicando o TAD na PráticaAplicando o TAD na Prática
Figura 1.10 - Cenário de um game
Fonte: PzUH / Freepik.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 26/41
Uma solução para esse caso é dividir a imagem em pequenos quadrados, ou tiles , conforme a
Figura 1.11.
Uma vez que dividimos essa imagem, podemos representar todo o mapa em uma matriz e
criar um mecanismo para imprimi-lo.
Criando um Labirinto
Iniciaremos nosso projeto de um jogo de labirinto. O objetivo do jogo é levar o jogador,
representado pelo quadrado vermelho, até a saída, representada pelo quadrado azul. A Figura
1.12 representa o labirinto desse exemplo, que será baseado no código disponível ao �nal da
seção.
O primeiro passo é de�nir uma matriz 8x8 constituída por números que representarão nosso
labirinto. Essa técnica é a aplicação do tile maps , que foi descrita na seção 2.1.2.
Representaremos os quadrados de cor ciano utilizando o valor 0 (zero), os quadrados verdes
Figura 1.11 - Exemplo de Tiles
Fonte: Yurakr / Freepik.
Figura 1.12 - Cenário do game labirinto
Fonte: Elaborada pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 27/41
com o valor 1 (um) e o quadrado azul com o valor 2 (dois). Note que o quadrado vermelho,
correspondente ao jogador, não será representado na variável e explicaremos melhor sobre
isso nos parágrafos seguintes. Dessa forma, a programação do nosso tile maps �cará assim:
#Formatação original#
var mapa = [ [ 0, 0, 0, 0, 0, 0, 0, 1 ],
[ 0, 0, 1, 0, 1, 0, 1, 1 ],
[ 0, 0, 1, 0, 1, 0, 1, 2 ],
[ 1, 0, 1, 0, 1, 0, 1, 0 ],
[ 0, 0, 0, 0, 1, 0, 0, 0 ],
[ 0, 0, 1, 1, 0, 1, 0, 1 ],
[ 0, 0, 0, 0, 0, 1, 0, 1 ],
[ 1, 1, 1, 1, 1, 1, 0, 1 ] ];
#Formatação original#
Agora, representaremos nosso jogador e, para isso, utilizaremos a técnica de abstração para
um objeto. Quais atributos nosso jogador possui? Ele tem alguma habilidade? Algum efeito
especial? Possui pontos de vida, de ataque ou defesa?
No caso do jogo do labirinto, o jogador possui apenas a localização que ele se encontra, ou
seja, as coordenadas x e y no mapa. Como estamos trabalhando com matrizes, podemos
armazenar as coordenadas da própria matriz que o jogador estará. Nesse caso, será criado um
atributo chamado linha com referência à linha e também um outro atributo chamado coluna
com referência à coluna. Assim, a criação do nosso jogador �cará como segue:
#Formatação original#
var jogador= {
linha : 6,
coluna : 1
};
#Formatação original#
Repare que já de�nimos a posição inicial do nosso jogador: linha 6 e coluna 1.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 28/41
Para facilitar o desenvolvimento do jogo, representaremos também o canvas na programação,
uma vez que precisamos da área do jogo para desenhar os elementos na tela. Conforme vimos
nas seções 3.1.1, 3.1.2 e 3.1.3, usamos tanto o elemento canvas do HTML como também uma
propriedade chamada contexto, que de�ne se estaremos trabalhando no mundo
bidimensional ou tridimensional. Vamos representar esses dois atributos em um novo objeto,
conforme segue:
Formatação original#
var areaJogo = {
canvas : document.getElementById('canvas'),
contexto : this.canvas.getContext("2d")
}
Formatação original#
Repare que utilizamos os mesmos códigos vistos anteriormente, tanto para recuperar o canvas
como também o contexto.
Agora que já representamos o jogador, o mapa e a área do game, representaremos o tile . O tile
possui uma largura e altura e, além disso, implementaremos a operação para desenhá-lo no
contexto da área do jogo.
Formatação original#
var tile = {
largura : 30,
altura : 30,
desenhar : function (cor, linha, coluna) {
x = coluna * this.largura;
y = linha * this.altura;
ctx = areaJogo.contexto;
ctx.�llStyle = nomeCor(cor);
ctx.�llRect(x, y, this.largura, this.altura);
}
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 29/41
};
Formatação original#
Estamos de�nindo a largura e altura do tile como 30 pixels cada. Se existir a necessidade de
aumentar esse valor, basta alterar essas duas propriedades do objeto.
Já no método desenhar, passaremos como parâmetro a cor, a linha e a coluna. Tenha em
mente que desenharemos um tile de cada vez no cenário. Assim, quando desenharmos o tile
que está na linha 0 e coluna 0, por exemplo, a cor que será enviada por parâmetro é a mesma
que está na linha 0 e coluna 0 da variável mapa. Lembre-se também dos códigos das cores:
estamos representando o ciano com o valor 0 (zero), o verde com o valor 1 (um), o azul com o
valor 2 (dois) e o vermelho com o valor 3 (três). A Figura 1.13, em (a), ilustra a relação das linhas
e colunas com as cores do mapa, por sua vez, em (b), representa a coordenada que cada tile
precisará ser desenhado no canvas.
Como cada tile possui uma largura e altura especí�cas, as coordenadas a partir das quais serão
desenhadas no canvas dependem desses valores. Para calcular a coordenada x ,
multiplicaremos essa largura com a coluna atual. No caso da coordenada y , multiplicaremos a
altura com a linha atual. No caso da Figura 1.13 (b), por exemplo, considerando que a largura e
altura do tile seja de 30 pixels, o primeiro tile será inserido na coordenada (0,0) uma vez que x =
30*0 e y = 30*0. O segundo, por sua vez, será desenhado na posição (30,0), uma vez que x =
30*1 e y = 30*0, e assim consecutivamente.
Voltando ao código, precisamos converter os códigos das cores para seu nome correspondente
na linguagem HTML. Para isso, criaremos um método chamado nomeCor como segue. Se a cor
passada por parâmetro for 1 (um), por exemplo, o método retornará green , correspondente a
cor verde no HTML.
Formatação original#
function nomeCor(cor) {
Figura 1.13 - Coordenadas do cenário. Em (a), a relação entre as coordenadas com a matriz;
em (b), as coordenadas usadas no canvas.
Fonte: Elaborada pelo autor.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 30/41
switch (cor) {
case 1:
return "green";
case 2:
return "blue";
case 3:
return "red";
default:
return "cyan";
};
}
Formatação original#
Desenhando o Cenário
Para todos os tiles no canvas, criaremos uma nova função que será executada no início do
carregamento da página HTML e quando o jogador apertar uma tecla do teclado.
Na implementação do método, utilizaremos dois laços de repetição for . O laço mais externo
será responsável por iterar entre as linhas da matriz. O laço mais interno será responsável por
iterar entre as colunas. No caso da linguagem de programação javascript, o índice de uma
matriz inicia-se por 0 (zero) e, dessa forma, considerando que a matriz seja 8x8, seu índice deve
iniciar com 0 (zero) e ir até 7 (sete).
Formatação original#
function desenharCenario() {
for (var linha = 0; linha <= 7; linha++)  {
for (var coluna = 0; coluna <= 7; coluna++) {
if (this.jogador.linha == linha && this.jogador.coluna == coluna)
tile.desenhar(3, linha, coluna);
else
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 31/41
tile.desenhar(mapa[linha][coluna], linha, coluna);
}
}
}
Formatação original#
Dentro do laço interno, chamaremos o método que criamos para desenhar o tile . Entretanto,
precisamos nos atentar para a posição que se encontra o jogador. Se o jogador estiver na
coordenada, desenharemos o tile do jogador, representado pela cor 3 (vermelho).   Caso
contrário, desenharemos o tile com a cor que está na na posição atual da variável mapa .
Lendo as Ações do Jogador
Um jogador pode interagir com o jogo digital de diversas maneiras. As formas mais comuns
são: mouse , teclado e controles de jogo. Nesta seção, abordaremos a leitura do teclado,
utilizando alguns eventos do HTML e javascript.
O HTML possui um evento especial para lermos as ações do jogador enviadas via teclado: o
método keydown . Esse método é disparado toda vez que o jogador aperta uma tecla. Quando
disparado, também é enviado para ele um parâmetro, chamado de event , que possui a
informação da tecla pressionada.
O HTML permite a chamada de um método de nossa autoria toda vez que o método keydown é
invocado. Para isso, utilizamos o comando addEventListener do javascript, como segue o
código:
Formatação original#
document.addEventListener('keydown', pressionarTecla);
Formatação original#
Repare que no código acima precisamos criar o método próprio que, nesse caso, chamaremos
de pressionarTecla. Agora, precisamos programar esse método.   Devemos lembrar também
que o método precisa receber um parâmetro que conterá a informação da tecla selecionada:
Algumas particularidades do código acima:
Para resgatar o código da tecla pressionada, utilizamos o atributo keyCode da variável
evento.
Cada tecla possui um código: a seta esquerda tem seu valor 37, a seta para cima valor
38, a seta para direita valor 39 e seta para baixo valor 40. Os códigos das teclas
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 32/41
podem ser pesquisadas neste site: <https://keycode.info/>.
É uma boa prática, quando estamos trabalhando com eventos no teclado, utilizarmos
o comando preventDefault(). Esse comando garante que a tecla pressionada irá
disparar o evento keypress apenas uma vez.
No trecho de código acima, recebemos o evento e recuperamos qual a tecla digitada. Se a tecla
digitada for uma das setas, ela executará o evento preventDefault como segurança, para
garantir que não seja disparado outro evento keypress várias vezes.
Após, veri�camos qual tecla de fato foi pressionada. Em todos os casos será chamado método
atualizarJogador(), entretanto passamos por parâmetro uma identi�cação de qual tecla foi
pressionada.
Código Completo
Segue o código completo do desenvolvimento. Veri�que que diversas partes do código foram
explicadas no decorrer das seções 4.2.1 e 4.2.2. Caso haja dúvidas sobre algum comando, por
favor, veri�que as referências e sugestões de leituras complementares.
praticar
Vamos Praticar
técnica Tilemaps , conhecida também por Tile-based Maps , é bastanteutilizada na indústria de jogos,
principalmente em jogos 2D. Ela consiste em uma representação numérica, na qual cada valor será
substituído por uma imagem, que chamamos de tiles .
Fonte: SPUY, R. V. D. The Advanced Game Developer's Toolkit : Create Amazing Web-
based Games with JavaScript and HTML5. 1. ed. São Paulo: Apress. 2017.
Assinale a alternativa que corresponda à correta implementação da técnica tile maps :
a) Para aplicação dessa técnica, é importante ter conhecimento sobre o tamanho do tile , as
dimensões do mapa e a quantidade de tempo na fase.
b) Em vez de criarmos uma matriz com os códigos correspondentes aos tiles , podemos
armazenar em memória as próprias imagens várias vezes.
c) É mais relevante e facilitador a implementação dessa técnica com vetores em vez de
matrizes.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 33/41
d) Para aplicação dessa técnica, é importante ter conhecimento sobre o tamanho do tile , as
dimensões do mapa e a forma de renderização das tecnologias utilizadas.
e) Existem formas mais e�cientes de desenharmos cenários complexos em jogos 2D, como
exemplo, a utilização de apenas uma imagem de background .
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 34/41
indicações
Material Complementar
LIVRO
A arte de game design: o livro original
Jesse Chell
Editora: Elsevier
Ano: 2010
ISBN: 8535241981
Comentário: Documentos descritivos são importantes na criação
dos projetos de jogos digitais, pois possibilitam aos desenvolvedores
planejar diversas situações e con�itos que surgem na etapa de
produção. Caso queira aprender mais sobre esse conteúdo, o livro A
arte de Game Design , do autor Jesse Chell, é uma ótima escolha.
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 35/41
LIVRO
HTML5 e CSS3: Domine a web do futuro
Lucas Mazza
Editora: Casa do Código
Ano: 2014
Comentário: Caso queira se aprofundar mais nas funcionalidades e
marcações do HTML 5, esse livro descreve diversas técnicas com
exemplos práticos e funcionalidades úteis do cotidiano.
FILME
Indie Game - The Movie
Ano: 2012
Comentário: Trata-se de um documentário sobre videogames, seus
criadores e sua pro�ssão.
TRA ILER
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 36/41
conclusão
Conclusão
Nesta unidade, tivemos a oportunidade de conhecer conceitos sobre Tipos Abstrato de Dados
(TAD). Nesse contexto, aprendemos um pouco mais sobre a abstração e a importância de
identi�car os elementos importantes de um contexto, para implementá-los em uma linguagem
de programação.
Vimos, também, o TAD aplicado em alguns mecanismos de jogos. No caso do uso de matrizes,
podemos representar cenários completos com de�nição de valores, o que diminui o uso de
memória e permite facilitar a recuperação dos eventos que estão ocorrendo no jogo.
Por �m, você pôde compreender, ainda, uma forma de aplicar os conceitos vistos na unidade
de forma prática, com a criação de um jogo de labirinto.
referências
Referências
Bibliográ�cas
BRITTO, A. Blender 3D Jogos e Animações Interativas . São Paulo: Novatec, 2011.
CERQUEIRA, R.; CELES, W.; RANGEL, J. L. Introdução a estrutura de Dados. In: CERQUEIRA, R.;
CELES, W.; RANGEL, J. L. Estruturas de Dados – PUC-Rio. Rio de Janeiro: Elsevier: 2008, p. 1-9.
Disponível em: http://www.ic.unicamp.br/~ra069320/PED/MC102/1s2008/Apostilas/Cap09.pdf .
Acesso em: 21 jan. 2020.
DOVICCHI, J. Estrutura de Dados . Florianópolis: UFSC, 2008. Disponível em:
https://www.inf.ufsc.br/~joao.dovicchi/pos-ed/ebook/e-book_estrut_dados_dovicchi.pdf .
Acesso em: 21 jan. 2020.
ESTEVARENGO, L. F. Desenvolvendo Jogos Mobile com HTML5 : Usando Phaser, Intel XDK e
Cordova/PhoneGap. São Paulo: Novatec, 2016.
http://www.ic.unicamp.br/~ra069320/PED/MC102/1s2008/Apostilas/Cap09.pdf
https://www.inf.ufsc.br/~joao.dovicchi/pos-ed/ebook/e-book_estrut_dados_dovicchi.pdf
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 37/41
FERRARI, R. et al . Estrutura de dados com jogos . Rio de Janeiro: Elsevier, 2014.
HTML 4.0: passo a passo lite. 1. ed. São Paulo: Pearson, 1999.
LAUREANO, M. Estrutura de dados com Algoritmos e C . São Paulo: Brasport, 2008.
MEYER, J. The Essential Guide to HTML5 : Using Games to Learn HTML5 and JavaScript. 2. ed.
São Paulo: Apress, 2018.
MOZILLA. HTML 5 . 2019a. Disponível em: https://developer.mozilla.org/pt-
BR/docs/Web/HTML/HTML5 . Acesso em: 22 jan. 2020.
MOZILLA. Noções de tile e tilemaps . 2019b Disponível em: https://developer.mozilla.org/pt-
BR/docs/Games/Techniques/Tilemaps . Acesso em: 22 jan. 2020.
RICARTE, I. L. M. Estrutura de Dados . Campinas: Unicamp, 2008. Disponível em:
http://calhau.dca.fee.unicamp.br/wiki/images/0/01/EstruturasDados.pdf . Acesso em: 22 jan.
2020.
SAYÃO, L. F. Modelos teóricos em ciência da computação - abstração e método cientí�co. Ci.
Inf ., Brasília, v. 30, n. 1, p. 82-91, jan./abr. 2001 Disponível em:
http://www.scielo.br/pdf/ci/v30n1/a10v30n1 . Acesso em: 21 jan. 2020.
SCHUYTEMA, P. Design de games : uma abordagem prática. São Paulo: Cengage Learning,
2008.
SPUY, R. V. D. The Advanced Game Developer's Toolkit : Create Amazing Web-based Games
with JavaScript and HTML5. 1. ed. São Paulo: Apress. 2017.
TENENBAUM, A. M.; LANGSAM, Y.; AUGENSTEIN, M. J. Estruturas de Dados Usando C . 1. ed.
São Paulo: Pearson Universidades, 1995.
W3SCHOOLS. HTML Canvas Coordinates . 2019. Disponível em:
https://www.w3schools.com/graphics/canvas_coordinates.asp . Acesso em: 22 jan. 2020.
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5
https://developer.mozilla.org/pt-BR/docs/Games/Techniques/Tilemaps
http://calhau.dca.fee.unicamp.br/wiki/images/0/01/EstruturasDados.pdf
http://www.scielo.br/pdf/ci/v30n1/a10v30n1
https://www.w3schools.com/graphics/canvas_coordinates.asp
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 38/41
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 39/41
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 40/41
03/04/2023, 21:05 Ead.br
https://student.ulife.com.br/ContentPlayer/Index?lc=S7S6ENZny18%2blDVzjSI6gg%3d%3d&l=VPic%2fFbeAnDPgloJidbuAg%3d%3d&cd=ucz… 41/41