• Wednesday , 27 May 2020

Tutorial completo de como programar o Fogo do DOOM (JavaScript puro)

Code Canyon



Vamos programar linha a linha o algoritmo de Fogo do jogo DOOM de uma forma extremamente divertida. Esse tutorial sobre como programar serve para quem está aprendendo a linguagem JavaScript principalmente, quem é iniciante, mas garanto que vai ser uma ótima experiência para qualquer pessoa 🙂 E eu tenho certeza absoluta que esse vídeo irá lhe inspirar a fazer mais cursos sobre algoritmos e aprender a programar jogos em JavaScript (eu pelo menos fiquei super empolgado). Além deste vídeo ser um tutorial sobre algoritmos, você também vai aprender sobre estrutura de dados, sobre como renderizar o gráfico final de uma forma criativa e, novamente, tenho certeza absoluta que você vai querer aprender mais sobre como programar jogos 2D.

✅ LINKS CITADOS NO VÍDEO

▸ Código fonte no Github: https://github.com/filipedeschamps/doom-fire-algorithm
▸ Vídeo a história e overview do algoritmo: https://www.youtube.com/watch?v=HCjDjsHPOco

✅ 𝗩𝗜𝗗𝗘𝗢𝗦 𝗠𝗔𝗜𝗦 𝗣𝗢𝗣𝗨𝗟𝗔𝗥𝗘𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟

▸ Brasileiro programa Inteligência Artificial que aprende a DIRIGIR SOZINHA!!!

▸ Novo algoritmo EDITA VÍDEO como se fosse TEXTO (deepfake)

▸ FERROU!!! O Google EXPLODIU minha cabeça com esse serviço!!!

▸ Hacker usa placa “NULL” e acumula $ 12.000 em multas por BUG de sistema (DEFCON 2019)

▸ Programei 4 robôs que criam vídeos para mim no YouTube


Original source

3d Ocean

Related Posts

