Platzi
Platzi

Aproveite nosso plano de lançamento!

Antes: R$ 499,00
R$ 349,00
Currency
Antes: R$ 499,00
Economize: R$ 150,00
COMPRAR
Termina em: 11D : 19H : 32M : 46S

Desenvolver programas de computador. Quarto projeto: FizzBuzz

Boas-vindas e Introdução

1

Bem-vindo ao curso e apresentação do professor

2

Criando sua primeira linha de código

3

Adicionando um pouco de teoria

4

Vis√£o geral do curso

5

Preparando o ambiente

Conceitos básicos de programação para web

6

O que é HTML, CSS e JS?

7

Primeiros passos com a função alert no navegador

8

HTML, CSS e JS de verdade

Primeiro projeto: Peso em outro planeta

9

Entendendo o problema

10

Calculando um peso em outro planeta

11

Obtendo os dados do usu√°rio

12

Utilizando fluxos condicionais

Segundo projeto: Trabalhando com Canvas

13

Entendendo o problema

14

Entendendo os principais objetos em um navegador

15

Trabalhando com window e document

16

Trabalhando com DOM

17

Fun√ß√Ķes em Javascript

18

Eventos e Formul√°rios em HTML e JS

19

Detectando eventos do teclado

20

Rabiscando o canvas com as setas do teclado

Terceiro projeto: Fazenda Platzi

21

Entendendo o problema

22

Fun√ß√Ķes matem√°ticas e n√ļmeros aleat√≥rios em JS

23

Trabalhando com ciclos (while e for)

24

Carregando imagens ao canvas

25

Carregando imagens ao canvas de forma aleatória

Quarto projeto: FizzBuzz

26

Entendendo o problema

27

Finalizando o projeto do FizzBuzz

28

Divisão, módulo e resto em Javascript

29

Codificando um FizzBuzz

Quinto projeto: √Ālbum de figurinhas

30

Entendendo o problema

31

Entendendo as cole√ß√Ķes (Arrays)

32

Classes e objetos em Javascript

33

Analisando todas as figurinhas

Sexto projeto: Cliente e Servidor

34

Entendendo o problema

35

Modelo Cliente/Servidor

36

Instalando Node.JS e o framework express.js

37

Detalhes de instalação para o Windows e Mac

38

Criando seu primeiro código de servidor com express.js

39

Criando uma API para descobrir as horas

40

Conclus√£o

Aulas ao vivo

41

Sessão ao vivo: o que você vai aprender no curso

Você ainda não tem acesso a esta aula

Crie uma conta e continue vendo este curso

Rabiscando o canvas com as setas do teclado

20/41
Recursos

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:

As contribui√ß√Ķes, perguntas e respostas s√£o vitais para aprender em comunidade. Registre-se ou fa√ßa login para participar .

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.

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

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);

Game Shake j√° t√° 50% pronto kkkk
Boa aula!

Show!

show

Massa!

Muito boa aula…