Coding Challenge #31: Flappy Bird The Coding Train English Portuguese

Coding Challenge #31: Flappy BirdYouTube↗ IA↗(long shot)
Education 1.1M views 19.5K likes 537 dislikes 10 Aug 2016 Show Contributors 1

The Coding Train 1.8M subscribers United States YouTube↗

Contributed subtitles

English Verto Letnaya

Click to Play Video

Hello and welcome to a coding rainbow coding challenge. Today's coding challenge

Olá e bem vindos a um arco-íris de codificação desafio de codificação. Desafio de codificação de hoje

I'm going to attempt to make a flappy bird clone which I admit it is kind of

Eu vou tentar fazer um flappy clone de aves que eu admito que é uma espécie de

like a bit of a cliché probably at this point don't know how many people have made

como um pouco de clichê provavelmente neste momento não sei quantas pessoas fizeram

flappy bird clone tutorial whatever's on in the world but it was requested I

tutorial de clone de pássaro flappy tudo o que está em no mundo, mas foi solicitado I

think it will be fu,n I'm going to give it a try, I'm going to do it in

acho que vai ser fu, n vou dar uma tentativa, eu vou fazer isso em

JavaScript I'm going to try to do it fast

JavaScript eu vou tentar fazer isso velozes

but with time to explain and time to relax and just enjoy myself and

mas com tempo para explicar e tempo para relaxar e apenas me divertir e

hopefully you might enjoy watching this. So umm

Espero que você goste de assistir isso. Então umm

if you're not familiar with flappy bird then I would say pause this video and go

se você não estiver familiarizado com o pássaro flappy então eu diria pausar este vídeo e ir

familiarize yourself with it. I actually don't think I've ever

familiarize-se com isso. Eu realmente não acho que eu já

actually played it before but I am somewhat familiar with the gameplay

realmente jogou antes, mas eu sou um pouco familiarizado com o gameplay

we'll see how well I do, I've got a live chat going on and you guys can tell me

vamos ver o quão bem eu faço, eu tenho um show chat acontecendo e vocês podem me dizer

como estou fazendo

if you're watching this is a YouTube archive you won't be able to follow

se você está assistindo isso é um YouTube arquivo que você não será capaz de seguir

along live but that's fine.

ao vivo, mas tudo bem.

Ok so I'm using p5.js which is a JavaScript framework has a function setup

Ok, então eu estou usando p5.js que é um Estrutura JavaScript tem uma configuração de função

it has a function draw and so the only thing I've got so far in the browser is

tem uma função de desenhar e assim o único coisa que eu tenho até agora no navegador é

apenas uma tela

that's 400 x 600 pixels and a black background on that canvas

isso é 400 x 600 pixels e um preto fundo nessa tela

so the first thing that I want to do I actually have a separate javascript file

então a primeira coisa que eu quero fazer eu realmente tem um arquivo javascript separado

called bird.js and I'm actually going to make this a constructor

chamado bird.js e eu estou realmente vai fazer disso um construtor

function and the bird.. all the bird really needs is a y-value, right? The bird

função e o pássaro .. todo o pássaro realmente precisa é um valor y, certo? O pássaro

moves up and down and it stays in one spot

sobe e desce e fica em um ponto

so I'm going to give this.. bird.. I'm going to start the bird off in the center of

então eu vou dar isso .. pássaro .. eu vou para começar a ave no centro de

the window and I'm going to write also a function called show where I draw the

a janela e eu vou escrever também um função chamada show onde eu desenho o

bird and again I'm gonna.. my design is going to be very poor so it's going to

pássaro e mais uma vez eu vou .. meu projeto é vai ser muito pobre por isso vai

be up to you to take my code which will be linked in this description and make

depende de você pegar meu código estar ligado nesta descrição e fazer

something more beautiful and interesting and reef off with this so I'm just going to

algo mais bonito e interessante e recife com isso, então eu estou indo só para

say let's make a white circle and you what let's get this bird and x-position

digamos vamos fazer um círculo branco e você o que vamos pegar esse pássaro e a posição x

as well even though it will be fixed but let's just try

bem, mesmo que seja corrigido, mas vamos apenas tentar

25 for right now and I'm gonna never forget the.. ♫this dot♫ you always need

25 por agora e eu nunca vou esqueça o .. ♫ este ponto ♫ você sempre precisa

this dot in JavaScript. So let's make this bird a circle and let's say in the

esse ponto em JavaScript. Então vamos fazer isso pássaro um círculo e digamos no

main program now

programa principal agora

var bird and we're going to say bird equals new bird and bird.show(), so we

var ave e vamos dizer pássaro é igual a novo pássaro e bird.show (), então nós

should have something a little bit more interesting now there it is

deveria ter algo um pouco mais interessante agora lá está

bird.. width/2 you know would probably makes more sense if I want the bird to

pássaro .. largura / 2 você sabe que provavelmente faz mais sentido se eu quiser que o pássaro

be in the middle to be height/2

estar no meio para ser altura / 2

so let's fix that. I'm gonna say height/2, I think the bird could be a little bit

então vamos consertar isso. Vou dizer altura / 2 Eu acho que o pássaro pode ser um pouco

bigger and the bird could be a little bit more in on the screen

