O meu código estava dando erro por causa de 1 letra que estava minusculo. switch(event.keyCode, a letra C de code, estava minuscula, o correto é maiusculo.
Boas-vindas e Introdução
Criando sua primeira linha de código
Apresentação docurso e do professor Rafael Pacheco
Adicionando um pouco de teoria
Visão geral do curso
Preparando o ambiente
Conceitos básicos de programação para web
O que é HTML, CSS e JS?
Primeiros passos com a função alert no navegador
HTML, CSS e JS de verdade
Primeiro projeto: Peso em outro planeta
Entendendo o problema
Playground: pelo menos um dos números é par?
Calculando um peso em outro planeta
Obtendo os dados do usuário
Utilizando fluxos condicionais
Segundo projeto: Trabalhando com Canvas
Entendendo o problema
Entendendo os principais objetos em um navegador
Trabalhando com window e document
Trabalhando com DOM
Funções em Javascript
Eventos e Formulários em HTML e JS
Detectando eventos do teclado
Rabiscando o canvas com as setas do teclado
Terceiro projeto: Fazenda Platzi
Entendendo o problema
Funções matemáticas e números aleatórios em JS
Trabalhando com ciclos (while e for)
Carregando imagens ao canvas
Carregando imagens ao canvas de forma aleatória
Quarto projeto: FizzBuzz
Entendendo o problema
Finalizando o projeto do FizzBuzz
Divisão, módulo e resto em Javascript
Codificando um FizzBuzz
Quinto projeto: Álbum de figurinhas
Entendendo o problema
Entendendo as coleções (Arrays)
Classes e objetos em Javascript
Analisando todas as figurinhas
Sexto projeto: Cliente e Servidor
Entendendo o problema
Modelo Cliente/Servidor
Instalando Node.JS e o framework express.js
Detalhes de instalação para o Windows e Mac
Criando seu primeiro código de servidor com express.js
Criando uma API para descobrir as horas
Conclusão
Aulas ao vivo
Sessão ao vivo: o que você vai aprender no curso
Você não tem acesso a esta aula
Continue aprendendo! Junte-se e comece a impulsionar sua carreira
Se você já tem uma conta,
Rabiscando o canvas com as setas do teclado
21/42Recursos
Agora, vamos alterar o projeto para por desenhar usando as setas do teclados para gerar linhas nos canvas. Faremos isso gravando a posição x e y onde nos encontramos e deslocando por um valor fixo na direção da seta, esse valor será gravado na variável movimento.
No final da aula, deixamos um desafio para que altere o programa a fim de que se possa usar o mouse no lugar do teclado para desenhar.
Contribuições 10
Perguntas 2
Ordenar por:
Podiam ter explicado em outro vídeo como fazer o desafio, porque parece bem interessante mas difícil de entender somente com o código…
Qual seria o arquivo com o código desenhando com o mouse?
top dms
Show!
Game Shake já tá 50% pronto kkkk
Boa aula!
show
Massa!
Muito boa aula…
Boa noite, pessoal! Estou tentando desenhar uma linha com o clique do mouse.
Eu fiz do jeito mais simples possível. Por isso só tem Y.
Esse é o código com que estou tentando mas nada acontece.
Alguém dá uma olhada?
var canvas = document.getElementById("meu-canvas");
var papel = canvas.getContext("2d");
var x = 200;
var y = 200;
var movimento = 10;
document.addEventListener("click", dibujaConElMouse);
function dibujaConElMouse(event) {
if (event.click) {
desenha ("red", x, y, x, y+movimento);
y = y + movimento;
}
}
function desenha(cor, xInicial, yInicial, xFinal, yFinal)
{
papel.beginPath();
papel.strokeStyle = cor;
papel.lineWidth = 3;
papel.moveTo (xInicial, yInicial);
papel.lineTo (xFinal, yFinal);
papel.stroke();
papel.closePath();
}
document.addEventListener("click", console.log);
Quer ver mais contribuições, perguntas e respostas da comunidade?