Como criar o jogo da cobrinha com JavaScript e HTML | JavaScript para iniciantes

No video

Como criar o jogo da cobrinha com JavaScript e HTML | JavaScript para iniciantes - Tutorial

Рет қаралды 56,180

Жыл бұрын

Fala, pessoal!
Nesse vídeo, vamos criar o clássico jogo da cobrinha utilizando JavaScript, HTML e CSS. Através do poderoso elemento canvas do HTML5, vamos construir uma experiência interativa muito legal!
Vamos fazer tudo passo a passo, desde a configuração do canvas até a implementação da lógica do jogo. Vamos aprender como lidar com eventos de teclado, criar o movimento da cobrinha, detectar colisões e atualizar o tabuleiro em tempo real.
Com a combinação do JavaScript para a lógica, o CSS para o estilo e o elemento canvas para a renderização do jogo, você terá todas as ferramentas necessárias para criar seus próprios projetos futuro.
Espero muito que gostem!
Repositório do projeto:
github.com/man...
#javascript #css #html #gamedev

Пікірлер: 152

@moisesjunior6312 10 ай бұрын

To pagando faculdade só pelo diploma mesmo, pq o verdadeiro ensinamento eu achei de graça nessa canal kkkkkkkkkkk, EXECELENTE VEI MDS DO CÉU

@Matheustnt 5 ай бұрын

Mas quem não tem diploma tem mais moral no mercado mano, falo por experiência 😅

@user-js2ls2mp6v 5 ай бұрын

Gente será que é só eu que acho esse canal INCRÍVEL. a didática desse cara é a melhor que eu ja vi na minha vida.

@pedroaragao7633 Жыл бұрын

A melhor didática do youtube como sempre. Brabo demais. Você inspira muita gente meu mano.

@ManualdoDev Жыл бұрын

Que isso... muito obrigado, Pedro! Valeu demais pelo apoio! Tamo junto!

@sophiacodes Ай бұрын

Moço, Deus abençoe, está salvando meu amigo e eu com o projeto final do semestre!! A didática tá fantástica 🫡🤯

@ManualdoDev Ай бұрын

Sucesso pra vocês, Sophia! :D

@leticiasildozo3269 8 ай бұрын

Uma dica bem simples q ocorreu cmg, quem estiver com dificuldade em somar na parte no (score--value), é so chamar o span novamente igual ele faz (finalscore). Ou seja ficará assim (".score--value > span")

@jesusmarcostomaz3966 5 ай бұрын

Meus Parabéns, tremenda didática, explicação muito completa.

@blackMiror_007 Жыл бұрын

Show demais, projetos assim fazem com o que a gente aprenda coisas mais avançadas não vistas ainda.

@viniciusribeiro9187 2 ай бұрын

Cara sua didática é impecável, parabéns melhor que muitos cursos, muita benção em sua vida

@ManualdoDev 2 ай бұрын

Muito obrigado, Vinicius! Tamo junto!

@viniciusribeiro9187 2 ай бұрын

@@ManualdoDev Dev adaptei seu projeto com reconhecimento de voz, tipo uma cobra-cega mesmo hahahahah pode me ajudar com uma dúvida, como faz para adicionar um caminho infinito, meu objetivo é que ao invés que a cobra tenha uma colisão com o final do grid, gostaria que ela surgisse do outro lado igual ao pacman sabe

@luanjose5005 Жыл бұрын

Muito obrigado pelo seu vídeo, consigo aprender muito com seus projetos, espero que futuramente você possa trazer mais vídeos assim

@geansoares007 11 ай бұрын

Mais um projetinho f0d@ concluído com sucesso. Melhor canal de Programação do KZfaq. Agradeço demais pelo tempo, paciência e por compartilhar seu conhecimento conosco. Abraço👊

@ManualdoDev 10 ай бұрын

Eu que agradeço o apoio, Gean. Valeu demais! Tamo junto!

@guiipdr Жыл бұрын

Projetinho muito divertido de se fazer e com um um ótimo aprendizado! didática muito boa amigo, parabéns por mais uma aula incrível.

@ManualdoDev Жыл бұрын