maior e o pássaro poderia ser um pouco pouco mais na tela

so there we go this is the beginning of flappy bird now what happens to the bird

então lá vamos nós este é o começo de pássaro flappy agora o que acontece com o pássaro

without you doing anything?

sem você fazendo nada?

the bird falls down. So oops oops wrong window

o pássaro cai. Então oops oops janela errada

so I'm going to go here and I'm going to say this.update equals function and it

então eu vou aqui e vou digamos this.update é igual a função e

would be good to have some sort of variable called gravity and gravity

Seria bom ter algum tipo de variável chamada gravidade e gravidade

being the force that's pushing that bird down and let's say that the gravity

sendo a força que está empurrando esse pássaro para baixo e digamos que a gravidade

here is going to be one

aqui vai ser um

I also need a velocity, right? I need a velocity so gravity is the force that's

Eu também preciso de uma velocidade, certo? eu preciso de velocidade tão gravidade é a força que é

causing the velocity of the bird to increase so I'm gonna say

fazendo com que a velocidade do pássaro aumentar, então eu vou dizer

this.velocity equals 0 and now I'm going to say this.y changes by this.velocity

this.velocity é igual a 0 e agora eu vou diga isso.as alterações por esta .velocidade

and this.velocity changes by this.gravity

e this.velocity muda por this.gravity

ok so now we have a function that's going to push that bird down so I'm

ok então agora temos uma função que é vai empurrar esse pássaro para baixo, então eu sou

gonna go over here and I'm going to say also bird.update();

vai passar por aqui e eu vou dizer também bird.update ();

there we go bye bird it flew down. Now

lá vamos nós bye pássaro voou abaixo. Agora

we should probably do something where the bird stops when it gets to the

nós provavelmente deveríamos fazer algo onde o pássaro pára quando chega ao

bottom of the window

parte inferior da janela

that makes sense so I'm gonna go back to the bird and I'm gonna say.. I'll just do this

isso faz sentido, então eu vou voltar para o pássaro e eu vou dizer .. eu vou fazer isso

in the update function, I could write a separate.. and I'm gonna say if this.y

na função de atualização, eu poderia escrever um separar .. e eu vou dizer se isso.

is greater than height then

é maior que a altura

then I'm just gonna keep the bird on the screen I'm going to say this.y

então eu só vou manter o pássaro na tela eu vou dizer isso.

equals height and I'm also going to set that velocity to zero so we can see here

é igual a altura e também vou definir essa velocidade para zero, para que possamos ver aqui

that bird stops. I don't know if that's actually what happens in flappy bird but

esse pássaro pára. Eu não sei se isso é na verdade, o que acontece no pássaro flappy mas

I just kind of want to do that anyway

Eu só quero fazer isso de qualquer maneira

and you know what I'm going to do that also for the top of the window because

e você sabe o que eu vou fazer isso também para o topo da janela porque

ultimately I'm going to be able to push the bird up

em última instância, eu vou ser capaz de empurrar o pássaro se

so let's do that for less than zero, now of course...

então vamos fazer isso por menos de zero, agora claro ...

oh ok so now what.. How does the game work?

oh ok então agora o que ... Como funciona o jogo?

I think it's a mobile game right you could tap your mobile device.. this is my

Eu acho que é um jogo para celular certo você poderia tocar no seu dispositivo móvel .. este é o meu

dispositivo móvel

so I mean as a tap I'm going to just use the spacebar on my keyboard so in p5.js

então eu quero dizer como uma torneira eu vou apenas usar a barra de espaço no meu teclado assim em p5.js

I can write a function called keypPessed and I can check to see if the

Eu posso escrever uma função chamada keypPessed e eu posso verificar se o

key is the space bar

chave é a barra de espaço

and let me just make sure this is working I'm just going to console log something

e deixe-me apenas ter certeza de que isso está funcionando Eu só vou consolar log algo

right now so I'm going to run this and you can see each time I press the spacebar

agora, então eu vou correr isso e você pode ver cada vez que eu pressiono a barra de espaço

it says here in the console, it prints out, SPACE. So that works

diz aqui no console, ele imprime, ESPAÇO. Então isso funciona

so what do I want to do I want to cause a force to cause that bird to go up so I'm

Então, o que eu quero fazer eu quero causar um força para fazer com que esse pássaro suba, então eu sou

going to say bird.up and so what's going to happen with this bird.up

vai dizer bird.up e então o que é vai acontecer com este bird.up

What do I want to do.. I want instead of the velocity being pushed down by

O que eu quero fazer .. eu quero em vez de a velocidade sendo empurrada para baixo por

I want to say this.velocity minus equals, I want it to go up or I could say

Eu quero dizer isso.velocidade menos é igual, eu quero que ele suba ou eu poderia dizer

plus equals but some minus amount

mais é igual a mas menos

now what if I just said minus this.gravity? Let's try that for a second just to see

Agora, o que se eu acabei de dizer menos esta gravidade? Vamos tentar isso por um segundo só para ver

Come on! Wait oh you know what's a little bit annoying, I have to.. oh I took off that

Vamos! Espere ai você sabe o que é um pouquinho irritante, eu tenho que .. oh eu tirei isso

console.log(), hold on.

console.log (), aguarde.

Let's say minus equals this.gravity times 10 so nothing's working here and I

