Mostrando postagens com marcador Liceu. Mostrar todas as postagens
Mostrando postagens com marcador Liceu. Mostrar todas as postagens

sexta-feira, 11 de outubro de 2019

TRABALHO 4 BIMESTRE - ENSINO MÉDIO LICEU

SEGUE O MATERIAL DA AULA PARA O TRABALHO DO 4º BIMESTRE DE INFORMÁTICA.

MANUAL:Material da Aula
ARQUIVO:Trabalho ABNT

ENVIAR POR E-MAIL PARA: rodliceu@gmail.com
Escrito por às Nenhum comentário:
Seção:

sexta-feira, 13 de setembro de 2019

Teste Inimigo - java Script

teste-inimigo-fundo.html

<!DOCTYPE html>
<html>
<head>
   <title>Nave, inimigos e fundo</title>
   <script src="animacao.js"></script>
   <script src="teclado.js"></script>
   <script src="nave.js"></script>
   <script src="tiro.js"></script>
   <script src="colisor.js"></script>
   <script src="ovni.js"></script>
   <script src="fundo.js"></script>
</head>
<body>
   <canvas id="canvas_inimigos" width="500" height="500"></canvas>
   <script>
      // Imagens
      var imgEspaco = new Image();
      imgEspaco.src = 'img/fundo-espaco.png';
      imgEspaco.onload = carregando;

      var imgEstrelas = new Image();
      imgEstrelas.src = 'img/fundo-estrelas.png';
      imgEstrelas.onload = carregando;

      var imgNuvens = new Image();
      imgNuvens.src = 'img/fundo-nuvens.png';
      imgNuvens.onload = carregando;
     
      var imgNave = new Image();
      imgNave.src = 'img/nave.png';
      imgNave.onload = carregando;
     
      var imgOvni = new Image();
      imgOvni.src = 'img/ovni.png';
      imgOvni.onload = carregando;

      // Inicialização dos objetos
      // Primeiro os objetos do game engine
      var canvas = document.getElementById('canvas_inimigos');
      var context = canvas.getContext('2d');
     
      var teclado = new Teclado(document);
      var animacao = new Animacao(context);
     
      // Em seguida as imagens de fundo
      var fundo1 = new Fundo(context, imgEspaco);
      fundo1.velocidade = 3;
      animacao.novoSprite(fundo1);
     
      var fundo2 = new Fundo(context, imgEstrelas);
      fundo2.velocidade = 3;
      animacao.novoSprite(fundo2);
     
      var fundo3 = new Fundo(context, imgNuvens);
      fundo3.velocidade = 10;
      animacao.novoSprite(fundo3);
     
      // Depois do fundo, a nave e outros sprites
      var nave = new Nave(context, teclado, imgNave);
      animacao.novoSprite(nave);
     
      var colisor = new Colisor();
      colisor.novoSprite(nave);
     
      teclado.disparou(ESPACO, function() {
         nave.atirar();
      });
     
      // Carregamento e inicialização
      var carregadas = 0;
      var total = 5;
     
      function carregando() {
         carregadas++;
         if (carregadas == total) iniciar();
      }     
      function iniciar() {
         nave.x = canvas.width / 2 - imgNave.width / 2;
         nave.y = canvas.height - imgNave.height;
         nave.velocidade = 5;
         animacao.ligar();
       
         setInterval(novoOvni, 1000);
      }     
      // Criação dos inimigos
      function novoOvni() {
         var ovni = new Ovni(context, imgOvni);
         // Mínimo: 5; máximo: 20
         ovni.velocidade =
            Math.floor( 5 + Math.random() * (20 - 5 + 1) );       
       
         // Mínimo: 0; máximo: largura do canvas - largura do ovni 
         ovni.x =
            Math.floor(Math.random() *
                       (canvas.width - imgOvni.width + 1) );                 
         // Descontar a altura
         ovni.y = -imgOvni.height;       
         animacao.novoSprite(ovni);
         colisor.novoSprite(ovni);
      }
   </script>
</body>

</html>


-------------------------------------------------------------------------------------------------
fundo.js

function Fundo(context, imagem) {
   this.context = context;
   this.imagem = imagem;
   this.velocidade = 0;
   this.posicaoEmenda = 0;
}
Fundo.prototype = {
   atualizar: function() {
      // Atualizar a posição de emenda
      this.posicaoEmenda += this.velocidade;
     
      // Emenda passou da posição
      if (this.posicaoEmenda > this.imagem.height)
         this.posicaoEmenda = 0;
   },
   desenhar: function() {
      var img = this.imagem;  // Para facilitar a escrita :D
     
      // Primeira cópia
      var posicaoY = this.posicaoEmenda - img.height;
      this.context.drawImage(img, 0, posicaoY, img.width, img.height);
     
      // Segunda cópia
      posicaoY = this.posicaoEmenda;
      this.context.drawImage(img, 0, posicaoY, img.width, img.height);   
   }
}

Escrito por às Nenhum comentário:
Seção:

sexta-feira, 6 de setembro de 2019

deslocamento inimigo

Segue o código do deslocamento inimigo

deslocamento_inimigo.html

<!DOCTYPE html>
<html>
<head>
   <title>Inimigos</title>
   <script src="animacao.js"></script>
   <script src="teclado.js"></script>
   <script src="nave.js"></script>
   <script src="tiro.js"></script>
   <script src="colisor.js"></script>
   <script src="ovni.js"></script>