Valeu demais, Guilherme! Tamo junto!

@felipe39827786 Жыл бұрын

Didática otima, muito bom o projeto e uma explicação sensacional, Parabens !

@CarlosBatistaHP Жыл бұрын

Cara, gostei muito do projeto e me diverti programando junto. Você explica muito bem :)

@Sergio_lf Жыл бұрын

Parabéns, sua didática é incrível. Continue assim TOP demais.

@ManualdoDev Жыл бұрын

Muito obrigado, Sergio!

@iarley823 7 ай бұрын

Ja vi varios videos de cobrinha, mas vc foi o unico que explicou a logica além de fazer, mt bom

@antenassatellite 5 ай бұрын

Caraka nunca foi tão fácil apreender JS, parabéns você é d+++++++++++.💯

@paulofranco7844 Жыл бұрын

Obrigado pela SUPER AULA, bem explicada!

@antoniopereira2721 8 ай бұрын

Conteúdo high level! Este é o melhor canal de programação dentre todos que já vi.

@Gb_MusicList 6 ай бұрын

const snake = [ {x:200, y:200}, {x:230, y:200}, {x:260, y:200} ] parece muito bobo mas estava me matando para achar essa virgula no final kkkkkkkk, codigo dando erro e eu procurando. parabens pelo trabalho cara muito bomm mesmo, sou mais um que esta fazendo faculdade pelo diploma porque videos como esse seu que realmente nos motiva a continuar. obrigado mesmo.!!

@Radsonb1 6 ай бұрын

Estou anestesiado com esse projeto muito obrigado me ajudou a entender algumas funções sobre javaScript continue sempre não para!

@samuelodebaran2570 Жыл бұрын

Que projeto!!! Muito bom seus projetos e explicações

@ManualdoDev Жыл бұрын

Muito obrigado, Samuel! Tamo junto!

@antoniolemos316__ 4 ай бұрын

Didática muito boa, explicou muito bem os conceitos de array, objetos e funções. Ps: todo o conteúdo foi muito bem explicado parabéns!

@atyllakossatz1746 11 ай бұрын

Conteúdo de altíssima qualidade. Didática perfeita! Parabéns pelo trabalho.

@giovannymorais Жыл бұрын

Incrível, projeto divertido💯

@sidneyalves5393 10 ай бұрын

tudo muito bem didático uma forma bem clara de explicar algo que para um iniciante parece bem complexo, ganhou mais um inscrito, gostaria de ver mais tutoriais nesse estilo, parabéns pelo conteúdo.

@franksilva2969 7 ай бұрын

Mano, obg pelos tutoriais! Além de acelerar o aprendizado pela pratica, nos da a chance de simular o que é o trabalho de um programador. Pois dificilmente você vai fazer algo do zero, você grande parte da vezes, vai participar de um projeto já em produção, e a sua função será implementar novas funções, retirar bugs e etc. E com os seus tutorias, podemos fazer justamente isso, copiar parte da logica, mas pensar em novas maneiras de fazer a mesma coisa ou em novasa funções... eu acabo de iniciar a versão para mobile, então vou ter que mudar o canvas e pensar em uma maneira para o usuario controlar a snake. Enfim, vlw mesmo, por comprtilhar conhecimento! Eu pretendo fazer o mesma, assim que achar que consigo agregar conhecimento.

@luisalfredoribeiro 4 ай бұрын

Muito bom, parabéns.... Otima didática.

@joffrota85 Жыл бұрын

Muito Bom! Ótima didática!

@antoniocarlosdiniz Жыл бұрын

Vídeo sempre com muito aprendizado, eu gostaria de deixar uma dica de vídeo, Como fazer uma enquete com HTML/CSS & JAVASCRIPT, acho que ia ser interessante.

@devdytiagoaragao7109 Жыл бұрын

Parabéns, muito didática as sua explicação !

@henriquecosmo9920 10 ай бұрын

Muito bom, vou tentar adicionar a dificuldade e o armazenamento dos pontos, conteudo incrivel!!

@ReDrums88 10 ай бұрын

