quinta-feira, 9 de junho de 2016

Lógica de Programação - Aprendendo a Programar

Na Alfamídia, disponibilizamos dezenas de apostilas gratuitas em diversas áreas, como Design, Programação, 3D, etc. São apostilas que desenvolvemos para nossos cursos ao longo dos últimos anos.

Link: Apostilas Gratuitas

Entretanto, não temos uma única apostila disponível de "lógica de programação". Na verdade, eu nem gosto desta expressão, que acho confusa. Mas o fato é que não temos nenhuma apostila que ensine os primeiros passos para quem nunca programou.

Provavelmente, nenhuma apostila que já desenvolvemos me agradou o suficiente. Pode ser um preconceito meu, de não gostar de ver toneladas de conceitos complexos, lógica booleana, e coisas inúteis como fluxogramas, sendo despejados em alunos que nunca programaram. É que minha sensação é tipo se passassem um semestre ensinando as regras do futebol antes de deixar o aluno sequer ver uma bola:

Educação Física
- semestre 1: as regras do futebol
- semestre 2: futebol de botão (a coisa mais parecida que encontrei para fluxogramas e pseudocódigo)
- semestre 3: os diferentes tipos de bola na história do mundo
- semestre 4: exercícios com bola
- semestre 5: nossa primeira partida de futebol (para quem ainda não desistiu).

Assim, estou produzindo uma apostila de lógica. Ainda está em seu início, mas segue a Unidade I. Quando pronta, estaremos disponibilizando gratuitamente.

Obs (20/06/2016): A apostila já está disponível:

Aprendendo a programar, ou Estes Programadores Magníficos e suas Fantásticas Linguagens de Programação, ou Como ir de x=1 a arrays e funções em 25 horas e 11 minutos

Siga para unidade 2 e 3.
Siga para unidades 4,5 e 6
Ir para unidades 7 e 8


Vamos começar programando

1.1 Vamos fazer um primeiro programa

Talvez você já tenha lido uma (ou muitas) apostilas de programação. Talvez mesmo já tenha feito cursos da – assim chamada – lógica de programação.

Imagino que você acredite que ainda não sabe programar, ou pior, que programar não é para você. (De outro modo, por que está lendo esta apostila?)

Vamos resolver isso fazendo um primeiro programa. Não deve levar mais de alguns minutos...

--------------------CRIANDO SEU PRIMEIRO PROGRAMA------------------
1. Abra o Chrome (se você não sabe o que é o Chrome, eu admito, estamos com problemas).
2. Digite “about:blank” na entrada de endereços, como se estivesse digitando o endereço de um site. (cuidado para não colocar espaços depois do ':').
3. Aperte a tecla F12
4. Vai abrir uma janela ocupando uma parte da área em que um site normalmente é exibido. Nela tem uma aba escrita “console”. Selecione esta aba.
5. Na área abaixo, escreva o seguinte: “alert('ola mundo')”.
6. Tecle Enter.
------------------------------------------------------------------------------------------

Há duas possibilidades: funcionou; não funcionou.

Se apareceu uma janela com a mensagem “ola mundo”, então funcionou. Parabéns, você acabou de criar seu primeiro programa.

Caso contrário, alguma coisa deu errado. Você vai ter que descobrir o que aconteceu. Parabéns, você está lidando com seu primeiro bug. Nós vamos tratar de bugs mais adiante, então neste momento o que posso dizer é para olhar cada um dos passos e ver onde você pode ter errado. Para ajudar, observe a imagem a seguir:


1.2 Vamos fazer um segundo programa


Vamos agora parar e estudar um pouco de teoria, para entendermos exatamente o que é um programa, o que é lógica de programação, criarmos fluxogramas, pseudocódigos, etc?

Não, não vamos.

Se alguém tivesse ensinado a você a teoria do movimento antes de você dar o seu primeiro passo, você talvez ainda estivesse engatinhando, e dizendo que caminhar é muito difícil.

O que nós vamos fazer, é criar seu segundo programa.

