Question

我在javaScript的新方面，虽然，我刚刚完成了一个类似的项目，这就是为什么这个让我难过的原因。我之前的项目工作得很好，但是我使用了所有全局变量，这个项目的目的是完全使用OOP，但是我早期遇到了一个问题，我的requestAnimationFrame似乎存在问题。我没有得到它，因为它显然正在运行，因为我可以看到粒子变化的Y值，但是没有动画，它只是在requestAnimationFrame似乎决定自己停止时出现。我将粒子速度（P.vy）设置为令人讨厌的低甚至将粒子保持在画布上，我不确定它是否与问题相关，因为我没有必要在我的上一个项目中使用一个荒谬的价值。

我目前有一个单粒子，我想向上浮动。结束游戏，它将只是一系列粒子中的一个，将成为场景中的火焰。

class Particle {
  constructor(context, width, height) {
    this.x = width / 2;
    this.y = height / 2;
    this.vx = 0;
    this.vy = -0.006;//I had to set like this to keep on the page
    this.radius = Math.random() * 10 + 10;
  }
  update() {
    this.y += this.vy;//change Y pos
  }
};

var App = {
  requestAnimationFrame: window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
      return setTimeout(callback, 1000 / 60); 
    },
  canvas: document.getElementById('canvas'),
  ctx: canvas.getContext('2d'),
  P: null,//this will be our particle
  initialize: function() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.P = new Particle(this.ctx, this.canvas.width, this.canvas.height);//create particle
    this.draw();
  },
  draw: function() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.beginPath();
    this.ctx.arc(this.P.x,this.P.y,this.P.radius,0,2*Math.PI);//draw particle
    this.ctx.stroke()
    this.P.update();
    this.requestAnimationFrame(this.draw());
  }
};

App.initialize();

这是我的最后一个项目（接近）取得成功，但所有全局变量：Previous

这是我当前的项目/问题：Current

Canvas和requestAnimationFrame问题

0 个答案: