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 : 18H : 52M : 0S

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

Carregando imagens ao canvas

24/41
Recursos

Nesta aula, veremos como usar o DOM para adicionar um elemento de imagem ao objeto obtido do HTML. Vamos criar novas vari√°veis para armazenar as imagens e o endere√ßo delas e p√īr estas imagens no objeto papel atrav√©s do m√©todo papel.drawImage().

Contribui√ß√Ķes 14

Perguntas 13

Ordenar por:

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

Minha vaca não apareceu…

Pra quem tiver problema com a vaca n√£o aparecer, certifiquem-se de colocar ‚Äú./imgs/‚Ķ‚ÄĚ e colocar a pasta imagens dentro da pasta onde voc√™ salvou os arquivos html e js. A minha tava dando erro por n√£o estar dentro da pasta e porque esqueci o . antes da /

otima aula

a minha vaca aparece em algumas vezes que regarrego e em outras nao.

BOA AULA

Aula legal demais, deu tudo certo pra mim mas fiquei curioso em saber por que o JS é tão repetitivo. São muitas linhas para simplesmente chamar duas imagens. Acredito que seja por causa da funcionalidade de conseguir acrescentar eventos mas se somente precisasse do fundo e da vaca acho que iria fazer por html mesmo.

fundo.imagem = new Image ();
fundo.imagem.src = fundo.url;
vaca.imagem = new Image ();
vaca.imagem.src = vaca.url;

Muito bom! é gratificante ver que deu certo a fazendinha:) Feliz demais por ter aprendido tanto com essa aula

bacana!

Eu n√£o consegui fazer de primeira , porem eu baixei os arquivos para ver se dava certo e mesmo assim n√£o deu certo
Oque eu faço agora?

Aquele momento em que o instrutor coloca ‚Äúpqp‚ÄĚ no c√≥digo e voc√™ leva um susto: https://platzi.com/aulas/1641-programacao-basica/21673-carregando-imagens-ao-canv-5/?time=84

Desenhos!! Mais aprendizado!!

nem sempre a vaca aparece primeiro que o fundo, é um evento aleatório, pq as vezes eu atualizo e ela fica na frente, e as vezes não
o Código:
(tem alguma forma de forçar o fundo a carregar sempre primeiro que a vaca?)

var canvas = document.getElementById("mycanvas");
var papel = canvas.getContext("2d");

var fundo = {
    url: "./imgs/fundo.png"
}

var vaca = {
    url: "./imgs/vaca.png"
}

fundo.imagem =  new Image();
fundo.imagem.src = fundo.url;
vaca.imagem =  new Image();
vaca.imagem.src = vaca.url;

fundo.imagem.addEventListener("load", cBk);
vaca.imagem.addEventListener("load", cCow);


function cBk(){
  papel.drawImage(fundo.imagem, 0, 0);
}

function cCow(){
  papel.drawImage(vaca.imagem, 50, 50);
}

function nrandom(x, y){
  return Math.floor(Math.random()*(y-x)+1) + x;

}

var z = 10

for(var i=0; i<z; i++){
  console.log(nrandom(100, 200))
}

Boa aula!!

Alguém sabe de algum material? Pq não entendi nada dessa aula