Digamos que menos equivale a esta gravidade vezes 10 então nada está trabalhando aqui e eu

have a kind of a sneaking suspicion that I've done something totally wrong

tem uma espécie de suspeita de que Eu fiz algo totalmente errado

bird.up let's make sure this is happening.

bird.up vamos ter certeza disso está acontecendo.

I'm gonna say print line this.velocity

Eu vou dizer print line this.velocity

ok so you can see that's working so let's try to tune.. I think there's sort

ok, então você pode ver que está funcionando tão vamos tentar sintonizar .. acho que tem tipo

of an issue here we've got to sort of tune the numbers

de um problema aqui nós temos que classificar sintonize os números

so let's make the gravity just for right now a lot less strong so it's not going

então vamos fazer a gravidade apenas pela direita agora muito menos forte, então não vai

now you can see though that this isn't really doing very much

agora você pode ver que isso não é realmente fazendo muito

let's make a this.up force

vamos fazer uma força this.up

let's call this lift and we'll say it's negative 10

vamos chamar isso de elevador e vamos dizer que é 10 negativos

so I'm going to say this.velocity plus equals this.lift; not left lift.

então eu vou dizer isso. mais é igual a this.lift; não deixou elevador.

There we go, so you can see there's a sort of an element of tuning those

Lá vamos nós, então você pode ver que há um tipo de um elemento de ajuste aqueles

so now it doesn't really feel like it's falling fast enough but me pushing the

então agora não parece que é caindo rápido o suficiente, mas me empurrando o

spacebar is kind of working out.

A barra de espaço é uma espécie de trabalho.

What happens if I hold down the spacebar? so that's good ok so that lift is too

O que acontece se eu segurar a barra de espaço? de modo que é bom ok para que o elevador é muito

much. Let's make the gravity 0.6 and let's keep the lift there but now I'm

Muito de. Vamos fazer a gravidade de 0,6 e vamos manter o elevador lá, mas agora eu sou

going to need to make the lift a little bit stronger.

vai precisar fazer o elevador um pouco pouco mais forte.

There we go, so this..

Lá vamos nós, então isso ..

so now I have, I sort of have the game going and lift is a little bit too strong

então agora eu tenho, eu meio que tenho o jogo ir e levantar é um pouco forte demais

let's make it less strong

vamos torná-lo menos forte

so this you know, something something that I could do is actually limit the

então isso você sabe, algo que eu poderia fazer é realmente limitar o

top speed or also like give it some.. something that I could also do

velocidade máxima ou também gosto de dar alguma coisa que eu também poderia fazer

is add some like air resistance in general which I could say something like

é adicionar alguns como resistência do ar em geral que eu poderia dizer algo como

this.velocity times equals 0.9 so that actually like helps with things

os tempos de estavelocidade são iguais a 0,9 de modo que realmente gosta de ajuda com as coisas

quite a bit because it's just there's some sort of like a limit to what the

um pouco porque é só que há algum tipo de como um limite para o que o

speed is so now I've got something that is a bit more kind of like reasonable to

velocidade é tão agora eu tenho algo que é um pouco mais gentil como razoável para

play here. So you could spend your time tuning this even more but I think just

jogue aqui. Então você poderia gastar seu tempo sintonizando isso ainda mais, mas acho que apenas

like keeping the velocity keeping some like air resistance by always shrinking

como manter a velocidade mantendo alguns como a resistência do ar, sempre encolhendo

the velocity a little bit

a velocidade um pouco

tuning how much the lift is versus the gravity those types of things you can

afinar o quanto o elevador é versus o gravidade esses tipos de coisas que você pode

kind of play around with.

tipo de brincar com.

Ok, so now we have the basic game mechanic here which is just a falling

Ok, agora temos o jogo básico mecânico aqui que é apenas uma queda

circle and each time I press the spacebar

círculo e cada vez que eu pressionar o barra de espaço

I can kind of like have it lift up a little bit. Now what do we need to add? We

Eu meio que gosto de levantar um pouco. Agora, o que precisamos adicionar? Nós

need to add those pipe things that kind of come from the right of the screen,

precisa adicionar as coisas de tubo que tipo de vem da direita da tela,

I'm only at eight minutes by the way which is pretty good; the pipes things

Eu estou apenas a oito minutos pelo caminho o que é muito bom; as coisas de tubos

that come from the right of the screen and you have to steer your way through.

que vem da direita da tela e você tem que dirigir o seu caminho.

Let's see if we can do this. So let's think about this, I'm going to also

Vamos ver se podemos fazer isso. Então vamos pense sobre isso, eu também vou

create a pipe object with a constructor function and let's think about what

criar um objeto pipe com um construtor função e vamos pensar sobre o que

does a pipe need?

um tubo precisa?

So a pipe needs, I would say it's going to extend from the top to somewhere in

Então um cachimbo precisa, eu diria que vai para estender a partir do topo para algum lugar em

the middle of the screen and then somewhere further down to the bottom so

no meio da tela e depois em algum lugar mais abaixo até o fundo assim

I need, I'm going to say like a value called top which is going to be some

Eu preciso, eu vou dizer como um valor chamado top que vai ser algum

random amount between the top of the screen and the middle of the screen and

