├── README.md ├── index.html └── scrip.js /README.md: -------------------------------------------------------------------------------- 1 | # fogoDoomByFelipeDeschamps 2 | Fogo criado por Felipe Deschamps 3 | 4 | foi desenvolvido o fogo do DOOM acompanhando os videos do Felipe Deschamps no youtube 5 | 6 | ![alt text](https://uploaddeimagens.com.br/images/003/023/698/original/fogo.png?1610013749) 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fogo Doom 8 | 39 | 40 | 41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /scrip.js: -------------------------------------------------------------------------------- 1 | const firePixelsArray = [] 2 | const fireWidth = 40 3 | const fireHeight = 40 4 | const fireColorsPalette = [{"r":7,"g":7,"b":7},{"r":31,"g":7,"b":7},{"r":47,"g":15,"b":7},{"r":71,"g":15,"b":7},{"r":87,"g":23,"b":7},{"r":103,"g":31,"b":7},{"r":119,"g":31,"b":7},{"r":143,"g":39,"b":7},{"r":159,"g":47,"b":7},{"r":175,"g":63,"b":7},{"r":191,"g":71,"b":7},{"r":199,"g":71,"b":7},{"r":223,"g":79,"b":7},{"r":223,"g":87,"b":7},{"r":223,"g":87,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":103,"b":15},{"r":207,"g":111,"b":15},{"r":207,"g":119,"b":15},{"r":207,"g":127,"b":15},{"r":207,"g":135,"b":23},{"r":199,"g":135,"b":23},{"r":199,"g":143,"b":23},{"r":199,"g":151,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":167,"b":39},{"r":191,"g":167,"b":39},{"r":191,"g":175,"b":47},{"r":183,"g":175,"b":47},{"r":183,"g":183,"b":47},{"r":183,"g":183,"b":55},{"r":207,"g":207,"b":111},{"r":223,"g":223,"b":159},{"r":239,"g":239,"b":199},{"r":255,"g":255,"b":255}]; 5 | 6 | function start(){ 7 | createFireDataStructure() 8 | createFireSource() 9 | renderFire() 10 | 11 | setInterval(calculateFirePropagation, 50) 12 | } 13 | 14 | function createFireDataStructure(){ 15 | const numberOfPixels = fireWidth * fireHeight 16 | 17 | for(let i = 0; i < numberOfPixels; i++){ 18 | firePixelsArray[i] = 0 19 | } 20 | } 21 | 22 | function calculateFirePropagation(){ 23 | for(let column = 0; column < fireWidth; column++){ 24 | for(let row = 0; row < fireHeight; row++){ 25 | const pixelIndex = column + (fireWidth * row) 26 | 27 | updateFireIntensityPerPixel(pixelIndex) 28 | } 29 | } 30 | 31 | renderFire() 32 | } 33 | 34 | function updateFireIntensityPerPixel(currentPixelIndex){ 35 | const belowPixelIndex = currentPixelIndex + fireWidth 36 | 37 | if(belowPixelIndex >= fireWidth * fireHeight){ 38 | return 39 | } 40 | 41 | const decay = Math.floor(Math.random() * 3) 42 | const belowPixelFireIntensity = firePixelsArray[belowPixelIndex] 43 | const newFireIntensity = belowPixelFireIntensity - decay >= 0 ? belowPixelFireIntensity - decay : 0 44 | 45 | firePixelsArray[currentPixelIndex - decay] = newFireIntensity 46 | } 47 | 48 | function renderFire(){ 49 | const debug = false 50 | let html = '' 51 | for(let row = 0; row < fireHeight; row++){ 52 | html += '' 53 | for(let column = 0; column < fireWidth; column++){ 54 | const pixelIndex = column + (fireWidth * row) 55 | const fireIntensity = firePixelsArray[pixelIndex] 56 | 57 | if(debug === true){ 58 | html += '' 62 | } else{ 63 | const color = fireColorsPalette[fireIntensity] 64 | const colorString = `${color.r},${color.g},${color.b}` 65 | html += `' 67 | } 68 | 69 | } 70 | html += '' 71 | } 72 | html += '
' 59 | html += `
${pixelIndex}
` 60 | html += fireIntensity 61 | html += '		` 66 | html += '
' 73 | 74 | document.querySelector('#fireCanvas').innerHTML = html 75 | } 76 | 77 | function createFireSource(){ 78 | for (let column = 0; column <= fireWidth; column++){ 79 | const overflowPixelIndex = fireWidth * fireHeight 80 | const pixelIndex = (overflowPixelIndex - fireWidth) + column 81 | 82 | firePixelsArray[pixelIndex] = 36 83 | } 84 | } 85 | 86 | start() --------------------------------------------------------------------------------