Construindo um Jogo para a Web Pinball
|
|
|
- Sabrina de Lacerda Coradelli
- 6 Há anos
- Visualizações:
Transcrição
1 Construindo um Jogo para a Web Pinball 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 Pinball: Enredo Originalmente era um jogo eletromecânico ; O nome das palhetas flíper batizou os fliperamas; Tem uma bola de ferro que deve ser rebatida e percorrer obstáculos; As primeiras eram apenas mecânicas. Com o tempo, foram ganhando recursos eletrônicos; Máquina de 1750:
9 Pinball: Enredo Com o advento dos videogames surgiram várias versões 100% eletrônicas de pinballs; Objetivo: fazer pontos e não deixar a bolinha cair;
10 Nosso Conceito
11 Pinball LISTA DE RECURSOS INICIAIS
12 Recursos Iniciais Pasta: Pinball : 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, funcoes.js, Mapa.js, Palheta.js e Pinball.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/mapa.js js/ball.js js/funcoes.js js/palheta.js js/pinball.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=400 height=500 <button>pausar</button> onclick= Pinball.pausar(); id= btnpausar <button>novo Jogo</button> onclick= Pinball.novoJogo();
15 estilo.css (1/2) body { background-color: #2a2a2a; text-align: center; color: white; } Baixar da página e salvar no local correto! #tela { background-image: url(../img/cenario1.png); border-left: 5px solid #000000; border-right: 5px solid #000000; }
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 Pinball 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/pinball.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 Cenário
24 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
25 Dimensões Além de tudo, sempre poderemos processar e desenhar somente aquilo que está envolvido com a tela. tela.width tela.height
26 Pinball O OBJETO PINBALL
27 Objeto Pinball Nosso projeto será, em maior parte, Orientado a Objetos; O objeto central será chamado de Pinball e terá por responsabilidade gerenciar todos os demais objetos; O objeto Pinball também será responsável por obter as referências dos objetos DOM, tal como o Canvas.
28 js/pinball.js //Parte dinâmica function Pinball() { this.canvas = document.getelementbyid("tela"); this.ctx = this.canvas.getcontext("2d"); this.tempo = null; this.iniciado = false; document.getelementbyid('btnpausar').disabled = true; Pinball.jogo = this; } //Parte estática Pinball.jogo = null;
29 js/pinball.js //Parte estática Pinball.novoJogo = function() { if (Pinball.jogo!= null) { if (Pinball.jogo.tempo!= null) { Pinball.jogo.pausar(); } } new Pinball(); }; Pinball.jogo = null; Pinball.novoJogo();
30 Pinball A BOLA
31 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.
32 js/ball.js function Ball() { Baixar da página e salvar no local } correto! //Imagem da bola Ball.img = new Image(); Ball.img.src = "img/ball.png"; //Posição atual da bola Ball.x = 0; Ball.y = 0; //Posição anterior da bola Ball.lastX = Ball.x; Ball.lastY = Ball.y; //Perímetro e passang: serão utilizados para detectar batidas da bola Ball.perimetro = Math.floor(2 * Math.PI * Ball.raio) * 2; Ball.passoAng = (Math.PI * 2) / (Ball.perimetro / 1); //Raio da bola Ball.raio = 7;
33 js/ball.js //Força do movimento da bola nos eixos x e y Ball.fx = 0; Ball.fy = 0; //Força da gravidade sobre a bola Ball.grav = 0.05; //Velocidade máxima da bola Ball.velMax = Ball.raio; //Número de sprites diferentes existentes no Mapa Ball.nSprites = 3; //Indica se a bola esta liberada ou foi capturada por objetos // 0: ainda não capturada // 1: já capturada // 2: em fase de fuga Ball.liberada = 0;
34 js/ball.js Ball.posicaoInicial = function() { Ball.x = 388; Ball.y = 68; Ball.lastX = Ball.x; Ball.lastY = Ball.y; Ball.fx = 0; Ball.fy = 0; }; Ball.desenhar = function(ctx) { ctx.drawimage(ball.img, Ball.x - Ball.raio, Ball.y - Ball.raio, Ball.raio * 2, Ball.raio * 2); };
35 js/pinball.js //Parte dinâmica function Pinball() {... Pinball.jogo = this; Ball.posicaoInicial(); this.desenhartudo(); settimeout(pinball.desenhartudo, 1000); } //Parte estática Pinball.desenharTudo = function () { Pinball.jogo.desenharTudo(); };
36 js/pinball.js //Parte dinâmica this.desenhartudo = function() { this.ctx.clearrect(0,0, this.canvas.width, this.canvas.height); Ball.desenhar(this.ctx); }; this.desenhartudo(); Este código deve ser inserido depois de: Ball.posicaoInicial(); E antes de: this.desenhartudo(); settimeout(pinball.desenhartudo, 1000); Testar!
37 Pinball CONTROLE GLOBAL DO MOVIMENTO
38 Movendo com Tempo Todo tipo de movimento tem uma velocidade; Como determinamos a velocidade de algum objeto? Medida Espacial / Tempo! KM/h m/s...
39 js/ball.js //Parte estática Ball.atualizar = function() { Ball.y += Ball.fy; Ball.x += Ball.fx; Ball.lastX = Ball.x; Ball.lastY = Ball.y; Ball.fy = Math.max(-Ball.velMax, Ball.fy + Ball.grav); Ball.fx *= 0.997; };
40 Console //Testar no console: function movebola() { Ball.atualizar(); Ball.desenhar(Pinball.jogo.ctx); }; //Define valores para Ball.fx e Ball.fy movebola();
41 Controlando o Tempo Como já definimos, a unidade de espaço de cada movimento 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.
42 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;
43 Console //Testar no console: function movebola() { Ball.atualizar(); Ball.desenhar(Pinball.jogo.ctx); }; //Define valores para Ball.fx e Ball.fy var tempo = setinterval(movebola, 100); clearinterval(tempo);
44 Pinball INTERAGINDO COM O USUÁRIO
45 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.
46 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;
47 js/pinball.js //Parte estática Pinball.atualizar = function() { Pinball.jogo.atualizar(); }; document.onkeydown = function(evt) { }; Pinball.jogo.processarTeclas(evt); Pinball.pausar = function() { }; Pinball.jogo.pausar();
48 js/pinball.js //Parte dinâmica this.atualizar = function() { Ball.atualizar(); this.desenhartudo(); }; this.processarteclas = function(evt) { }; console.log(evt.keycode); Testar e descobrir os códigos de teclas para os números de 1 até 9 e as letras Z e X
49 js/pinball.js //Parte dinâmica this.processarteclas = function(evt) { if (Ball.x > 370 && evt.keycode >= 49 && evt.keycode <= 57) { var intensidade = evt.keycode - 48; Ball.fy = -(Ball.raio * intensidade / 9); this.iniciado = true; document.getelementbyid('btnpausar').disabled = false; if (this.tempo == null) { this.pausar(); } } }; Reescrever a função
50 js/pinball.js //Parte dinâmica this.pausar = function() { if (this.tempo == null && this.iniciado) { this.tempo = setinterval(pinball.atualizar, 20); } else if (this.tempo!= null) { clearinterval(this.tempo); this.tempo = null; } }; Testar!
51 Pinball O MAPA
52 Matriz Mapa Na matriz mapa nós representaremos cada coordenada do cenário, para fins de detectar onde a bola pode passar e onde ela colidirá; É importante ressaltar que apesar do Mapa ser gerado a partir de uma imagem, outra imagem completamente diferente poderá ser utilizada para exibição em tela; Baixem, descompactem e abram no NetBeans o arquivo PinballMapGenerator.zip
53 Matriz Mapa Atenção, sejam cuidadosos com os passos abaixo: 1. Execute o projeto; 2. Abra o arquivo cenario1.png da pasta img; 3. Salve o arquivo resultante sobrescrevendo o arquivo Mapa.js; 4. Abra o arquivo Mapa.js no brackets;
54 js/mapa.js var mapa = [ [1,1,1,1,1,1,1,1,... [1,1,1,1,1,1,1,1, O mapa é representado por linhas e colunas no estilo matriz: 0 = Passagem livre 1 = Parede sólida 2 = Objeto de repulsão 3 = Buraco negro
55 Pinball COLOCANDO VIDA
56 O que precisamos? O que acontece se a bola colidir com a parede? O que acontece se a bola colidir com um objeto repulsor? O que acontece se a bola cair pra fora do canvas? Onde estão os atuadores? E se a bola bater neles? Parados? Se movendo? Teclas de atalhos para eles?
57 js/ball.js (1/4) Ball.colide = function() { if (Ball.y + Ball.raio < Pinball.jogo.canvas.height) { var colidiu = 0; var menorx = Infinity, maiorx = -Infinity; var menory = Infinity, maiory = -Infinity; var sprites = new Array(Ball.nSprites); for (var sa = 0; sa < Ball.nSprites; sa++){ sprites[sa] = 0; } for (var r = 1; r <= Ball.raio + 1; r += 2) { for (var ang = 0; ang < Math.PI * 2; ang += Ball.passoAng) { var x = Math.round(Ball.x + (r * Math.cos(ang))); var y = Math.round(Ball.y + (r * Math.sin(ang))); patual = mapa[y][x];
58 if (patual!= 0) { sprites[patual-1]++; if (x < menorx) { menorx = x; } if (x > maiorx) { maiorx = x; } if (y < menory) { menory = y; } if (y > maiory) { maiory = y; } colidiu++; } //if (patual!= 0) } //for ang } //for raio js/ball.js (2/4)
59 if (colidiu > 0) { js/ball.js (3/4) //Descobre o tipo de colisão predominante var mqtd = 0, mspr = 1; for (var sa = 0; sa < Ball.nSprites; sa++){ if (sprites[sa] >= mqtd) { mqtd = sprites[sa]; mspr = sa + 1; } } //Velocidade atual da bola var velatual = Math.hypot(Ball.fx, Ball.fy); //Perde velocidade ao bater velatual *= 0.9; //Direção pra onde a parede vai refletir a bola var difx = Ball.x - (maiorx + menorx) / 2; var dify = Ball.y - (maiory + menory) / 2;
60 js/ball.js (4/4) //Angulo pra onde a parede vai refletir a bola angponto = Math.atan2(difY, difx); //Qual será o angulo que a bola irá refletir? var angnovo = Math.atan2(Ball.fy, Ball.fx);//Angulo atual. if (mspr == 1) { } //O Angulo, de fato, será um meio termo entre a direção //atual da bola e o sentido de que a parede reflete var nfx = (velatual * Math.cos(angPonto) + Ball.fx) / 2; var nfy = (velatual * Math.sin(angPonto) + Ball.fy) / 2; //Angulo do sentido intermediário angnovo = Math.atan2(nFy, nfx); //Novas forças para a bola Ball.fx = velatual * Math.cos(angNovo); Ball.fy = velatual * Math.sin(angNovo); } //Fim do if (colidiu > 0) } //Fim do if (Ball.y + Ball.raio }; //Fim do método
61 js/ball.js //Atualizar e testar!!! Ball.atualizar = function() { Ball.y += Ball.fy; Ball.x += Ball.fx; Ball.lastX = Ball.x; Ball.lastY = Ball.y; Ball.fy = Math.max(-Ball.velMax, Ball.fy + Ball.grav); Ball.fx *= 0.997; Ball.colide(); };
62 Pinball DETECTANDO GAME OVER
63 js/ball.js //Adicionar no final do método colide()!!! Ball.colide = function() { if (Ball.y >= Pinball.jogo.canvas.height + Ball.raio) { Pinball.jogo.gameOver(); } };
64 js/pinball.js //Parte dinâmica this.gameover = function() { this.pausar(); document.getelementbyid("btnpausar").disabled = true; console.log("game Over!"); }; Testar!
65 Pinball OUTROS SPRITES
66 Outros Sprites Anteriormente, implementamos a colisão da bola contra as paredes brancas. Agora implementaremos a colisão da bola contra: 1. Objetos repulsores; 2. Buracos negros.
67 js/ball.js //Atualizar o método colide() Ball.colide = function() {... if (mspr == 1) {... } else if (mspr == 2) { //Usar apenas o angulo de reflexo angnovo = angponto; //Velocidade máxima velatual = Ball.raio; } };... Testar!
68 js/ball.js //Atualizar o método colide() Ball.colide = function() {... } else if (mspr == 2) {... } else if (mspr == 3 && Ball.liberada < 2) { angnovo = angponto + Math.PI; velatual = 0.1; if (angnovo > 2 * Math.PI) { angnovo -= Math.PI * 2; } if (Ball.liberada == 0) { Ball.liberada = 1; settimeout(ball.disparaaleatorio, 500); } }...
69 js/ball.js //Parte estática Ball.disparaAleatorio = function() { var ang = Math.random() * 2 * Math.PI; var vel = Math.random() * Ball.raio; Ball.fx = vel * Math.cos(ang); Ball.fy = vel * Math.sin(ang); Ball.liberada = 2; settimeout(ball.ativacaptura, 500); }; Ball.ativaCaptura = function () { }; Ball.liberada = 0; Testar!
70 Pinball OS FLIPPERS (ATUADOR/PALHETA)
71 As Palhetas Nosso jogo terá objetos Palheta que serão os batedores que o jogador poderá controlar. Tudo será implementado dentro do arquivo Palheta.js, exceto a instanciação dos objetos e chamadas para que elas sejam utilizadas. Nós iremos inserir inicialmente apenas 2 palhetas em nosso jogo, mas os alunos poderão adicionar outras em suas customizações: As palhetas terão as teclas de atalho: Z e X.
72 js/palheta.js //Palhetas tem posição X, Y, largura, altura e tecla de acionamento function Palheta(x, y, largura, altura, tecla) { } this.x = x; this.y = y; //movatual = 0: Parado. -1: Pra baixo. +1: Pra cima. this.movatual = 0; this.tecla = tecla; this.largura = largura; this.altura = altura; this.maxang = Math.PI / 5; //36 graus if (this.largura < 0) { } else { } this.ang = -this.maxang; this.ang = this.maxang; this.lastang = this.ang; Palheta.todas.push(this);
73 //Parte dinâmica this.desenhar = function(ctx) { var meio = this.altura / 2; ctx.fillstyle = "#0000FF"; ctx.strokestyle = "#00BB00"; ctx.linewidth = 1; ctx.beginpath(); js/palheta.js (1/2) var senang = Math.sin(this.ang); var cosang = Math.cos(this.ang); var x = meio * senang; var y = (-meio) * cosang; ctx.moveto(this.x + x, this.y + y); x = -(meio * senang); y = meio * cosang; ctx.lineto(this.x + x, this.y + y);
74 ... js/palheta.js (2/2) }; x = this.largura * cosang; y = this.largura * senang; ctx.lineto(this.x + x, this.y + y); ctx.fill(); ctx.stroke();
75 //Parte estática Palheta.todas = []; js/palheta.js Palheta.desenharTodas = function (ctx) { for(var i = 0; i < Palheta.todas.length; i++) { Palheta.todas[i].desenhar(ctx); } };
76 js/pinball.js //Alterar o método this.desenhartudo this.desenhartudo = function() { }; this.ctx.clearrect(0,0, this.canvas.width, this.canvas.height); Ball.desenhar(this.ctx); Palheta.desenharTodas(this.ctx); //Adicionar ao inicio no construtor do Pinball new Palheta(250, 410, -36, 10, 88);//Direita new Palheta(165, 410, 36, 10, 90);//Esquerda Testar!
77 Pinball MOVIMENTAÇÃO DA PALHETA
78 Movimentação da Palheta Como dito antes, a palheta deverá se mover apenas se a tecla respectiva estiver pressionada: Enquanto a tecla estiver pressionada, a palheta deve estar fazendo força para cima, até um limite; Quando a tecla for liberada, a palheta deve movimentar para baixo, até outro limite. Os movimentos da palheta só devem acontecer conforme a temporização do jogo, ou seja, não pode ocorrer em pausa.
79 //Parte dinâmica this.atuar = function() { this.movatual = -1; }; js/palheta.js this.liberar = function() { }; this.movatual = 1;
80 js/palheta.js //Parte estática Palheta.processarTeclas = function(keycode) { for(var i = 0; i < Palheta.todas.length; i++) { if (Palheta.todas[i].tecla == keycode) { Palheta.todas[i].atuar(); } } }; Palheta.liberarTecla = function(keycode) { for(var i = 0; i < Palheta.todas.length; i++) { if (Palheta.todas[i].tecla == keycode) { Palheta.todas[i].liberar(); } } };
81 js/palheta.js (1/2) //Parte dinâmica this.atualizar = function() { var passo = this.maxang / 5; this.lastang = this.ang; //Subindo if (this.movatual == -1) { //ponta para a esquerda if (this.largura < 0) { this.ang += passo; if (this.ang >= this.maxang) { this.ang = this.maxang; this.movatual = 0; } } else {//ponta para a direita this.ang -= passo; if (this.ang <= -this.maxang) { this.ang = -this.maxang; this.movatual = 0; }
82 js/palheta.js (2/2) //continuação... } //fim do else } else if (this.movatual == 1) { //ponta para a esquerda if (this.largura < 0) { this.ang -= passo; if (this.ang <= -this.maxang) { this.ang = -this.maxang; this.movatual = 0; } } else {//ponta para a direita this.ang += passo; if (this.ang >= this.maxang) { this.ang = this.maxang; this.movatual = 0; } } } };
83 //Parte estática this.atualizar = function() { Ball.atualizar(); Palheta.atualizarTodas(); this.desenhartudo(); }; js/pinball.js //Parte estática document.onkeydown = function(evt) { Pinball.jogo.processarTeclas(evt); }; document.onkeyup = function(evt) { }; Pinball.jogo.liberarTecla(evt);
84 js/palheta.js //Parte estática Palheta.atualizarTodas = function() { for (var i = 0; i < Palheta.todas.length; i++) { Palheta.todas[i].atualizar(); } };
85 //Parte dinâmica this.liberartecla = function(evt) { Palheta.liberarTecla(evt.keyCode); }; js/pinball.js
86 js/pinball.js //Parte dinâmica - atualizar this.processarteclas = function(evt) { if (Ball.x > 370 && evt.keycode >= 49 && evt.keycode <= 57) { var intensidade = evt.keycode - 48; Ball.fy = -(Ball.raio * intensidade / 9); this.iniciado = true; document.getelementbyid('btnpausar').disabled = false; if (this.tempo == null) { this.pausar(); } } else if (this.tempo!= null) { Palheta.processarTeclas(evt.keyCode); } }; Testar!
87 Alterações Restantes O que falta alterar? Quando colide a bola: Palhetas Sons?
88 //Parte dinâmica this.colidebola = function() { var meio = this.altura / 2; js/palheta.js (1/4) var Npassos = 10; for (var passo = 1; passo <= Npassos; passo++){ var angatual = (this.lastang * (Npassos - passo) + this.ang * passo) / Npassos; var bxatual = Ball.lastX + Ball.fx * (passo / Npassos); var byatual = Ball.lastY + Ball.fy * (passo / Npassos); var senang = Math.sin(angAtual); var cosang = Math.cos(angAtual); var x = meio * senang; var y = (-meio) * cosang; var A = [this.x + x, this.y + y];
89 js/palheta.js (2/4) //continuação... x = this.largura * cosang; y = this.largura * senang; var B = [this.x + x, this.y + y]; var dist = disttosegment([bxatual, byatual], A, B); if (dist <= Ball.raio) { var angbola = Math.atan2(Ball.fy, Ball.fx); var vel = Math.sqrt(dist2([Ball.fx, Ball.fy], [0,0])); var distponta = Math.sqrt(dist2([bxAtual, byatual], B)); var fator = (Math.abs(this.largura) - distponta) / Math.abs(this.largura);
90 js/palheta.js (3/4) //continuação... var angmeio; if (angatual < 0) { angmeio = angatual - (Math.PI / 2) - fator * (Math.PI / 4); } else { angmeio = angatual + (Math.PI / 2) + fator * (Math.PI / 4); } angbola = angmeio; Ball.x = bxatual + dist * Math.sin(angBola); Ball.y = byatual + dist * Math.cos(angBola);
91 js/palheta.js (4/4) //continuação... if (this.movatual < 0 && this.ang!= this.lastang) { var sobra = Ball.velMax - vel; }; vel = Ball.velMax; } else if (this.movatual > 0) { vel *= 0.6; } else { vel *= 0.6; } Ball.fx = vel * Math.sin(angBola); Ball.fy = vel * Math.cos(angBola); } //fim if (dist <= Ball.raio) } //fim for
92 js/funcoes.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)); }
93 js/palheta.js //Atualizar função já existente! Palheta.atualizarTodas = function() { }; for (var i = 0; i < Palheta.todas.length; i++) { } Palheta.todas[i].colideBola(); Palheta.todas[i].atualizar(); Palheta.todas[i].colideBola(); Testar!
94 Pinball ESTÍMULOS SONOROS
95 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
96 <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
97 index.html... <audio controls id="musica"> <source src="snd/musica.mp_" type="audio/mpeg"> <source src="snd/musica.ogg" type="audio/ogg"> </audio> <audio controls id="bateparede"> <source src="snd/bateparede.mp_" type="audio/mpeg"> <source src="snd/bateparede.ogg" type="audio/ogg"> </audio> <script...></script>
98 js/pinball.js function Pinball() { this.tempo = null; this.musica = document.getelementbyid('musica'); this.sndbateparede = document.getelementbyid('bateparede'); if (!this.musica.paused) { this.musica.pause(); } this.musica.position = 0;
99 js/pinball.js //atualizar... this.pausar = function() { if (this.tempo == null && this.iniciado) { this.tempo = setinterval(pinball.atualizar, 20); this.musica.play(); this.musica.volume = 1; } else if (this.tempo!= null) { clearinterval(this.tempo); this.tempo = null; this.musica.volume = 0.2; } }; Testar!
100 js/ball.js //atualizar... if (mspr == 1) { //O Angulo, de fato, será um meio termo entre a direção //atual da bola e o sentido de que a parede reflete var nfx = (velatual * Math.cos(angPonto) + Ball.fx) / 2; var nfy = (velatual * Math.sin(angPonto) + Ball.fy) / 2; //Angulo do sentido intermediário angnovo = Math.atan2(nFy, nfx); Pinball.jogo.sndBateParede.cloneNode(true).play(); } else if (mspr == 2) { Testar!
101 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 cenário para o seu jogo; 5. Crie um placar com pontuação, opções de continuar e fim de jogo; 6. Crie uma indicações visuais dentro do Canvas do placar e fim de jogo; 7. Adicione e customize os sons de eventos diferentes no jogo; 8. Adicione teclas de atalho para Pausa e para Novo Jogo ; 9. Identifique e corrija os bugs que você encontrar. 10. 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, relevos, em certos momentos a bola ter comportamento diferente, etc. 11. Entregue os arquivos por ao Professor junto com uma descrição/resposta para cada item do trabalho.
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 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
<link rel="stylesheet" type="text/css" href="imagens.css" />
Este código é responsável pela visualização html. exibição de Imagens
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 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
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
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
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
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.
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
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...
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
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
<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
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
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
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
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
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
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
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
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 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
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,
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
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
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...
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
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
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
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
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
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
[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
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
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
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
Técnico em Informática. Web JavaScript. Profª Ana Paula Mandelli
Técnico em Informática Web JavaScript Profª Ana Paula Mandelli anapaula_mandelli@hotmail.com Para o JavaScript - NetBeans O NetBeans é um ambiente de desenvolvimento integrado (IDE) Java desenvolvido pela
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
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
<title>introdução a HTML</title>
introdução a HTML programação para a Internet prof. Vilson Heck Junior O que é HTML Hypertext Markup Language: Linguagem de Marcação de Hipertexto; É uma coleção de TAGs
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
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,
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
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,
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
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 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,
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,
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
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
Jogo de sinuca virtual com Realidade Aumentada. Pedro Henrique Schmitt Orientador: Dalton Solano dos Reis
Jogo de sinuca virtual com Realidade Aumentada Pedro Henrique Schmitt Orientador: Dalton Solano dos Reis Roteiro Introdução Objetivos Fundamentação teórica Trabalhos correlatos Requisitos Especificação
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE MATO GROSSO CAMPUS AVANÇADO TANGARÁ DA SERRA
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE MATO GROSSO CAMPUS AVANÇADO TANGARÁ DA SERRA Curso: Técnico em Manutenção e Suporte em Informática Disciplina: Introdução à Computação Gráfica Docente:
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
Manual de utilização MAWI
Manual de utilização MAWI Nascido a partir de um PIBIC, MAWI é um projeto da criação de um motor 2D multiplataforma para o ambiente web, usando recursos do estado da arte introduzidos pelo HTML5, não só
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
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
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu. Math, Strings, Arrays e Date
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu JS Math, Strings, Arrays e Date Javascript possui uma biblioteca interna chamada Math
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
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
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,
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
Unidade 9: Desenvolvendo um Game no App Inventor
Unidade 9: Desenvolvendo um Game no App Inventor Indice 1. Introdução...3 2. Começando........ 3 3. Configure os Componentes........3 4. Adicionar comportamento aos Componentes...5 5. Criando Variáveis...6
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:...
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
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
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:
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
JAVASCRIPT. Desenvolvimento Web I
JAVASCRIPT Desenvolvimento Web I JavaScript HTML Conteúdo - ( Markup language) CSS Apresentação (Style Sheet language) JavaScript (Programming language) Uso de JavaScript : Validação de formulários, galerias