Construindo um Jogo para a Web Flappy Bird
|
|
|
- Guilherme Santiago de Andrade
- 6 Há anos
- Visualizações:
Transcrição
1 Construindo um Jogo para a Web Flappy Bird Programação para a Internet Prof. Vilson Heck Junior
2 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;
3 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;
4 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!
5 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;
6 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.
7 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;...
8 Flappy Bird: Enredo Lançado em 2013; Plataforma: Móvel; Desenvolvido por Nguyễn Hà Đông (Vetinamita); Publicado pela.gears studios; Foi programado em 3 dias; Chegou a faturar $50.000,00 por dia;
9 Flappy Bird: Enredo Jogo de rolagem horizontal; Pássaro avança ao longo do cenário; Desviar canos; Sem bater no chão ou teto.
10 Nosso Conceito
11 Flappy Bird LISTA DE RECURSOS INICIAIS
12 Recursos Iniciais Pasta: FlappyBird : index.html Construiremos de um documento web, inserindo todos os demais elementos necessários; css/estilo.css Definiremos algumas configurações de cores, bordas e outros para nossa interface; js/ Flappy.js, Jogador.js, Obstaculo.js, TipoObstaculo.js, Geometria.js Faremos todo o processamento e configurações do jogo, dando ações aos acontecimentos e eventos do jogo. subpastas: img e snd Armazenaremos os arquivos responsáveis pelas imagens e sons do jogo.
13 index.html Crie o arquivo como doctype para html 5; Crie as tags para: <html>, <head>, <body>, <title> e <meta>; Estipule um <link> com arquivo de estilo (css/estilo.css); Adicione os arquivos de <script> ao fim do <body>: js/geometria.js js/tipoobstaculo.js js/obstaculo.js js/jogador.js js/flappy.js Importante: adicionar os outros arquivos js na ordem informada, pois os últimos podem precisar dos primeiros já executados.
14 index.html Adicione as seguintes Tags com seus atributos dentro do <body>: <canvas>navegador não suportado!</canvas> id = tela width=600 height=400 <button>iniciar</button> onclick= Flappy.pausar(); id= btniniciar <button>novo Jogo</button> onclick= Flappy.novoJogo(); <p id="tecla"></p> <p>a: Bater asas</p>
15 estilo.css (1/2) body { background-color: #111611; text-align: center; color: white; } #tela { background: linear-gradient(#a7eeff, #63a6d0); border-bottom: 10px solid #526F35; border-top: 10px solid #B6B6B4; }
16 button { background-color: #eb6262; color: white; border: 2px solid #af0303; width: 100px; height: 30px; font-weight: bold; cursor: pointer; margin: 2px; } estilo.css (2/2) button:hover { background-color: #f57b7b; } button:disabled { background-color: #b49191; border-color: #332f2f; color: gray; cursor: not-allowed; }
17 Flappy Bird DESENHANDO NO CANVAS
18 <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.
19 <canvas> O Canvas é feito para oferecer suporte a rápido desenho de cenas bidimensionais ou tridimensionais: Geralmente acelerado por Hardware; 0 X width 0 y height
20 js/flappy.js //Um pequeno teste (remover depois de testar) //Recuperando referência dos objetos no documento var canvas = document.getelementbyid("tela"); var ctx = canvas.getcontext("2d"); ctx.fillstyle = "#FF0000"; //Usar cor vermelha ctx.fillrect(20, 30, 50, 100); //x=20, y=30, w=50 e h=100
21 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;
22 Relembrando
23
24
25
26 Dimensões Cada elemento do jogo terá uma dimensão. Círculos serão determinados por um raio e retângulos por uma largura e altura. Largura
27 Rotação Cada elemento do jogo poderá ser girado. Isto implica em girar a tela para desenhar e processar corretamente as colisões. Angulo
28 Dimensões Além de tudo, sempre poderemos processar e desenhar somente aquilo que está envolvido com a tela. tela.width tela.height
29 Flappy Bird O OBJETO FLAPPY
30 Objeto Flappy Nosso projeto será, em maior parte, Orientado a Objetos; O objeto central será chamado de Flappy e terá por responsabilidade gerenciar todos os demais objetos; O objeto Flappy também será responsável por obter as referências dos objetos DOM, tal como o Canvas.
31 js/flappy.js function Flappy(canvasStr) { this.canvas = document.getelementbyid(canvasstr); this.ctx = this.canvas.getcontext("2d"); this.lartela = this.canvas.width; this.alttela = this.canvas.height; this.tempo = null; }
32 Flappy Bird O JOGADOR
33 Objeto Jogador Construiremos um objeto para representar abstratamente o jogador; No nosso caso, este objeto será o pássaro do jogo e deverá estar em alguma posição do cenário; O jogador é quem recebera os comandos executados pelo usuário e processará as ações.
34 js/jogador.js function Jogador(flappy) { this.flappy = flappy; this.altura = 15; //Raio this.angulo = 0; this.x = (flappy.lartela / 8) + this.altura / 2; this.y = (flappy.alttela / 2) + this.altura / 2; this.desenhar = function() { var ctx = this.flappy.ctx; ctx.save(); ctx.translate(this.x, this.y); ctx.beginpath(); ctx.arc(0, 0, this.altura, Math.PI * 0.25, Math.PI * 1.75); ctx.stroke(); ctx.fill(); ctx.restore(); }; }
35 js/flappy.js function Flappy(canvasStr) { this.jogador = new Jogador(this); this.desenhartudo = function() { this.ctx.clearrect(0,0,this.lartela, this.alttela); this.jogador.desenhar(); }; } //FIM FUNCTION FLAPPY var jogo = null; Flappy.novoJogo = function () { Flappy.intervalo = 25; jogo = new Flappy("tela"); jogo.desenhartudo(); document.getelementbyid("btniniciar").innerhtml = "Iniciar"; document.getelementbyid("btniniciar").disabled = false; } Flappy.novoJogo(); Testar!
36 Flappy Bird O OBSTÁCULO
37 Objeto Obstaculo Cada obstáculo existente que o jogador deve superar serão representados por um objeto chamado Obstaculo. Estes objetos serão responsáveis por identificar o tipo de obstáculo, bem como o seu posicionamento.
38 js/obstaculo.js function Obstaculo(flappy) { this.flappy = flappy; this.tipo = new TipoObstaculo(); if (Obstaculo.todos.length == 0) { this.x = flappy.lartela * 0.666; } else { this.x = flappy.lartela * 1.3; } Obstaculo.todos.push(this); } Obstaculo.todos = [];
39 Objeto TipoObstaculo Um conjunto diferente de formas, tamanhos e texturas devem definir as possibilidades de representação dos objetos Obstaculo. Este objeto TipoObstaculo será responsável por definir estes modelos possíveis para os Obstáculos.
40 js/tipoobstaculo.js function TipoObstaculo() { } var sorteio = Math.floor(Math.random() * TipoObstaculo.todos.length); var modelo = TipoObstaculo.todos[sorteio]; this.movey = modelo.movey; this.passagem = modelo.passagem; this.altura = modelo.altura; this.largura = modelo.largura; this.angulo = modelo.angulo; this.corpreenchimento = modelo.corpreenchimento; this.corcontorno = modelo.corcontorno; this.imagem = modelo.imagem;
41 js/tipoobstaculo.js TipoObstaculo.todos = [//Inicio do vetor { movey : -0.25, passagem : 150, altura : 200, largura : 100, angulo : Math.PI / 90, imagem : new Image() }, //Fim elemento 0 { movey : 0.5, passagem : 120, altura : 150, largura : 60, angulo : Math.PI / -40, imagem : new Image() }, //Fim elemento 1
42 js/tipoobstaculo.js { movey : 0.5, passagem : 120, altura : 250, largura : 60, angulo : Math.PI / 40, imagem : new Image() }, //Fim elemento 2 { movey : 0, passagem : 120, altura : 100, largura : 40, angulo : 0, imagem : new Image() } //Fim elemento 3 (último) ]; //Fim do vetor
43 js/tipoobstaculo.js TipoObstaculo.todos[0].imagem.src = "img/bricks0.jpg"; TipoObstaculo.todos[1].imagem.src = "img/bricks1.jpg"; TipoObstaculo.todos[2].imagem.src = "img/bricks2.jpg"; TipoObstaculo.todos[3].imagem.src = "img/bricks3.jpg"; Baixar as imagens da pagina da disciplina para a subpasta img
44 js/obstaculo.js this.desenhar = function () { flappy.ctx.save(); flappy.ctx.linewidth = 4; flappy.ctx.translate(this.x + (this.tipo.largura / 2), flappy.alttela / 2); flappy.ctx.rotate(this.tipo.angulo); var p1 = -((flappy.alttela / 2) - this.tipo.altura); var p2 = p1 + this.tipo.passagem; flappy.ctx.drawimage(this.tipo.imagem, 0,0,this.tipo.largura, flappy.alttela, this.tipo.largura / -2, p1, this.tipo.largura, -flappy.alttela); }; flappy.ctx.drawimage(this.tipo.imagem, 0,0,this.tipo.largura, flappy.alttela, this.tipo.largura / -2, p2, this.tipo.largura, flappy.alttela); flappy.ctx.restore();
45 js/obstaculo.js Obstaculo.desenharTodos = function () { for(var i = 0; i < Obstaculo.todos.length; i++) { Obstaculo.todos[i].desenhar(); } };
46 js/flappy.js function Flappy(canvasStr) { this.jogador = new Jogador(this); new Obstaculo(this); this.desenhartudo = function() { this.ctx.clearrect(0,0,this.lartela, this.alttela); this.jogador.desenhar(); Obstaculo.desenharTodos(); }; } //FIM FUNCTION FLAPPY Testar!
47 js/flappy.js Flappy.desenharTudo = function() { jogo.desenhartudo(); } for (var ia = 0; ia < TipoObstaculo.todos.length; ia++) { TipoObstaculo.todos[ia].imagem.onload = Flappy.desenharTudo; } Testar novamente!
48 js/jogador.js this.desenhar = function() { }; var ctx = this.flappy.ctx; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angulo); ctx.drawimage(jogador.imagem, -this.altura, -this.altura, this.altura * 2, this.altura * 2); ctx.beginpath(); ctx.arc(0, 0, this.altura, Math.PI * 0.25, Math.PI * 1.75); ctx.stroke(); ctx.fill(); ctx.restore(); Jogador.imagem = new Image(); Jogador.imagem.src = "img/bird.png"; Incluir! Apagar! Baixar e Incluir! Testar!
49 Flappy Bird COLOCANDO VIDA
50 O que precisamos? Fazer o jogador se movimentar ao iniciar e pressionar tecla? Inserir e fazer os obstáculos se movimentarem: Com qual intervalo de tempo? Para qual direção? O que acontece se o jogador colidir contra um obstáculo? O que ocorre quando o jogador bate as asas? O que acontece se o jogador colidir com o teto ou com o chão?
51 Movimentação do Jogo O Jogador irá se movimentar continuamente para frente e irá responder conforme a tecla que o usuário pressionar: A: bater asas. Outras teclas podem ser configuradas;
52 Flappy Bird INTERAGINDO COM O USUÁRIO
53 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 irá intervir basicamente através de comandos! Comandos são captados através de eventos.
54 Eventos! Nosso document possui propriedades de eventos que podem ser associadas à funções quaisquer; Estas funções determinam algo a ser feito quando aquele evento ocorrer: document.onkeydown Ao descer uma tecla qualquer; document.onkeyup Ao soltar uma tecla qualquer;
55 js/flappy.js document.onkeyup = function (evt) { } document.getelementbyid("tecla").innerhtml = evt.keycode; Teste!
56 js/flappy.js document.onkeyup = function (evt) { } jogo.pressionartecla(evt); Apagar o <p id= tecla > do HTML
57 js/flappy.js this.pressionartecla = function (evt) { if (evt.keycode == 65) { this.jogador.baterasas(); //this.desenhartudo(); } };
58 js/jogador.js this.baterasas = function (){ this.angulo -= Math.PI / 3; this.y -= 8; if (this.angulo < -Math.PI / 4) { this.angulo = -Math.PI / 4; } }; Testar!
59 Flappy Bird CONTROLE GLOBAL DO MOVIMENTO
60 Movendo com Tempo Todo tipo de movimento tem uma velocidade; Como determinamos a velocidade de algum objeto? Medida Espacial / Tempo! KM/h m/s...
61 Controlando o Tempo Como já definimos, a unidade de espaço de cada movimento do cenário e dos inimigos será por uma distância pré-determinada; Agora precisamos determinar o intervalo de tempo que nosso jogo irá usar para fazer cada movimento dos elementos; Como nosso jogo gira em torno do avanço do jogador este tempo será um guia para todo o jogo.
62 js/flappy.js Flappy.novoJogo = function () { Flappy.intervalo = 25; //Conforme já definido anteriormente jogo = new Flappy("tela"); jogo.desenhartudo(); document.getelementbyid("btniniciar").innerhtml = "Iniciar"; document.getelementbyid("btniniciar").disabled = false; }
63 Controlando o Tempo Exemplo de 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;
64 js/flappy.js function Flappy(canvasStr) {... this.tempo = null; //Conforme já definido anteriormente... }
65 js/flappy.js this.pausar = function () { }; if (this.tempo == null) { this.tempo = setinterval(flappy.atualizar, Flappy.intervalo); document.getelementbyid("btniniciar").innerhtml = "Pausar"; } else { } clearinterval(this.tempo); this.tempo = null; document.getelementbyid("btniniciar").innerhtml = "Continuar";
66 js/flappy.js Flappy.novoJogo = function () { if (jogo!= null) { if (jogo.tempo!= null) { jogo.pausar(); } Obstaculo.todos = []; } Flappy.intervalo = 25;... } Flappy.pausar = function() { jogo.pausar(); } Flappy.atualizar = function() { jogo.atualizar(); }
67 js/flappy.js this.atualizar = function () { //Mover obstáculos Obstaculo.moverTodos(this.jogador.mover(5)); //Desenhar tudo this.desenhartudo(); //Verificar colisões com obstáculos //Verificar colisão com teto e chão };
68 js/obstaculo.js Obstaculo.moverTodos = function (dist) { var ultimo = Obstaculo.todos.length - 1; for(var i = ultimo; i >= 0; i--) { var obatual = Obstaculo.todos[i]; obatual.x -= dist; } };
69 js/jogador.js this.mover = function (dist){ var varx = dist * Math.cos(this.angulo); this.y += dist * Math.sin(this.angulo); this.angulo += Math.PI / 60; if (this.angulo > Math.PI / 2.8) { this.angulo = Math.PI / 2.8; } return varx; }; Testar!
70 Flappy Bird MOVIMENTAÇÃO DOS OBSTÁCULOS
71 Movimentação dos Obstáculos Os obstáculos terão sua base de movimento conforme o método iniciado anteriormente; Agora, ao movimentar todos os obstáculos, precisamos ir criando novos objetos à medida que obstáculos ultrapassados sejam descartados: Para detectar se um obstáculo foi completamente superado, precisaremos detectar seus principais pontos em relação à tela; Para adicionar um maior desafio ao jogador, também é proposta a movimentação vertical dos obstáculos;
![Sup[0] Sup[3] Superior Sup[1] Sup[2] Inf[1] Inf[2] Cada ponto tem as](/docs-images/72/67212328/images/72-1.jpg "coordenadas X e Y.")
72 Sup[0] Sup[3] Superior Sup[1] Sup[2] Inf[1] Inf[2] Cada ponto tem as coordenadas X e Y. Exemplo: Inf[1][0] é X Inf[1][1] é Y Inferior Inf[0] Inf[3]
73 js/obstaculo.js (1/3) this.getpontossuperior = function () { var pontos = []; //Vetor de retorno dos pontos var meiolarg = this.tipo.largura / 2; var meioaltel = flappy.alttela / 2; var senang = Math.sin(this.tipo.angulo); var cosang = Math.cos(this.tipo.angulo); //X1Y1-0 px = -meiolarg; py = -(meioaltel - this.tipo.altura) - flappy.alttela; xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy);
74 js/obstaculo.js (2/3) //X1Y2-1 px = -meiolarg; py = -(meioaltel - this.tipo.altura); xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy); //X2Y2-2 px = meiolarg; py = -(meioaltel - this.tipo.altura); xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy);
75 js/obstaculo.js (3/3) //X2Y1-3 px = meiolarg; py = -(meioaltel - this.tipo.altura) - flappy.alttela; xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy); }; return pontos;
76 js/obstaculo.js (1/3) this.getpontosinferior = function () { var pontos = []; //Vetor de retorno dos pontos var meiolarg = this.tipo.largura / 2; var meioaltel = flappy.alttela / 2; var senang = Math.sin(this.tipo.angulo); var cosang = Math.cos(this.tipo.angulo); //X1Y4-0 px = -meiolarg; py = -(meioaltel - this.tipo.altura) + this.tipo.passagem + flappy.alttela; xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy);
77 js/obstaculo.js (2/3) //X1Y3-1 px = -meiolarg; py = -(meioaltel - this.tipo.altura) + this.tipo.passagem; xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy); //X2Y3-2 px = meiolarg; py = -(meioaltel - this.tipo.altura) + this.tipo.passagem; xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy);
78 js/obstaculo.js (3/3) //X2Y4-3 px = meiolarg; py = -(meioaltel - this.tipo.altura) + this.tipo.passagem + flappy.alttela; xy = []; xy[0] = this.x + meiolarg + px * cosang - py * senang; xy[1] = meioaltel + px * senang + py * cosang; pontos.push(xy); }; return pontos;
79 js/obstaculo.js Obstaculo.moverTodos = function (dist) { var ultimo = Obstaculo.todos.length - 1; for(var i = ultimo; i >= 0; i--) { var obatual = Obstaculo.todos[i]; obatual.x -= dist; if (i!= ultimo && i!= 0) { continue; } pontossup = obatual.getpontossuperior(); pontosinf = obatual.getpontosinferior(); var maiorx = Math.max(pontosSup[2][0], pontossup[3][0], pontosinf[2][0], pontosinf[3][0]); if (ultimo == i && maiorx < jogo.lartela) { new Obstaculo(jogo); } if (maiorx < 0) { Obstaculo.todos.splice(i,1); } } //Fim do for }; //Fim método Testar!
80 Movimentação dos Obstáculos Para implementar a movimentação vertical, precisaremos levar em consideração a informação armazenada em: tipo. movey e tipo.angulo
81 js/obstaculo.js Obstaculo.moverTodos = function (dist) { var ultimo = Obstaculo.todos.length - 1; for(var i = ultimo; i >= 0; i--) { var obatual = Obstaculo.todos[i]; obatual.x -= dist; obatual.tipo.altura += obatual.tipo.movey; if (obatual.tipo.altura < 0) { obatual.tipo.altura = 0; obatual.tipo.movey *= -1; } if (obatual.tipo.altura + obatual.tipo.passagem >= jogo.canvas.height) { obatual.tipo.altura = (jogo.canvas.height - 1) obatual.tipo.passagem; obatual.tipo.movey *= -1; } if (i!= ultimo && i!= 0) { continue;... Testar!
82 Alterações Restantes O que falta alterar? Quando colide: Chão? Teto? Obstáculo? Fim de jogo? Sons?
83 js/flappy.js this.verificacolisao = function (px, py, raio, pts) { if (this.linhacolide(px, py, raio, pts[0], pts[1]) this.linhacolide(px, py, raio, pts[1], pts[2]) this.linhacolide(px, py, raio, pts[2], pts[3])) { this.ctx.strokestyle = "#FF0000"; this.ctx.beginpath(); for (var a = 0; a <= 2; a++) { this.ctx.moveto(pts[a][0], pts[a][1]); this.ctx.lineto(pts[a+1][0], pts[a+1][1]); } this.ctx.stroke(); Desenhar borda do retângulo onde ocorreu colisão }; return true; } return false;
84 js/flappy.js this.linhacolide = function (cx, cy, raio, A, B) { var dist = disttosegment([cx, cy],a,b); if (dist <= raio) { return true; } else { return false; } };
85 js/geometria.js function sqr(x) { return x * x; } function dist2(v, w) { return sqr(v[0] - w[0]) + sqr(v[1] - w[1]); } function disttosegmentsquared(p, v, w) { var l2 = dist2(v, w); if (l2 == 0) return dist2(p, v); var t = ((p[0] - v[0]) * (w[0] - v[0]) + (p[1] - v[1]) * (w[1] - v[1])) / l2; t = Math.max(0, Math.min(1, t)); return dist2(p, [ v[0] + t * (w[0] - v[0]), v[1] + t * (w[1] - v[1]) ] ); } function disttosegment(p, v, w) { return Math.sqrt(distToSegmentSquared(p, v, w)); }
86 js/flappy.js (1/2) this.atualizar = function () { //Mover obstáculos Obstaculo.moverTodos(this.jogador.mover(5)); //Desenhar tudo this.desenhartudo(); //Verificar colisões com obstáculos var jog = this.jogador; for (var i = 0; i < Obstaculo.todos.length; i++) { var ptsinf = Obstaculo.todos[i].getPontosInferior(); var ptssup = Obstaculo.todos[i].getPontosSuperior(); if (this.verificacolisao(jog.x, jog.y, jog.altura, ptssup) this.verificacolisao(jog.x, jog.y, jog.altura, ptsinf)) { this.gameover(); } } //Verificar colisão com teto e chão }; //Fim do método
87 js/flappy.js (2/2) this.atualizar = function () { //Mover obstáculos //Desenhar tudo... //Verificar colisões com obstáculos... //Verificar colisão com teto e chão if (jog.y - jog.altura <= 0 jog.y + jog.altura >= this.alttela) { this.gameover(); } }; //Fim do método
88 js/flappy.js this.gameover = function() { if (this.tempo!= null) { this.pausar(); console.log("game Over"); document.getelementbyid("btniniciar").disabled = true; } }; Testar!
89 Flappy Bird ESTÍMULOS SONOROS
90 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 e salve na subpasta snd: asa.mp_ e asa.ogg batida.mp_ e batida.ogg ponto.mp_ e ponto.ogg
91 <audio> e <source> HTML 5! MIME Types: MP3 audio/mpeg Ogg audio/ogg Wav audio/wav Suporte: Ps.: Múltiplos <source> fornecem redundância! Suporte dos diferentes navegadores
92 index.html... <audio controls id="sndasa"> <source src="snd/asa.mp_" type="audio/mpeg"> <source src="snd/asa.ogg" type="audio/ogg"> </audio> <audio controls id="sndbatida"> <source src="snd/batida.mp_" type="audio/mpeg"> <source src="snd/batida.ogg" type="audio/ogg"> </audio> <audio controls id="sndponto"> <source src="snd/ponto.mp_" type="audio/mpeg"> <source src="snd/ponto.ogg" type="audio/ogg"> </audio> <script...></script>
93 js/jogador.js this.baterasas = function (){ this.angulo -= Math.PI / 3; this.y -= 8; if (this.angulo < -Math.PI / 4) { this.angulo = -Math.PI / 4; } Jogador.somAsa.cloneNode(true).play(); }; //Fim do método //Incluir no fim do arquivo Jogador.somAsa = document.getelementbyid("sndasa"); Jogador.somPonto = document.getelementbyid("sndponto"); Jogador.somBatida = document.getelementbyid("sndbatida"); Testar!
94 Trabalho 1. Customize cores e outras configurações do arquivo de estilo; 2. Customize cores, tamanhos e disposição dos objetos do jogo (dentro do Javascript). Utilize gradientes e/ou imagens; 3. Complete o HTML informando o nome da disciplina, o nome do instituto e o seu nome, dispondo os elementos com layouts CSS; 4. Crie um placar com pontuação; 5. Crie uma indicação visual dentro do Canvas de fim de jogo; 6. Adicione os novos sons a eventos diferentes no jogo; 7. Adicione teclas de atalho para Pausa e para Novo Jogo ; 8. Corrija o bug: se o jogo não estiver executando e tela a A for pressionada o jogador bate asas ; 9. Ao evoluir no jogo, crie novos desafios para o jogador; Adicione outros elementos a seu critério: Exemplos: novos tipos de obstáculos; presentes aleatórios que jogador deve capturar; tecla com movimento especial (limitadas vezes); outros pássaros inimigos aleatórios; use sua criatividade. 10. Entregue os arquivos por ao Professor junto com uma descrição/resposta para cada item do trabalho.
Construindo um Jogo para a Web River Raid
Construindo um Jogo para a Web River Raid Programação para a Internet Prof. Vilson Heck Junior Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação Gráfica
Construindo um Jogo para a Web Pinball
Construindo um Jogo para a Web Pinball Programação para a Internet Prof. Vilson Heck Junior Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação Gráfica
Construindo um Jogo para a Web Pac-man
Construindo um Jogo para a Web Pac-man Programação para a Internet Prof. Vilson Heck Junior Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação Gráfica
Construindo um Jogo para a Web - Tetris
Construindo um Jogo para a Web - Tetris Programação para a Internet Prof. Vilson Heck Junior Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação Gráfica
Construindo um Jogo para a Web - Snake
Construindo um Jogo para a Web - Snake Programação para a Internet Prof. Vilson Heck Junior Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação Gráfica
Construindo um Jogo para a Web - Breakout
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
Animação - Movendo objeto com HTML CANVAS
Animação - Movendo objeto com HTML CANVAS Para executar estes exemplos utilizaremos o site: https://www.tutorialspoint.com Escolha o opção JS (Javascript) Etapas básicas de animação Estas são as etapas
Construindo um Jogo para a Web Futebol de Cabeça
Construindo um Jogo para a Web Futebol de Cabeça Programação para a Internet Prof. Vilson Heck Junior Tecnologias Necessárias Tecnologias já Estudadas: HTML; CSS; JavaScript; Tecnologias Novas: Computação
Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo
Parte I Prof. Vicente Paulo de Camargo Páginas com podem ser desenvolvidas com editor de texto simples Existem, no entanto, alguns editores interessantes, que facilitam a edição de páginas É o caso de
Introdução ao HTML5 Canvas
Introdução ao HTML5 Canvas Compilação feita com base nas referências por: Prof. José Cintra http://www.josecintra.com/blog Download dos exemplos disponíveis no GitHub Apresentação O objetivo deste minicurso
Criação de Animação com Sprite com HTML CANVAS
Criação de Animação com Sprite com HTML CANVAS Para executar estes exemplos utilizaremos nosso navegador, por causa dos arquivos de imagem. Exemplo 2 Sprites A sequência de Sprite utilizada neste exemplo
Material criado e organizado por: Suéllen Rodolfo Martinelli. Disponibilizado em:
Material criado e organizado por: Suéllen Rodolfo Martinelli Disponibilizado em: www.scratchbrasil.net.br Um jogo muito simples e viciante que foi lançado no ano de 2014 para celulares, é o jogo Flappy
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
Introdução ao Javascript. Parte 3 Prof. Victor Hugo Lopes
Introdução ao Javascript Parte 3 Prof. Victor Hugo Lopes agenda Trabalhando com Eventos DOM na prática: trabalhando com propriedades http://goo.gl/tkjhmb Eventos Evento é um acontecimento que ocorre a
Flash CC Plano de Aula - 24 Aulas (Aulas de 1 Hora).
5923 - Flash CC Plano de Aula - 24 Aulas (Aulas de 1 Hora). Aula 1 Capítulo 1 - Introdução ao Flash CC 1.1. Novidades do Flash CC... 21 1.2. Iniciar o Flash CC... 22 1.2.1. Tela Inicial... 23 1.2.2. Área
Plano de Aula - Flash CC - cód Horas/Aula
Plano de Aula - Flash CC - cód.5923 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Flash CC Aula 2 1 - Introdução ao Flash CC Aula 3 Capítulo 2 - Documentos Aula 4 2 - Documentos 1.1. Novidades do Flash
Aplicativos móveis com HTML5
Aplicativos móveis com HTML5 Preparando o ambiente de desenvolvimento O código HTML pode ser escrito em qualquer editor de texto comum. Você pode utilizar o editor padrão do seu sistema operacional (Bloco
AULA 11 DESENVOLVIMENTO DE GAMES UTILIZANDO O HTML5
AULA 11 DESENVOLVIMENTO DE GAMES UTILIZANDO O HTML5 HTML5 E JAVASCRIPT O HTML5 é a mais recente versão do padrão HTML; fornece-nos muitos recursos para uma maior interatividade e suporte de mídia. Esses
SCC0504 Programação Orientada a Objetos Prof. Luiz Eduardo Virgilio da Silva / Estevam Arantes (Monitor) Projeto
UNIVERSIDADE DE SÃO PAULO INSTITUTO DE CIÊNCIAS MATEMÁTICAS E DE COMPUTAÇÃO Departamento de Ciências de Computação SCC0504 Programação Orientada a Objetos Prof. Luiz Eduardo Virgilio da Silva / Estevam
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3. Prof. Dr. Daniel Caetano
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3 Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar os conceitos básicos da linguagem ActionScript 3.0 Capacitar o aluno para criar programas
Redes de Computadores I Seminário Novas Tecnologias em Redes HTML5. Jessica da Silva Hahn Letícia Aparecida Coelho
Redes de Computadores I Seminário Novas Tecnologias em Redes HTML5 Jessica da Silva Hahn Letícia Aparecida Coelho Internet HTTP Dois métodos de requisição HTTP são os mais utilizados: GET e POST Outros
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
Introdução a Programação de Jogos
Introdução a Programação de Jogos Aula 05 Introdução ao Löve Edirlei Soares de Lima Hello World em Löve function love.draw() love.graphics.print("hello World", 360, 300) end O comando
Disciplina: Desenvolvimento Web Professor: Paulo César Fernandes de Oliveira, BSc, PhD
1. O que é CSS? a) É a linguagem que se usa para se definir quais serão os elementos de uma página HTML. b) É uma linguagem que se usa para se modificar o estilo de apresentação dos elementos de uma página
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3. Prof. Dr. Daniel Caetano
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3 Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar os conceitos básicos da linguagem ActionScript 3.0 Capacitar o aluno para criar programas
Introdução à Engenharia ENG1000
Introdução à Engenharia ENG1000 Aula 07 Introdução a Löve2D 2018.1 Prof. Augusto Baffa Hello World em Löve2D function love.draw() love.graphics.print("hello World", 360, 300) end
Gráficos Comerciais na WEB com Chart.js
Gráficos Comerciais na WEB com Chart.js Compilação feita com base nas referências por: José Augusto Cintra Professor da Faculdade Sumaré SP Analista de TI da Empresa PRODAM SP josecintra@josecintra.com
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
<HTML> Vinícius Roggério da Rocha
Vinícius Roggério da Rocha www.monolitonimbus.com.br O que é HTML? HTML = HyperText Markup Language ou Linguagem de Marcação de Hipertexto Linguagem: maneira de se comunicar (entre máquinas, pessoas
HTML 5 e o desenvolvimento de Jogos Digitais
HTML 5 e o desenvolvimento de Jogos Digitais Marcelo Henrique dos Santos http://www.marcelohsantos.com marcelosantos@outlook.com Mestrando em Educação (em andamento) Negócios em Mídias Digitais (em andamento)
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
XNA. Introdução ao XNA
XNA Introdução ao XNA Introdução XNA Game Studio 3.1 (http://creators.xna.com/) Visual Studio 2008 Introdução File New Project Introdução Solution Explorer Introdução Estrutura geral de um jogo Existência
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar os conceitos do DHTML Conceituar a estruturação dos objetos do DOM Compreender as diferentes
Java: Linguagem de programação (OOP) JavaScipt: Linguagem de scripts (OOP)
Executado do lado do cliente, interage com o usuário sem a necessidade do script passar pelo servidor. Desenvolvida por Brendan Eich, da Netscape Communications Corporation em 1995 (LiveScript). 1ª linguagem
<link rel="stylesheet" type="text/css" href="imagens.css" />
Este código é responsável pela visualização html. exibição de Imagens
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2013-1 Objetivos Apresentar os conceitos do DHTML Conceituar a estruturação dos objetos do DOM Compreender as diferentes
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades
Ambiente de programação
EXPLORANDO O O que é o SCRATCH? O software Scratch é um ambiente para a criação de jogos, histórias e animações, usando raciocínio lógico. A partir desta ferramenta é possível exercitar conceitos de lógica
Introdução 1 PARTE I: A LINGUAGEM DA WEB 5
Sumário Introdução 1 PARTE I: A LINGUAGEM DA WEB 5 Capítulo 1: Introdução a HTML5 7 Criando com tags: um panorama 8 Incorporando os novos elementos de HTML5 9 Usando tags válidas de HTML4 11 Esquecendo
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
Refinamentos sucessivos
Refinamentos sucessivos Objetivos: Estudar a técnica de refinamentos sucessivos Jogo: 2048 Implementaremos o jogo 2048, com o objetivo de estudar a manipulação dos elementos de uma matriz Utilizaremos
Computação II Orientação a Objetos
Computação II Orientação a Objetos Fabio Mascarenhas - 2016.1 http://www.dcc.ufrj.br/~fabiom/java Space Invaders Componentes do Jogo Canhão Aliens Tiros Escudos Score e vidas Nem todos vão precisar de
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
INF Fundamentos de Computação Gráfica /1
INF01047 - Fundamentos de Computação Gráfica - 2013/1 Especificação do Trabalho Final Professores: João Comba (comba@inf.ufrgs.br) e Marcelo Walter (marcelo.walter@inf.ufrgs.br) Objetivo Consolidar o conhecimento
Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora).
4149 - Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora). Aula 1 Capítulo 1 - Introdução 1.1. Novidades do Dreamweaver CS5...23 1.2. Área de Trabalho...23 1.2.1. Tela de Boas-vindas...24 1.2.2.
Plano de Aula - Dreamweaver CS5 - cód Horas/Aula
Plano de Aula - Dreamweaver CS5 - cód.4149 24 Horas/Aula Aula 1 Capítulo 1 - Introdução Aula 2 Continuação do Capítulo 1 - Introdução Aula 3 Capítulo 2 - Site do Dreamweaver 1.1. Novidades do Dreamweaver
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
PROGRAMANDO NO FLASH. Prezado(a) aluno(a), 1. ActionScript. Painel Ações. UnidadeD
UnidadeD Prezado(a) aluno(a), Nesta unidade, você estudará a linguagem de programação do Flash, o ActionScript 3.0. Conhecido pela sigla AS. o ActionScript, poderosa linguagem de programação, permite o
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT
v1.1 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 7 CRIANDO INTERAÇÕES COM JAVASCRIPT (PARTE 2) Eder Franco @ FPF Tech The road so far... JavaScript Desenvolvida para criar interações
Paradigmas de Programação. Java First-Tier: Aplicações. Orientação a Objetos em Java (I) Nomenclatura. Paradigma OO. Nomenclatura
Java First-Tier: Aplicações Orientação a Objetos em Java (I) Paradigmas de Programação Programação Funcional Programação Procedural Programação Orientada por Objetos Grupo de Linguagens de Programação
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
1) Criar o código HTML para construir a página representada pela imagem abaixo.
1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,
Dreamweaver CS5 -5- CAPÍTULO 1... Iniciando e conhecendo o dreamweaver...8 Interfaces...23 Criando e confi gurando sites...24 Exercícios...
DREAMWEAVER CS5 INTRODUÇÃO O Dreamweaver CS5 é um editor avançado de páginas para Internet, pois possui ferramentas para usuários que não são familiarizados com as linguagens HTML, Java e PHP. Com o Dreamweaver
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
INTRODUÇÃO AO JQUERY PROF. ME. HÉLIO ESPERIDIÃO
INTRODUÇÃO AO JQUERY PROF. ME. HÉLIO ESPERIDIÃO Introdução JQuery é uma biblioteca JavaScript desenvolvida para simplificar os scripts client-side que interagem com o HTML. Ela foi lançada em janeiro de
PDI 1 - Projeto e Design de Interfaces Web
Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2011-2 Visão Geral 1 2 3 4 DHTML Document Object Model Manipulando o DOM Manipulando o CSS pelo DOM Material de Estudo
Siga a regra de ouro
Siga a regra de ouro Aula 05 IV - Siga a regra de ouro O design e layout de seu site são a lente através da qual seus usuários exibem e experimentam seu conteúdo Layout confuso Experiência ruim. Design
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
Material reorganizado e adaptado por: Suéllen Rodolfo Martinelli. Disponibilizado em:
Material reorganizado e adaptado por: Suéllen Rodolfo Martinelli Disponibilizado em: www.scratchbrasil.net.br Material original criado por: Cesar Ferreira, Cláudio Gilberto César e Susana Seidel Disponibilizado
LISTA DE ATIVIDADES Semestre Letivo 2018/1
Computação Gráfica Lista de Atividades (atualizada em 13 jun. 2018) glaucius@pelotas.ifsul.edu.br LISTA DE ATIVIDADES Semestre Letivo 2018/1 ATIVIDADE-12 Elaborar um programa X3D, utilizando a técnica
Adobe. Dreamweaver CS4
Adobe Dreamweaver CS4 ÍNDICE CAPÍTULO 1 INICIANDO O DREAMWEAVER... 7 CONHECENDO A TELA DO DREAMWEAVER... 8 CAPÍTULO 2 INICIANDO A CRIAÇÃO DO SITE... 15 REDIMENSIONANDO A JANELA DO DOCUMENTO... 18 INSERINDO
COMPUTAÇÃO GRÁFICA II E III PROMOB. Construção de piso e teto, inserção de portas e janelas, iniciação à inserção de módulos.
COMPUTAÇÃO GRÁFICA II E III PROMOB Construção de piso e teto, inserção de portas e janelas, iniciação à inserção de módulos. Construção e edição de piso e teto Criando o piso: Através do menu editar ->
Desenvolvendo Jogos 2D-Android
DISPOSITIVOS MÓVEIS II Etep Desenvolvendo Jogos 2D-Android Prof. Rogério B. de Andrade Coordenador do Curso de Programação em Jogos Digitais Desenvolvimento de Jogos Utilizando Android Inicialmente o primeiro
CONTRUCT 2. Tainá Medeiros
CONTRUCT 2 1 Tainá Medeiros O QUE IREMOS VER HOJE! Conhecendo a ferramenta Construct 2. Eventos; Sprintes; Objetos; Comportamentos. Programar de maneira visual e lógica. 2 O QUE É UMA GAME ENGINE? 3 O
Plano de Aula - Flash CS6 - cód Horas/Aula
Plano de Aula - Flash CS6 - cód.5282 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Flash CS6 Aula 2 1 - Introdução ao Flash CS6 Aula 3 Capítulo 2 - Documentos 1.1. Novidades do Flash CS6... 23 1.2. Iniciando
TÉCNICAS DE PROGRAMAÇÃO II TRABALHO 2
TÉCNICAS DE PROGRAMAÇÃO II TRABALHO 2 Descrição: O objetivo do trabalho 2 é desenvolver um jogo estilo shoot 'em up em Java, onde o jogador possa controlar uma espaçonave e destruir as espaçonaves inimigas
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
Casa do Código Livros para o programador Rua Vergueiro, º andar Vila Mariana São Paulo SP Brasil
Casa do Código Todos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998. Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem autorização prévia por escrito da editora,
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
Dreamweaver CS6 Plano de Aula - 24 Aulas (Aulas de 1 Hora).
5232 - Dreamweaver CS6 Plano de Aula - 24 Aulas (Aulas de 1 Hora). Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 1.1. Novidades do Dreamweaver CS6... 23 1.2. Área de Trabalho... 24 1.2.1. Tela de Boas-vindas...
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo
1.5 PROGRAMAÇÃO DE JOGOS EM AMBIENTE DE REA LIDADE AUMENTADA AMBIENTES INTEGRADOS DE DESENVOLVIMENTO DE JOGOS 19
ÍNDICE GERAL SOBRE O LIVRO XI 1 INTRODUÇÃO 1 1.1 GERAÇÃO DIGITAL NATIVE 2 1.2 ALGORITMIA E PROGRAMAÇÃO DE COMPUTADORES 2 1.3 COMPUTAÇÃO EM NUVEM 4 1.4 PROGRAMAÇÃO DE DISPOSITIVOS MÓVEIS 6 1.5 PROGRAMAÇÃO
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de
Desenvolvimento de Jogos 3D com o Blender
Desenvolvimento de Jogos 3D com o Blender Por Marcos Romero Outubro / 2008 www.blender.org Big Buck Bunny O Blender já conquistou seu espaço na área de animações em 3D. Projetos como Elephant Dreams e
Capturando teclas: Movimentando um Sprite utilizando teclado
Capturando teclas: Movimentando um Sprite utilizando teclado Como capturar as teclas do nosso teclado, para que possamos trabalhar o controle de um sprite ou mesmo de qualquer outro elemento que faz parte
Plano de Aula - PowerPoint cód Horas/Aula
Plano de Aula - PowerPoint 2007 - cód. 2865-16 Horas/Aula Aula 1 Capítulo 1 - Introdução Aula 2 Continuação do Capítulo 1 - Introdução Aula 3 Continuação do Capítulo 1 - Introdução Aula 4 Continuação do
Modelo de formateo visual em CSS
Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização
Animação 2D. Sistemas de Informação e Multimédia Módulo 5
Animação 2D Sistemas de Informação e Multimédia Módulo 5 Sobre o Flash O Flash é uma ferramenta que permite criar qualquer item, desde uma simples animação até uma aplicação para Web interactiva e complexa,
IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links
De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho
PROGRAMACAO E INTEGRACAO DE JOGOS I
PROGRAMACAO E INTEGRACAO DE JOGOS I Aula 4 Mestrado em Educação (em andamento) Pós-graduação em Negócios em Mídias Digitais (em andamento) MBA em Marketing e Vendas Especialista em games : Produção e Programação
Capítulo 9 - Imagens. Imagens
Capítulo 9 - Imagens 9 Imagens EM JAVASCRIPT, É POSSÍVEL MANIPULAR COM AS IMAGENS DE UMA PÁGINA, alterando a URL que localiza o arquivo de imagem. Assim, pode-se trocar a imagem que está sendo exibida
Introdução ao ASP.NET
Introdução ao ASP.NET Webforms Formulários WEB Os formulários da Web constituem a principal forma de interação entre o usuário e uma página Web. Dentro deles, estão contidos recursos para captação de dados,
Computação II (MAB 225)
Computação II (MAB 225) Fabio Mascarenhas - 2015.1 http://www.dcc.ufrj.br/~fabiom/pythonoo Introdução No curso de Computação I vocês viram os conceitos básicos de programação em Python: expressões e comandos,
é usado para fechar a janela do são telas que podem conter textos, imagens, vídeos, sons e efeitos visuais.
ATIVIDADES - CAPÍTULO 1 1 Caça-palavras - Localize as seguintes palavras: aplicativo apresentações efeitos imagens powerpoint slides sons vídeos textos F O R S L I D E S T E N D U T A B F O R T R U D O
Descrição. Requisitos. Ementa do curso. Duração: 42h divididas em 12 aulas
Descrição Este curso apresenta uma introdução a programação de jogos digitais através de algoritmos de programação, detalhamento da ferramenta Unity 2018, assim como uma visão geral do mercado e o status
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
Aula 4 TECNOLOGIA EM JOGOS DIGITAIS PROGRAMACAO E INTEGRACAO DE JOGOS I. Marcelo Henrique dos Santos
Aula 4 Email: Site: marcelosantos@outlook.com www.marcelohsantos.com.br Conceitos sobre a Unity Conceitos sobre a Unity BARRA DE CONTROLE DA CENA O primeiro menu drop-down é para escolher o modo de desenho.