使用React

Question

我正在使用React.js将我的旧Simon游戏重构为HTML5 Canvas。目前，我很难弄清楚如何控制演示灯序列。它一直在播放所有的灯光。当我称之为'drawcircle'时，我会重绘画布。对于完整的代码视图，它位于我的CodePen https://codepen.io/pkshreeman/pen/ZyLEoB?editors=0110上 单击电源按钮，然后播放几个周期，您将看到我在说什么。

function demoLight(current,i){
setTimeout(() => drawcircle(current.matchMe[i],current.matchMe[i]), 500);
setTimeout(()=> {console.log('timeout .5 sec' )}, 500);
setTimeout(() => drawcircle(current.matchMe[i], current[current.matchMe[i]]), 800);
setTimeout(()=> {'timeout part 2 0.5 sec'}, 500);
}
//demo function
function demoMatch(current){ //enter this.state as current
  console.log('demo on the level of '+ current.level)
  for( let i = 0 ; i < current.level; i++){
    setTimeout(()=>{demoLight(current,i)}),2200
  }
}

如果您需要查看drawcircle函数：

function drawcircle(id, color) {
  var context = document.getElementById(id).getContext("2d");
  var x = 75;
  var y = 75;

  switch (id) {
    case 'purple':
      x = -10;
      y = -10;
      break;

    case 'pink':
      x = 160;
      y = -10;
      break;

    case 'blue':
      x = -10;
      y = 160;
      break;

    case 'green':
      x = 160;
      y = 160;
      break;
  }
  context.beginPath();
  context.arc(x, y, 115, 0 * Math.PI, 2 * Math.PI, true);
  context.strokeStyle = color;
  context.lineWidth = 85;
  context.stroke();
}