--------------------------CRIANDO SEU SEGUNDO PROGRAMA------------------
1. Faça os mesmos passos 1 a 4 de antes (a partir de agora não vou mais repetir isso, ok?)
2. Digite “alert('ola');”
3. Digite SHIFT ENTER (isso significa apertar a tecla SHIFT e AO MESMO TEMPO apertar a tecla ENTER).
4. Digite “alert('mundo');”
5. Tecle ENTER
------------------------------------------------------------------------------------------

Se não deu certo agora, provavelmente você apertou ENTER sem o SHIFT, e o Chrome achou que seu programa tinha terminado no primeiro alert.

Se tudo deu certo, apareceu uma primeira janela de alerta, e depois uma segunda.

Vamos agora ver um pouquinho de teoria, mas muito pouco, muito pouco mesmo, e já vamos continuar programando.

1.3 Programas Seguem um Fluxo, Passo a Passo


O programa anterior nos apresentou um conceito que não é tão óbvio quanto pode parecer à primeira vista. Um programa executa um comando de cada vez, passo a passo. Em uma linha tínhamos um comando “alert('ola');”, e na linha de baixo tínhamos o comando “alert('mundo')”, e o programa executou a primeira linha, e depois executou a segunda.

Vamos chamar isso de um fluxo de execução, um 'caminho' que o programa segue, de executar uma linha após a outra. Em termos do que nos interessa nesta apostila, que são linguagens de programação imperativas, todo programa segue sempre um fluxo, executando as linhas de código em sequência. No futuro veremos como controlar este fluxo de execução.

Obs: nem tudo no mundo são linguagens de programação imperativas. Existem outros tipos de linguagens de programação e outras formas de criar programas, apenas não nos preocuparemos com elas nesta apostila.

1.4 Precisamos falar sobre variáveis


Vamos fazer nosso terceiro programa. Já somos programadores experientes, certo? Então não vou passar todo o passo a passo, apenas colocar o programa que quero que você escreva. Apenas nunca esqueça de dar SHIFT ENTER no console entre cada linha, para ir para a próxima:

--------------------------SEU TERCEIRO PROGRAMA------------------
x = 1;
alert(x);
x = 2;
alert(x);
x = x + 1;
alert(x);
------------------------------------------------------------------------------------------

Observe que, desta vez, o texto entre parenteses não está entra aspas. O resultado deverá ser três janelas, mostrando os números 1, 2 e 3.

 Muito mais coisa está acontecendo aqui do que parece à primeira vista, e precisamos mesmo falar sobre isso, e especialmente sobre nossa variável chamada 'x'.

O fluxo de execução: temos aqui nosso fluxo de execução novamente em ação. Cada comando foi executado em sequência.

A variável: temos uma variável chamada 'x', e temos o sinal de igualdade '='. Parece simples, mas é tudo mais complicado que parece, pois nem nossa variável é igual as variáveis que aprendemos nas equações do colégio, nem o sinal de igualdade é o mesmo que conhecíamos.

Se fosse diferente, se fosse igual a tudo que já aprendemos, o que dizer da expressão “x = x + 1”. A primeira vez que a vi, lembro bem de pensar “como pode? 'x' não é igual a 'x + 1', 'x' é menor que 'x + 1'.

Ocorre que o sinal de '=' não é uma igualdade, é uma atribuição. Veremos mais adiante a representação de igualdade (que utiliza em algumas linguagens de programação o sinal '==').
“x = 2” não está dizendo que x é igual a dois, está dizendo que, a partir de agora, no fluxo de execução, x passa a receber o valor 2. “x = x + 1” significa que, a partir de agora no fluxo de execução, 'x' passa a receber o valor que 'x' tinha, acrescido de 1.

O que é uma variável: Então, agora começamos a entender o que é uma variável. Uma variável, para nós, é apenas uma forma de guardar uma informação. Imagine que você tem uma folha de papel, um lápis e uma borracha. Nesta folha você pode ter alguma informação, que você pode apagar a qualquer momento, para escrever outra no lugar.

Foi o que fizemos. Nessa folha de papel, que chamamos de 'x', primeiro escrevemos o número '1', depois utilizamos no nosso alert ('alert(x)'), depois apagamos e escrevemos o número '2' por cima.  Fizemos nosso alert novamente. Depois, vimos qual era o número no papel (era '2'), somamos com 1 (ficou '3'), e escrevemos novamente no papel.

Ficou fácil até aqui? Não se preocupe, já vamos começar a complicar.


1.5 Vamos fazer escolhas?

Vamos ver o que sabemos até agora, e o que mais nos faz falta, para poder criar um programa....
Sabemos trabalhar com variáveis para colocar e alterar números, e sabemos exibir uma mensagem na tela. Ainda é pouco, precisamos dominar pelo menos mais dois ou três conteúdos para poder criar programas que façam algo um pouco mais útil.

Vamos começar com escolhas. Nós queremos que o programa tome decisões. Por exemplo, podemos querer que ele exiba “ola mundo” em determinados momentos, mas exiba “tchau mundo” em outros.
Para isso, vamos olhar dois programas abaixo. Para adivinharem o que eles fazem, já dou uma dica: pensem em “if” como a palavra “se”, e “else” como a palavra “senão”.

-----------------AGORA DOIS PROGRAMAS DE UMA SÓ VEZ--------------------
x = 5;
if (x > 10) {
   alert('ola mundo');
} else {
   alert('tchau mundo');
}
------------------------------AQUI VAI O SEGUNDO------------------------------------
x = 15;
if (x > 10) {
   alert('ola mundo');
} else {
   alert('tchau mundo');
}
--------------------------------------------------------------------------------------------------

Você adivinhou o que apareceria em cada programa? Se tudo deu certo, o primeiro exibiu “tchau mundo”, e o segundo exibiu “ola mundo”.

Por quê? Obviamente, porque no primeiro 'x' não era maior que 10, enquanto no segundo ele era.
E assim chegamos em nosso primeiro “comando de controle de fluxo”. Até marquei em negrito pela importância!

Por que se chamam comandos de fluxo? Por que eles alteram o fluxo de execução. Até agora havíamos visto os programas executarem uma linha de cada vez, mas agora vimos uma 'bifurcação' na nossa estrada, um desvio no nosso fluxo. Conforme a condição, entravamos em uma linha, ou na outra.

Nós não vamos perder tempo aqui em algumas questões que penso serem avançadas (e chatas) como 'lógica booleana' e outras palavras exóticas. Iremos vê-las mais adiante.

Mas vamos falar nas seções seguintes de duas coisas realmente importantes sobre o uso do comando “if”, que vocês precisam saber desde o primeiro momento, para poder utilizá-lo com segurança.

1.6 Blocos de Comando

Mexendo com o fluxo de execução, precisamos ser capazes de agrupar nossos comandos em blocos. Por quê? Vamos ver os dois comandos abaixo para entender isso.

-------------------------ESTE PROGRAMA ESTÁ CERTO-----------------------------
x = 5;
if (x > 10)
   alert('ola mundo');
alert('e aqui terminamos');
------------------ESTE PROGRAMA TAMBÉM ESTÁ CERTO----------------------
x = 5;
if (x > 10) {
   alert('ola mundo');
   alert('e aqui terminamos');
}
--------------------------------------------------------------------------------------------------

Os dois programas estão corretos, mas eles fazem coisas diferentes. As chaves definem um bloco, e precisamos definir blocos quando queremos fazer o fluxo de execução executar em um conjunto de comandos.

No primeiro caso, estamos dizendo para o primeiro 'alert' só ser executado em determinada condição. No segundo caso, estamos dizendo para todo o bloco entre as chaves, só ser executado se entrarmos na condição.

E chegamos em um bom momento para falarmos pela primeira vez em indentação e boas práticas:

------------ESTE PROGRAMA ESTÁ CERTO MAS PARECE ERRADO----------
x = 5;
if (x > 10)
   alert('ola mundo');
   alert('e aqui terminamos');
--------------------------------------------------------------------------------------------------

Este programa está certo, na verdade, para o computador ele é exatamente igual ao primeiro que mostramos no início da seção. O problema é que para um ser humano, ele parece com o segundo.
Na maioria das linguagens, a indentação, os espaços em brancos, a posição dos comandos na linha, não fazem diferença. Mas nós, humanos, automaticamente pensamos que coisas alinhadas são semelhantes.

Em resumo, sempre que entrar em um desvio de fluxo ou no início de um bloco, passe a escrever os comandos um pouco mais a direita. Quando sair do comando, volte. Assim, ao final do programa você estará exatamente na mesma coluna que quando iniciou. Isso vai ser fundamental quando você estiver fazendo programas maiores e mais complexos.


1.7 Nosso primeiro pega-ratão

Agora vamos ver a segunda coisa realmente importante do 'if'. Se você realmente nunca leu nada sobre programação, você provavelmente vai errar em adivinhar o que faz este programa:

-----------------------ESTE PROGRAMA VAI ENGANAR VOCÊ--------------------
x = 5;
if (x = 10)  {
   alert('ola mundo');
}
--------------------------------------------------------------------------------------------------

Ei, ei ei, é isso mesmo? O programa exibiu o alerta? Sim. Vamos acrescentar um novo alerta, após o 'if', para ajudar a desvendar este mistério:

-----------------------SERÁ QUE FICOU ÓBVIO AGORA--------------------
x = 5;
if (x = 10)  {
   alert('ola mundo');
}
alert(x);
--------------------------------------------------------------------------------------------------

Não só o alerta foi exibido, como 'x' mudou para o valor '10'. Ficou claro agora? Nós repetimos o mesmo comando de atribuição dentro do 'if'. Primeiro fizemos 'x=5', depois fizemos 'x=10'.

Para fazermos comparações, o comando de igualdade (na maioria das linguagens), não é igual ao da matemática, não é '=', mas sim '=='. Vamos então corrigir nosso programa:

-------------------------------------AGORA SIM--------------------------------------
x = 5;
if (x == 10)  {
   alert('ola mundo');
}
alert(x);
--------------------------------------------------------------------------------------------------

Pode parecer simplório falar de '==' e de blocos, mas são duas das questões que mais atrapalham programadores iniciantes, e às vezes até profissionais, na hora de desenvolver um programa. Revisem estes dois itens para ter certeza que nunca vão esquecer de abrir e fechar as chaves, e nunca vão confundir comparação '==' com atribuição '='.

Obs: alguns programadores preferem inverter as comparações, escrevendo 'if (5 == x)', para garantir que não vão ter problemas mesmo que um dia esqueçam o '==', pois neste caso o programa vai exibir um erro.


1.8 Vamos ouvir o usuário?


Calma, sem pânico. Este não é um curso avançado de programação, muito menos de psicologia. Ninguém vai obrigá-lo a falar com usuários ou outros seres humanos. Por enquanto queremos apenas que o usuário passe algum tipo de informação para nosso programa.

Vamos utilizar um novo comando, o comando 'prompt'.

Obs: agora parece uma boa hora para mencionar que estamos há um tempinho programando em javascript, uma linguagem bastante poderosa e complexa. 'alert' e 'prompt' são específicos desta linguagem, mas não vamos nos preocupar muito com isso, pois praticamente qualquer linguagem vai ter algo parecido, ou seja, alguma forma de exibir informações e alguma forma de receber dados do usuário. As demais instruções que vimos são praticamente iguais em todas as linguagens imperativas.

---------------------VOCÊ DECIDE SE O ALERTA SERÁ EXIBIDO----------------
x = prompt('digite um número');
if (x > 10)  {
   alert('ola mundo');
}
alert(x);
--------------------------------------------------------------------------------------------------

Quero crer que você já sabe o suficiente de programação para entender o que o 'prompt' fez, apenas executando o programa.

Senão, lá vai: o prompt recebeu a entrada do usuário e colocou na variável 'x'. Se foi um número maior que 10, portanto, o programa exibiu 'ola mundo'.


1.9 Agora estamos prontos para programar

Verdade?

Verdade.

Com o que vimos, já temos o suficiente para começar a praticar a programação. Na próxima unidade, começaremos a criar programas usando apenas o conteúdo visto nesta unidade.

Vamos então a algumas explicações de por que estamos ensinando programação assim. Veja, o grande problema de muitos cursos de programação é que tentam ensinar a teoria antes da prática. Imagine passar um semestre de educação física ouvindo sobre regras e técnicas de futebol, ou aulas inteiras ouvindo sobre como se anda de bicicleta.

Isso quer dizer que teorias não são importantes, ou que nunca vamos precisar saber o porquê das coisas? Não, longe disso. Eu sou 100% a favor de crianças estudarem gramática, por exemplo, só que faz muito mais sentido elas estudarem a gramática de uma lingua que elas já adquiram alguma prática de uso.

É o que faremos neste curso. Minha preocupação é que vocês pratiquem a programação, e desenvolvam a habilidade de criar programas que resolvam questões reais. Para tanto, vamos praticar e praticar, com exemplos cada vez mais complexos, para então, quando estiverem prontos e dominando as técnicas, vamos entender melhor os conceitos teóricos que embasam as linguagens de programação.



Siga para unidade 2 e 3.
Siga para unidades 4,5 e 6
Ir para unidades 7 e 8


quarta-feira, 8 de junho de 2016

Frameworks Javascript para Criação de Jogos

Acabamos de disponibilizar, no site da Alfamídia, uma página com referência para diversos frameworks e bibliotecas voltados para auxiliar no desenvolvimento de jogos na linguagem Javascript.

Disponibilizamos também acesso a um dos vídeos, introdução a frameworks javascript, de nossa aula da disciplina de Game Engines do curso de Criação de Jogos Digitais, cujo tema também é uma visão geral de frameworks javascript.

No futuro, possivelmente teremos tutoriais específicos de algum destes frameworks ou outros para criação de jogos em javascript. Se você tem alguma recomendação, seja entre os frameworks que listamos, seja de outros frameworks gratuitos, faça sua sugestão em nossos comentários.

Links:

Referência para frameworks
Vídeo sobre frameworks
Disciplina de Game Engines
Curso de Criação de Jogos Digitais

domingo, 29 de maio de 2016

Curso de Jogo Javascript de RPG

A Alfamídia acaba de disponibilizar uma opção gratuita com as primeiras aulas do curso que apresenta a construção de um jogo de RPG.

Inscrições no curso podem ser feitas diretamente em Curso Gratuito de Desenvolvimento de Jogo de RPG.

sexta-feira, 27 de maio de 2016

Novo Jogo em Javascript

Estamos disponibilizando um novo jogo em javascript, desenvolvido para fins didáticos, desta vez um jogo relativamente mais sofisticado.

Em http://www.alfamidiaonline.com.br/curso-jogos-javascript/explorer/ você pode conferir este jogo, em que você controla um personagem que percorre um cenário infinito gerado por funções matemáticas.

Este é mais um jogos disponibilizado com seu código-fonte e com uso gratuito, profissional ou não.

Alguns recursos utilizados serão apresentados neste blog, e a descrição completa do código-fonte faz parte do curso Criando Jogos Javascript da Alfamídia.

Links:

terça-feira, 24 de maio de 2016

Movimentando Personagens com Javascript

Neste artigo mostraremos como controlar o movimento de um personagem por javascript utilizando as teclas do computador.

Para isso utilizaremos algumas das imagens fornecidas pelo site http://untamed.wild-refuge.net/rpgxp.php. Outros sites com imagens gratuitas são listados em nosso portal alfamídia, em http://www.alfamidia.com.br/imagens-gratis-para-jogos/.

O código utilizado é um segmento do código utilizado no curso alfamídia de criação de jogos com javascript.

Capturando eventos do teclado

Uma das formas de capturar eventos em javascript é utilizando addEventListener. O que esta função faz é associar uma função a um evento.

Observe o código abaixo:

  document.addEventListener('keydown', function(event) {

    meuCenario.move(event.keyCode);

});


No código acima estamos associando uma função, que chamará o método "move" de "meuCenario", sempre que o evento "keydown" for acionado. Este evento é chamado cada vez que uma tecla é pressionada.

O parâmetro keyCode é um código que corresponde a tecla que foi pressionada. Utilizaremos o teste de determinados valores para tratar cada uma das teclas de seta.

Exibindo a Imagem Correspondente a Ação

Para exibir uma imagem, uma das funções do javascript é o drawImage, que desenha imagens em um canvas.

A especificação da função você pode encontrar em https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage.

