1

Eu estou fazendo um minijogo de piano semelhante ao Guitar Hero, onde blocos caem do céu e você tem que pressionar a nota (no meu caso, a nota/tecla do piano) equivalente no tempo certo, eles caem em tempo específico para simular a música.

Os blocos em queda estão sendo programados em Canvas.

Eu fiz uma versão em JavaScript puro e anda funcionando como eu quero, mas não estou conseguindo transferir para o React.

Existirá um objeto JSON, que é a partitura da música, de importante para falar sobre ele agora, é que ele contém o número do frame (frameNo) em que o bloco da nota correspondente deve aparecer (a cada atualização do canvas, um frame é contado):

const cheatSheet = [
      {
         "note": {
             "left hand" : "F4",
             "right hand":"G4"
         },
         "frameNo": 25
      }
]

À princípio, tenho a seguinte partitura musical de exemplo, caso você queira testar o código:

const cheatSheet = [{"note":{"left hand":"F4","right hand":"G4"},"frameNo":25},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":50},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":75},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":100},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":125},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":150},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":175},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":200},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":225},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":250},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":275},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":300},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":325},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":350},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":375},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":400},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":425},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":450},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":475},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":500},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":525},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":575},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":600},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":625},{"note":{"left hand":"B4","right hand":"D4"},"frameNo":650},{"note":{"left hand":"E4","right hand":"A4"},"frameNo":675},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":700},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":725},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":750},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":775},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":800},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":825},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":850},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":875},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":900},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":925},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":950},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":975},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1000},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1025},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1050},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1075},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":1100},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1125},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1150},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":1200},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1300}];

O meu código em Javascript puro é assim:

var cheatSheet = [{"note":{"left hand":"F4","right hand":"G4"},"frameNo":25},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":50},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":75},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":100},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":125},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":150},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":175},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":200},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":225},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":250},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":275},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":300},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":325},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":350},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":375},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":400},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":425},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":450},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":475},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":500},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":525},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":575},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":600},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":625},{"note":{"left hand":"B4","right hand":"D4"},"frameNo":650},{"note":{"left hand":"E4","right hand":"A4"},"frameNo":675},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":700},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":725},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":750},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":775},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":800},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":825},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":850},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":875},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":900},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":925},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":950},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":975},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1000},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1025},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1050},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1075},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":1100},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1125},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1150},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":1200},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1300}];