quantidade aleatória entre o topo do tela e no meio da tela e

let's say this.bottom is some random amount also between the middle of the

digamos que isso ... é um pouco aleatório quantidade também entre o meio do

screen in the bottom of the screen and the pipe also needs an x-position

tela na parte inferior da tela e o tubo também precisa de uma posição x

which is always going to start at the edge of the screen and then let's

que sempre vai começar no borda da tela e, em seguida, vamos

write a function called show where I draw the pipe

escrever uma função chamada show onde eu desenhe o tubo

as a white.. fill white and I draw a rectangle at this.x, 0 all the

como um branco .. preencher branco e eu desenho um retângulo neste.x, 0 todo o

way with a width of like, let's say the width is 20 and let's actually make that

maneira com uma largura de como, digamos que o largura é 20 e vamos realmente fazer isso

a variable and this..

uma variável e isso ..

a width and also the height then is this.top and then I need another rectangle

uma largura e também a altura é this.top e então eu preciso de outro retângulo

which starts from the bottom

que começa do fundo

minus how tall it is and let's make.. minus this.bottom and its height is this.bottom.

menos o quão alto é e vamos fazer .. menos this.bottom e sua altura é this.bottom.

Okay in case this isn't making sense to you

Ok, caso isso não seja fazendo sentido para você

that's actually.. let's actually do a quick diagram here. What I'm trying to do

isso é realmente .. vamos realmente fazer um diagrama rápido aqui. O que estou tentando fazer

is create something that looks like this

é criar algo que se parece com isso

so I need two random numbers this length is what I'm calling top, this length is

então eu preciso de dois números aleatórios este comprimento é o que eu estou chamando de top, esse comprimento é

what I'm calling bottom and then this length.. this width is what I'm calling w.

o que eu estou chamando de fundo e, em seguida, este comprimento .. essa largura é o que eu estou chamando w.

So I first draw a rectangle from here with this width with a height of top and

Então eu primeiro desenho um retângulo daqui com esta largura com uma altura de topo e

then I draw a rectangle from here which is height

então eu desenho um retângulo daqui que é altura

minus bottom which is this point with this width and then the height of that

menos fundo que é este ponto com este largura e, em seguida, a altura desse

rectangle is bottom.

retângulo é inferior.

So this is what I'm getting and if these values are random I'll sometimes get stuff

Então é isso que eu estou recebendo e se estes valores são aleatórios, às vezes eu vou pegar coisas

that looks like this

que se parece com isso

etc. Now I could be more thoughtful like right now the way that

etc. Agora eu poderia ser mais pensativo como agora a maneira que

Estou fazendo isso

there's.. this.. you could never get something that looks like this. So it

há .. isso .. você nunca poderia obter algo que se parece com isso. Então isso

probably would make a.. I could probably do something different where I pick like

provavelmente faria um .. eu provavelmente poderia fazer algo diferente, onde eu escolho como

a random empty amount of space and then I pick a random starting point for that

uma quantidade aleatória de espaço e, em seguida, Eu escolho um ponto de partida aleatório para isso

empty amount of space. That might be interesting to do, we can make that as an

quantidade vazia de espaço. Isso pode ser interessante fazer, podemos fazer isso como um

improvement later but let's just stick with what I have right now which I think

melhoria mais tarde, mas vamos ficar com o que eu tenho agora que eu acho

é bom o suficiente

ok am back over here and let's just see now I need a function like this.update

ok estou de volta aqui e vamos apenas ver agora eu preciso de uma função como esta.

and all I want to do in this.update is say this.x minus equals some speed

e tudo que eu quero fazer nesta atualização é digamos this.x menos equivale a alguma velocidade

this.speed. So let's say this.speed is always going to be 5. I'm gonna just..

this.speed Então, digamos this.speed sempre vai ser 5. Eu vou apenas ..

so all of these are always going to move to the left. So let's look now here

então todos estes estão sempre indo mova para a esquerda. Então vamos olhar agora aqui

in sketch I'm going to create an array called pipes and what I'm going to do is

no esboço eu vou criar uma matriz chamado pipes e o que eu vou fazer é

pipes.push a new pipe; and then in draw

pipes.push um novo pipe; e depois no sorteio

I'm going to say for all of the pipes in the array

Eu vou dizer para todos os tubos em a matriz

yeah I also have a problem with this, somebody in the chat is saying, where I could

sim eu também tenho um problema com isso, alguém no chat está dizendo, onde eu pude

technically have a pipe with no space in it. So all that stuff can be corrected

tecnicamente tem um tubo sem espaço isto. Então tudo isso pode ser corrigido

later and I want to say show and I want to say update.

mais tarde e eu quero dizer show e eu quero para dizer atualização.

So let's run this now and see. There we go, that's moving quite fast.

Então vamos rodar isso agora e ver. Lá nós vá, está se movendo bem rápido.

So let's go back to the pipe and let's just make the speed 1. So we could see

Então vamos voltar para o cano e vamos basta fazer a velocidade 1. Assim, poderíamos ver

aah look we basically have flappy bird already

aah olha nós basicamente temos pássaro flappy já

it's so easy to play so it's moving kind of slow now but of course I only

é tão fácil de jogar por isso está se movendo meio lento agora, mas é claro que eu só