Aqui nos preocuparemos com seu uso em nosso caso específico. Para isso, vale observarmos as imagens com as quais estaremos trabalhando.


Estas imagens contem um personagem de 32x48 pixels, em 16 posições diferentes. Observem que as linhas (que chamaremos de linhas 0,1,2 e 3) representam 4 direções do personagem, e as colunas (que também identificaremos como 0,1,2 e 3) representam etapas do passo do personagem.

Observe agora, a seguir, o código do desenho que estaremos utilizando. É importante gastar um tempo para entender o que está sendo feito aqui:

this.ctx.drawImage(this.imagem, 
    this.etapaPasso*TAMANHO_CELULA, this.direcaoImagem*ALTURA_PERSONAGEM, 
    TAMANHO_CELULA, ALTURA_PERSONAGEM, 
    this.x, this.y+10,
    TAMANHO_CELULA,ALTURA_PERSONAGEM);

A versão mais simples da função drawImage utiliza, além da imagem em si, dois parâmetros para definir a posição da imagem nos eixos X e Y, conforme abaixo:

void ctx.drawImage(image, dx, dy);

Aqui estamos utilizando diversos outros parâmetros, e precisaremos entender os mesmos.  Para tanto, vale olharmos a especificação da função com seu número completo de parâmetros:

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Os parâmetros de posição x e y continuam presentes, mas são respectivamente o 6º e 7º parâmetros, dx e dy, ou seja, X e Y da posição no destino.

Os parâmetros 3º, 4º e os dois últimos se referem a largura e altura da imagem, respectivamente na imagem original e no destino. No nosso caso, como não estamos redimensionando a imagem, são iguais e representam 32 (largura do personagem) e 48 (altura do personagem).

O que realmente nos interessa são os parâmetros sx e sy. Eles representam as coordenadas x e y que vamos utilizar da imagem original. Se forem 0 e 0, basicamente estamos exibindo uma imagem de 32 por 48, fazendo o corte em 32 e 48 na imagem original.

Se sx for 32, porém, estaremos exibindo não a primeira imagem do personagem, mas sim a imagem do personagem na segunda coluna. Do mesmo modo, se sy for 48, estaremos exibindo a imagem da segunda linha.

Assim sendo, podemos agora entender os parâmetros de sx e sy utilizados. Em ambos temos um índice da imagem multiplicado por 32 ou 48.

This.etapaPasso representa, assim, um número de 0 a 3 correspondendo a etapa do passo.

This.direcaoImagem representa, um número de 0 a 3 correspondendo a direção que o personagem se move.


Gerando uma Animação

Mover o personagem sempre foi relativamente simples, após sabermos capturar o teclado. Basta mantermos uma variável com a posição X e Y, e alterá-la conforme a tecla pressionada, chamando drawImage novamente.

Mudar a posição do personagem agora torna-se simples também. Selecionando um número de 0 a 3 para this.direcaoImagem, temos cada uma das 4 direções de nosso desenho.

Gerar o movimento do personagem em si é mais complexo, já que exige a exibição de uma sequência de imagens. Existem diferentes abordagens para obter este resultado, mas, via de regra, todas exigirão o uso de funções com intervalo de tempo.

Observe o segmento de código em que implementamos a caminhada no exemplo:

  this.semiPasso = function()
  {
    var posicaoInterna_Celula = ((this.etapaPasso%4)+1)/4 * TAMANHO_CELULA;
    switch (this.iniciouDirecao)
    {
      case NORTE: this.y = this.oldy - posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_COSTAS; break;

      case SUL:   this.y = this.oldy + posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_FRENTE; break;

      case LESTE: this.x = this.oldx + posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_DIREITA; break;

      case OESTE: this.x = this.oldx - posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_ESQUERDA; break;

      default:break;
    }
    this.etapaPasso = (this.etapaPasso+1) % 4;
    if (this.etapaPasso == 0 )
    {
      this.iniciouPasso = false;
    }
  }


A função semiPasso é chamada a cada ciclo de execução do jogo, caso this.iniciouPasso seja verdadeiro. Ela é responsável por fazer o movimento do personagem da sua posição inicial até a posição final, passando pelas 4 etapas do movimento.

Além de setar a imagem correspondente a direção do movimento, ela controla this.etapaPasso, variando de 0 a 3, encerra o movimento quando atinge a etapa 3, e ainda move 1/4 de posição entre uma posição definida e a outra a cada iteração.



Juntando Tudo

Estes itens acima são as funcionalidades mais complexas e/ou novas do código. Faça o download do código e abra em seu próprio computador para testá-lo. Acompanhe os cursos gratuitos e pagos de jogos em javascript da Alfamídia, que apresentam as demais funcionalidades relevantes do programa.

Assine nossa newsletter para ser avisado quando disponibilizarmos um mini-jogo contendo este recurso. Os códigos-fonte dos jogos desenvolvidos para os cursos de criação de jogos javascript da Alfamídia são disponibilizados livremente a medida que concluídos, e podem ser utilizados em qualquer desenvolvimento de jogo, comercial ou não.


terça-feira, 3 de maio de 2016

Orientação a Objetos: Herança em Javascript

No curso de Criação de Jogos Javascript, utilizamos o jogo Miaus 2.0 para explicar uma das diversas formas de implementarmos herança em Javascript, e aproveitamos para buscar demonstrar as vantagens da Programação Orientada a Objetos.

Vamos mostrar a seguir como utilizamos herança em um exemplo simplificado semelhante ao fonte do Miaus 2.0. No código fonte do Miaus 2.0 vocês podem encontrar esta mesma aplicação de herança de uma forma mais sofisticada.

Por que Utilizamos Herança no Miaus 2.0

No curso de Criação de Jogos Javascript, utilizamos uma função sprites para implementar uma série de ações comuns a todos os elementos da cena. Na função sprites temos funções para desenho (que fazem a exibição do objeto), funções de movimento, de detecção de colisões, entre outras.

Todos os elementos da cena, por sua vez, são criados a partir de funções derivadas de sprites. Isso significa que cada elemento só precisa implementar alguma função quando a mesma tem uma funcionalidade diferente da implementação básica definida na função sprites.

Adicionalmente, podemos armazenar todos os elementos da cena em um vetor único, o qual percorremos chamando as funções de desenho, ciclo, etc. Isso simplifica significativamente o desenvolvimento e manutenção do código, deixando o tratamento de como é feito o desenho, quais ações ocorrem a cada ciclo, sob responsabilidade das funções derivadas de sprite.

Como Implementar Herança em Javascript

Existem diversas formas de implementarmos herança. Abaixo apresentamos a abordagem adotada no jogo Miaus 2.0, utilizando um código mínimo. Você pode testar este código diretamente no console do seu navegador. No caso do Chrome, basta seguir os passos abaixo:

  1. Abra uma janela do Chrome
  2. Digite "about:blank" e dê ENTER
  3. Digite F12
  4. Selecione a aba console 
  5. Copie e cole o código abaixo, e observe os resultados

Código-fonte demonstrando herança em javascript

Selecione a partir daqui e copie:
----------------------------------------------------------------------------
function Pai()
{
  this.funcao_comum = function()
  {
     return "esta função é igual para todos";
  }
}
Pai.prototype.funcao_especifica = function()
{
    return  "esta é uma função do pai";
}

function Filho1()
{
  Pai.call(this);
  this.funcao_especifica = function()
  {
     return "esta é uma função do filho 1";
  }
}
Filho1.prototype = Object.create(Pai.prototype)

function Filho2()
{
  Pai.call(this);
  this.funcao_especifica = function()
  {
     var mensagemPai = Pai.prototype.funcao_especifica.call(this);
     return mensagemPai + " e esta é uma função do filho 2";
  }
}
Filho2.prototype = Object.create(Pai.prototype)


{
  lista = [];
  lista[0] = new Pai();
  lista[1] = new Pai();
  lista[2] = new Pai();
  lista[3] = new Filho1();
  lista[4] = new Filho2();
  for (i = 0; i < 5; i++) {
    console.log(lista[i]);
    console.log(i,lista[i].funcao_comum());
    console.log(i,lista[i].funcao_especifica());
  }

}

----------------------------------------------------------
Marque até aqui, e cole na janela de console de seu navegador


Estudando o Código de Demonstração de Herança

Observe que criamos uma lista de 5 elementos, e fizemos um loop através de cada um dos elementos. Fizemos a chamada a função funcao_comum() e funcao_especifica(), com diferentes resultados. Como funcao_comum() só é implementada na função principal ela é mostrada igual em todas as chamadas do console. Já funcao_especifica() apresenta resultados diferentes em cada uma das funções.

Ocorre que o Javascript utiliza prototype como um ponteiro para um conjunto de funções definidas pela função, e como ponteiro para o prototype da classe superior. Ao utilizarmos Filho1.prototype = Object.create(Pai.prototype), estamos garantindo que toda função não encontrada dentro da função Filho1, será chamada da função Pai, se existir na mesma.

O resultado, se a cópia para o console ocorreu adequadamente, é mostrado a seguir. (Também é perfeitamente possível copiar o javascript para dentro de uma página HTML):

> Pai {}
0 "esta função é igual para todos"
0 "esta é uma função do pai"
> Pai {}
1 "esta função é igual para todos"
1 "esta é uma função do pai"
> Pai {}
2 "esta função é igual para todos"
2 "esta é uma função do pai"
> Filho1 {}
3 "esta função é igual para todos"
3 "esta é uma função do filho 1"
> Filho2 {}
4 "esta função é igual para todos"
4 "esta é uma função do pai e esta é uma função do filho 2"

Como Utilizar o Código do Miaus 2.0

A primeira versão do Miaus está descrita em um curso gratuito, que você pode realizar acessando este link: Curso Básico de Jogos em Javascript.

O código-fonte da versão 2.0 do Miaus também está disponível gratuitamente. Um link neste próprio blog permite abrir diretamente o jogo em si.

O curso Criando Jogos em Javascript, em que trabalhamos de forma mais aprofundada com orientação a objetos e o código fonte do Miaus 2.0, faz parte do Curso Online em Criação de Jogos Digitais.

Se desejar, você pode utilizar livremente o código-fonte do Miaus 2.0, seja para estudo, seja para utilizar como base para a construção de jogos gratuitos ou comerciais.

Links

domingo, 1 de maio de 2016

Jogo com Código Fonte para Aprender Programação - Miaus 2.0

O Javascript hoje é uma linguagem poderosa, que permite muito mais que validar formulários e criar pequenos efeitos em uma página Web.

A linguagem pode ser uma alternativa interessante para iniciar o processo de aprendizagem de lógica de programação, especialmente quando seguimos pela abordagem que a Alfamídia defende: desenvolver o domínio de uma linguagem praticando a mesma.

Assim como a leitura é fundamental para o domínio de uma língua, da mesma forma a prática contínua de programação é fundamental para dominar e ter fluência tanto em programação e lógica de programação, quanto em uma linguagem específica.

Jogos nos Cursos Online Alfamídia de Programação

Uma das abordagens dos cursos online Alfamídia, especialmente os voltados para adolescentes e os cursos para desenvolvedores profissionais de jogos, é o desenvolvimento de jogos, tanto em javascript, quanto em plataformas profissionais de desenvolvimento de jogos, desde GameMaker a Unity e Unreal.

Jogo em Javascript Orientado a Objetos

Confira a nova versão, 2.0, do jogo em javascript Miaus, disponibilizada hoje, um dos jogos básicos usados no ensino de javascript, o MIAUS (mutantes invasores alienígenas do universo sideral).

Para baixar os fontes completos do jogo, incluindo imagens, basta fazer download do jogo.

Este é apenas um esqueleto básico de um jogo de tiro, criado para fins didáticos. Utilize-o à vontade para estudar, como base para um jogo ou como desejar.

Confira o processo de construção da primeira versão do jogo, 1.0, tanto utilizando programação estruturada quanto com orientação a objetos no curso gratuito Alfamídia de jogos Javascript.

Aprendendo Programação Orientada a Objetos


Em breve, estaremos mostrando alguns dos recursos de orientação a objetos, implementação de herança e outras funcionalidades neste portal. Todos, recursos que farão parte dos cursos Alfamídia de programação javascript utilizando jogos.

Links