</head>
<body>
   <canvas id="canvas_inimigos" width="500" height="500"></canvas>
   <script>
      // Imagens
      var imgNave = new Image();
      imgNave.src = 'img/nave.png';
      imgNave.onload = carregando;
     
      var imgOvni = new Image();
      imgOvni.src = 'img/ovni.png';
      imgOvni.onload = carregando;

      // Inicialização dos objetos
      var canvas = document.getElementById('canvas_inimigos');
      var context = canvas.getContext('2d');
     
      var teclado = new Teclado(document);
      var animacao = new Animacao(context);
     
      var nave = new Nave(context, teclado, imgNave);
      animacao.novoSprite(nave);
     
      var colisor = new Colisor();
      colisor.novoSprite(nave);
     
      teclado.disparou(ESPACO, function() {
         nave.atirar();
      });
     
      // Carregamento e inicialização
      var carregadas = 0;
     
      function carregando() {
         carregadas++;
         if (carregadas == 2) iniciar();
      }
     
      function iniciar() {
         nave.x = canvas.width / 2 - imgNave.width / 2;
         nave.y = canvas.height - imgNave.height;
         nave.velocidade = 10;
         animacao.ligar();
       
         setInterval(novoOvni, 1000);
      }
     
      // Criação dos inimigos
      function novoOvni() {
         var ovni = new Ovni(context, imgOvni);
         // Mínimo: 5; máximo: 20
         ovni.velocidade =
            Math.floor( 5 + Math.random() * (20 - 5 + 1) );       
       
         // Mínimo: 0; máximo: largura do canvas - largura do ovni 
         ovni.x =
            Math.floor(Math.random() *
                       (canvas.width - imgOvni.width + 1) );                 
         // Descontar a altura
         ovni.y = -imgOvni.height;       
         animacao.novoSprite(ovni);
         colisor.novoSprite(ovni);
      }
   </script>
</body>
</html>
----------------------------------------------------------------------------------------------
Ovni.js

function Ovni(context, imagem) {
   this.context = context;
   this.imagem = imagem;
   this.x = 0;
   this.y = 0;
   this.velocidade = 0;
}
Ovni.prototype = {
   atualizar: function() {
      this.y += this.velocidade;
   
      if (this.y > this.context.canvas.height) {
         this.animacao.excluirSprite(this);
         this.colisor.excluirSprite(this);
      }
   },
   desenhar: function() {
      var ctx = this.context;
      var img = this.imagem;
      ctx.drawImage(img, this.x, this.y, img.width, img.height);
   },
   retangulosColisao: function() {
      // Estes valores vão sendo ajustados aos poucos
      var rets =
      [
         {x: this.x+20, y: this.y+1, largura: 25, altura: 10},
         {x: this.x+2, y: this.y+11, largura: 60, altura: 12},
         {x: this.x+20, y: this.y+23, largura: 25, altura: 7},
      ];   
      // Desenhando os retângulos para visualização
      /*
      var ctx = this.context;
   
      for (var i in rets) {
         ctx.save();
         ctx.strokeStyle = 'yellow';
         ctx.strokeRect(rets[i].x, rets[i].y, rets[i].largura,
                        rets[i].altura);
         ctx.restore();
      }
      */
       return rets;
   },
   colidiuCom: function(outro) {
      // Se colidiu com um Tiro, os dois desaparecem
      if (outro instanceof Tiro) {
         this.animacao.excluirSprite(this);
         this.colisor.excluirSprite(this);
         this.animacao.excluirSprite(outro);
         this.colisor.excluirSprite(outro);
      }
   }
}
Escrito por às Nenhum comentário:
Seção:

sexta-feira, 16 de agosto de 2019

aula 12 - animação controlada Nave

Segue os códigos da Aula
animacao.js
teclado.js
---------------------------------------------------------------------------------
nave.js

function Nave(context, teclado, imagem) {
   this.context = context;
   this.teclado = teclado;
   this.imagem = imagem;
   this.x = 0;
   this.y = 0;
   this.velocidade = 0;
}
Nave.prototype = {
   atualizar: function() {
      if (this.teclado.pressionada(SETA_ESQUERDA) && this.x > 0)
         this.x -= this.velocidade;
       
      if (this.teclado.pressionada(SETA_DIREITA) &&
               this.x < this.context.canvas.width
   - this.imagem.width)
         this.x += this.velocidade;
       
      if (this.teclado.pressionada(SETA_ACIMA) && this.y > 0)
         this.y -= this.velocidade;
       
      if (this.teclado.pressionada(SETA_ABAIXO) &&
               this.y < this.context.canvas.height
   - this.imagem.height)
         this.y += this.velocidade;
   },
   desenhar: function() {
      this.context.drawImage(this.imagem, this.x, this.y,
            this.imagem.width, this.imagem.height);
   }
 }
---------------------------------------------------------------------------------------------------------

teste-nave.html
<!DOCTYPE html>
<html>

<head>
   <title>Nave Espacial Controlável</title>
   <script src="animacao.js"></script>
   <script src="teclado.js"></script>
   <script src="nave.js"></script>
</head>
<body>
   <canvas id="canvas_nave" width="500" height="500"></canvas>
   <script>
      // Canvas e contexto
      var canvas = document.getElementById('canvas_nave');
      var context = canvas.getContext('2d');
     
      // Teclado e animação (game engine)
      var teclado = new Teclado(document);
      var animacao = new Animacao(context);
     
      // Sprite da nave e sua imagem
      var imgNave = new Image();
      imgNave.src = 'img/nave.png';
  imgNave.width=50; // alterar a largura da imagem
  imgNave.height=50;  //alterar a altura da imagem     
      var nave = new Nave(context, teclado, imgNave);
      animacao.novoSprite(nave);     
      // Quando carregar a imagem, iniciar a animação
      imgNave.onload = function() {
         // Centralizada na horizontal, alinhada embaixo na vertical
         nave.x = canvas.width / 2 - imgNave.width / 2;
         nave.y = canvas.height - imgNave.height;
         nave.velocidade = 5;
         animacao.ligar();
      }
   </script>
</body>
</html>

Escrito por às Nenhum comentário:
Seção:

sexta-feira, 9 de agosto de 2019

Aula 11 - Fundo com animação

fundo.js