43 Comments

  1. Gilsivan Santos
    January 9, 2020 at 20:57

    Muito massa programar ao som da chuva ❤️😬

  2. massa Gamer
    January 9, 2020 at 20:57

    cara eu não entendi nada, mais eu continuei assistindo pq eu achei mt interessante +1 sub!!

  3. Emerson Dos Santos
    January 9, 2020 at 20:57

    Muito bom e didático!

  4. Douglas Mendes
    January 9, 2020 at 20:57

    Fui fazendo e vendo o vídeo, mind blowing quando ficou pronto ! hahaha 🙂

  5. Jaques vagner junior
    January 9, 2020 at 20:57

    Cara isso é show de bola parabéns

  6. MAICON TUTORIAIS
    January 9, 2020 at 20:57

    Adicionei as opções de você escolher se quer que o vento se movimente para a esquerda, direita ou sem vento.

  7. Gustavo Carvalho
    January 9, 2020 at 20:57

    Parabéns, ótimo vídeo!

  8. Wanderson Pinheiro
    January 9, 2020 at 20:57

    Qual o aplicativo que você usou para escrever os códigos?

  9. Andre Batista
    January 9, 2020 at 20:57

    estranho, estou seguindo seu código só para entender como funciona, porém quando eu coloco esse codigo html += '<div class="pixel-index">${pixelIndex}</div>' , todos os quadrados ficam com ${pixelIndex}, e nao com os numeros

  10. Edinho
    January 9, 2020 at 20:57

    Muito bom… Parabéns!!! faz um vídeo, se já não existir, ensinando a configurar o ambiente de desenvolvimento…

  11. viniciusvaq
    January 9, 2020 at 20:57

    Qual esse programa?

  12. Gabriel Lima
    January 9, 2020 at 20:57

    Oi

  13. Gabriel
    January 9, 2020 at 20:57

    Ia ser jóia fazer outros vídeos nesse estilo!

  14. Fabricio Pereira
    January 9, 2020 at 20:57

    Muito massa!!!

  15. Será?
    January 9, 2020 at 20:57

    👏

  16. Jacques Douglas
    January 9, 2020 at 20:57

    Não sei se isso é fácil demais ou não, mas fiquei feliz por conseguir prever o que deveria ser feito na maioria das etapas do código. Tô pensando em estudar JavaScript e esse vídeo me motivou muito. Valeu mano!!! S2

  17. Suicraft
    January 9, 2020 at 20:57

    Eu vi este vídeo pela primeira vez quando estava começando a programar e não entendia nada. Hoje já consigo compreender tudo depois de estudar Python e JS no canal do Curso em Video

  18. Future Programming
    January 9, 2020 at 20:57

    Foi incrivel nunca vi algo Tao fixe Como isso vou tentar implementar isso de outra forma

  19. Felipe bits
    January 9, 2020 at 20:57

    quais programas ele usou?

  20. Gustavo Feijoo
    January 9, 2020 at 20:57

    Genial 👏👏👏

  21. Andre Arruda
    January 9, 2020 at 20:57

    Filipe, fiquei com vontade de fazer em python. Usei pyqt e numpy.
    Segue o link do repositório no github: https://github.com/andre23arruda/fire-python
    Abração

  22. Thiago Skapata
    January 9, 2020 at 20:57

    Eu usaria uma matriz bidimensional no lugar de um vetor unidimensional. Fica mais fácil de entender, explicar e mapear para a renderização. E eu navegaria horizontalmente ao invés de verticalmente. É mais eficiente, pois acessa dados que estão próximos na memória. Não faz diferença para uma matriz pequena mas em uma matriz grande faria. Utilizando a implementação de vetor, a navegação horizontal ficaria mais eficiente ainda, pois o endereço de cada linha seria calculado uma única vez por linha, e não uma vez para cada célula.

  23. Bruno Rodrigues
    January 9, 2020 at 20:57

    putz. Obrigado por essa iniciativa, sensacional o video, ganhou mais uma seguidor

  24. Renan Martins
    January 9, 2020 at 20:57

    Eu não entendia NADA de programação. Ainda não entendo nada, mas gostei. Conteúdo foda. Sucesso, irmão.

  25. Fabio Luiz
    January 9, 2020 at 20:57

    Sensacional.

  26. Tiago Monteiro de Oliveira
    January 9, 2020 at 20:57

    Nossa sensacional passarei esse vídeo para meus alunos

  27. Francisco Assis
    January 9, 2020 at 20:57

    Caramba, ficou muito massa , nem sabia que dava para fazer isso com uma tabela, muito foda

  28. Marcelo Carvalho
    January 9, 2020 at 20:57

    Massa….

  29. CR CREDITO
    January 9, 2020 at 20:57

    Filipe vc é muito bom em javascript, faca uma playlist ensinando .JS pra Iniciantes, seria muito massa aprender com vc!

  30. Sr Viktor
    January 9, 2020 at 20:57

    eu tava achando super normal, até adicionar o efeito de vento no fogo… pirei!!

  31. Builder Luca
    January 9, 2020 at 20:57

    haha que maneiro! com esse código 10:53 você me ajudou a implementar esses numerosinhos na minha calculadora, como uma "soma old" fiz uma função em JS que pega o numero inserido, transforma em "old" e mostra como o calculo foi feito. em um dos seus vídeo falou sobre, não adiantar reclicar códigos senão entende o que ele faz, mas acho que isso não foi uma reciclagem. haha

  32. Andre Luiz A. Menna
    January 9, 2020 at 20:57

    Oi Felipe! Já pensou em explicar query de banco de dados?

  33. Richard Santos
    January 9, 2020 at 20:57

    Porquê não fez um array bi dimensional? seria mais simples

  34. Felipe Oliveira
    January 9, 2020 at 20:57

    Pato.

  35. Marcelo Cabral Junior
    January 9, 2020 at 20:57

    Filipe, estou amando o JS. Seus vídeos estão me dando vontade de voltar a escrever HTML e CSS.

  36. Bruno Gardiano
    January 9, 2020 at 20:57

    Muito massa Felipe… Parabéns, suas explicações são simplesmente magníficas… tudo fica fácil… abração!

  37. Nícolas Rocha
    January 9, 2020 at 20:57

    Muito fodaaaaaaaa

  38. JoaoLucas
    January 9, 2020 at 20:57

    Edit: percebi que a função render tava antes da de calcular a fonte de fogo, cuidado com isso pessoal.

    cara meu codigo nao cria a fonte de fogo, tai o script:

    const firePixelsArray = []

    const fireWidth = 10

    const fireHeight = 10

    function start(){

    criarDadosDoFogo()

    renderizarFogo()

    createFireSource()

    }

    function criarDadosDoFogo(){

    const numberOfPixels = fireWidth * fireHeight

    for (let i = 0; i<numberOfPixels; i++){

    firePixelsArray[i] = 0

    }

    }

    function calcularPropagaçãodoFogo(){

    }

    function renderizarFogo(){

    let html = '<table cellpadding=0 cellspacing=0>'

    for(let row=0; row<fireHeight; row++) {

    html += '<tr>'

    for (let column = 0; column < fireWidth; column++){

    const pixelIndex = column + (fireWidth * row)

    const fireIntensity = firePixelsArray[pixelIndex]

    html += '<td>'

    html += `<div class="pixel-index">${pixelIndex}</div>`

    html += fireIntensity

    html += '</td>'

    }

    html += '</tr>'

    }

    html += '</table>'

    document.querySelector('#canvasDoFogo').innerHTML = html

    }

    function createFireSource(){

    for(let column = 0; column <= fireWidth; column++){

    const overflowPixelIndex = fireWidth * fireHeight

    const pixelIndex = (overflowPixelIndex – fireWidth) + column

    firePixelsArray[pixelIndex] = 36

    }

    }

    start()

  39. Natan Carrapeiro
    January 9, 2020 at 20:57

    alguem pode me ajuda
    não sei ver meu localhost no windows comando serve da erro e não sei qual outro posso usar

  40. Pinhaum Gabriel
    January 9, 2020 at 20:57

    Você sabia que os efeitos "fps" de movimentação no doom são um tipo de "3d fake"? saberia como implementar eles?
    Show esse fogo aí, agradeço muito pelo aprendizado

  41. Luan Vinicius
    January 9, 2020 at 20:57

    Oi tudo bem?

  42. Alehandro Rocha
    January 9, 2020 at 20:57

    Cara, cai nesse vídeo de paraquedas, mas é o seguinte…. Que TOP sua explicação e a forma como abordou o conteúdo em si…. Vou me inscrever nesse canal é agora !!!! PS.: Tenta fazer mais videos assim, passando conceitos, seria legal… VALEU !

  43. Raul Oliveira Ferreira
    January 9, 2020 at 20:57

    Cara mto top seu conteúdo e a forma que vc apresenta. Faz um mês que estou estudando JS, e me diverti bastante programando o fogo do DOOM com vc kkkkk. Parabéns mano, mais um fã aqui.

Leave A Comment

You must be logged in to post a comment.