have one. So let's think about this,

tem um. Então vamos pensar sobre isso

what.. couple of things that I want to do; one is I want to I want to say something

o que .. par de coisas que eu quero fazer; um é que eu quero quero dizer alguma coisa

like if frameCount, I want to have a pipe every like so often, modulus 40

como se frameCount, eu quero ter um cano cada como tão frequentemente, módulo 40

equals zero which means every 40 frames, the modulus operator being the remainder

é igual a zero, o que significa a cada 40 quadros o operador de módulo sendo o restante

of division. So anytime a number is divisible by 40 with a remainder of 0 is

de divisão. Então, a qualquer momento, um número é divisível por 40 com um resto de 0 é

0 40 80 120 160 etc

0 40 80 120 160 etc.

let's add a new pipe and let's see how this looks

vamos adicionar um novo tubo e vamos ver como isso parece

that's a lot of.. that's a lot of.. every 40 frames is quite a view. Look at this, oh

isso é um monte de .. isso é um monte de .. cada 40 quadros é uma visão bastante. Olha isso, oh

I'm pretty good at this

Eu sou muito bom nisso

♪ta da da da♪ I need some like music to play along with this. Okay so

♪ ta da da da ♪ eu preciso de alguns como música para tocar junto com isso. OK, então

that's no good obviously. Lets umm

isso não é bom, obviamente. Deixa umm

let's make the pipes move a little bit faster, twice as fast, and let's uh let's

vamos fazer os tubos se moverem um pouco mais rápido, duas vezes mais rápido, e vamos vamos

say every hundred frames. So obviously you can see uh how the speed of the

diga cada cem frames. Então obviamente você pode ver como a velocidade do

pipes, how frequent they are and we can see basically I have the game right now.

canos, como eles são freqüentes e nós podemos veja basicamente eu tenho o jogo agora.

I've made a very easy version of the game to play

Eu fiz uma versão muito fácil do jogo para jogar

it's not very hard but one thing that I haven't done is figure out when I need

não é muito difícil, mas uma coisa que eu não tenho feito é descobrir quando eu preciso

to actually., you know this, i'm doing a great job here so let's actually add

para realmente., você sabe disso, eu estou fazendo um ótimo trabalho aqui, então vamos realmente adicionar

something that shows us when the circle hits the pipe or doesn't hit the pipe so

algo que nos mostra quando o círculo bate no cano ou não bate no tubo assim

and also by the way I should be getting rid of the pipes at some point so one

e também pelo jeito que eu deveria estar recebendo livrar dos canos em algum momento assim que um

thing I should do is I should I should say

coisa que devo fazer é que eu deveria devo dizer

if pipes index I is finished and I can actually just say x is less than zero..

se o índice de canos eu tiver terminado e eu puder na verdade, basta dizer que x é menor que zero ..

you know what I'm going to write a function. I'll write a function called

você sabe o que eu vou escrever um função. Vou escrever uma função chamada

offscreen so if the pipe is off the screen

fora da tela por isso, se o tubo estiver fora do tela

I want to say pipes.splice(i, 1)

Eu quero dizer pipes.splice (i, 1)

so splice is a function that deletes an element from the array. So I want to know

tão splice é uma função que elimina uma elemento da matriz. Então eu quero saber

if the pipe went off the screen, get rid of it

se o tubo saiu da tela, se livrar disso

I don't need it anymore. Now of course there's a little bit of an issue here

Eu não preciso mais disso. Agora é claro há um pequeno problema aqui

which is one is there's no such thing as a function called offscreen that's a

que é um deles não há tal coisa como uma função chamada fora da tela que é um

function I have to write.

função eu tenho que escrever.

There's another issue here which is that when I'm deleting stuff out of the array

Há outra questão aqui que é que quando eu estou excluindo coisas fora da matriz

I really should go through the array backwards and I've covered that in other

Eu realmente deveria passar pelo array para trás e eu tenho coberto isso em outra

videos but basically the array slides.. the elements slide back and if I'm going

vídeos, mas basicamente os slides da matriz .. os elementos deslizam para trás e se eu vou

forwards, the elements slide back while am going forward I could end up skipping things.

para frente, os elementos deslizam para trás enquanto vou para a frente eu poderia acabar pulando as coisas.

So I'm just going to switch my loop to saying greater than or equal to 0 and

Então, só vou mudar meu loop para dizendo maior ou igual a 0 e

i minus minus, and then I'm gonna.. if I run this, right?

menos menos e depois Eu vou .. se eu correr isso, certo?

no function named offscreen so I have to go into the pipe and I have to write

nenhuma função chamada fora da tela, então eu tenho entrar no cano e eu tenho que escrever

a function called this.offscreen is a function and this is very simple, I can

uma função chamada this.offscreen é uma função e isso é muito simples, eu posso

just say if this.x is less than negative w, right? because I want it to be

basta dizer se this.x é menor que w negativo, certo? porque eu quero que seja

all the way off

so it's width has to be all the way off; return true else return false and now I know

então a largura tem que ser toda a distância; return true else return false e agora eu sei

all of you watching this video are going to complain to me and just say, "But

todos vocês assistindo este vídeo são vai reclamar comigo e apenas dizer: "Mas

couldn't you just say return this.x is less than negative w because that

