Snake Game com JavaScript ( Jogo da Cobrinha )- Programador Br - Ep.29 

mas nao se esqueça que e um jogo de iniciantes ou seja tem que ser o mais simples possivel

isso é muito facil confia

Não pq px e py são atualizados a cada loop. E ai a posição não bate.

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.

live server

Olá Cedrio, você pode começar por essa playlist que eu preparei aqui. Abraços ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HXddFUe6VPU.html

beleza vo conferi

alert("Game Over!");

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

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.

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

não vai te responder a única preocupação são views.

também estou com esse erro, conseguiu resolver?

var trail = []; tail = 5;

@@jefersonlopes3850 aqui continua dando o mesmo erro..

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.

Acho q não dá certo no meu não deu kkk

Boa... vou fazer sim

Vc tem que ir na pasta onde vc salvo arquivo do projeto

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.

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!

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

Esse é o sublime

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

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?

Fala, tudo bom?!! Realmente tinha esquecido de disponibilizar o link. pastebin.com/AbgWvcyS