Download do arquivo fire.js e remova a linha module.exports = Fire
<body>
<canvas width="300" height="300"></canvas>
<script src="./fire.js"></script>
<script>
const canvas = document.querySelector("canvas"); //Tag canvas
const context = canvas.getContext("2d"); //Contexto 2d do canvas
const fireWidth = canvas.width; //largura do canvas
const fireHeight = canvas.height; //altura do canvas
const proportionalValue = 5; //Tamanaho do quadro que o fogo vai renderizar (padrão 5 ou 10)
const backgroundIntensity = 0; //Fundo do canvas, cores disponíves: { 0, 1, 2... 36 }
fire = new Fire(context, fireWidth, fireHeight, proportionalValue, backgroundIntensity);
fire.Start();
</script>
</body> yarn add add-doom-fire
npm install add-doom-fire
import React, { useRef } from 'react';
import Fire from "add-doom-fire"; const canvasHTMLElement = useRef();
let fire;Passe o atributo ref na tag canvas e adicione dois botões com uma função de click
return (
<div className="App">
<canvas ref={canvasHTMLElement} width="300" height="300"></canvas>
<button onClick={createFire}>Start Fire</button>
<button onClick={stopFire}>Stop Fire</button>
</div>
); function createFire() {
const canvas = canvasHTMLElement.current; //Tag canvas
const context = canvas.getContext("2d"); //Contexto 2d do canvas
const fireWidth = canvas.width; //largura do canvas
const fireHeight = canvas.height; //altura do canvas
const proportionalValue = 5; //Tamanaho do quadro que o fogo vai renderizar (padrão 5 ou 10)
const backgroundIntensity = 0; //Fundo do canvas, cores disponíves: { 0, 1, 2... 36 }
fire = new Fire(context, fireWidth, fireHeight, proportionalValue, backgroundIntensity);
fire.Start(); //Inicia o fogo do DOOM
}
function stopFire() {
fire.Stop() // Para o fogo do doom
}Image by FilipeDeschamps