você não poderia simplesmente dizer voltar this.x é menos do que negativo w porque isso

evaluates to true or false."

avalia como verdadeiro ou falso. "

Yes, I could do that but you know what sometimes I like to write my code this

Sim, eu poderia fazer isso, mas você sabe o que as vezes eu gosto de escrever meu código

way. I like it to be long-winded, multiple line, I love the way that curly brackets

caminho. Eu gosto de ser prolixo, múltiplo linha, eu amo o jeito que chaves

just nest themselves so beautifully, I love to say a return true return false

apenas se aninham tão lindamente, eu amo para dizer um retorno verdadeiro retorno falso

you can write your code a different way but yeah and now I sort of feel like I

você pode escrever seu código de uma maneira diferente mas sim e agora eu meio que sinto que eu

should change it but I'm not going to

deve mudar isso, mas eu não vou

I'll do it later. Okay, so coming back let's see now we should see.. oops w is not

Eu vou fazer isso mais tarde. Ok, então voltando vamos ver agora devemos ver .. oops w não é

so I have to say ♪this dot this dot♫

então eu tenho que dizer ♪ este ponto esse ponto ♫

I always forget the this dot. Ok, now we should see.. now I can't really

Eu sempre esqueço o ponto. Está bem, agora devemos ver .. agora eu não posso realmente

tell if this is working, I can only assume this is working but if I do

diga se isso está funcionando, só posso assumir que isso está funcionando, mas se eu fizer

something where I say like this

algo onde eu digo assim

oh pipes.length, if I look at the length of that array it's two and it's

oh pipes.length, se eu olhar para o comprimento dessa matriz é dois e é

So even though I'm adding more and more they're getting deleted, ok, so we can be

Então, mesmo que eu esteja adicionando mais e mais eles estão sendo deletados, ok, então podemos ser

pretty sure that that's working.

Tenho certeza que isso está funcionando.

Ok now let's see, now we've got to do the exciting part here .. I mean this whole

Ok, agora vamos ver, agora temos que fazer o parte emocionante aqui .. eu quero dizer isso todo

thing hopefully is somewhat exciting but we've really got to get the gameplay

coisa, espero, é um pouco emocionante, mas nós realmente temos que começar a jogabilidade

mechanic where you..

mecânico onde você ..

it's going to give you some visual feedback if you hit one of those pipes.

ele vai te dar um pouco de visual feedback se você acertar um desses tubos.

So let's think about how we might write this, ultimately here's where I have

Então, vamos pensar em como podemos escrever isso, finalmente aqui é onde eu tenho

this single bird that says bird.update bird.show

este único pássaro que diz bird.update bird.show

and I'm also looping through all the pipes so one thing I could do, I don't

e também estou circulando por todo o canos então uma coisa que eu poderia fazer, eu não

really need to do it this way but I'm gonna I'm gonna move this loop first

realmente precisa fazer assim, mas eu sou Eu vou mover esse loop primeiro

just so the bird comes after and I'm going to say here I'm going to say if

só assim o pássaro vem depois e eu sou vai dizer aqui eu vou dizer se

pipes index i hits the bird

índice de tubos eu atinge o pássaro

then do something. I'm just going to say console.log("HIT"); so I need to have a

então faça algo. Só vou dizer console.log ("HIT"); então eu preciso ter um

function that determines if a pipe has hit the bird

função que determina se um tubo tem acertar o pássaro

so if looking at this bit of code you can see here what do I need to write?

Então, se olhar para este pedaço de código você posso ver aqui o que eu preciso escrever?

I need to write a function called hits and that function is going to be part of

Eu preciso escrever uma função chamada hits e essa função vai fazer parte

the pipe object and its going to receive a bird object as an argument

o objeto pipe e vai receber um objeto de ave como um argumento

so I'm gonna go to the pipe object and I'm going to write, I'm just going to write

então eu vou para o objeto pipe e eu sou vou escrever, só vou escrever

the function up there.. here, this.hits

a função lá em cima .. aqui, this.hits

I called it hits equals function bird and now I just need to check. What do I need

Eu chamei ele bate igual função pássaro e agora eu só preciso verificar. O que eu preciso

I need to check if bird.y is less than the top and bird.. or

Eu preciso verificar se bird.y é menor que o topo e o pássaro .. ou

or bird.y is greater than height

ou bird.y é maior que a altura

minus this.bottom. So if the bird is ever..

menos isso. Então, se o pássaro é sempre ..

if I come back here to my whiteboard if the bird is ever, right?

se eu voltar aqui para o meu quadro branco se o pássaro está sempre certo?

less than top or greater than height minus bottom here then it's kind of it's

menor que o topo ou maior que a altura menos fundo aqui, então é uma espécie de

hitting that.. it's hitting that pipe.

acertando isso .. está batendo naquele tubo.

So let's come back over here. Did I get that right is greater than height.. okay, so

Então vamos voltar aqui. Eu peguei esse direito é maior que a altura .. ok, então

then I want to say return true although this isn't good enough, right?

então eu quero dizer retorno verdadeiro embora isso não seja bom o suficiente, certo?

It's also got to be within the actual x-position

Também tem que estar dentro do real posição x

so we should also say and I uh I could I mean I could be much better about how I