Parabéns pelo excelente conteúdo. Não sabia usar a tag canvas, pra mim foi um grande aprendizado. Valew!!

@ManualdoDev 10 ай бұрын

Tamo junto, Renan!

@esthersilva6952 11 ай бұрын

adoreeeeeeeiiii mano, vou te seguir, quando crescer quero ser igual vooce

@ManualdoDev 10 ай бұрын

hahahaha você pode ser beeeem mais

@bomba8892 Жыл бұрын

Ótimo vídeo, man! Vou tentar quebrar a cabeça pra fazer aqui também. Kkkkkkk

@ManualdoDev Жыл бұрын

Aí simm heheh

@mayksilvaofc Жыл бұрын

muito top, cai de paraquedas aqui é já cheguei com o aroba de número 600 likes , mais só de lembrar do classico jogo da cobrinha parei pra vê é simplesmente gostei de mais, estou começando nesse mudo de html 1 vez que vi to tentado criar um site de delivery... irei acompanhar você agora :D

@gabrielsantos-nd5wb Жыл бұрын

Que video sensasional cara, didática espetacular;

@camilaleutz 11 ай бұрын

Adorei, é o segundo projeto que faço com vc, e aprendi vários conceitos! Muito obrigada!

@ManualdoDev 10 ай бұрын

Eu que agradeço seu apoio, Camila! Valeu demais!

@camilaleutz 10 ай бұрын

@@ManualdoDev moço! Estou aprendendo react! Bem que vc poderia ensinar algumas coisas né?

@camilaleutz 10 ай бұрын

@@ManualdoDev eu já fiz seu carrinho de compras 🥰 quero outra coisa agora mas ainda não sei o que…

@eduardospek Жыл бұрын

Parabéns pela didática!

@ManualdoDev Жыл бұрын

Valeu demais, Eduardo!

@arthur-candeia Жыл бұрын

Brabo demais!

@yamazaki8145 7 ай бұрын

cara nunca para de fazer video nao por favor

@socratesg.6466 Жыл бұрын

Faz mais namoraaaal . Ficou muito top. Quero aprender a fazer alguns jogos com javascript para eu analisar se vale a pena focar em desenvolvimento do jogos

@diegothomas3657 6 ай бұрын

Que conteúdo foda! 👏🏻

@pedroholanda8604 Жыл бұрын

mto bom mesmo! Didática impecável!

@viniciuslima9814 Жыл бұрын

Nem vi o vídeo ainda mas ja vou deixar salvo aqui para acompanhar, porque ja sei que vai ser excelente

@ManualdoDev Жыл бұрын

Muito obrigado pelo apoio, Vinicius! Valeu demais!

@viniciuslima9814 Жыл бұрын

@@ManualdoDev tmj!

@Kelvin_jfn Ай бұрын

DÁ VONTADE DE ABRAÇAR O ADM DAQUI E FALAR OBRIGADO PELO CONTÉUDO ACEITAR SER MEU PAI E ME TREINAR SENSEI Brincadeira, ótimo conteúdo mesmo cara. Obrigado.

@ManualdoDev Ай бұрын

Lkkkkkkk tamo junto Kelvin!

@junin_da_xurikuen 10 ай бұрын

Excelente projeto

@zolkmusic Жыл бұрын

Eu amo esse canal!

@y___tre Жыл бұрын

muito boa aulaaa! legal

@RamonRodrigo-jw4pq 9 ай бұрын

incrivel esse projeto!

@igoroficial0007 3 ай бұрын

eu demorei 5 dias pra assistir, fui assistindo aos poucos e não entendi nada mas gostei muito, to começando a faculdade agora e ainda to no HTML e CSS, mas ja estou muito ansioso pra aprende JS

@ManualdoDev 3 ай бұрын

Booooa, Igor! Sucesso pra você nesse caminho!

@dhsplays07 10 ай бұрын

Cara sinceramente vc tem o dom de ensinar. Cada codigo cada detalhe . Se todo professor fosse assim nosso mundo seria muito melhor. Por favor fassa um curso de js. Eu te suplico. Comprei o da danki mas é uma verdadeira BOSTA. Mas tenho certeza que você seria incrível dando um curso desses.

