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最大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来驱动动画。越来越多的渲染循环被创建并同时运行，从而导致问题

分开关注点：

使用RequestAnimationFrame
让setInterval-ed函数在游戏中注入一些新东西。

所以你需要做的唯一改变是：

['r 11 1602 24 1622 0\n', 'i 26 1602 36 1631 0\n', 
'v 37 1602 57 1621 0\n', 'e 59 1602 76 1622 0\n', 
'r 77 1602 91 1622 1\n', 'h 106 1602 127 1631 0\n', 
'e 127 1602 144 1622 1\n', 'h 160 1602 181 1631 0\n',
'e 181 1602 198 1622 0\n', 'a 200 1602 218 1622 0\n',
'r 218 1602 232 1622 0\n', 'd 234 1602 254 1631 1\n',
't 268 1602 280 1627 0\n', 'h 280 1602 301 1631 0\n',
'e 302 1602 319 1622 1\n', 'd 335 1602 355 1631 0\n']

如何重置对象的速度变量

2 个答案: