Question

我刚开始学习javascript，我已经遇到了一些问题。我有一个非常简单的“游戏”，你用箭头键移动红色框，有黑色背景。我看到了一些关于同一个问题的话题，其中一些人说是制作缓冲区，另一半说不做缓冲区，因为你的浏览器是为你做的。但无论如何，我只是认为我的代码中有一些错误，因为它闪烁但是它很简单，我认为它不应该。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 600;

var mySprite = {
    x: 200,
    y: 200,
    width: 50,
    height: 50,
    color: '#c00'
};
var yvel = 0;
var xvel = 0 ;
var moved = false;
var mspeed = 15;

var keysDown = {};
window.addEventListener('keydown', function(e) {
    keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
    delete keysDown[e.keyCode];
});

function update() {
    if (37 in keysDown) {
    moved = true;
    if(xvel > -mspeed){
        xvel -= 0.5;
        }
    }
    if (38 in keysDown) {
    moved = true;
        if(yvel > -mspeed){
        yvel -= 0.5
        }
    }
    if (39 in keysDown) {
    moved = true;
        if(xvel < mspeed){
        xvel += 0.5
        }
    }
    if (40 in keysDown) {
    moved = true;
        if(yvel < mspeed){
        yvel += 0.5
        }
    }
    mySprite.x += xvel;
    mySprite.y += yvel;
    if(moved == false){
        xvel = xvel * 0.95;
        yvel = yvel * 0.95;
        }
    moved = false;

}

function render() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = mySprite.color;
    ctx.fillRect(mySprite.x, mySprite.y, mySprite.width, mySprite.height); 
}

function run() {
    update();   
    render();
}

setInterval(run, 1000/60);

您可以在此处尝试：w3school 只需复制我的代码并将其放在标签内，并将“MyCanvas”名称更改为“canvas”

Answer 1

事实上，双缓冲已在主要浏览器上激活。你需要做的是与屏幕保持同步，就是这样提供requestAnimationFrame：
https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

这是requestAnimationFrame的polyfill：

requestAnimationFrame（rAF）尚未标准化：每个“供应商”即浏览器（Chrome，FF，Safari，...）都有自己的命名。
polyfill是一段代码，无论供应商是什么，它都会在您的环境中“安装”一个功能。在这里，您可以使用window.requestAnimationFrame访问requestAnimationFrame，您将不再关心供应商。
||运算符充当'扫描'：它将在第一个'truthy'（== true）表达式上停止并返回它而不评估剩余的表达式。因此，如果定义了msRequestAnimationFrame，则不会评估最后一个函数定义我必须补充说，在找不到requestAnimationFrame的情况下回退是非常糟糕的：setTimeout的准确性很差，但幸运的是rAF会被找到：它已经在Chrome上（没有前缀），Safari（webkit），IE＆gt; 9 （ms），Firefox（moz）和Opera（o）。）

// requestAnimationFrame polyfill
var  w=window, foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                      function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;

在交换更新和渲染（更好的方式）之后，你的运行循环将是：

function run() {
   render();
   update();   
   window.requestAnimationFrame(run);
}

run();

无论如何你感兴趣，我在这里讨论了javascript游戏循环： http://gamealchemist.wordpress.com/2013/03/16/thoughts-on-the-javascript-game-loop/

为什么需要计时器？上面的代码会一次又一次地调用run，因为run会以deferred调用结束run：run将在下次显示时调用（通常每秒60次）。您可以通过Date.now（）了解当前时间。

有关游戏循环，rAF和一些时间处理问题的更多见解，请参阅上面的链接。

以下是重构后的代码：

（小提琴在这里：http://jsbin.com/uvACEVA/2/edit）

var canvasWidth = 800, canvasHeight = 600;

var canvas = document.getElementById('canvas');
canvas.width = canvasWidth;   canvas.height = canvasHeight;
var ctx = canvas.getContext('2d');

// player definition

var mySprite = {
    x: 200,
    y: 200,
    xvel : 0,
    yvel : 0,
    velIncr : 0.5,
    velAttenuation : 0.95,
    maxVel : 15,
    width: 50,
   height: 50,
   color: '#c00',
  moved : false
};

mySprite.update = function (dt) {
  if (keysDown[37]) {
     this.moved = true;
     if(this.xvel > -this.maxVel){
        this.xvel -= this.velIncr;
      }
  }
  if (keysDown[38]) {
      this.moved = true;
      if(this.yvel > -this.maxVel){
         this.yvel -= this.velIncr;
      }
  }
  if (keysDown[39]) {
      this.moved = true;
      if(this.xvel < this.maxVel){
       this.xvel += this.velIncr;
      }
  }
  if (keysDown[40]) {
      this.moved = true;
      if(this.yvel < this.maxVel){
         this.yvel += this.velIncr;
      }
   }
                     // to have a frame-rate independant game,
                     // compute the real dt in run() and ...
  this.x += this.xvel; // ... use this.x += this.xvel * dt;
  this.y += this.yvel; // ...     this.y += this.yvel * dt;

  if(this.moved == false){
    this.xvel *= this.velAttenuation;
    this.yvel *= this.velAttenuation;
  }
  this.moved = false;
};

mySprite.draw = function(ctx) {
   ctx.fillStyle = this.color;
   ctx.fillRect(this.x, this.y, this.width, this.height); 
};

// Keyboard handling

var keysDown = [];

window.addEventListener('keydown', function(e) {
     keysDown[e.keyCode] = true;
     e.preventDefault();
     e.stopPropagation();
});

window.addEventListener('keyup', function(e) {
     keysDown[e.keyCode] = false;
     e.preventDefault();
     e.stopPropagation();
 });

// requestAnimationFrame polyfill

var  w=window, foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                      function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;


// main animation loop

function update(dt) {
    mySprite.update(dt); // only one for the moment.
}

function render(ctx) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    mySprite.draw(ctx);
}

var dt = 16;  // milliseconds elapsed since last call.
              // ideally you should compute it in run(), i didn't for simplicity
function run() {
   render(ctx);
   update(dt);   
   window.requestAnimationFrame(run);
}

run();

简单的html5 + javascript游戏闪烁

1 个答案: