D4mations.com

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



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

d4mer

, , , , , , , ,

43 responses to “Tutorial completo de como programar o Fogo do DOOM (JavaScript puro)”

  9. 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

  16. 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. 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

  22. 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.

  31. 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

  38. 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()

  42. 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 !

Leave a Reply