@ManualdoDev 10 ай бұрын

Já comecei a produzir em! E que tal se fosse de graça? :O

@dhsplays07 10 ай бұрын

@@ManualdoDev simplesmente incrível irmão muito obrigado por existir. Mas ai posso lançar um desafio? Conhece o jogo pokemon delugue? Ele é um joguinho simples que roda em servidor mesmo. Eu to fazendo ele em js e queria ver vc fazendo um desses. É um projeto grande mas tenho certeza que iria agregar muito

@andersonsimioni8130 3 ай бұрын

um trabalho de muita qualidade, parabens.. mas so queria saber como faz aqueles simbolos diferentes?. na parte do (keydown) ( if (key == "ArrowLeft" ?? direction ?? "right"){ direction = "left" )

@sanaturato Ай бұрын

Olá, eu sou estudando de desenvolvimento de jogos digitas, to no inicio da graduação ainda, gostei muito de fazer esse projeto e ainda adicionei ao codigo uma função pra incrementar a velocidade do jogo em +1 a cada vez que a cobra come a comida, entretanto o navegador trava algumas vezes quando jogo ta rodando, eu mudei o loop de setTimeout para setInterval e mesmo assim o navegador ainda trava alguma vezes.

@gilbertking 9 ай бұрын

Bom dia Dev. Seu trabalho é fantástico. Sou Professor de Matemática e Tecnologia e me inspirei no seu vídeo para fazer um trabalho parecido com a garotada, e a turma adorou ! Gostaria muito de poder entrar em contato contigo para dividir a experiência e poder tirar algumas dúvidas. Forte Abraço. Vida Longa e Próspera.

@ThiagoVinicius-pe7qm 8 ай бұрын

Para adicionar os eventos de teclado tente clicar em console e depois em Enter, depois clica na pagina web onde está sendo exibido o jogo e comece a apertar as teclas que serão os comandos de direção.

@maicontavares9147 11 ай бұрын

Sensacional

@patriciajanne6669 9 ай бұрын

Você fala igual a anya de Spy x Family kkssk muito fofo

@ManualdoDev 9 ай бұрын

kkkkkkkk

@BoOmPe Жыл бұрын

Cara! Como isso é possível? Você é muito bom! Me aconselha algum curso on-line pra eu aprender tudo isso?

@rafael98php Жыл бұрын

Cara não é 1 ou 2 curso que vai te ensinar isso aí não. Isso é com muita experiência. fora que ele deve ter demorado pra criar isso aí, no vídeo obviamente ele já tinha tudo anotado, criado e testado.

@N0TZ3R0 Жыл бұрын

Muito top 😃

@isabellefernandes1800 Жыл бұрын

Like direto sem nem ver o video só pelo jogo da cobrinha

@haypehs7751 10 ай бұрын

Ajudou muito !

@denismoreira4026 Жыл бұрын

Muito top!!!

@favanzzo Жыл бұрын

bora para mais um!

@ManualdoDev Жыл бұрын

Boraaa!

@TelliscisHilstons 11 ай бұрын

Que aula!

@kalebdasilvavitorino2877 4 ай бұрын

gostaria de saber se dar para colocar esse jogo na play store. Estou criando um jogo em js também, mas as pessoas jogam mais no celular e eu queria disponibilizar esse jogo no celular devido a isso

@tiagoleomil4329 8 ай бұрын

uma observação, quando perde no jogo e aparece o game over da pra continuar "jogando", o score continua aumentando só que com a estilização do game over na frente da tela

@tiagoleomil4329 8 ай бұрын

fui tentar mexer nisso, a cobrinha sumiu, socorro kkkkkkk

@tiagoleomil4329 8 ай бұрын

o problema: uma {} ao inves de [ ], eu te amo programação

@matheustaconi7326 Жыл бұрын

Muito bom!!

@hstecnologia Жыл бұрын

Primeiro nesse canal top demais, esse cara é fera

@ManualdoDev Жыл бұрын

Valeu demais pelo apoio, meu amigo!

@fezeeGz Жыл бұрын

tu poderia trazer um aplicaçao full stack né man, tipo um site de aluguel de carros, sem e-commerce porque ja tem muitos kk

@ManualdoDev Жыл бұрын

É uma boa em!

@TaldoThurzin 4 ай бұрын

Alguém consegue me ajudar, assim que adiciono a função checkEat, a cobrinha trava, e não anda mais, mas se eu paro de executar essa função, a cobrinha volta a funcionar...

@welsonpaiva7204 5 ай бұрын

Poderia fazer um jogo de xadrez como JS?

@ThiagoSantos-kh2zy 20 күн бұрын

If (key == "ArrowRight" && direction != "right") Sinal de diferente que ele fala é !=

@RonaldoOn2R Жыл бұрын

Parabéns! estou fascinado com estes projetos/aulas. Preciso de uma dica, nome não sai o som tem como descobrir o porque?

@JonathanGoncalvesMarzurkiewicz 4 ай бұрын

quando a cobra esta indo para cima e eu clico rapido para ela ir pro lado e pra baixo, ela entra denro dela mesma. Isso acontece com todas as direções. Alguem sabe como resolver?

@user-dt5ds7wz7j 7 ай бұрын

alguem poderia me dizer qual simbolo é aquele que ele coloca depois do direction no minutio 38:39

@CPT_RODRIGUEZ Ай бұрын

Gente, alguém me ajuda. Na parte de aparecer a cobrinha não tá indo na parte do código Const drawSnake = () ==> { ctz.fillstyle = "#ddd" ctz.fillrect(snake[0].x, snake[0].y, size, size)} drawSnake()

@fisher2251 11 ай бұрын

Muito daora

@gabrielpk7182 10 күн бұрын

Da pra colocar botões pra poder jogar pelo celular ?

@Epic_Downloads 11 ай бұрын

hey, vc é minha inspiração na próxima sera que oce pode usar java? ou php

@TaldoThurzin 4 ай бұрын

Fala meu mano, por curiosidade, qual é o tema do seu vs?

@victordaniel320 3 ай бұрын

qual foi a fonte ultilizada?

@silveira22 Жыл бұрын

sensacional! qual tema você usa no vs code meu amigo?

@ManualdoDev Жыл бұрын

One Dark Pro :D

@lucasdossantossantato5992 5 ай бұрын

Não consegui assistir o video inteiro, mas essa recursão não vai gerar um stack overflow?

@jozimarhenriques6848 10 ай бұрын

Ótimo projeto, porém você deixou pegadinhas para solucionarmos, como por exemplo se der comando após fim de jogo dá para continuar jogando infinitamente mesmo que colida com os blocos(basta não pressionar o botão). Conteúdo excelente.

@ManualdoDev 10 ай бұрын

Será que foi pegadinha ou eu só não percebi isso? hahahahah Boa, Jozimar!

@MB-fi5tl Жыл бұрын

Sei que fora só tema mas e site ensinara? Queria tbm saber como posso contratar para fazer um site?

@fernandosantos3576 Жыл бұрын

No .css a fonte a ser usada está incorrectamente declarada como Poppings

@JoaoLucas-ho4gz Жыл бұрын

qual é a imagem da cobra ?

@cesarhfborges 6 ай бұрын

Era so fazer um filter por x e y e ver se o resultado é maior que 1, se sim é pq bateu....

@joaogrilo1772 Ай бұрын

Só o meu que não saiu o áudio?

@Lucas.lordano 6 ай бұрын

Manda a URL do início por favor

@vini-pbs 10 ай бұрын

Mano, qual fonte esta usando no vs code?

@mateuzins4mprp 4 ай бұрын

Funciona sem fonte?

@duduucortes Жыл бұрын

Mano, que tema você usa no vscode? vídeo brabo dms mano!

@ManualdoDev Жыл бұрын

One Dark Pro :D

@stiveherres7821 10 ай бұрын

Não entendi qual esse link que ele colocou no style.cass na primeira linha

@ManualdoDev 10 ай бұрын

Esse link é só para importar uma fonte lá do Google Fonts. Não influencia em nada no funcionamento do projeto. Só coloquei para usar uma fonte personalizada