Snake Game com JavaScript ( Jogo da Cobrinha )- Programador Br - Ep.29
Вставка
- Опубліковано 14 гру 2024
- Esse é mais um vídeo técnico aqui no Canal, e dessa vez com joguinho muito famoso a alguns anos atrás, o Snake Game, ou jogo da cobrinha, como preferir.
Nesse vídeo em ensino passo a passo, como recria o Snake Game.
Link para o código criado no vídeo.
pastebin.com/A...
programadorbr.c...
programadorbr.com/
/ progbr
Parabéns, tô iniciando no js e fico cada vez mais motivado com a linguagem quando vejo o poder dela
O programador br criou um canvas gigantesco para evitar um "problema" que o canvas tem.
O canvas por padrão borra os pixels dele para evitar imagens de baixa qualidade e tudo pixelizado, isso se chama linear filtering.
pra evitar isso vcs podem criar u. canvas normal de 40x40 pixels, e no css colocar a regra: image-endering: pixelated; que já resolve isso ae.
fazendo isso facilita na hora de move a cobrinha por ai
Cara, valeu pelo exemplo.
Eu consegui ampliar e fazer esse jogo maior, melhor e mais interessante Graças a suas dicas, obrigado ! 👍🏻1️⃣0️⃣
Difícil alguém explicar os códigos linha por linha, muito grato por compartilhar conosco teus conhecimentos!
Traz um jogo de nave espacial, onde terá a nave que a gente controla os mísseis que ela atira e os inimigos.
graças a sua didática eu consegui criar esse primeiro joguinho, não estudo em alguma faculdade ligada a assuntos de programação ou algo do tipo, apenas sou curioso rs muito obrigado pela experiência e sucesso com o canal e projetos
Muito massa o vídeo! Mas pra ficar melhor, seria legal impedir que a posição da maça fosse sorteada "embaixo" da cauda da cobrinha. Isso pode ser visto aos 28:09.
mas nao se esqueça que e um jogo de iniciantes ou seja tem que ser o mais simples possivel
Esses 30 minutos passou bem rápido, obrigado pelo vídeo
Muito bom vídeo. Parabéns pelo trabalho. Estou começando em a estudar JS. Consegui fazer o jogo direitinho e já tenho ideias para implementar. Valeu!
Depois deste vídeo, refiz o código, lendo linha por linha e posso dizer que me ajudou a entender o que cada linha de código estava fazendo e isso me ajudou a entender JS
Esqueci de dize que adorei o video, ajudou bastante para treinar JS que estou aprendendo agora.
Assistindo depois de 4 anos kkkk, ficou muito bom o video, só tem um bug que não sei arrumar, se ela ta indo pra esquerda e vc aperta a tecla da direita ela para, pq no codigo entende que a cabeça bateu no corpo.
Parabéns pelo conteúdo! Se me permite contribuir, eu iria evitar usar os nomes das variáveis tão reduzidos para facilitar o entendimento e até manutenções futuras, se fosse o caso. Outra coisa é a separação em pequenas funções que fossem responsáveis pelo comportamento do jogo, como moverCobrinha, terminarJogo e assim por diante. No mais o vídeo é muito legal porque são coisas que não fazemos no dia a dia com Javascript, mas ajudam muito no entendimento de conceitos importantes.
Obrigado por compartilhar teu conhecimento ótima explicação aprendi bastante!!!
Cara, vou tentar "recriar" ele, nunca mexi com manipulação desse jeito, e vou tentar fazer uma modificações, muito massa.
Muito top! Conteúdo excelente! Por favor traga mais tutoriais de jogos, é difícil encontrar um conteúdo bom como o seu. Se puder trazer tutoriais de aplicativos Android seria muito bom também! Abraços!
"Cabeça", "Peça", "Cobra", "Se a cabeça ta batendo no rabo", "se algum ele está na mesma posição da minha cabeça", "preciso fazer o movimento da nossa cobra"
depois de um tempo sem entender o por que de não estar aparecendo como estava so 22:25
percebi a importância de seguir esse tutorial com console do navegador aberto, pra apontar quais variáveis eu tinha escrito errado de alguma forma e_e
A cobrinha não aparece, já copiei o código que está na descrição e nada muda já testei e em outra maquina também ,alguma ideia ?
Qual programa foi usado pra representar a cobrinha no início
muito bom!! faltou ensinar colocar pontuação, mas é só um detalhe.
isso é muito facil confia
alguem ai sabe o cosigo para add o placar no jogo?
Alguém poderia me informar como chega nessa pasta branca aí do lado? Queria visualizar meu códico tmb.
live server
Galera, estou tentando inserir uma imagem no lugar do vermelho na maçã mas n estou achando um documento bom. Alguma opinião?
Muito massa seu vídeo.
Boa noite nego coloquei tudo certinho só que o quadrado preto não aparece help my.
como eu troco a movimentacao das setas pela movimentacao de qualquer outra tecla ki eu queira?
Acha uma boa aprender javascript para criar jogos 2d? Quando pesquiso ou converso com alguém sobre isso, todos dizem para eu estudar C# e uma Unity da vida, mas queria muito aprender web dev e criar jogos 2d, acha que estou viajando?
Obrigado por compartilhar o conhecimento .
Temos que verificar se a cabeça não esta batendo no rabo!🥲😆😅 Definidamente não tenho maturidade para isso....
Você é top mestre, parabéns 🎊 🎊
o event.keyCode foi desconciderado , alguem sabe por quasl podemos substituir ???
Parece hierógrafos egípcios kkkkkk não entendo nada de programação, mas cho legal.
Muito bom
Nossa Muito obrigado de coração.
Muito obrigado, consegui.
ta quase pronto, só falta eu entender pq a cobra vai se esticando pelo tabuleiro sem pegar as peças kkkk
qual o nome desse app que ele usa no inicio?
kkkk Mto legal!!! Show de bola!!!
6:48 a tela nao ficou preta
o meu tbm n ficou, ja fiz mais de 5 vezes, alguem sabe o pq?
o meu tava igual, mas era pq eu tinha feito o black como uma function e nao um valor em si kk
Procura bem no teu codigo, JavaScript e uma linha de fonte muito sensitiva, maiusculas e minusculas fazem toda a diferenca, como tambem estes dois parenteses - ' ' ou " "
@@maurocoelho300 ss isso é vdd, eu ja revisei o codigo todo e ate usei um editor em tempo real pra ver se eu achava o problema, mais n resolveu, talvez isso seja um bug do google chroma, vou tentar dinovo e se conseguir achar o problema, eu venho dizer qual era...
@@francieleaparecida899 Verifica a ver se isto ajuda, eu uso o software Visual Studio Code (icone azul) e uso o browser microsoft Edge, experimenta. O código funcionou perfeitamente.
O meu não fico com tela preta no início oque será pode ter acontecido
Uma pergunta, quando você dá o push na posiçao atual da cabeça, teoricamente as demais partes do corpo não irão ocupar a mesma posiçao que ela? Como é possível formar esse rastro?
Não pq px e py são atualizados a cada loop. E ai a posição não bate.
SHOW DE BOLA MANO...
Qual programa você usou?
O meu nunca funciona.
Aparece sempre esse erro
Uncaught TypeError: stg.getContext is not a function
at scripit.js:2:21
Sensacional!
Fala xará, beleza? Num tira esse vídeo daqui não heim... rsrs
Então, to com uma dúvida... Aos 17:34, eu entendi o pq do .x e .y, mas só não entendi como que funcionam, já que nesse momento do jogo, não foi feito o push do x e do y pro trail ainda, o x e y ainda não entraram em um objeto, como que eles se tornam propriedades nessa altura do programa antes de estarem declarados como propriedade em um objeto? Resumindo, aos 21:17, como que o x e o y podem ser usados dentro do for (na linha 57 e 58) sendo que eles só foram declarados como propriedades em um objeto, bem depois lá na linha 64.
Isso acontece porque o código dentro do "for" só é executado se a variável "i" for menor que a quantidade de itens dentro do array "trail" (i < trail.length). Como no início do jogo o array "trail" está vazio, e a variável "i" no "for" sempre começa com valor zero, a expressão "i < trail.length" é falsa.
o codeacademy é bom pra aprende a programar? da pra arrumar um trabalho com ele depois de terminar? bacana o vídeo vou tentar depois
Olá Cedrio, você pode começar por essa playlist que eu preparei aqui. Abraços
ua-cam.com/video/HXddFUe6VPU/v-deo.html
beleza vo conferi
Ficou legal!
alguem pode me ajudar com esse problema?
codigo:
problema:'}' expected.
eu so coloquei uma parte pequena do codigo
Cara estou super empolgado com essa parada de game que você fez, será que você poderia fazer mais conteúdo sobre. Outra coisa mercado de app para games é muito saturado?
Fala Daniel.... Me dê alguma sugestão que eu ficarei feliz em trazer aqui pro canal.
Quanto ao Lance de saturado, isso não existe em NENHUM mercado.
Uma parada que eu levo para minha vida, e talvez eu deva fazer um vídeo sobre isso, é que as pessoas são medianas de forma geral, e por isso vc não deve tomar nenhuma decisão baseado em opinião de massa.
Vamos falar do mercado de games mobile. Os jogos mais baixados do mundo tem mais de 1 milhão de downloads por DIA. Se você tiver um bom jogo, com uma boa estratégia de monetização, com 1 milhão de downloads vc muda completamente sua vida. Ou seja, você não precisa ter um jogo disputando os primeiros lugares. Para vc ter uma ideia, o jogo que esta na posição 400 dos mais baixados na App Store, teve 300k downloads em um mês. Isso da mais de 10.000 novos usuários por dia.
É um mercado incrível, mas duas coisas vc tem que ter em mente. Você não tem que querer fazer o jogo top do momento no inicio, e tem que gastar muito mais tempo em estratégia e marketing do que fazendo o jogo.
Show, percebi que alguns canais de programação que abordam esse assunto acabam tendo mais view e curtidas por isso resolvi passar essa dica para você, hoje estou procurando por animação com sprite, acho que seria uma boa.
Nesse caso sai um pouco do foco atual do meu canal. É algo muito específico.
@@Programadorbr olá cara, olhando seu código eu percebir que vc usou a estrutura condicional switch, queria entender pq vc usou ela e não a forma mais conhecida IF/ELSE.
Obs:sou iniciante.
se eu quiser coloar obstáculos no jogo como faço
top
👏👏👏👏👏👊
Fala galera, tudo bom? Para fazer uma alteração simples, por exemplo, trocar o interval de 80(fácil) 120(medio) 180 (difícil) eu coloco um window.alert mas nao consigo fazer. alguém ajudar? o que alterar para ter estes 3 níveis de dificuldade?
não vai te responder a única preocupação são views.
como eu faço para pegar o link do google para abrir o projeto? que nem nessa parte ae 6:46
Vc tem que ir na pasta onde vc salvo arquivo do projeto
Igor, fiz ontem esse game e tem um probleminha q ñ sei solucionar... olhei o source, e tb tem ahhaha
quando a cobra está indo para direita e ou esquerda...e vc aperta a seta para direção oposta (esquerda ou direita), ela para e volta ao zero, se ela estiver grande, volta ao tamanho 5, e o mesmo vale pra cima e baixo.
mas curti o vid.. vlw
Sim... é pq o algoritmo entende que ela bateu em uma peça do corpo... Mas tenta resolver ai que é um bom exercicio.
E ai Guilherme, eu fiz uma versão baseado no tutorial acima com esta correção, também estou estudando JS a pouco tempo.
codepen.io/digoart/full/VgoVmj
Este Jogo tem uma lógica, que a cobra não pode voltar para direita se estiver indo para esquerda e vice versa, mesma coisa para cima e para baixo, então eu adicionei uma condição na função KeyPush, que verifica a última tecla pressionada para aceitar a direção.
Adicionei também uma pontuação para saber quantas maças eu coletei da uma analisada no código.
@@RodrigoPereiraDigoart Consegue disponibilizar o codigo? Tem vendo pelo o script mas deu erro no getContext
@@tomasmelo6505 O código está no Codepen só pegar lá codepen.io/digoart/full/VgoVmj Vlwwwww
@@tomasmelo6505 O código está no Codepen só pegar lá codepen.io/digoart/full/VgoVmj Vlwwwww
Cadê as pastas 📂?🤔 vs code
Eu tentei aprender baixei o codigo e dps copiei e nenhuma das formas funcionou estou usando o editor Komodo , se alguem souber outro me ajuda ai pf, nunca progamei tambem
Aqui ta tando um erro onde diz trail.push is not a function.
o meu tbm, nao consigo saber oq q é
vc conseguiu descobrir ?
@@amandaparadela7439infelizmente não
@Aldrig nossa eu consegui aq era erro meu mesmo, revisei o meu o erro nem era no trail.push, na vdd era em outro lugar q eu digitei uma letra errada em vez de escrever tail eu escrevi trail e deu tudo certo
@@flavio5328 agr deu certo
@@amandaparadela7439 aqui eu revisei o texto todo mas não achei nenhum erro, sinceramente não sei o que pode ser mas faz tempo demais que vi esse vídeo kkkjk
vc usou o vscode pra fazer?
Esse é o sublime
Eu estou aprendendo JS e pra mim esse código foi bem difícil de entender
Fala Leonardo... mto obrigado pelo seu feedback.... depois vou dar uma olhada para ver como posso simplificar... já tá na hora de trazer outro game pro canal.
Tem outros conteúdos sobre JavaScript mais simples aqui no canal.
Programador BR Eu não entendi a seguinte parte. Porque px < 0 tem que ser igual a qp-1 e não qp? Já que temos 20 peças deveria ser px < 0 igual a qp?
Po, vou ter que ver o vídeo para te responder isso só que são 6:00 da manhã aqui no Canadá e eu virei a noite editando aqui heheh depois eu vjo e te respondo... se eu esquecer eh só deixar outro comentário me lembrando.
@@LeonardoMarcattidaSilva Pois é, também fiquei com a mesma dúvida e resolvi fazer uns testes com as possíveis posições no X e descobri que o Canvas não desenha posições menores ou maiores que o limite da tela. Ou seja, não podemos escrever a cobrinha na posição -1 ou 20 neste caso, pois o valor é automaticamente reajustado para o menor ou maior valor possível (0 ou 19). Portanto quando escrevemos que a posição (quando menor que zero) deve ser igual ao tamanho total, ela é automaticamente reajustada para zero, e a cobrinha fica "trancada" nessa posição X. Por isso o maior valor possível deve ser o tamanho total - 1. Creio que seja isso, mas o ideal é a explicação do programador.
@@letenebrae3164 Na verdade o que acontece é que o canvas tem 20 casas de largura, mas os quadradinhos não são enumerados de 1 a 20. Eles são enumerados de 0 a 19. Já que qp=20 ele chamou a última casa de qp-1.
Posso fazer isso com o visual studio ou seria diferente?
Acho q não dá certo no meu não deu kkk
Como faço para adicionar uma mensagem na tela de game over quando perder ?
alert("Game Over!");
10 vez ki to fazendo esse jogo mais por algum motivo ele nao aparece nd 😢
pode ser por uma letra mesmo é preciso ter cuidado tenta seguir a aula com cuidado e verifica o link da descriçao boa sorte programador!
Como resolver "Uncaught TypeError: trail.push is not a function
at game"?
também estou com esse erro, conseguiu resolver?
var trail = [];
tail = 5;
@@jefersonlopes3850 aqui continua dando o mesmo erro..
Faz esse vídeo de novo, mas demonstrando as coisas acontecendo, tá muito tipo só código
Boa... vou fazer sim
Like
Eu estava tentando criar esse jogo com apenas uma div representando uma cobrinha porem nao respondia muito bem kkkkkkkk
Queria dar uma implementada mas ta dificil kk
decidi iniciar js com esse video ja terminei ele mas uma coisa q me bugou n entendi porra nenhuma tipo oq significa os comando nao q seu video n tenha sido bom mas eu n tenho uma nocao em js .. poderia deixar algo pra ler tipo um doc n sei
Fala Henrique, Na verdade esse vídeo não é indicado para quem está começando, pois não é uma vídeo aula, é um tutorial. Quem já entende a linguagem consegue acompanhar vídeos assim, mas para quem está aprendendo, é necessário mais explicações. Eu estou montando um material sobre programação para iniciantes, o primeiro vídeo vai ao ar em alguns dias.
eu aprendo assim . Ate o momento estava estudando html e css agora entrei pro js .. minha pergunta foi essa porq n achei docs boas ,tipo achei uma no github e a do mozila mas uma coisa q me deixou intrigado foi q no www.javascript.com n tem doc apenas a venda de um curso kk (sou noob desculpe)
ja estou entendendo bem mais ,vi o video algumas vezes e estou ate dando uns upgrade ja HEHE vlw ae pelo conteudo brow
Bom video mano! Tem Whatsapp
escreva se
Mano me dar uma força aí numa parada.
faz um tetris
ta mas como abre'-' nunca toquei no javascript mano :(
Baixa o arquivo. Salve no desktop com index.html
Depois só clicar pra abrir.
@@augustosilva33 eu fiz mas abre é o codigo pra leitura '-'
@@kleberleite3401 bom ..eu expliquei errado..
copia o codigo,abre o bloco de notas e cola o ocodigo no bloco de notas.
salva no desktop ou outro lugar com o nome index.html
Jogo da cobrinha
window.onload = function(){
var stage = document.getElementById('stage');
var ctx = stage.getContext("2d");
document.addEventListener("keydown", keyPush);
setInterval(game, 80);
const vel = 1;
var vx = vy = 0;
var px =10;
var py = 15;
var tp = 30;
var qp = 20;
var ax=ay=15;
var trail = [];
tail = 5;
function game(){
px += vx;
py += vy;
if (px qp-1) {
px = 0;
}
if (py < 0) {
py = qp-1;
}
if (py > qp-1) {
py = 0;
}
ctx.fillStyle = "black";
ctx.fillRect(0,0, stage.width, stage.height);
ctx.fillStyle = "red";
ctx.fillRect(ax*tp, ay*tp, tp,tp);
ctx.fillStyle = "gray";
for (var i = 0; i < trail.length; i++) {
ctx.fillRect(trail[i].x*tp, trail[i].y*tp, tp-1,tp-1);
if (trail[i].x == px && trail[i].y == py)
{
vx = vy=0;
tail =5;
}
}
trail.push({x:px,y:py })
while (trail.length > tail) {
trail.shift();
}
if (ax==px && ay==py){
tail++;
ax = Math.floor(Math.random()*qp);
ay = Math.floor(Math.random()*qp);
}
}
function keyPush(event){
switch (event.keyCode) {
case 37: // Left
vx = -vel;
vy = 0;
break;
case 38: // up
vx = 0;
vy = -vel;
break;
case 39: // right
vx = vel;
vy = 0;
break;
case 40: // down
vx = 0;
vy = vel;
break;
default:
break;
}
}
}
@@augustosilva33 obggg
@@augustosilva33 Carlos tá aí ainda?
Buguei
Poderia disponibilizar o download? Obrigado!
Fala, tudo bom?!! Realmente tinha esquecido de disponibilizar o link. pastebin.com/AbgWvcyS
if(video.you.like == true){
btn.like.Image = 2;
InsertVideoInPlaylist(videos_like, video);
}
addComent(video, you_account, "bom video, gostei!");
Cópia esse código não dar, vem com os números 😡
Manda um feedback da minha versão (beta)
drive.google.com/open?id=1h9ADR_upD0kdNYUcO89IFpbJ5rZX6OLc
No meu não está pintando o tabuleiro onde a snake vai andar
como fazer o stage ficar centralizado na tela ?
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color:;
}
body {
display: grid;
grid-template-rows: auto;
justify-items: center;
align-items: center;
}
canvas {
height: 80vh;
width: 60vw;
display: block;
}