por isso devemos também dizer e eu uh eu poderia significa que eu poderia ser muito melhor sobre como eu

construct this but I'm gonna put it inside here

construir isso, mas eu vou coloque aqui dentro

so let's just say it's within that stuff also lets now check if bird.x

então vamos apenas dizer que é dentro desse material também permite agora verificar se bird.x

it's x-position is greater than this.x and bird.x is less than this.x

a posição x é maior que isso.x e bird.x é menor que this.x

so I'm also just checking if it's in between the actual x-position of the

então eu também estou apenas verificando se está em entre a posição x real do

so if all of that is true I'm going to return true. You know am just working it out we

então, se tudo isso for verdade, voltarei verdade. Você sabe que estou apenas trabalhando fora nós

could.. I could.. this double if statement is kind of an awful way to write this

poderia .. eu poderia .. esta declaração dupla se é uma maneira horrível de escrever isso

and I could probably be more clever and I could write a separate function that

e eu provavelmente poderia ser mais inteligente e eu poderia escrever uma função separada que

just tests intersection between a circle and a rectangle but right now this will

apenas testa interseção entre um círculo e um retângulo, mas agora isso vai

be good enough for us right now and I look forward to hearing your

ser bom o suficiente para nós agora e eu estamos ansiosos para ouvir o seu

improvements and suggestions in the comments

melhorias e sugestões no comentários

so let's just see here if.. whoops,

então vamos apenas ver aqui se .. whoops,

right now I'm not seeing anything. Hit hit ahaa

agora eu não estou vendo nada. Hit atingiu ahaa

so this is basically working, you can see that anytime,

então isso está basicamente funcionando, você pode ver que a qualquer momento

this is gonna be hard; so let's actually give ourselves some

isso vai ser difícil; assim vamos realmente nos dar algum

visual feedback

feedback visual

if this is the case, let's write a variable called highlight set it equal

se este for o caso, vamos escrever um variável chamada destaque definir igual

let's also say this.highlight equals true and then under fill.. under show I'm going

vamos dizer também isso. verdade e, em seguida, sob preenchimento .. sob show eu vou

to say if this.highlight

para dizer se isso.

I'm going to say fill(2..), I'm gonna make it red

Vou dizer fill (2 ..), vou fazer vermelho

so let's just see if this gives us some nice visual feedback. Oh you know what I

então vamos apenas ver se isso nos dá algum bom feedback visual. Você sabe o que eu

never said highlight equal to false so watch it hits it

nunca disse destaque igual a falso assim veja isso acertar

so you know that's fine but I might want to actually also say

então você sabe que está tudo bem, mas eu posso querer para realmente dizer também

this.highlight equals false, hope it's not hitting it, so now here we go

this.highlight é igual a false, espero que seja não batendo, então agora vamos lá

it hits it you can see. So now I could add things like score

Acerta, você pode ver. Então agora eu poderia adicionar coisas como pontuação

I could be more careful about like I'm really only checking the center

Eu poderia ser mais cuidadoso sobre como eu sou realmente só verificando o centro

tada dada dada.. this is way too easy to play, oop, there we go. Okay so you get the

tada dada dada .. isso é muito fácil de jogue, oop, lá vamos nós. Ok, então você começa o

idea so I i think that I've kind of completed this and there's a lot of

idéia, então eu acho que eu meio que completou isso e há um monte de

improvements that would want to make to this in terms of being more thoughtful

melhorias que gostaria de fazer para isso em termos de ser mais pensativo

about checking that intersection to be a bit more precise good enough though..

sobre a verificação de que a intersecção para ser um pouco mais preciso bom o suficiente embora ..

seja um pouco ..

I could do a better job of picking the, the way that.. oh here's a difficult one;

Eu poderia fazer um trabalho melhor de escolher o a maneira que .. oh aqui é um difícil;

a better job of how I pick the top and bottom heights of these rectangles

um trabalho melhor de como eu escolho o topo e alturas inferiores desses retângulos

I could add score, right? You start with a score maybe as time goes on your

Eu poderia adicionar pontuação, certo? Você começa com uma pontuação talvez como o tempo passa no seu

score goes up every time you hit a pipe the score goes down, all those things.

pontuação sobe toda vez que você acertar um cano a pontuação cai, todas essas coisas.

I would say umm ask me your questions in the comments, suggest, make versions of

Eu diria umm me fazer suas perguntas em os comentários, sugerir, fazer versões de

this and tweet me your exciting, doesn't you know.. you could make a nice bird

isso e twittar-me sua emocionante, você não sabe .. você poderia fazer um belo pássaro

design you can reimagine this entire game to not be a bird and pipes but to be

projetar você pode reimaginar todo este jogo para não ser um pássaro e tubulações, mas para ser

you know a flower and rainbows I don't know how that would work

você conhece uma flor e arco-íris eu não sabe como isso funcionaria

tweet me and share with me all of your interesting variations on this and

tweet me e compartilhar comigo todos suas variações interessantes sobre isso e

I'll maybe come back and do some Q&A video where I follow up on some of your

Talvez eu volte e faça algumas perguntas e respostas vídeo onde eu continuo em alguns dos seus

questions and make some improvements to this flappy bird challenge. Okay, thanks

perguntas e fazer algumas melhorias para este desafio de pássaro abano. Ok, obrigado

for watching and I will see you in a future coding challenge.

para assistir e eu vou te ver em um futuro desafio de codificação.

Subtitles by the Amara.org community

Legendas pela comunidade Amara.org

Similar videos:

Professionally Light Your Videos Like MKBHD, iJustine & More!
michael tobin
3.4K views 273 likes 2 dislikes 27 Feb 202146% match

The Beginner's Guide to Excel - Excel Basics Tutorial
Technology for Teachers and Students
13.7M views 214K likes 4.3K dislikes 24 Apr 201746% match

Bringing BACK The iPhone Headphone Jack - in China
Strange Parts
12.9M views 446.9K likes 11.4K dislikes 06 Sep 201746% match

How We Added Wireless Charging to an iPhone - in China
Strange Parts
2.4M views 59.7K likes 1.1K dislikes 22 Aug 201846% match

How to Buy a Used Car for $300 (Runs and Drives)
ChrisFix
11.1M views 224.3K likes 5.6K dislikes 21 Mar 201845% match

Coding Challenge #3: The Snake Game
The Coding Train
3.1M views 60.4K likes 1.8K dislikes 20 Apr 201645% match

(Python tkinter GUI programming for beginner) 6. target game making + exe file
초보코딩
1K views 19 likes 0 dislikes 13 Aug 202045% match

RESIDENT EVIL 2 REMAKE Walkthrough Gameplay Part 5 LEON MEETS LICKER [RE2 Leon]
PeteTV
154 views 12 likes 1 dislikes 11 Feb 201944% match

Functions
CS50
46K views 122 likes 7 dislikes 07 Oct 201544% match

Five Nights at Freddy's: Sister Location - Golden Freddy Mode
Markiplier
13.2M views 309.9K likes 2.9K dislikes 22 Dec 201644% match

My Average Day 2018 (Raw Video)
TheReportOfTheWeek
1.6M views 52.9K likes 1.4K dislikes 28 Jun 201844% match

Double Exposure Cinemagraph - Photoshop Tutorial
LetsPhotoshop
2.2M views 50.6K likes -1 dislikes 21 May 201843% match

i only ate TOYS"R"US foods for 24 hours !!!
Raphael Gomes
1.8M views 42.9K likes 1.3K dislikes 04 Apr 201843% match

RESIDENT EVIL 2 REMAKE Walkthrough Gameplay Part 3 MEETING CLAIRE [RE2 LEON]
PeteTV
268 views 19 likes 0 dislikes 01 Feb 201943% match

IP
CS50
15.4K views 91 likes 2 dislikes 26 Oct 201543% match

Scrap Yard Run - Make Money Scrapping Metal *(Plus VidVulture Viewer Bonus!)
VidVulture
5.3K views 498 likes 41 dislikes 05 Jan 202143% match

Undertale Gaster Secrets
Merg
5.4M views 94.2K likes 0 dislikes 08 Jun 201642% match

MKS sGen L V2.0 - A4988/DRV8825 Step/Dir configuration
Ed's 3d Tech
6.3K views 108 likes 0 dislikes 17 Sep 202042% match

BTT GTR v1.0/M5 v1.0 - TFTS
Ed's 3d Tech
3K views 78 likes 3 dislikes 04 Aug 202042% match

Anthem #520 (한국어) ONV 🔴 Pass7 Opening - Rise of Kingdoms ROK Fleisch
Fleisch
3.3K views 105 likes 1 dislikes 11 Jan 202142% match

Learning Functional Programming with JavaScript - Anjana Vakil - JSUnconf
JSConf
2.2M views 47.5K likes 1.5K dislikes 14 Jun 201642% match

Draw ANY Head Type with the Loomis Method - Part 2
Proko
2.7M views 75.5K likes 885 dislikes 14 Dec 201842% match

The building of Alrekr
michaelcthulhu
8.8M views 78.4K likes 4K dislikes 17 Jun 201542% match

DOM
CS50
9.8K views 47 likes 1 dislikes 10 Nov 201542% match

AFTER EFFECTS BASICS
Peter McKinnon
5M views 161.2K likes 4.6K dislikes 31 Jul 201842% match

Making a Guitar | Handcrafted Woodworking | Où se trouve: Greenfield Guitars
Stereokroma
8.9M views 115.3K likes 3.5K dislikes 11 Sep 201642% match

SKR 1.4 - TMC2209 v1.2
Ed's 3d Tech
20.4K views 316 likes 16 dislikes 06 Jun 202042% match

UNBOXING! Sasuke 👿 Susanoo & Snake 🐍 Summon Statue by BOX Studios
BAM Collectibles
138K views 4.8K likes 47 dislikes 15 Jan 202141% match

하늘합성을 자동으로?/사진가에게 필요한 포토샵2021업데이트 신기능 살펴보기 ifyouwant 장은

1.9K views 38 likes 5 dislikes 21 Oct 202041% match

[돈워리스쿨2 EP.13] 포스트 코로나 시대! 글로벌 기업들은 벌써 찜콩한 최첨단 기술은? / 돈워리스쿨2
스브스뉴스 SUBUSUNEWS
42.5K views 713 likes 32 dislikes 01 Jun 202041% match

Settings Privacy About Contact Donate