Construindo um Jogo para a Web Futebol de Cabeça
|
|
|
- Osvaldo Stachinski Caires
- 7 Há anos
- Visualizações:
Transcrição
1 Construindo um Jogo para a Web Futebol de Cabeça 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 Futebol de Cabeça: Enredo Lançado nos anos 201X; Plataforma: Web; Desenvolvido por várias empresas; Tem várias versões com muita variedade de opções e modos;
9 Futebol de Cabeça: Jogo de bola; Objetivo: fazer gols; Enredo Na proposta original é possível segurar a bola e chutar, mas a movimentação principal se baseia em cabecear a bola.
10 Nosso Conceito
11 Futebol de Cabeça LISTA DE RECURSOS INICIAIS
12 Recursos Iniciais Pasta: Futebol : 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/ Ball.js, Load.js, Net.js, Player.js e Soccer.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/load.js js/ball.js js/player.js js/net.js js/soccer.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=650 height=500 <button>iniciar</button> onclick= Soccer.jogo.pausar(); id= btnpausar <button>novo Jogo</button> onclick= novojogo();
15 estilo.css (1/2) body { background-color: #2a2a2a; text-align: center; color: white; } #tela { background: linear-gradient(#a7eeff, #63a6d0); border-left: 10px solid #BBBBBB; border-right: 10px solid #BBBBBB; }
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 Futebol de Cabeça 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/soccer.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 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
26 Dimensões Além de tudo, sempre poderemos processar e desenhar somente aquilo que está envolvido com a tela. tela.width tela.height
27 Futebol de Cabeça O OBJETO SOCCER
28 Objeto Soccer Nosso projeto será, em maior parte, Orientado a Objetos; O objeto central será chamado de Soccer e terá por responsabilidade gerenciar todos os demais objetos; O objeto Soccer também será responsável por obter as referências dos objetos DOM, tal como o Canvas.
29 js/soccer.js //Parte dinâmica function Soccer() { Soccer.jogo = this; this.canvas = document.getelementbyid("tela"); this.ctx = this.canvas.getcontext("2d"); this.intervalo = 34; this.tempo = null; document.getelementbyid("btnpausar").disabled = false; } //Parte estática Soccer.jogo = null;
30 Futebol de Cabeça A REDE
31 Objeto Net A Rede será representada e gerenciada por um objeto Net; Este será o objeto mais simples do jogo, sendo que todos os atributos e métodos são estáticos (existe sempre uma única rede no jogo); A Rede deverá ser posicionada no centro da tela, entre os jogadores.
32 js/net.js (1/2) function Net() { } Net.x = 0; Net.y = 0; Net.altura = 220; Net.cor = "#EEEEEE"; Net.largura = 10; Net.ajusta = function(xi, yi) { Net.x = xi; Net.y = yi; };
33 js/net.js (2/2) Net.desenhar = function(ctx) { var metade = Net.largura / 2; ctx.save(); ctx.translate(net.x - metade, Net.y); ctx.fillstyle = Net.cor; ctx.fillrect(0, 0, Net.largura, Net.altura * 0.9); ctx.restore(); };
34 js/soccer.js //Parte dinâmica function Soccer() { Soccer.jogo = this; this.canvas = document.getelementbyid("tela"); this.ctx = this.canvas.getcontext("2d"); Net.ajusta(this.canvas.width / 2, this.canvas.height - Net.altura); this.intervalo = 34; this.tempo = null; document.getelementbyid("btnpausar").disabled = false; }
35 js/soccer.js //Parte dinâmica function Soccer() {... document.getelementbyid("btnpausar").disabled = false; this.desenhartudo = function() { this.ctx.clearrect(0, 0, this.canvas.width, this.canvas.height); Net.desenhar(this.ctx); }; } this.desenhartudo(); //Dentro do construtor, fora de métodos
36 js/soccer.js //Parte estática Soccer.jogo = null; function novojogo() { if (Soccer.jogo!= null) { if (Soccer.jogo.tempo!= null) { Soccer.jogo.pausar(); } } Soccer.jogo = new Soccer(); } novojogo(); //Última linha, sempre Testar!
37 Futebol de Cabeça O JOGADOR
38 Objeto Player Construiremos um objeto para representar abstratamente os jogadores; No nosso caso, este objeto será cada um dos personagens do jogo, deverá estar em alguma posição do cenário e terá uma imagem de representação; Os jogadores é que receberão os comandos executados pelo usuário e processarão as ações.
39 js/player.js function Player(imagem, xi, yi, context) { Player.todos.push(this); this.largura = 75; this.altura = 150; this.cabecar = 38; this.cabecax = 37; this.cabecay = 37; this.x = xi; this.maxx = 0; this.minx = 0; if (Player.todos[0] == this) { this.minx = 0; this.maxx = Net.x - this.cabecar; } else { this.minx = Net.x + this.cabecar; this.maxx = Soccer.jogo.canvas.width - 1; } //continua no próximo slide
40 js/player.js function Player(imagem, xi, yi, context) {... this.y = yi; this.chao = yi; this.imgs = []; this.imgs.push(new Image()); this.imgs[0].src = imagem + "-1.png"; this.imgs.push(new Image()); this.imgs[1].src = imagem + "-2.png"; this.imgpulo = new Image(); this.imgpulo.src = imagem + "-p.png"; this.imgatual = 0; this.ctx = context; //continua no próximo slide
41 js/player.js function Player(imagem, xi, yi, context) {... this.desenhar = function() { this.ctx.save(); this.ctx.translate(this.x, this.y); this.ctx.drawimage(this.imgs[this.imgatual], this.largura / -2, this.altura / -2, this.largura, this.altura); this.ctx.restore(); }; } //Fecha a função construtora Player
42 js/player.js //Parte estática (fora da função construtora) Player.todos = []; Player.desenharTodos = function() { for(var i = 0; i < Player.todos.length; i++) { Player.todos[i].desenhar(); } }
43 js/soccer.js //Parte dinâmica, após Net.ajusta Player.todos = []; new Player("img/jog1", this.canvas.width / 4, (this.canvas.height / 4) * 3, this.ctx); new Player("img/jog2", (this.canvas.width / 4) * 3, (this.canvas.height / 4) * 3, this.ctx); Baixar imagens de jogadores!
44 js/soccer.js //Parte dinâmica, método de desenho this.desenhartudo = function() { this.ctx.clearrect(0, 0, this.canvas.width, this.canvas.height); Net.desenhar(this.ctx); Player.desenharTodos(); }; Testar! No console, utilize o seguinte comando: Soccer.jogo.desenharTudo();
45 Futebol de Cabeça A BOLA
46 Objeto Bola A bola terá uma imagem de representação, um raio e métodos para representar o seu movimento. Neste objeto, implementaremos todas as funcionalidades ligadas a bola.
47 js/ball.js function Ball() { } Ball.x = 0; Ball.y = 0; Ball.raio = 30; Ball.img = new Image(); Ball.img.src = "img/ball.png"; Ball.velY = 0; Ball.velX = 0;
48 js/ball.js Ball.ajusta = function(xi, yi) { Ball.x = xi; Ball.y = yi; Ball.velY = 0; Ball.velX = (Math.random() - 0.5) * 20; }; Ball.desenhar = function(ctx) { ctx.save(); ctx.translate(ball.x, Ball.y); ctx.drawimage(ball.img, -Ball.raio, -Ball.raio, Ball.raio * 2, Ball.raio * 2); ctx.restore(); };
49 js/soccer.js //Parte dinâmica, método de desenho this.desenhartudo = function() { this.ctx.clearrect(0, 0, this.canvas.width, this.canvas.height); Net.desenhar(this.ctx); Player.desenharTodos(); Ball.desenhar(this.ctx); }; Testar! No console, utilize o seguinte comando: Soccer.jogo.desenharTudo();
50 js/soccer.js //Parte dinâmica function Soccer() { Soccer.jogo = this; this.canvas = document.getelementbyid("tela"); this.ctx = this.canvas.getcontext("2d"); Net.ajusta(this.canvas.width / 2,... Ball.ajusta(this.canvas.width / 2, this.canvas.height / 5); Testar! No console, utilize o seguinte comando: Soccer.jogo.desenharTudo();
51 Chão! O chão em nosso jogo será um retângulo simples, em um tom de verde. Iremos adicionar o desenho do chão no método de desenhar tudo, haja visto que não há uma classe específica para o cenário, ou para o chão. Para desenhar o chão, tomaremos com base a posição inicial dos pés dos jogadores.
52 js/soccer.js //Parte dinâmica, método de desenho this.desenhochaoy = Player.todos[0].y + Player.todos[0].altura / 3; this.chaoy = Player.todos[0].y + Player.todos[0].altura / 2; this.desenhartudo = function() { this.ctx.clearrect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillstyle = "#069106"; this.ctx.fillrect(0, this.desenhochaoy, this.canvas.width, Net.desenhar(this.ctx); Player.desenharTodos(); this.canvas.height - this.desenhochaoy); Ball.desenhar(this.ctx); }; Testar! No console, utilize o seguinte comando: Soccer.jogo.desenharTudo();
53 Futebol de cabeça GERENCIAMENTO DE CARGA
54 Gerenciamento de Carga Ao abrir a página do jogo, nem sempre os elementos desenhados a partir de imagens serão desenhados. Isto devido ao fato do código não esperar que as imagens sejam carregadas. O código continua executando enquanto o navegador faz download das imagens. Eventualmente a imagem pode ter sido carregada ao ser desenhada, mas não há garantidas. Implementaremos um objeto de gerenciamento da carga das imagens utilizadas no jogo.
55 js/load.js function Load() { } Load.pronto = false; //Terminou a carga? Load.totalImagens = 7; //Número de imagens que serão carregas Load.imagensCarregadas = 0; //Número que já foi carregado Load.jogoCarregado = false; //O jogo está esperando as imagens? Load.imagemCarregada = function() { }; Load.imagensCarregadas++;
56 js/load.js Load.verificaPronto = function () { if (Load.totalImagens > Load.imagensCarregadas &&!Load.jogoCarregado) { settimeout(load.verificapronto, 100); } else { Load.pronto = true; Soccer.jogo.desenharTudo(); } } Load.verificaPronto(); /*A função verificapronto irá verificar a cada 100ms se tudo terminou de ser carregado.*/
57 js/soccer.js //Parte dinâmica, método de desenho this.desenhartudo = function() { this.ctx.clearrect(0, 0, this.canvas.width, this.canvas.height); if (Load.pronto) {... //desenha elementos (já implementado). } else { this.ctx.fillstyle = "#FFFFFF"; this.ctx.font = "30px Arial"; this.ctx.filltext("carregando...", 10, this.canvas.height / 2,500); } }; Testar!
58 js/ball.js function Ball() { } Ball.x = 0; Ball.y = 0; Ball.raio = 30; Ball.img = new Image(); Ball.img.src = "img/ball.png"; Ball.img.onload = Load.imagemCarregada; Ball.velY = 0; Ball.velX = 0;
59 js/player.js function Player(imagem, xi, yi, context) {... this.imgs.push(new Image()); this.imgs[0].src = imagem + "-1.png"; this.imgs[0].onload = Load.imagemCarregada; this.imgs.push(new Image()); this.imgs[1].src = imagem + "-2.png"; this.imgs[1].onload = Load.imagemCarregada; this.imgpulo = new Image(); this.imgpulo.src = imagem + "-p.png"; this.imgpulo.onload = Load.imagemCarregada; Testar!
60 Futebol de cabeça COLOCANDO VIDA
61 O que precisamos? Fazer os jogadores se movimentarem ao pressionar tecla? Fazer a bola se movimentar: Com qual intervalo de tempo? Para qual direção? O que acontece se o jogador colidir com a parede? O que acontece se o jogador colidir com a rede? O que acontece se o jogador colidir com a bola? O que acontece se a bola colidir com o chão? E com a parede?
62 Movimentação do Jogo A Bola irá se movimentar continuamente para o sentido em que ela foi direcionada: A gravidade deverá sempre atuar na bola. Os jogadores irão se movimentar conforme as teclas pressionadas: Jogador 1: A, D e W Jogador 2: Setas
63 Futebol de cabeça INTERAGINDO COM O USUÁRIO
64 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.
65 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;
66 js/soccer.js document.onkeydown = Player.pressionaTecla; document.onkeyup = Player.liberaTecla;
67 js/player.js //Parte estática Player.pressionaTecla = function(evt) { console.log(evt.keycode); }; Testar
68 js/player.js //Parte estática Player.UP1 = 87; //W Player.RI1 = 68; //D Player.LE1 = 65; //A Player.UP2 = 38; //Seta acima Player.RI2 = 39; //Seta direita Player.LE2 = 37; //Seta esquerda
69 js/player.js (1/2) //Sobreescrever Player.pressionaTecla = function(evt) { switch (evt.keycode) { case Player.UP1: Player.todos[0].pular(); break; case Player.RI1: Player.todos[0].moveDir = true; break; case Player.LE1: Player.todos[0].moveEsq = true; break;
70 js/player.js (2/2) }; } case Player.UP2: Player.todos[1].pular(); break; case Player.RI2: Player.todos[1].moveDir = true; break; case Player.LE2: Player.todos[1].moveEsq = true; break;
71 js/player.js Player.liberaTecla = function(evt) { switch (evt.keycode) { case Player.RI1: Player.todos[0].moveDir = false; break; case Player.LE1: Player.todos[0].moveEsq = false; break; case Player.RI2: Player.todos[1].moveDir = false; break; case Player.LE2: Player.todos[1].moveEsq = false; break; } };
72 Futebol de Cabeça CONTROLE GLOBAL DO MOVIMENTO
73 Movendo com Tempo Todo tipo de movimento tem uma velocidade; Como determinamos a velocidade de algum objeto? Medida Espacial / Tempo! KM/h m/s...
74 Controlando o Tempo Como já definimos, a unidade de espaço de cada movimento dos jogadores e da bola 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; Este tempo será um guia para todo o jogo.
75 js/soccer.js function Soccer() {... this.intervalo = 34; //Conforme já definido anteriormente... }
76 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;
77 js/soccer.js function Soccer() {... this.tempo = null; //Conforme já definido anteriormente... }
78 js/soccer.js this.pausar = function () { if (this.tempo == null) { this.tempo = setinterval(atualizar, this.intervalo); document.getelementbyid("btnpausar").innerhtml = "Pausar"; } else { clearinterval(this.tempo); this.tempo = null; document.getelementbyid("btnpausar").innerhtml = "Continuar"; } };
79 js/soccer.js function atualizar() { } Soccer.jogo.atualizar();
80 js/soccer.js this.atualizar = function () { //Player.todos[0].mover(); //Player.todos[1].mover(); Ball.mover(); this.desenhartudo(); };
81 Futebol de Cabeça MOVIMENTAÇÃO DA BOLA
82 Movimentação da Bola A bola sempre terá uma velocidade associada ao movimento. A velocidade dela pode mudar conforme ocorra alguma ação (uma cabeçada, por exemplo). A velocidade da bola também pode mudar de sentido conforme a bola bata em algum objeto. Por fim, devemos considerar uma gravidade para a bola, ou seja, uma aceleração crescente sentido ao chão.
83 js/ball.js Ball.mover = function() { //Ball.colide(); Ball.velX *= 0.99; //Diminui velocidade da bola }; if (Ball.velY > 0) {//Gravidade aumenta velocidade pra baixo Ball.velY += 0.5; } else { Ball.velY += 0.66; } var vel = Math.sqrt(Ball.velX*Ball.velX+Ball.velY*Ball.velY); var velmax = 20; //Limita a velocidade da bola if (vel > velmax) { var prop = velmax / vel; Ball.velX *= prop; Ball.velY *= prop; } Ball.x += Ball.velX; Ball.y += Ball.velY; Testar!
84 Futebol de Cabeça MOVIMENTAÇÃO DO JOGADOR
85 Movimentação do Jogador O jogador possui variáveis que indicam se ele deve se mover para um lado, para outro, ou estar pulando. Precisamos implementar os métodos que efetivamente geram estas mudanças de estado. Isto será feito pelo método mover() de cada jogador.
86 js/player.js //Dinâmica this.moveesq = false; this.movedir = false; this.forcapulo = Player.alturaPulo; //Estática Player.alturaPulo = 10;
87 js/player.js this.mover = function() { if (this.moveesq) { this.x -= 5; this.x = Math.max(this.x, this.minx); this.imgatual++; } if (this.movedir) { this.x += 5; this.x = Math.min(this.x, this.maxx); this.imgatual++ } if (this.imgatual >= this.imgs.length) { this.imgatual = 0; } if (this.forcapulo!= Player.alturaPulo) { this.forcapulo++; this.y += this.forcapulo; if (this.y > this.chao) { this.y = this.chao; } } };
88 js/soccer.js this.atualizar = function () { Player.todos[0].mover(); //Remover os comentários que haviam Player.todos[1].mover(); //Remover os comentários que haviam Ball.mover(); this.desenhartudo(); }; Testar!
89 js/player.js this.pular = function(){ if (this.forcapulo == Player.alturaPulo) { this.forcapulo = -Player.alturaPulo; } }; Testar!
90 js/player.js function Player(imagem, xi, yi, context) {... this.desenhar = function() { this.ctx.save(); this.ctx.translate(this.x, this.y); if (this.forcapulo == Player.alturaPulo) { this.ctx.drawimage(this.imgs[this.imgatual], this.largura / -2, this.altura / -2, this.largura, this.altura); } else { this.ctx.drawimage(this.imgpulo, this.largura / -2, this.altura / -2, this.largura, this.altura); } this.ctx.restore(); }; Testar!
91 Alterações Restantes O que falta alterar? Quando colide a bola: Chão? Teto? Cabeça dos jogadores? Rede? Fim de jogo? Sons?
92 js/ball.js Ball.colide = function() { //Colide com o chão if (Ball.y + Ball.raio > Soccer.jogo.chaoY) { Ball.y = Soccer.jogo.chaoY - Ball.raio; Ball.velY *= -1; } };
93 js/ball.js Ball.mover = function() { Ball.colide(); //Remover comentário que havia Ball.velX *= 0.99; //Diminui velocidade da bola };... Testar!
94 js/ball.js Ball.colide = function() { //Colide com o chão... //Colide com a parede direita if (Ball.x + Ball.raio >= Soccer.jogo.canvas.width) { Ball.x = Soccer.jogo.canvas.width - Ball.raio; Ball.velX *= -1; } //Colide com a parede esquerda if (Ball.x - Ball.raio < 0) { Ball.x = Ball.raio; Ball.velX *= -1; } }; Testar!
95 js/ball.js //Colide com a rede (dentro do Ball.colide() ) var dx = Ball.x - Net.x; var dy = Ball.y - Net.y; if (Math.abs(dx) <= Ball.raio && Ball.y + Ball.raio >= Net.y) { var dc = Math.sqrt(dx*dx+dy*dy); if (Ball.y < Net.y && dc <= Ball.raio) { //Mais da metade da bola está pra cima da rede e //a bola está em contato com a ponta da rede. var ang = Math.atan2(dy, dx); var passou = Ball.raio - dc; Ball.x += Math.cos(ang) * passou; Ball.y += Math.sin(ang) * passou; var c = -2 * (Ball.velX * dx + Ball.velY * dy) / (dx * dx + dy * dy); Ball.velX = Ball.velX + c * dx; Ball.velY = Ball.velY + c * dy; } else { //Mais da metade da bola está pra baixo da rede. Ball.inverteRedeX(); } }
96 js/ball.js Ball.inverteRedeX = function() { Ball.velX *= -1; if (Ball.x < Net.x) { Ball.x = Net.x - Ball.raio; } else { Ball.x = Net.x + Ball.raio; } }; Testar!
97 js/ball.js Ball.colide = function() {... //Colide com jogador for (var i = 0; i < Player.todos.length; i++) { Player.todos[i].colideBola(); }
98 js/player.js (1/2) this.colidebola = function() { var cx = this.x; var cy = this.y - (this.altura / 2) + this.cabecay; var dx = Ball.x - cx; var dy = Ball.y - cy; var dc = Math.sqrt(dx * dx + dy * dy); if (dc <= this.cabecar + Ball.raio){ //CÓDIGO NO PRÓXIMO SLIDE } };
99 js/player.js (2/2) //DENTRO DO IF DO SLIDE ANTERIOR var ang = Math.atan2(dy, dx); var passou = ((Ball.raio + this.cabecar) - dc)+1; Ball.x += Math.cos(ang) * passou; Ball.y += Math.sin(ang) * passou; var c = -2 * (Ball.velX * dx + Ball.velY * dy) / (dx * dx + dy * dy); Ball.velX = Ball.velX + c * dx; Ball.velY = Ball.velY + c * dy; if (Ball.y <= cy && this.forcapulo < 0) { Ball.velY *= 1.5; Ball.velY = -Math.abs(Ball.velY); Ball.velY = Math.min(Ball.velY, this.forcapulo); } Testar!
100 js/ball.js Ball.colide = function() { //Colide com o chão if (Ball.y + Ball.raio > Soccer.jogo.chaoY) { /*Ball.y = Soccer.jogo.chaoY - Ball.raio; Ball.velY *= -1;*/ Soccer.jogo.gameOver(); }
101 js/soccer.js this.gameover = function() { this.pausar(); document.getelementbyid("btnpausar").disabled = true; console.log("game Over!"); }; Testar!
102 Futebol de Cabeça ESTÍMULOS SONOROS
103 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:.mp_ e.ogg
104 <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
105 index.html... <audio controls id="sndwall"> <source src="snd/wall.mp_" type="audio/mpeg"> <source src="snd/wall.ogg" type="audio/ogg"> </audio> <audio controls id="sndhead"> <source src="snd/head.mp_" type="audio/mpeg"> <source src="snd/head.ogg" type="audio/ogg"> </audio> <audio controls id="sndwhistle"> <source src="snd/whistle.mp_" type="audio/mpeg"> <source src="snd/whistle.ogg" type="audio/ogg"> </audio> <script...></script>
106 js/ball.js //Incluir no fim do arquivo (estático) Ball.sndWall = document.getelementbyid("sndwall");
107 js/ball.js Ball.colide = function() {... //Colide com a parede direita if (Ball.x + Ball.raio >= Soccer.jogo.canvas.width) { Ball.x = Soccer.jogo.canvas.width - Ball.raio; Ball.velX *= -1; Ball.sndWall.cloneNode(true).play(); } //Colide com a parede esquerda if (Ball.x - Ball.raio < 0) { Ball.x = Ball.raio; Ball.velX *= -1; Ball.sndWall.cloneNode(true).play(); }... }; //Fim do método Testar!
108 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 e opções de continuar e fim de jogo; 5. Crie uma indicações visuais dentro do Canvas do placar e fim de jogo; 6. Adicione e customize os sons de eventos diferentes no jogo; 7. Adicione teclas de atalho para Pausa e para Novo Jogo ; 8. Corrija o bug: ao utilizar as setas para movimentar o segundo jogar, quando há barra de rolagem na janela, a barra se movimenta; 9. Ao evoluir no jogo, crie novos desafios para o jogador; Adicione outros elementos a seu critério: Exemplos: objetos que aparecem repentinamente, tempo de jogo, chutar a bola, em certos momentos a bola ter comportamento diferente, etc. 10. Entregue os arquivos por ao Professor junto com uma descrição/resposta para cada item do trabalho.
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 Flappy Bird
Construindo um Jogo para a Web Flappy Bird 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 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 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
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
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
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
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
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
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
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
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
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
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
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript EmpregoWeb-Registo de pessoas Elabore um sítio Web de nome EmpregoWeb, recorrendo à linguagem HTML utilizando folhas de estilos (CCS) que registe
<link rel="stylesheet" type="text/css" href="imagens.css" />
Este código é responsável pela visualização html. exibição de Imagens
<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
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
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
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
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
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
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
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
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
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
Computação II (MAB 225)
Computação II (MAB 225) Fabio Mascarenhas - 2015.1 http://www.dcc.ufrj.br/~fabiom/pythonoo Orientação a Objetos Orientação a objetos é um paradigma de programação no qual estruturamos um programa como
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
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
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
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
LISTA DE ATIVIDADES Semestre Letivo 2018/1
Computação Gráfica Lista de Atividades (atualizada em 09 mai. 2018) glaucius@pelotas.ifsul.edu.br LISTA DE ATIVIDADES Semestre Letivo 2018/1 ATIVIDADE-9 (TRABALHO FINAL) Elaborar um jogo bidimensional,
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
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
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
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
Agenda. Vantagens e desvantagens. Tipos de arquivos. Dicas
Agenda Vantagens e desvantagens Tipos de arquivos Dicas 3 Vantagens e desvantagens Vantagens Flexibilidade de desenvolvimento por seu uma linguagem aberta e gratuita Ferramentas de baixo custo para produção
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
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
Laboratório de Sistemas e Serviços Web
Ministério da Ciência, Tecnologia e Ensino Superior U.C. 21182 Laboratório de Sistemas e Serviços Web Época Normal, 2017/2018 INSTRUÇÕES PARA A RESOLUÇÃO DO EXAME, ACONSELHA-SE QUE LEIA ATENTAMENTE O SEGUINTE:
Programação WEB I DOM (Document Object Manager)
Programação WEB I DOM (Document Object Manager) DOM Significa Modelo de Objetos de Documentos e tem por finalidade descrever e padronizar os objetos e seus relacionamentos em uma aplicação. Tem a finalidade
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
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 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
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
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
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
Introdução à Programação C
Introdução à Programação C Fabio Mascarenhas - 2014.2 http://www.dcc.ufrj.br/~fabiom/introc Estado A interação com o usuário de nossas aplicações iniciais é bem linear: entrada com scanf, saída com puts
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
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)
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
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,
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
Programação Gráfica Parte 2 Versão em Java 2006 PUCPR Tutoria de Jogos 1º Ano
Programação Gráfica Parte 2 Versão em Java 2006 PUCPR Tutoria de Jogos 1º Ano Paulo V. W. Radtke pvwradtke@gmail.com http://www.ppgia.pucpr.br/~radtke/jogos/ AVISO IMPORTANTE!! Esta versão é dedicada exclusivamente
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
Núcleo de Computação Eletrônica Universidade Federal do Rio de Janeiro. Windows
Windows Conceitos Básicos As principais ações são: Clique Pressionar e soltar o botão esquerdo do mouse sem move-lo Clique com o botão direito Duplo clique Pressionar e soltar o botão esquerdo do mouse
Computação II Orientação a Objetos
Computação II Orientação a Objetos Fabio Mascarenhas - 2014.1 http://www.dcc.ufrj.br/~fabiom/java Editor Gráfico Vamos usar nosso framework do Motor, com pequenas mudanças (para permitir interação com
Roteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
Computação II Orientação a Objetos
Computação II Orientação a Objetos Fabio Mascarenhas - 2014.1 http://www.dcc.ufrj.br/~fabiom/java Editor Gráfico Vamos usar nosso framework do Motor, com pequenas mudanças (para permitir interação com
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY Prof. Dr. Daniel Caetano 2013-1 Objetivos Introduzir o framework jquery Capacitar para a construção de documentos jquery simples Compreender os mecanismos
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
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 5 : CSS OBJECTIVO: O objetivo desta ficha é familiarizar-se com as folhas de estilos encadeados (Cascade Style Sheets CSS). RECOMENDAÇÕES: Sempre que necessário, procure informação adicional
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,
ÍNDICE. PowerPoint CAPÍTULO 1... CAPÍTULO 2... CAPÍTULO 3...
ÍNDICE CAPÍTULO 1... Iniciando o PowerPoint 2016...08 Conhecendo a tela...09 Exibir réguas e grades...14 Slide mestre...16 Iniciar uma apresentação em branco...17 Abrir uma apresentação existente...17
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
DreamweaverCC Plano de Aula - 24 Aulas (Aulas de 1 Hora).
6188 - DreamweaverCC Plano de Aula - 24 Aulas (Aulas de 1 Hora). Aula 1 Capítulo 1 - Noções Básicas 1.1. Novidades do Dreamweaver CC... 23 1.1.1. Aplicativo Creative Cloud... 24 1.2. Área de Trabalho...
Programação Gráfica Parte 3 Versão em Java 2006 PUCPR Tutoria de Jogos 1º Ano
Programação Gráfica Parte 3 Versão em Java 2006 PUCPR Tutoria de Jogos 1º Ano Paulo V. W. Radtke pvwradtke@gmail.com http://www.ppgia.pucpr.br/~radtke/jogos/ AVISO IMPORTANTE!! Esta versão é dedicada exclusivamente
Plano de Aula - DreamWeaver CC - cód Horas/Aula
Plano de Aula - DreamWeaver CC - cód. 6188 24 Horas/Aula Aula 1 Capítulo 1 - Noções Básicas Aula 2 1 - Noções Básicas Aula 3 Capítulo 2 - Site do DreamWeaver Aula 4 2 - Site do DreamWeaver 1.1. Novidades
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
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
jquery Curso de Tecnologia em Análise e Desenvolvimento de Sistemas Desenvolvimento de Sistemas web
jquery Curso de Tecnologia em Análise e Desenvolvimento de Sistemas Desenvolvimento de Sistemas web Introdução jquery é uma biblioteca JavaScript que tem como objetivo principal facilitar a programação
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
JavaScript (Elementos de Programação e Programação Básica)
Linguagem de Programação para Web JavaScript (Elementos de Programação e Programação Básica) Prof. Mauro Lopes 1 Objetivos Iniciaremos aqui o nosso estudo sobre a Linguagem de Programação JavaScript. Apresentaremos
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JAVASCRIPT
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JAVASCRIPT Prof. Dr. Daniel Caetano 2011-2 Visão Geral 1 2 3 4 5 6 7 8 JavaScript: Ling. Interpretada Client Side x Server Side Integrando o JavaScript Eventos
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
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
Programação Web - HTML
Instituto Federal de Minas Gerais Campus Ponte Nova Programação Web - HTML Professor: Saulo Henrique Cabral Silva HTML Início em 1980, Tim Bernes-Lee Implementado Pascal. 1989, o CERN investiu esforços
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
OmniPC 4.2 Guia do usuário
OmniPC 4.2 Guia do usuário Utilização prevista O OmniPC é um software destinado aos produtos OmniScan usados em ensaios não destrutivos de materiais comerciais e industriais. Não use o OmniPC para fins
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.
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
[Versão JavaScript 1.0] Criado por: Luciano Alves da Silva Guia de Referência [Maio 2018]
![[Versão JavaScript 1.0] Criado por: Luciano Alves da Silva Guia de Referência [Maio 2018]](/thumbs/83/88467247.jpg "[Versão JavaScript 1.0] Criado por: Luciano Alves da Silva Guia de Referência [Maio 2018]")
www.gameutil2d.org [Versão JavaScript 1.0] Criado por: Luciano Alves da Silva Guia de Referência [Maio 2018] Introdução: Sobre o Framework GameUtil2D O framework GameUtil2D é um conjunto de classes e métodos
Coleção - Análises de marketing em clientes de
Coleção - Análises de email marketing em clientes de email Introdução Nesta primeira edição da Coletânea de Análises de Email Marketing em Clientes de email, vamos estudar as peculiaridades dos webmails
OFICINA DA PESQUISA PROGRAMAÇÃO APLICADA À CIÊNCIA DA COMPUTAÇÃO
OFICINA DA PESQUISA PROGRAMAÇÃO APLICADA À CIÊNCIA DA COMPUTAÇÃO Prof. Msc. Carlos José Giudice dos Santos carlos@oficinadapesquisa.com.br www.oficinadapesquisa.com.br Linguagens de Programação Material
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
PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS
VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...
Aplicação de Tags em Objetos de Sistemas de Visualização em Tempo Real
Fundamentos de Computação Gráfica Aplicação de Tags em Objetos de Sistemas de Visualização em Tempo Real Renato Deris Prado Tópicos principais 1. Introdução e Objetivos Sistemas de visualização em tempo
SCC0504 Programação Orientada a Objetos Projeto
SCC0504 Programação Orientada a Objetos Projeto Luiz Eduardo Virgilio da Silva ICMC, USP Proposta Consulte no Moodle o texto contendo a descrição detalhada do projeto Eventuais correções serão feita apenas
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
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
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,