var gameArea = {
    canvas: document.createElement("canvas"),
    start : function() {
        this.context = this.canvas.getContext("2d");
        this.frameNo = 0;
        this.noteNo = 0;
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop  : function() {
        clearInterval(this.interval);
    }    
}
var blocks = [];

function startGame() {
    gameArea.start();
}

function Block() {
    
    this.width = 10;
    this.height = 10;

    this.x = 0;
    this.y = 0;

    this.update = () => {
        let ctx = gameArea.context;
        ctx.fillStyle = 'green';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

function updateGameArea() {
    gameArea.clear();
    gameArea.frameNo += 1;

    let currNote = gameArea.noteNo;

    if (currNote < cheatSheet.length) {
        let noteFrame = cheatSheet[currNote].frameNo;
        let currFrame = gameArea.frameNo;

        if (noteFrame === currFrame) {
            blocks.push(new Block());
            gameArea.noteNo += 1;
        }
    }

    for (let i = 0; i < blocks.length; i++) {
        blocks[i].y += 1;
        blocks[i].update();
    }

}
canvas {
  border:1px solid #d3d3d3;
  background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body onload="startGame()">
</body>
</html>

Se você pegar e rodar esse código em algum ambiente (ou aqui mesmo), é desse jeito que deve funcionar.

Porém, na hora de passar para o React, o Canvas simplesmente não roda (fica em branco).

const cheatSheet = [{"note":{"left hand":"F4","right hand":"G4"},"frameNo":25},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":50},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":75},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":100},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":125},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":150},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":175},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":200},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":225},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":250},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":275},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":300},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":325},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":350},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":375},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":400},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":425},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":450},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":475},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":500},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":525},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":575},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":600},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":625},{"note":{"left hand":"B4","right hand":"D4"},"frameNo":650},{"note":{"left hand":"E4","right hand":"A4"},"frameNo":675},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":700},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":725},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":750},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":775},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":800},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":825},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":850},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":875},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":900},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":925},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":950},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":975},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1000},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1025},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1050},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1075},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":1100},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1125},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1150},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":1200},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1300}];

  function Block(gameArea) {

      this.width = 10;
      this.height = 10;

      this.x = 0;
      this.y = 0;

      this.update = () => {
          let ctx = gameArea.context;
          ctx.fillStyle = 'green';
          ctx.fillRect(this.x, this.y, this.width, this.height);
      }
  }

  class CanvasComponent extends React.Component {
      constructor() {
          super();
          this.gameArea = {
              canvas: React.createRef(),
              start : function() {
                  this.context = this.canvas.current.getContext("2d");
                  this.frameNo = 0;
                  this.noteNo = 0; 
                  this.blocks = []; 
                  this.interval = setInterval(this.updateGameArea, 20);
              },
              clear : function() {
                  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
              },
              stop  : function() {
                  clearInterval(this.interval);
              }    
          }
      }

      updateGameArea() {

          const cheatSheet = this.props.cheatSheet;
          const gameArea = this.gameArea;

          gameArea.clear();
          gameArea.frameNo += 1;

          let currNote = gameArea.noteNo;
          let blocks = gameArea.blocks;

          if (currNote < cheatSheet.length) {
              let noteFrame = cheatSheet[currNote].frameNo;
              let currFrame = gameArea.frameNo;

              if (noteFrame === currFrame) {
                  blocks.push(new Block(gameArea));
                  gameArea.noteNo += 1;
              }
          }

          for (let i = 0; i < blocks.length; i++) {
              blocks[i].y += 1;
              blocks[i].update();
          }

      }

      componentDidMount() {
          const { gameArea } = this;
          gameArea.start();
      }

      render() {
          return <canvas ref={this.gameArea.canvas} width={300} height={300} />;
      }
  }

  ReactDOM.render(<CanvasComponent cheatSheet={cheatSheet} />, document.getElementById('root'));
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

O que eu tentei...

Infelizmente, eu não tentei muita coisa, pois não sei nem o que hipotisar. Mas eu tentei simular em outro ambiente um canvas simples em React, e observei que pôr o setInterval no lugar onde estava não rodava, então, o coloquei no componentDidMount e resolveu a situação. Esse é apenas o primeiro erro, mesmo após essa alteração o código não funciona. Eu tentei pesquisar na internet exemplos de canvas no React para ver se eu não cometi algum erro conceitual ou de sintaxe de alguma coisa. Mas é realmente difícil encontrar exemplos disso em React de classes, não de Hooks.

1 Resposta 1

1

Começo por dizer que você tem vários conceitos errados, mas comecemos pelo minimo para que consiga ter o código a correr:

this.interval = setInterval(this.updateGameArea, 20);

Esse this do updateGameArea refere o objeto this.gameArea e não o componente, logo a referência à função vai dar undefined não executando nada no timer.

Mesmo construindo a referência correta vai precisar de fazer bind do this para garantir que fica certo.

No clear:

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

A utilização de ref subentende que o campo nativo é acedido através da propriedade current, algo que ficou a faltar no this.canvas.width e this.canvas.height, que por esse motivo resultam em undefined.

Corrigindo estes pontos já funciona:

