Construindo um Jogo para a Web - Breakout Programação para a Internet Prof. Vilson Heck Junior
Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação Gráfica Básica; Noções de Geometria; Noções de Física; Reprodução de Sons; Enredo;
Computação Gráfica É um campo da Ciência da Computação que estuda métodos para sintetizar e manipular digitalmente conteúdo visual: Geração de imagens 2D; Geração de imagens 3D (renderização); Com ou sem animação;
Noções de Geometria Gráficos 2D ou 3D são na verdade a composição de pequenas peças geométricas: A relação espacial dada entre diferentes objetos existentes em uma cena deve ser respeitada: Dois corpos não podem ocupar um mesmo lugar no espaço!
Noções de Física Objetos podem possuir algum tipo de movimento ou interação com outros objetos; Para isto, geralmente respeitam alguma(s) regras físicas: Próximas a real: Simulação; Diferenciadas: Arcade;
Reprodução de Sons O som é o elemento responsável por estimular o sentido da audição; Não tanto quanto os gráficos, mas os sons são responsáveis por completar uma boa sensação de imersão em jogos e entretenimento; Geralmente os sons (músicas ou barulhos) serão escolhidos conforme um determinado contexto ou acontecimento.
Enredo O enredo irá explicar ao usuário o que deverá ser feito e deve ser o principal responsável por atrair a atenção do jogador: História; Diversão; Desafios; Passatempo;...
Enredo Breakout: Atari em 1976. Versão para Atari 2600 (1978):
Nosso Conceito
Breakout LISTA DE RECURSOS INICIAIS
Recursos Iniciais Pasta: Breakout : index.html Construiremos de um documento web, inserindo todos os demais elementos necessários; estilo.css bg.js Definiremos algumas configurações de cores, bordas e outros para nossa interface; Faremos todo o processamento do jogo, ou seja, daremos vida aos elementos existentes no documento web.
index.html Crie o arquivo como doctype para html 5; Crie as tags para: <html>, <head>, <body> e <title>; Estipule um <link> com arquivo de estilo; Adicione o arquivo de <script> ao fim do <body>;
index.html Adicione os seguintes Tags com seus atributos dentro do <body>: <canvas></canvas> id = mycanvas width=800 height=600 <button>iniciar</button> type= button onclick= Pausar() id= btstart <button>reiniciar</button> type= button onclick= Reiniciar() <p id= info ></p>
Breakout DESENHANDO NO CANVAS
<canvas> Canvas é um termo inglês dado a alguns tipos de tela para pintura; No nosso caso, será uma área dentro do documento HTML onde poderemos pintar o que precisarmos; Nosso pincel e paleta de cores estão disponíveis através de código JavaScript.
<canvas> O Canvas é feito para oferecer suporte a rápido desenho de cenas bidimensionais ou tridimensionais: Geralmente acelerado por Hardware; 0 y height 0 X width
bg.js //Recuperando referência dos objetos no documento var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); var info_display = document.getelementbyid("info"); var btnstart = document.getelementbyid("btstart"); //Um pequeno teste (remover depois de testar) ctx.fillstyle = #FF0000 ; //Usar cor vermelha ctx.fillrect(20, 30, 50, 100); //x=20, y=30, w=50 e h=100
Desenhando Temos uma tela para desenho; Conhecemos uma primeira ferramenta para pintar algo; Temos que utilizar esta ferramenta de forma a construir o cenário inicial do nosso jogo;
Relembrando
Posicionamento e Tamanhos Encontramos: Diversos Tijolos, Uma Base e Uma Bola; Iremos utilizar variáveis para guardar a posição (X, Y) de cada objeto, bem como as dimensões e outras propriedades das formas geométricas utilizadas.
bg.js //Variáveis do Posicionamento da bola var ball_cx; //Bola inicia no centro horizontal definido em reiniciar var ball_cy; //Bola inicia em 85% da altura definido em reiniciar var ball_r; //Raio da bola definido em reiniciar //Direção inicial da bola var dir_x; //Definido em Reiniciar var dir_y; //Definido em Reiniciar var speed; //Definido em Reiniciar //Variáveis da base var alt_base = 10; //Altura da base var lar_base = 60; //Largura da base var x_base; //Definido no Reiniciar var y_base; //Definido no Reiniciar
bg.js //Construção dos Tijolos var larg_tij = 50; //Largura dos tijolos var altu_tij = 20; //Altura dos tijolos var espa_tij = 10; //Espaço entre os tijolos var n_tij_x = Math.floor((c.width - espa_tij) / (larg_tij + espa_tij)); //Máximo de tijolos var n_tij_y = 10; //10 linhas com tijolos var tot_tij = n_tij_x * n_tij_y; //total de tijolos var tijs_x = new Array(); //Posição x do tijolo var tijs_y = new Array(); //Posição y do tijolo var tijs_v = new Array(); //Tijolo visível? //Chama função que inicia todas variáveis para dar inicio ao jogo Reiniciar();
bg.js function Reiniciar() //Reiniciar partida { //Texto informativo info_display.innerhtml = Clique em Iniciar para jogar"; //Posicionamento da bola ball_cx = Math.floor(c.width / 2); //Bola inicia no centro horizontal ball_cy = Math.floor(c.height * 0.85); //Bola inicia em 85% da altura ball_r = 0.0; //Raio da bola é 1% da menor dimensão if (c.width < c.height) ball_r = Math.floor(c.width * 0.01); else ball_r = Math.floor(c.height * 0.01);
bg.js //Continuação da função Reiniciar //Posicionamento da Base x_base = Math.floor(c.width / 2 - lar_base / 2); y_base = Math.floor(ball_cy + ball_r); //Direção inicial da bola dir_x = 0; dir_y = -7; speed = Math.abs(dir_x) + Math.abs(dir_y); //Construção dos Tijolos IniciarTijolos(); //Desenhar a tela Desenhar();
bg.js //Criar cada um dos tijolos e os define visíveis function IniciarTijolos() { at = 0; //Para cada linha prevista for(linha_at = 0; linha_at < n_tij_y; linha_at++) //Em cada linha, Para cada coluna prevista for (coluna_at = 0; coluna_at < n_tij_x; coluna_at++) { //Define um X, Y e Visível um novo Tijolo tijs_x[at] = espa_tij + (coluna_at * (larg_tij + espa_tij)); tijs_y[at] = espa_tij + (linha_at * (altu_tij + espa_tij)); tijs_v[at++] = true;
bg.js //Atualiza, redesenha function Desenhar() { ctx.clearrect(0, 0, c.width, c.height); //Limpar a tela de desenho desenhartijolos(); //Desenhar todos os tijolos criados desenharbola(); //Desenhar a bola desenharbase(); //Desenhar a base
bg.js //Desenhar Tijolos function desenhartijolos() { //Para cada um dos Tijolos criados... for (at = 0; at < tot_tij; at++) { //Se o Tijolo estiver vísivel if (tijs_v[at] == true) { //Desenha o Tijolo ctx.fillstyle = "#00FF00"; ctx.fillrect(tijs_x[at],tijs_y[at],larg_tij,altu_tij);
bg.js //Desenhar a Bola function desenharbola() { ctx.fillstyle = "#FF0000"; ctx.beginpath(); ctx.arc(ball_cx, ball_cy, ball_r, 0, Math.PI*2, true); ctx.closepath(); ctx.fill(); //Desenhar a Base function desenharbase() { ctx.fillstyle = "#0000FF"; ctx.fillrect(x_base,y_base,lar_base,alt_base);
Breakout COLOCANDO VIDA
O que precisamos? Fazer a bola se movimentar: Com qual intervalo de tempo? E quando a bola bater em um Tijolo? E quando a bola bater numa Parede? E quando a bola bater na Base? E quando a bola bater no Fundo? E quando o usuário pressionar a Seta Esquerda? E quando o usuário pressionar a Set Direita?
Breakout MOVIMENTAÇÃO DA BOLA
Movendo a Bola Todo tipo de movimento tem uma velocidade; Como determinamos a velocidade de algum objeto? Medida Espacial / Tempo! KM/h m/s...
Controlando o Tempo Como já definimos um espaço percorrido a cada unidade de tempo para a bola: Variável: speed Agora precisamos determinar o intervalo de tempo que nosso jogo ira usar para fazer cada movimento da bola; Como nosso jogo gira em torno principalmente da bola, este tempo será como um guia para todo o jogo.
Controlando o Tempo Função JavaScript: relogio = setinterval( NomeFuncao(), intervalo); relogio é uma referência ao timer/clock que foi criado; NomeFuncao() é a função que será executada a cada intervalo; intervalo é um número inteiro representando a quantidade em milissegundos de intervalo entre uma execução e outra da função NomeFuncao(). clearinterval(relogio); Para o relógio de repetição;
bg.js Crie as seguintes variáveis globais: //Controle de execução var rodando = false; var relogio; var intervalo = 20; //intervalo em milissegundos
bg.js //Pausar ou retomar o jogo Executado pelo btnstart function Pausar() { rodando =!rodando; if (rodando) { relogio = setinterval("desenhar()", intervalo); info_display.innerhtml = "Executando..."; btnstart.innerhtml = "Pausar"; else { clearinterval(relogio); info_display.innerhtml = "Pausa"; btnstart.innerhtml = "Iniciar";
bg.js //Atualiza, redesenha, loop principal do jogo function Desenhar() { RecalcPos(); //Recalcular posição da bola ctx.clearrect(0, 0, c.width, c.height); //Limpar a tela de desenho desenhartijolos(); //Desenhar todos os tijolos criados desenharbola(); //Desenhar a bola desenharbase(); //Desenhar a base
bg.js Incluir na função Reiniciar(): //Se estiver em execução, pausa if (rodando) Pausar();
bg.js //Recalcular a posição da bola function RecalcPos() { ball_cx += dir_x; //Incrementa movimento X a posição da bola ball_cy += dir_y; //Incrementa movimento Y a posição da bola Testar!
Breakout DETECTANDO COLISÕES
Colisões Durante a trajetória, a bola poderá encontrar: 3 paredes diferentes; A base do jogador; Diversos tijolos; O fundo do cenário (fim de jogo); Cada um destes objetos deverá causar uma mudança de direção diferente sob a bola;
altura Detectando Colisões Num plano 2D, colisões são simples de serem detectadas: Colisão Inferior, Superior, Lateral Esquerda e Lateral Direita: yt + altura <= yb r (xt, yt) largura r (xb, yb)
altura Detectando Colisões Num plano 2D, colisões são simples de serem detectadas: Colisão Inferior, Superior, Lateral Esquerda e Lateral Direita: yt >= yb + r (xb, yb) (xt, yt) r largura
altura Detectando Colisões Num plano 2D, colisões são simples de serem detectadas: Colisão Inferior, Superior, Lateral Esquerda e Lateral Direita: xt + largura >= xb r (xt, yt) largura r (xb, yb)
altura Detectando Colisões Num plano 2D, colisões são simples de serem detectadas: Colisão Inferior, Superior, Lateral Esquerda e Lateral Direita: xt <= xb + r (xt, yt) largura r (xb, yb)
//Verifica colisão com Paredes function VerificaParedes() { //Parede esquerda if (ball_cx - ball_r <= 0) { dir_x *= -1; //Parede direita if (ball_cx + ball_r >= c.width - 1) { dir_x *= -1; //Parede superior if (ball_cy - ball_r <= 0) { dir_y *= -1; bg.js
Colisão na Base Além de detectar a colisão com a base, precisamos identificar a distância do centro, pois isto muda a direção da bola: var dist = ball_cx - (x_base + (lar_base / 2)); dist /= (lar_base / 2); dir_x = dist * (speed * 0.75); // Máximo 1/4 da velocidade para X dir_y = -(speed - Math.abs(dist)); //Y sempre negativo ao bater na base
bg.js //Verifica colisão com Base function VerificaBase() { if (ball_cx + ball_r >= x_base && ball_cx - ball_r <= x_base + lar_base) if (ball_cy + ball_r >= y_base && ball_cy + ball_r <= y_base + alt_base) { var dist = ball_cx - (x_base + (lar_base / 2)); dist /= (lar_base / 2); dir_x = dist * (speed * 0.75); dir_y = -(speed - Math.abs(dist));
Colisão nos Tijolos A verificação de colisão em um tijolo é feita da mesma forma que na base, porém teremos tot_tij de tijolos para verificar e não apenas um; Só podemos descobrir se não estamos batendo em algum Tijolo depois de verificar cada um deles e constatar que não há colisão nenhuma; Ao bater em um tijolo, temos que constatar se a colisão foi vertical ou horizontal, pois isto afetara a bola em eixos diferentes;
bg.js //Verifica colisão com Tijolos function VerificaTijolos() { //Para cada um dos tijolos.. for (at = 0; at < tot_tij; at++) { //Se o tijolo atual for visível... if (tijs_v[at] == true) { //Verifico se há colisão com ele.. if (ball_cy - ball_r < tijs_y[at] + altu_tij && ball_cy + ball_r > tijs_y[at]) if (ball_cx - ball_r < tijs_x[at] + larg_tij && ball_cx + ball_r > tijs_x[at]) { //Procuro pela distância da bola em relação as linhas do Tijolo var distx1 = Math.abs((ball_cx - ball_r) - (tijs_x[at] + larg_tij)); var distx2 = Math.abs((ball_cx + ball_r) - tijs_x[at]); var disty1 = Math.abs((ball_cy - ball_r) - (tijs_y[at] + altu_tij)); var disty2 = Math.abs((ball_cy + ball_r) - tijs_y[at]); if (distx2 < distx1) distx1 = distx2; if (disty2 < disty1) disty1 = disty2;
bg.js if (distx1 == disty1) //Bateu na quina { dir_y *= -1; dir_x *= -1; else if (distx1 < disty1) //Bateu em linha vertical { dir_x *= -1; else //Bateu em linha horizontal { dir_y *= -1; tijs_v[at] = false; //Tijolo batido, não é mais visível
Colisão no Fundo Entenda fundo pela parte inferior da tela; O que ocorre quando a bola encostar neste fundo? Game Over! Esta colisão será detectada de forma similar as laterais e superior, mas será tratada de forma diferente!
bg.js //Verifica Game Over function VerificaGameOver() { //Se estivermos em posição de game over.. if (ball_cy + ball_r >= c.height - 1) { Pausar(); //Parar o jogo e informar o fim. info_display.innerhtml = "GAME OVER!";
Alterações na Iteração O que falta alterar? Qual é a função executada repetidas vezes a cada contagem de tempo? Desenhar() Todas as detecções que programamos, deve ser invocadas para que possam ser, de fato, verificadas;
bg.js //Atualiza, redesenha e VERIFICA function Desenhar() { RecalcPos(); //Recalcular posição da bola ctx.clearrect(0, 0, c.width, c.height); //Limpar a tela de desenho VerificaParedes(); //NOVO Verifica colisão VerificaTijolos(); //NOVO Verifica colisão VerificaBase(); //NOVO Verifica colisão VerificaGameOver(); //NOVO Verifica colisão desenhartijolos(); //Desenhar todos os tijolos criados desenharbola(); //Desenhar a bola desenharbase(); //Desenhar a base
Breakout INTERAGINDO COM O USUÁRIO
Eventos! A interação é dada por uma troca entre a máquina e o usuário; A máquina fornece principalmente imagens que descrevem uma situação, onde pode ser necessária a intervenção do usuário; O usuário ira intervir basicamente através de comandos! Comandos são captados através de eventos.
Eventos! Nosso document possuí propriedades de eventos que podem ser associadas à funções quaisquer; Estas funções determinar algo a ser feito quando aquele evento ocorrer: document.onkeydown Ao descer uma tecla qualquer; document.onkeyup Ao soltar uma tecla qualquer;
bg.js //Informações sobre teclas var rightdown = false; var leftdown = false; //Eventos document.onkeydown=onkd; document.onkeyup=onku;
bg.js //rightdown ou leftdown para mover para os lados function onkd(evt) { if (evt.keycode == 39) rightdown = true; else if (evt.keycode == 37) leftdown = true; //rightup ou leftup para parar de mover function onku(evt) { if (evt.keycode == 39) rightdown = false; else if (evt.keycode == 37) leftdown = false;
bg.js var move_base = 7; //Variável de velocidade da base //Recalcular a posição da bola E DA BASE function RecalcPos() { if (leftdown) { x_base -= move_base; if (x_base < 0) x_base = 0; if (rightdown) { x_base += move_base; if (x_base + lar_base > c.width - 1) x_base = (c.width - 1) - lar_base; ball_cx += dir_x; //Incrementa movimento X a posição da bola ball_cy += dir_y; //Incrementa movimento Y a posição da bola
Breakout ESTÍMULOS SONOROS
Estímulos Sonoros Conforme comentado anteriormente, quanto mais estimularmos, de forma positiva, os sentidos dos jogadores, maior a probabilidade dele se sentir como parte do jogo; Para isto, iremos adicionar alguns pequenos sons associados a eventos como colisões; Baixe os arquivos: bounce.mp_ e bounce.ogg; brick.mp_ e brick.ogg; e gameover.mp_ e gameover.ogg. Renomeie as extensões.mp_ para.mp3
index.html Adicionar dentro do <body>: <audio controls id="bounce"> <source src="bounce.mp3" type="audio/mpeg"> <source src="bounce.ogg" type="audio/ogg"> </audio> <audio controls id="brick"> <source src="brick.mp3" type="audio/mpeg"> <source src="brick.ogg" type="audio/ogg"> </audio> <audio controls id="gameover"> <source src="gameover.mp3" type="audio/mpeg"> <source src="gameover.ogg" type="audio/ogg"> </audio>
<audio> e <source> HTML 5! MIME Types: MP3 audio/mpeg Ogg audio/ogg Wav audio/wav Suporte: Ps.: Múltiplos <source> fornecem redundância! Browser MP3 Wav Ogg IE 9+ Sim Não Não Chrome 6+ Sim Sim Sim Firefox 3.6+ Não Sim Sim Safari 5+ Sim Sim Não Opera 10+ Não Sim Sim
bg.js //Recuperando objetos de som var snd_bounce = document.getelementbyid("bounce"); var snd_brick = document.getelementbyid("brick"); var snd_gameover = document.getelementbyid("gameover"); Prática: Insira os comandos de reprodução nos locais apropriados: snd_bounce.play(); snd_brick.play(); snd_gameover.play();
Trabalho 1. Customize cores e outras configurações do arquivo de estilo; 2. Customize cores, tamanho e número dos objetos do jogo (dentro do Javascript). É possível fazer gradientes ou utilizar imagens; 3. Adéque seu código para detectar quando TODOS os tijolos foram destruídos e o jogador ganhou; 4. Complete o HTML com texto informando o nome da disciplina, o nome do instituto e o seu nome; 5. Adicione novas características e funcionalidades a seu critério; 6. Entregue os arquivos por e-mail ao Professor.