如何重置我的对象的速度变量

Question

如何重置我的对象中的速度变量。我正在制作一个帆布游戏，其中明星从帆布顶部落下。问题是当我在setinterval（）中运行游戏时，速度越来越大。我想要的是速度保持不变，除非我改变它。

function Star(x, y, rad, velocity, fill){ 
      this.x = Math.floor(Math.random() * 999);//this create a random number between 0 and 599 on the x axis 
      this.y = 0; 
      this.rad = Math.floor((Math.random() * 30) + 15);//this create a random number between 10 and 30 for the radius 
      this.velocity = 5; 
      this.fill = fill 

      this.draw = function(){ 
       ctx.beginPath(); 
       ctx.fillStyle = this.fill;       
       ctx.arc(this.x, this.y, this.rad, 0, Math.PI * 2, true); 
       ctx.closePath(); 
       ctx.fill(); 
       this.y += this.velocity; 
      } 
     } 

     function createMultipleStars(){ 
      for (var i = 0; i <= numOfStars; i++) 
       stars[i] = new Star(i * 50, 10, i, i, "rgba(255,215,0,0.6)"); 
     } 
     //createMultipleStars(); 

     function step() { 
      ctx.clearRect(0,0,canvas.width, canvas.height); 
      for (var i = 0; i<= numOfStars; i++) 
       stars[i].draw(); 
      requestAnimationFrame(step); 
     } 

     spaceShip.drawSpaceShip(); 
     var myVar = setInterval(function(){ init() }, 4000); 


     function init(){ 
      createMultipleStars(); 
      step(); 
     } 

Answer 1

您每秒的帧数随着每个间隔而增加。每四秒钟将另一个步骤功能添加到动画帧。为了解决这个问题，我添加了一个fps计数器和单例模式。使用单例模式，您不应该破坏requestAnimationFrame max 60 fps。没有它你会看到fps增加。从技术上讲，它不能超过60，但是在同一帧中，阶梯函数会多次运行，每次都会增加速度，使星体运行得更快。

var canvas = document.getElementById('can'); 
 
var ctx = canvas.getContext('2d'); 
 
var stars = []; 
 
var numOfStars = 10; 
 

 
function Star(x, y, rad, velocity, fill) { 
 
    this.x = Math.floor(Math.random() * 999); //this create a random number between 0 and 599 on the x axis 
 
    this.y = 0; 
 
    this.rad = Math.floor((Math.random() * 30) + 15); //this create a random number between 10 and 30 for the radius 
 
    this.velocity = 5; 
 
    this.fill = fill 
 

 
    this.draw = function() { 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = this.fill; 
 
    ctx.arc(this.x, this.y, this.rad, 0, Math.PI * 2, true); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    this.y += this.velocity; 
 
    } 
 
} 
 

 
function createMultipleStars() { 
 
    for (var i = 0; i <= numOfStars; i++) { 
 
    stars[i] = new Star(i * 50, 10, i, i, "rgba(255,215,0,0.6)"); 
 
    } 
 
} 
 

 
function fps() { 
 

 
    var now = (new Date()).getTime(); 
 
    fps.frames++; 
 

 
    if ((now - fps.lastFps) >= 1000) { 
 
    fps.total = fps.frames; 
 
    fps.lastFps = now; 
 
    fps.frames = 0; 
 
    } 
 

 
    return fps.total; 
 
} 
 

 
fps.frames = 0; 
 
fps.lastFps = (new Date()).getTime(); 
 
fps.total = 0; 
 

 
// Step is a singleton. Only one instance can be created. 
 
function Step() { 
 
    // comment out the line below to see what happens when not running 
 
    // singleton 
 
    if (Step.instance !== null) return Step.instance; 
 

 
    var self = this; 
 

 
    function frame() { 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    for (var i = 0; i <= numOfStars; i++) { 
 
     stars[i].draw(); 
 
    } 
 
    ctx.fillStyle = "red"; 
 
    ctx.fillText("FPS: " + fps(), 10, 10); 
 
    requestAnimationFrame(frame); 
 
    } 
 

 
    frame(); 
 

 
    Step.instance = this; 
 
    return this; 
 
} 
 

 
Step.instance = null; 
 

 

 
//spaceShip.drawSpaceShip(); 
 

 

 
function init() { 
 
    var myVar = setInterval(function() { 
 
    createMultipleStars(); 
 
    var step = new Step(); 
 
    }, 4000); 
 

 
    createMultipleStars(); 
 
    // 
 
    var step = new Step(); 
 
    var step = new Step(); 
 
    var step = new Step(); 
 
    var step = new Step(); 
 
} 
 

 
init();

#can { 
 
    border: 1px solid #FF0000; 
 
}

<canvas id="can" width="400" height="200"></canvas>

Answer 2

你的问题很简单：你同时使用requestAnimationFrame和setInterval来驱动动画。越来越多的呈现环获得创建，并在同一时间运行，导致该问题

分离关注：

1. 有一个渲染循环的使用requestAnimationFrame永远
2. 有一个的setInterval-ED功能来注入工作游戏中的一些新东西。

所以，你需要做的唯一的变化是在这里：

var myVar = setInterval(createMultipleStars, 4000);