Publicação: 08/08/2017
Área:Programação em 5 minutos
Transcrição
Iremos correr um pouco no vídeo de hoje, pois temos muita coisa para mostrar em cinco minutos.
about:blank, f12, vamos começar.
Se estão lembrados, com document.body.innerHTML nós conseguimos inserir algumas coisas no nosso html. O que nós vamos inserir é esse comando canvas. Observem o id=c1. Isso vai ser importante. Já vimos antes. Queremos depois editar esse canvas.
Estou criando uma variável. vou chamar de meucanvas. Vai receber document.getElementbyId. Já estão sabendo. Eu vou botar aqui o id do meu canvas. E eu vou agora escrever um ctx, que é um comando, uma variável.
Este ctx é importante. Ele dá um contexto que eu posso trabalhar no meu canvas.
Eu vou chamar meucanvas getcontext 2d, ou seja, o canvas é uma coisa que permite desenhar em 2d e, já podem imaginar, também em 3d.
Então eu uso esta linha, para poder depois usando esta variável desenhar no meu canvas. Vamos fazer um desenho. ctx.fillStyle igual a green.
Estou dizendo que o estilo de preenchimento do meu canvas é verde
E ctx.fillRect estou preenchendo um retângulo x,y,largura,altura. Desenhei um retângulo verde num canvas que eu criei.
Mas isso não é tão divertido, então vamos fazer alguma coisa um pouquinho mais complicada, mas precisamos fazer algo mais divertido que isso em nossos 5 minutos. Certo? Vamos criar
uma outra coisa. vamos ter muita coisa nova em 5 minutos apenas.
O que aconteceu aqui?
Eu fiz um comando e nada aconteceu por causa deste function
Eu não executei um comando, eu disse que existe um comando, uma função, chamada move1, que faz esse comando, que que significa isso?
Significa que agora eu posso dizer: "move1" e ele dá "olá mundo". Por que que eu fiz isso?
Vamos com calma, vamos fazer a função move2. Ela tem uma coisa meio diferente. console.log(e.code); Tá, é função move2. Se eu disser move2 vai dar um erro. Que ela pede uma coisa chamada
este "e" aqui. Depois ela pede este e.code. Vamos lá. Olhem o que vou fazer. Eu não vou inserir nada, nenhum html. eu vou dizer...
eu estou teclando e ele está escrevendo coisas no meu computador, no meu console. Por que? Porque eu disse que neste documento, sempre que houver um keydown, uma tecla pressionada, eu chamo move2 e o move2 faz o seguinte: dá um console.log e escreve o que veio neste "e".
Quando eu aperto "keydown", ele me diz qual a tecla que eu pressionei.
Por que eu fiz algo tão complexo. Vai valer a pena. Acompanhem comigo.
Function move3 de e. If e.code igual a ArrowRight. Se o e.code for a tecla da direita o que eu vou fazer aqui? Vamos fazer várias coisinhas aqui.
ctx é igual a branco... vamos preencher com x,0,50,70. Ele vai dar erro. ele vai dizer que eu não sei o que é este X. Não faz mal.
Acompanhe comigo. X igual à x + 1
Cada vez que fizer a tecla direita, x vai aumentar. Deixei como verde agora, e vou fazer de novo x,0,50,50. Se eu teclei com a tecla da direita, eu aumentei em 1.
E eu vou agora dizer que addEventListener keydown, move3. Vai dar erro. X não existe. Não faz mal. X = 0. Agora x existe.
E nós estamos mexendo o nosso quadrado para a direita.
Terminou a área do canvas, e terminou também nossos cinco minutos.
Com mais algumas linhas de if, vocês podem subtrair o x, para voltar, e criar um y para fazer o quadrado subir e descer.
(51) 3024-0730 - info@alfamidia.com.br - Porto Alegre/RS