function Fundo(context, imagem) {
   this.context = context;
   this.imagem = imagem;
   this.velocidade = 0;
   this.posicaoEmenda = 0;
}
Fundo.prototype = {
   atualizar: function() {
      // Atualizar a posição de emenda
      this.posicaoEmenda += this.velocidade;
     
      // Emenda passou da posição
      if (this.posicaoEmenda > this.imagem.height)
         this.posicaoEmenda = 0;
   },
   desenhar: function() {
      var img = this.imagem;  // Para facilitar a escrita :D
     
      // Primeira cópia
      var posicaoY = this.posicaoEmenda - img.height;
      this.context.drawImage(img, 0, posicaoY, img.width, img.height);
     
      // Segunda cópia
      posicaoY = this.posicaoEmenda;
      this.context.drawImage(img, 0, posicaoY, img.width, img.height);   
   }
}
------------------------------------------------------------------------------------------------------
teste-fundo.html
<!DOCTYPE html>
<html>
<head>
   <title>Fundos rolando em Parallax</title>
   <script src="animacao.js"></script>
   <script src="fundo.js"></script>
</head>

<body>
   <canvas id="canvas_fundo" width="500" height="500"></canvas>
   <script>
      var imgEspaco = new Image();
      imgEspaco.src = 'img/fundo-espaco.png';

      var imgEstrelas = new Image();
      imgEstrelas.src = 'img/fundo-estrelas.png';

      var imgNuvens = new Image();
      imgNuvens.src = 'img/fundo-nuvens.png';

      var carregadas = 0;
      var total = 3;
     
      imgEspaco.onload = carregando;
      imgEstrelas.onload = carregando;
      imgNuvens.onload = carregando;
     
      function carregando() {
         carregadas++;
         if (carregadas == total) iniciar();
      }

      function iniciar() {
         var canvas = document.getElementById('canvas_fundo');
         var context = canvas.getContext('2d');
       
         // Passo o context e a imagem para os objetos Fundo
         var fundoEspaco = new Fundo(context, imgEspaco);
         var fundoEstrelas = new Fundo(context, imgEstrelas);
         var fundoNuvens = new Fundo(context, imgNuvens);

         // Cada um a uma velocidade diferente
         fundoEspaco.velocidade = 3;
         fundoEstrelas.velocidade = 7;
         fundoNuvens.velocidade = 10;
       
         var animacao = new Animacao(context);
         animacao.novoSprite(fundoEspaco);
         animacao.novoSprite(fundoEstrelas);
         animacao.novoSprite(fundoNuvens);
         animacao.ligar();
      }
   </script>
</body>
 
</html>
--------------------------------------------------------------------------------------------
animacao.js

function Animacao(context) {
   this.context = context;
   this.sprites = [];
   this.ligado = false;
}
Animacao.prototype = {
   novoSprite: function(sprite) {
      this.sprites.push(sprite);
      sprite.animacao = this;
   },
   ligar: function() {
      this.ligado = true;
      this.proximoFrame();
   },
   desligar: function() {
      this.ligado = false;
   },
   proximoFrame: function() {
      // Posso continuar?
      if ( ! this.ligado ) return;

      // A cada ciclo, limpamos a tela ou desenhamos um fundo
      this.limparTela();

      // Atualizamos o estado dos sprites
      for (var i in this.sprites)
         this.sprites[i].atualizar();

      // Desenhamos os sprites
      for (var i in this.sprites)
         this.sprites[i].desenhar();

      // Chamamos o próximo ciclo
      var animacao = this;
      requestAnimationFrame(function() {
         animacao.proximoFrame();
      });
   },
   limparTela: function() {
      var ctx = this.context;
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   }
}

Escrito por às Nenhum comentário:
Seção:

sexta-feira, 28 de junho de 2019

Aula 10 - animação sonic com teclado

sonic.html

<!DOCTYPE html>
<html>
<head>
   <title>Personagem controlável e animado</title>
   <script src="spritesheet.js"></script>
   <script src="animacao.js"></script>
   <script src="teclado.js"></script>
   <script src="sonic.js"></script>
</head>

<body>
   <canvas id="canvas_sonic" width="500" height="500"></canvas>
   <script>
      var canvas = document.getElementById('canvas_sonic');
      var context = canvas.getContext('2d');

      var teclado = new Teclado(document);
      var animacao = new Animacao(context);

      var imgSonic = new Image();
      imgSonic.src = 'spritesheet.png';

      var sonic = new Sonic(context, teclado, imgSonic);
      sonic.x = 0;
      sonic.y = 200;
      animacao.novoSprite(sonic);

      imgSonic.onload = function() {
         animacao.ligar();
      }
   </script>
</body>
</html>
---------------------------------------------------------------------------------------------------

sonic.js

var SONIC_DIREITA = 1;
var SONIC_ESQUERDA = 2;

function Sonic(context, teclado, imagem) {
   this.context = context;
   this.teclado = teclado;
   this.x = 0;
   this.y = 0;
   this.velocidade = 10;
   // Criando a spritesheet a partir da imagem recebida
   this.sheet = new Spritesheet(context, imagem, 3, 8);
   this.sheet.intervalo = 60;
   // Estado inicial
   this.andando = false;
   this.direcao = SONIC_DIREITA;
}
Sonic.prototype = {
   atualizar: function() {
      if (this.teclado.pressionada(SETA_DIREITA)) {
         // Se já não estava neste estado...
         if (! this.andando || this.direcao != SONIC_DIREITA) {
            // Seleciono o quadro da spritesheet
            this.sheet.linha = 1;
            this.sheet.coluna = 0;
         }

         // Configuro o estado atual
         this.andando = true;
         this.direcao = SONIC_DIREITA;

         // Neste estado, a animação da spritesheet deve rodar
         this.sheet.proximoQuadro();

         // Desloco o Sonic
         this.x += this.velocidade;
      }

      else if (this.teclado.pressionada(SETA_ESQUERDA)) {
         if (! this.andando || this.direcao != SONIC_ESQUERDA) {
            this.sheet.linha = 2;  // Atenção, aqui será 2!
            this.sheet.coluna = 0;
         }
         this.andando = true;
         this.direcao = SONIC_ESQUERDA;
         this.sheet.proximoQuadro();
         this.x -= this.velocidade;  // E aqui é sinal de menos!
      }

      else {
         if (this.direcao == SONIC_DIREITA)
            this.sheet.coluna = 0;
         else if (this.direcao == SONIC_ESQUERDA)
            this.sheet.coluna = 1;

         this.sheet.linha = 0;
         // Não chamo proximoQuadro!
         this.andando = false;
      }
   },
   desenhar: function() {
      this.sheet.desenhar(this.x, this.y);       
   }
}
----------------------------------------------------------------------------------------------------------


Spritesheet.js

function Spritesheet(context, imagem, linhas, colunas) {
   this.context = context;
   this.imagem = imagem;
   this.numLinhas = linhas;
   this.numColunas = colunas;
   this.intervalo = 0;
   this.linha = 0;
   this.coluna = 0;
}
Spritesheet.prototype = {
   proximoQuadro: function() {
      var agora = new Date().getTime();

      // Se ainda não tem último tempo medido
      if (! this.ultimoTempo) this.ultimoTempo = agora;

      // Já é hora de mudar de coluna?
      if (agora - this.ultimoTempo < this.intervalo) return;

      if (this.coluna < this.numColunas - 1)
         this.coluna++;
      else
         this.coluna = 0;

      // Guardar hora da última mudança
      this.ultimoTempo = agora;
   },
   desenhar: function(x, y) {
      var largura = this.imagem.width / this.numColunas;
      var altura = this.imagem.height / this.numLinhas;

      this.context.drawImage(
         this.imagem,
         largura * this.coluna,
         altura * this.linha,
         largura,
         altura,
         x,
         y,
         largura,
         altura
      );
   }
}
----------------------------------------------------------------------------------------------------
animacao.js

function Animacao(context) {
   this.context = context;
   this.sprites = [];
   this.ligado = false;
}
Animacao.prototype = {
   novoSprite: function(sprite) {
      this.sprites.push(sprite);
   },
   ligar: function() {
      this.ligado = true;
      this.proximoFrame();
   },
   desligar: function() {
      this.ligado = false;
   },
   proximoFrame: function() {
      // Posso continuar?
      if ( ! this.ligado ) return;

      // A cada ciclo, limpamos a tela ou desenhamos um fundo
      this.limparTela();

      // Atualizamos o estado dos sprites
      for (var i in this.sprites)
         this.sprites[i].atualizar();

      // Desenhamos os sprites
      for (var i in this.sprites)
         this.sprites[i].desenhar();

      // Chamamos o próximo ciclo
      var animacao = this;
      requestAnimationFrame(function() {
         animacao.proximoFrame();
      });
   },
   limparTela: function() {
      var ctx = this.context;
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   }
}
---------------------------------------------------------------------------------------------

teclado.js

// Códigos de teclas - aqui vão todos os que forem necessários
var SETA_ESQUERDA = 37;
var SETA_DIREITA = 39;
var ESPACO = 32;

function Teclado(elemento) {
   this.elemento = elemento;

   // Array de teclas pressionadas
   this.pressionadas = [];

   // Array de teclas disparadas
   this.disparadas = [];

   // Funções de disparo registradas
   this.funcoesDisparo = [];

   var teclado = this;

   elemento.addEventListener('keydown', function(evento) {
      var tecla = evento.keyCode;  // Tornando mais legível ;)
      teclado.pressionadas[tecla] = true;

      // Disparar somente se for o primeiro keydown da tecla
      if (teclado.funcoesDisparo[tecla] && !teclado.disparadas[tecla]) {

          teclado.disparadas[tecla] = true;
          teclado.funcoesDisparo[tecla] () ;
      }
   });

   elemento.addEventListener('keyup', function(evento) {
      teclado.pressionadas[evento.keyCode] = false;
      teclado.disparadas[evento.keyCode] = false;
   });
}
Teclado.prototype = {
   pressionada: function(tecla) {
      return this.pressionadas[tecla];
   },
   disparou: function(tecla, callback) {
      this.funcoesDisparo[tecla] = callback;
   }
}


Escrito por às Nenhum comentário:
Seção:

sexta-feira, 31 de maio de 2019

Desafio aula 8

código aula 8

<!DOCTYPE html>
<html>
<head>
   <title>Movimentando personagem com keydown</title>
   <style type="text/css">
canvas {  border: 1px solid #000000; }
</style>
</head>
<body>
   <canvas id="canvas_teclado_1" width="500" height="300"></canvas>
   <script>
      // Referências do Canvas
    var canvas = document.getElementById('canvas_teclado_1');
    var context = canvas.getContext('2d');
      // Posição inicial do personagem
      var posicao = 0;
      desenharPersonagem();
      // Listener
      document.addEventListener('keydown', function(evento) {
         if (evento.keyCode == 37) {  // Seta para esquerda
            posicao -= 10;
            desenharPersonagem();
         }
         else if (evento.keyCode == 39) {  // Seta para direita
            posicao += 10;
            desenharPersonagem();
         }
      });
      // Um personagem não muito simpático, mas...
      function desenharPersonagem() {
      var imagem = new Image();
      imagem.src = 'img/img.jpeg';
      imagem.onload = function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(imagem, posicao, 100, 80, 80); 
         }
//context.clearRect(0, 0, canvas.width, canvas.height);
         //context.fillRect(posicao, 100, 20, 50);
      }
   </script>
</body>
</html>
Escrito por às Nenhum comentário:
Seção:

Aula 8 - animação pong

Segue a animação Pong.

<!DOCTYPE html>
<html>
    <head>
        <title>Seu Primeiro Jogo Pong - HTML5</title>
<meta name="author" content="rodrigo braga"></meta>
<style type="text/css">
canvas {
  border: 1px solid #000000;
}
</style>
    </head> 
    <body  onload="inicializar()">
<canvas id="canvas" width="600" height="480">
Navegador não suporta HTML5
</canvas>
<script type="text/javascript">
var barraAltura, barraLargura, jogadorPosicaoX,
velocidadeJogador, bolaDiametro, bolaPosX,
bolaPosY, velocidadeBola, pontosJogador, colisao;

function inicializar()
{
barraAltura = 15;
barraLargura = 90;
pontosJogador = 0;
jogadorPosicaoX = (canvas.width - barraLargura) / 2;
velocidadeJogador = 20;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

                bolaDiametro = 10;
                bolaPosX = canvas.width / 2;
                bolaPosY = -10;
velocidadeBola = 10;
colisao = false;

document.addEventListener('keydown', keyDown);
setInterval(gameLoop, 30);
}

function keyDown(e)
{
if(e.keyCode == 37)
{
if(jogadorPosicaoX > 0)
{
jogadorPosicaoX -= velocidadeJogador;
}
}
if(e.keyCode == 39)
{
if(jogadorPosicaoX < (canvas.width - barraLargura))
{
jogadorPosicaoX += velocidadeJogador;
}
}
}
function gameLoop()
{
//Limpa Tela
context.clearRect(0, 0, canvas.width, canvas.height);
// Bola
context.beginPath();
                context.arc(bolaPosX, bolaPosY, bolaDiametro, 0,
Math.PI * 2, true);
                context.fill();
context.fillStyle ='red';

if(bolaPosY <= canvas.height)
{
bolaPosY += velocidadeBola;
}
else
{
bolaPosX = Math.random() * 600;
bolaPosY = -10;
colisao = false;
}
// Checar Colisão
/*Em seguida vamos pensar na matemática da colisão */
if((bolaPosX > jogadorPosicaoX &&
bolaPosX < jogadorPosicaoX + barraLargura) &&
bolaPosY >= canvas.height - barraAltura &&
colisao == false)
{
pontosJogador++;
colisao = true;
}
// Escreve placar
                context.font = "32pt Tahoma";
context.fillText(pontosJogador, canvas.width - 70, 50);
context.fillText("Liceu", canvas.width - 200, 50);
// Jogador
context.fillRect(jogadorPosicaoX, canvas.height -
barraAltura, barraLargura, barraAltura);
}
</script>
</body>
</html>
Escrito por às Nenhum comentário:
Seção:

sexta-feira, 24 de maio de 2019

Aula 7 - Teclado_teste_3

Seguem os códigos da aula 7
teclado.js -> já feito
animacao.js -> já feito

teclado_teste_3
<!DOCTYPE html>
<html>
<head>
   <title>Um heroi que atira</title>
   <script src="teclado.js"></script>
   <script src="heroi.js"></script>
   <script src="bola.js"></script>
   <script src="animacao.js"></script>
</head>
<body>
   <canvas id="canvas_teclado_3" width="500" height="500"></canvas>
   <script>
      var canvas = document.getElementById('canvas_teclado_3');
      var context = canvas.getContext('2d');
      var teclado = new Teclado(document);
      var animacao = new Animacao(context);

      // Um sprite pode ler o teclado para saber como se comportar, por que não?
      var heroi = new Heroi(context, teclado, animacao);
      heroi.x = 0;
      heroi.y = 100;
      animacao.novoSprite(heroi);

      teclado.disparou(ESPACO, function() {
         heroi.atirar();
      });
      animacao.ligar();
   </script>
</body>
</html>
-------------------------------------------------------------------------------------------------------
bola.js

function Bola(context) {
   this.context = context;
   this.x = 0;
   this.y = 0;
   this.velocidadeX = 0;
   this.velocidadeY = 0;

   // Atributos de desenho padrão
   this.cor = 'black';
   this.raio = 10;
}
Bola.prototype = {
   atualizar: function() {
      var ctx = this.context;
      this.x += this.velocidadeX;
      this.y += this.velocidadeY;
   },
   desenhar: function() {
      var ctx = this.context;   
      // Guardar configurações atuais do contexto
      ctx.save();
      // Configurar o contexto de acordo com a bola
      ctx.fillStyle = this.cor;
      // Desenhar
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.raio, 0, 2 * Math.PI, false);
      ctx.fill();
      // Voltar às configurações anteriores
      ctx.restore();   
   }
}
----------------------------------------------------------------------------------
heroi.js

// Códigos únicos para as direções
var DIRECAO_ESQUERDA = 1;
var DIRECAO_DIREITA = 2;

function Heroi(context, teclado, animacao) {
   this.context = context;
   this.teclado = teclado;
   this.animacao = animacao;
   this.x = 0;
   this.y = 0;
   this.direcao = DIRECAO_DIREITA;
}
Heroi.prototype = {
   atualizar: function() {
      if (this.teclado.pressionada(SETA_ESQUERDA) && this.x > 0) {
         this.direcao = DIRECAO_ESQUERDA;
         this.x -= 10;
      }
      else if (this.teclado.pressionada(SETA_DIREITA) &&
               this.x < this.context.canvas.width - 20) {
         this.direcao = DIRECAO_DIREITA;
         this.x += 10;
      }
   },
   desenhar: function() {
      this.context.fillRect(this.x, this.y, 20, 50);
   },
   atirar: function() {
      var tiro = new Bola(this.context);
      tiro.x = this.x + 10;
      tiro.y = this.y + 10;
      tiro.raio = 10;
      tiro.cor = 'red';
      // Lendo a direção atual
      if (this.direcao == DIRECAO_ESQUERDA)
         tiro.velocidadeX = -20;
      else
         tiro.velocidadeX = 20;
      this.animacao.novoSprite(tiro);
   }
}
Escrito por às Nenhum comentário:
Seção:

Aula 7 - Teclado teste-2

Segue o código da aula: teclado-teste-2.html

<!DOCTYPE html>
<html>
<head>
   <title>Movimentando personagem com classe JavaScript</title>
   <script src="teclado.js"></script>
</head>

<body>
   <canvas id="canvas_teclado_2" width="500" height="500"></canvas>
   <script>
      // Referências do Canvas
      var canvas = document.getElementById('canvas_teclado_2');
      var context = canvas.getContext('2d');

      // Posição inicial do personagem
      var posicao = 0;
      desenharPersonagem();

      // Controlador do teclado
      var teclado = new Teclado(document);
   
      // Um loop de animação básico
      requestAnimationFrame(animar);
   
      function animar() {
         if (teclado.pressionada(SETA_ESQUERDA))
            posicao -= 10;
         else if (teclado.pressionada(SETA_DIREITA))
            posicao += 10;
         desenharPersonagem();
         requestAnimationFrame(animar);
      }
      // Nosso heroi continua esbanjando charme!
      function desenharPersonagem() {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.fillRect(posicao, 100, 20, 50);
      }
   </script>
</body>

</html>
-----------------------------------------------------------------------------------------------------------
 Teclado.js

// Códigos de teclas - aqui vão todos os que forem necessários
var SETA_ESQUERDA = 37;
var SETA_DIREITA = 39;
var ESPACO = 32;

function Teclado(elemento) {
   this.elemento = elemento;
   // Array de teclas pressionadas
   this.pressionadas = [];
   // Array de teclas disparadas
   this.disparadas = [];
   // Funções de disparo registradas
   this.funcoesDisparo = [];
   var teclado = this;

   elemento.addEventListener('keydown', function(evento) {
      var tecla = evento.keyCode;  // Tornando mais legível ;)
      teclado.pressionadas[tecla] = true;

      // Disparar somente se for o primeiro keydown da tecla
      if (teclado.funcoesDisparo[tecla] && !teclado.disparadas[tecla]) {

          teclado.disparadas[tecla] = true;
          teclado.funcoesDisparo[tecla] () ;
      }
   });

   elemento.addEventListener('keyup', function(evento) {
      teclado.pressionadas[evento.keyCode] = false;
      teclado.disparadas[evento.keyCode] = false;
   });
}
Teclado.prototype = {
   pressionada: function(tecla) {
      return this.pressionadas[tecla];
   },
   disparou: function(tecla, callback) {
      this.funcoesDisparo[tecla] = callback;
   }
}
Escrito por às Nenhum comentário:
Seção:

sexta-feira, 17 de maio de 2019

Exercício keypress - Aula 6

Exercício KeyPress

Teclado1.html

<!DOCTYPE html>
<html>
<head>
   <title>Movimentando personagem com keydown</title>
</head>
<body>
 <canvas id="canvas_teclado_1" width="500" height="500"></canvas>
   <script>
      // Referências do Canvas
    var canvas = document.getElementById('canvas_teclado_1');
    var context = canvas.getContext('2d');
      // Posição inicial do personagem
      var posicao = 0;
      desenharPersonagem();
      // Listener
      document.addEventListener('keydown', function(evento) {
         if (evento.keyCode == 37) {  // Seta para esquerda
            posicao -= 10;
            desenharPersonagem();
         }
         else if (evento.keyCode == 39) {  // Seta para direita
            posicao += 10;
            desenharPersonagem();
         }
      });
      // Um personagem não muito simpático, mas...
      function desenharPersonagem() {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.fillRect(posicao, 100, 20, 50);
}
   </script>
</body>
</html>
Escrito por às Nenhum comentário:
Seção:

EXEMPLO ANIMACAO.HTML AULA6

EXEMPLO6 ANIMACAO.HTML

<!DOCTYPE html>
<html>
<head>
   <title>Primeiro Teste: Loop de Animação com Sprites</title>
   <script src="animacao.js"></script>
   <script src="bola.js"></script>
</head>
<body>
  <canvas id="canvas_animacao" width="500" height="500"></canvas>
   <script>
      // Referências para o Canvas
      var canvas = document.getElementById('canvas_animacao');
      var context = canvas.getContext('2d');
      // Criando alguns sprites
      var b1 = new Bola(context);
      b1.x = 100;
      b1.y = 200;
      b1.velocidadeX = 20;
      b1.velocidadeY = -10;
      b1.cor = 'red';
      b1.raio = 20;
   
      var b2 = new Bola(context);
      b2.x = 200;
      b2.y = 100;
      b2.velocidadeX = -10;
      b2.velocidadeY = 20;
      b2.cor = 'blue';
      b2.raio = 30;
      // Criando o loop de animação
      var animacao = new Animacao(context);
      animacao.novoSprite(b1);
      animacao.novoSprite(b2);
      // "Ligar" a animação
      animacao.ligar();
   </script>
</body>
</html>
Escrito por às Nenhum comentário:
Seção:

EXEMPLO ANIMACAO.JS AULA6

EXEMPLO AULA 6

ANIMACAO.JS

function Animacao(context) {
   this.context = context;
   this.sprites = [];
   this.ligado = false;
}
Animacao.prototype = {
   novoSprite: function(sprite) {
      this.sprites.push(sprite);
   },
   ligar: function() {
      this.ligado = true;
      this.proximoFrame();
   },
   desligar: function() {
      this.ligado = false;
   },
   proximoFrame: function() {
      // Posso continuar?
      if ( ! this.ligado ) return;

      // A cada ciclo, limpamos a tela ou desenhamos um fundo
      this.limparTela();

      // Atualizamos o estado dos sprites
      for (var i in this.sprites)
         this.sprites[i].atualizar();

      // Desenhamos os sprites
      for (var i in this.sprites)
         this.sprites[i].desenhar();

      // Chamamos o próximo ciclo
      var animacao = this;
      requestAnimationFrame(function() {
         animacao.proximoFrame();
      });
   },
   limparTela: function() {
      var ctx = this.context;
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   }
}
Escrito por às Nenhum comentário:
Seção:

sexta-feira, 10 de maio de 2019

Aula5- Bola.js

Exemplo aula 5
bola.js

function Bola(context) {
   this.context = context;
   this.x = 0;
   this.y = 0;
   this.velocidadeX = 0;
   this.velocidadeY = 0;
   // Atributos de desenho padrão
   this.cor = 'black';
   this.raio = 10;
}
Bola.prototype = {
   atualizar: function() {
      var ctx = this.context;
      if (this.x < this.raio || this.x > ctx.canvas.width
  - this.raio)this.velocidadeX *= -1;
      if (this.y < this.raio || this.y > ctx.canvas.height
  - this.raio)this.velocidadeY *= -1;
      this.x += this.velocidadeX;
      this.y += this.velocidadeY;
   },
   desenhar: function() {
      var ctx = this.context;     
      // Guardar configurações atuais do contexto
      ctx.save();
      // Configurar o contexto de acordo com a bola
      ctx.fillStyle = this.cor;
      // Desenhar
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.raio, 0, 2 * Math.PI, false);
      ctx.fill();
      // Voltar às configurações anteriores
      ctx.restore();     
   }
}
Escrito por às Nenhum comentário:
Seção:

Exemplo de prototype aula 5 - liceu

Segue o exemplos
 carro.js

// Função construtora
function Carro(cor, velocMaxima) {
   this.cor = cor;
   this.velocMaxima = velocMaxima;
   this.velocAtual = 0;
}

// Prototype com os métodos
Carro.prototype = {
   acelerar: function() {
      this.velocAtual += 10;
  this.velocMaxima=this.velocAtual+this.velocMaxima;
   }
}
----------------------------------------------------------------------------------------------
prototype.html

<!DOCTYPE html>
<html>
<head><title>O prototype</title>
   <script src="carro.js"></script></head>
<body>
  <script>
  var meuCarro = new Carro('vermelho', 250);
  document.write(meuCarro.cor + '1 :velocidade atual '
  +meuCarro.velocAtual+"</br>");
  document.write(meuCarro.cor + '2 :velocidade maxima '
  +meuCarro.velocMaxima+"</br>");
  meuCarro.acelerar();
  meuCarro.acelerar();
  meuCarro.acelerar();
  document.write(meuCarro.cor + '3:velocidade atual : '
  +meuCarro.velocAtual);
  </script>
</body>
</html>



Escrito por às Nenhum comentário:
Seção:

Orientação a objetos - Liceu

Exemplo do código de Orientação a Objetos Javascript

<!DOCTYPE html>
<html>
<head>
   <title>Orientação a objetos</title>
</head>
<body>
   <script>
      function Carro(cor, velocMaxima) {
         // Criando os atributos
         this.cor = cor;
         this.velocMaxima = velocMaxima;
         this.velocAtual = 0;       
         // Criando um método
         this.acelerar = function() {
            this.velocAtual = 50;
         }
      }     
      // Instanciando objetos da classe Carro
      var meuCarro = new Carro('vermelho', 250);
      var oponente = new Carro('azul', 300);     
      // Chamando um método somente em um objeto
      meuCarro.acelerar();     
      // Verificando as velocidades
      document.write('velocidade atual : '
  + meuCarro.cor + ': ' + meuCarro.velocAtual);
      document.write('<br>');
  document.write('velocidade maxima : '
  +meuCarro.cor + ': ' + meuCarro.velocMaxima);
      document.write('<br>');  
      document.write('velocidade atual : '
  +oponente.cor + ': ' + oponente.velocAtual);
  document.write('<br>');  
  document.write('velocidade maxima : '
  +oponente.cor + ': ' + oponente.velocMaxima);
   </script></body>
</html>
Escrito por às Nenhum comentário:
Seção:

Exercício Ovini -RequestAmimationFrame

Segue o código do Exercício:

<!DOCTYPE html>
<html>
<head>
<title>Método window.requestAnimationFrame</title>
</head>
<body>
<canvas id="meu_canvas" width="500" height="600"></canvas>
<script>
//Canvas e contexto
canvas = document.getElementById('meu_canvas')
context = canvas.getContext('2d')

//Dados da posição e tamanho da imagem
var x = 20;
var y = 10;
var e = 32;
var d = 64;
var imagem = new Image();
imagem.src = 'img/ovni.png';

imagem.onload = function() {
requestAnimationFrame(mexerOvini);
}
//Momento Inicial
var anterior = new Date().getTime();

//Iniciar a animação
requestAnimationFrame(mexerOvini);

//Função de animação
function mexerOvini(){
//Momento Atual
var agora = new Date().getTime();

//Diferença
var decorrido = agora - anterior;

//Limpar o Canvas
context.clearRect(0, 0, canvas.width, canvas.height);

//Desenhar Ovini
context.beginPath();

context.drawImage(imagem,x,y,d,e);
var velocidade = 20;
y += velocidade * decorrido / 1000;
anterior = agora;
requestAnimationFrame(mexerOvini);
}
</script>
</body>
</html>

Escrito por às Nenhum comentário:
Seção:

sexta-feira, 3 de maio de 2019

Exercício dos arcos olímpicos - html5

Segue os códigos do Arco Olímpicos

<DOCTYPE html>
<html>
<head>
<title>Arcos olímpicos</title>
</head>
<body>
<canvas id="meu_canvas" width="350" height="350"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');

//Iniciar o caminho(apaga desenhos anteriores)
 context.beginPath();
 context.lineWidth= 5;
 context.arc(100,60,55,0,2*Math.PI,true);
 context.strokeStyle='blue';
 context.stroke();

  context.beginPath();
  context.lineWidth= 5;
  context.arc(190,60,55,0,2*Math.PI,true);
  context.strokeStyle='black';
  context.stroke();

  context.beginPath();
  context.lineWidth= 5;
  context.arc(280,60,55,0,2*Math.PI,true);
  context.strokeStyle='red';
  context.stroke();

  context.beginPath();
  context.lineWidth= 5;
  context.arc(260,120,55,0,2*Math.PI,true);
  context.strokeStyle='yellow';
  context.stroke();

  context.beginPath();
  context.lineWidth= 5;
  context.arc(130,120,55,0,2*Math.PI,true);
  context.strokeStyle='green';
  context.stroke();
</script>
</body>
<html>
Escrito por às Nenhum comentário:
Seção:

Aula 4 - Games Liceu - html5

Segue os códigos da aula 4

Exercício imagem 3

<!DOCTYPE html>
<html><head>
   <title>Imagens</title></head>
<body>
   <canvas id="meu_canvas" width="300" height="300"></canvas>
   <script>
      // Canvas e contexto
      var canvas = document.getElementById('meu_canvas');
      var context = canvas.getContext('2d');   
      // Carregar a imagem
      var imagem = new Image();
      imagem.src = 'img/explosao.png';
      imagem.onload = function() {
         context.drawImage(imagem,
            80, 10, 60, 65,  // Área de recorte
            20, 20, 60, 65   // Desenho no Canvas
         );
      }
   </script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
Exercício imagem4

<!DOCTYPE html>
<html>
<head><title>Imagens</title></head>
<body>
   <canvas id="meu_canvas" width="300" height="300"></canvas>
   <script>
      // Canvas e contexto
      var canvas = document.getElementById('meu_canvas');
      var context = canvas.getContext('2d');   
      // Carregar a imagem
      var imagem = new Image();
      imagem.src = 'img/explosao.png';
      imagem.onload = function() {
         context.drawImage(imagem,
            80, 10, 60, 65,  // Área de recorte
            20, 20, 60, 65   // Desenho no Canvas
         );
context.drawImage(
            imagem,
            150, 10, 60, 65,  // Área de recorte
            80, 20, 60, 65   // Desenho no Canvas
         );
      }
   </script>
</body>
</html>
-----------------------------------------------------------------------------------------------------
Exercício Save e restaure

<!DOCTYPE html>
<html>
<head><title>Métodos save e restore</title></head>
<body>
   <canvas id="meu_canvas" width="200" height="200"></canvas>
   <script>
      // Canvas e contexto
      var canvas = document.getElementById('meu_canvas');
      var context = canvas.getContext('2d');
      // Um pequeno quadrado verde
      context.fillStyle = 'green';   
      context.fillRect(50, 50, 25, 25);   
      // Salvamos a configuração e subimos na pilha
      context.save();   
      // Agora um quadrado roxo
      context.fillStyle = 'purple';
      context.fillRect(100, 50, 25, 25);   
      // Voltamos para o nível anterior na pilha
      context.restore();   
      // Voltou para o verde!
      context.fillRect(150, 50, 25, 25);   
   </script>
</body>
</html>
----------------------------------------------------------------------------------------------------------

Exercício Animação1

<!DOCTYPE html>
<html>
<head>
   <title>Método window.requestAnimationFrame</title>
</head>
<body>
   <canvas id="meu_canvas" width="800" height="300"></canvas>
   <script>
      // Canvas e contexto
      canvas = document.getElementById('meu_canvas');
      context = canvas.getContext('2d');   
      // Dados da bola
      var x = 20;
      var y = 100;
      var raio = 10;      
      // Momento inicial
      var anterior = new Date().getTime();      
      // Iniciar a animação
      requestAnimationFrame(mexerBola);      
      // Função de animação
      function mexerBola() {
         // Momento atual
         var agora = new Date().getTime();         
         // Diferença
         var decorrido = agora - anterior;
         // Limpar o Canvas
         context.clearRect(0, 0, canvas.width, canvas.height);         
         // Desenhar a bola
         context.beginPath();
         context.arc(x, y, raio, 0, Math.PI*2);
         context.fill();         
         // Deslocar 20 pixels para a direita
         var velocidade = 100;
         x += velocidade * decorrido / 1000;           
         // Guardamos o instante para o próximo ciclo
         anterior = agora;         
         // Chamar o próximo ciclo da animação
         requestAnimationFrame(mexerBola);
      }      
   </script>
</body></html>

Escrito por às Nenhum comentário:
Seção:

sexta-feira, 26 de abril de 2019

Aula 3 - Games Liceu - html5

Segue os códigos da aula3

Exemplo1
<!DOCTYPE html>
<html>
<head>
   <title>Bandeira do brasil</title>
</head>
<body>
   <canvas id="myCanvas" width="250" height="150"
   style="border:1px solid #d3d3d3;"/>
<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

//Desenha a retângulo verde
context.fillStyle="green";
context.fillRect(0,0,250,150);

//Desenha o losango amarelo
context.fillStyle = "yellow";
context.beginPath();
context.moveTo(125,0);
context.lineTo(250,75);
context.lineTo(125,150);
context.lineTo(0, 75);
context.lineTo(125,0);
context.fill();
context.closePath();

//Desenha o círculo azul
context.beginPath();
context.fillStyle="blue";
context.arc(125,75,50,0,2*Math.PI);
context.fill();
context.closePath();

//Desenha a faixa branca
context.fillStyle="white";
context.fillRect(75,65,100,15);

//Desenha o texto
context.beginPath();
context.fillStyle="black";
context.font="10px Arial";
context.fillText("Ordem e Progresso",80,75);
context.fill();
context.closePath();
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------
Exemplo2

<!DOCTYPE html>
<html>
<head>
   <title>Imagens</title>
</head>
<body>
   <canvas id="meu_canvas" width="500" height="100"></canvas>
   <script>
      // Canvas e contexto
      var canvas = document.getElementById('meu_canvas');
      var context = canvas.getContext('2d');      
      // Carregar a imagem
      var imagem = new Image();
      imagem.src = 'img/ovni.png';
      imagem.onload = function() {
  context.drawImage(imagem, 20, 20, 64, 32);  
         }
   </script>
</body>
</html>
---------------------------------------------------------------------------------------------------
Exemplo3

<!DOCTYPE html>
<html>
<head>
   <title>Imagens</title>
</head>
<body>
   <canvas id="meu_canvas" width="500" height="100"></canvas>
   <script>
      // Canvas e contexto
      var canvas = document.getElementById('meu_canvas');
      var context = canvas.getContext('2d');      
      // Carregar a imagem
      var imagem = new Image();
      imagem.src = 'img/ovni.png';
      imagem.onload = function() {
         // Começar na posição 20
         var x = 20;         
         // Desenhar as imagens
         for (var i = 1; i <= 5; i++) {
            context.drawImage(imagem, x, 20, 64, 32);
            x += 70;
         }
      }
   </script>
</body>
</html>
Escrito por às Nenhum comentário:
Seção:
Assinar: Postagens (Atom)