const cheatSheet = [{"note":{"left hand":"F4","right hand":"G4"},"frameNo":25},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":50},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":75},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":100},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":125},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":150},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":175},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":200},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":225},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":250},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":275},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":300},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":325},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":350},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":375},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":400},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":425},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":450},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":475},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":500},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":525},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":575},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":600},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":625},{"note":{"left hand":"B4","right hand":"D4"},"frameNo":650},{"note":{"left hand":"E4","right hand":"A4"},"frameNo":675},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":700},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":725},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":750},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":775},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":800},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":825},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":850},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":875},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":900},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":925},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":950},{"note":{"left hand":"E4","right hand":"G4"},"frameNo":975},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1000},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1025},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1050},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1075},{"note":{"left hand":"D4","right hand":"A4"},"frameNo":1100},{"note":{"left hand":"D4","right hand":"B4"},"frameNo":1125},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1150},{"note":{"left hand":"F4","right hand":"G4"},"frameNo":1200},{"note":{"left hand":"C4","right hand":"C5"},"frameNo":1300}];

  function Block(gameArea) {

    this.width = 10;
    this.height = 10;

    this.x = 0;
    this.y = 0;

    this.update = () => {
        let ctx = gameArea.context;
        ctx.fillStyle = 'green';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }

  class CanvasComponent extends React.Component {
    constructor() {
        super();
        
        this.updateGameArea = this.updateGameArea.bind(this); //acrescentado
        const component = this; //acrescentado
        
        this.gameArea = {
            canvas: React.createRef(),
            start : function() {
                this.context = this.canvas.current.getContext("2d");
                this.frameNo = 0;
                this.noteNo = 0; 
                this.blocks = []; 
                this.interval = setInterval(component.updateGameArea, 20); //alterado
            },
            clear : function() {
                this.context.clearRect(0, 0, this.canvas.current.width, this.canvas.current.height); //alterado
            },
            stop  : function() {
                clearInterval(this.interval);
            }    
        }
    }

    updateGameArea() {

        const cheatSheet = this.props.cheatSheet;
        const gameArea = this.gameArea;

        gameArea.clear();
        gameArea.frameNo += 1;

        let currNote = gameArea.noteNo;
        let blocks = gameArea.blocks;

        if (currNote < cheatSheet.length) {
            let noteFrame = cheatSheet[currNote].frameNo;
            let currFrame = gameArea.frameNo;

            if (noteFrame === currFrame) {
                blocks.push(new Block(gameArea));
                gameArea.noteNo += 1;
            }
        }

        for (let i = 0; i < blocks.length; i++) {
            blocks[i].y += 1;
            blocks[i].update();
        }

    }

    componentDidMount() {
        const { gameArea } = this;
        gameArea.start();
    }

    render() {
        return <canvas ref={this.gameArea.canvas} width={300} height={300} />;
    }
}


  ReactDOM.render(<CanvasComponent cheatSheet={cheatSheet} />, document.getElementById('root'));
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Comentei todas as linhas que acrescentei e alterei.

Transformação no mundo React

Não vou fazer a transformação que é demasiado trabalhosa, mas precisa de alterar os seguintes conceitos:

  • Estado - você não está a utilizar estado. No mínimo estes 3 valores:

      this.frameNo = 0;
      this.noteNo = 0; 
      this.blocks = []; 
    

    Deviam estar no estado do componente colocados em this.state no construtor. Depois iria atualiza-los a cada intervalo com setState.

  • A criação de objetos dentro de objetos que tem não faz sentido uma vez que existem componentes precisamente para subdividir a lógica. Nesse sentido devia criar um componente Block para ter a lógica que cada bloco vai ter. Pode até criar mais componentes se quiser mas pelo menos esses 2 fazem sentido. E a lógica que tem no objeto gameArea deve passar para um componente, quer seja o CanvasComponent ou outro.

  • A renderização dos blocos no canvas deve ser feita no ComponentDidUpdate como consequência de alteração de estado. Este é o ponto que é igual ao tal useEffect Hook que fala.

  • O timer deve ser limpo no ComponentWillUnmount, garantindo que não tem fuga de recursos e que não continua a executar mesmo depois do componente ser destruido. Este é um ponto que é normal falhar e que em cenários reais pode trazer problemas sérios.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .