javascript - 如何在俄罗斯方 block 游戏中正确使用requestAnimationFrame函数？

Question

我正在尝试使用 JavaScript 编写俄罗斯方 block 游戏，但几天前我一直在尝试为创建的 block 制作动画。我的代码如下所示:

Draw.js

export default class Draw {
    constructor() {
        this._canvas = document.getElementById(`main_screen`);
        this._context = this._canvas.getContext(`2d`);
    }

    get canvas() {
        return this._canvas;
    }

    get context() {
        return this._context;
    }

    get clearAll() {
        return this._clearAll();
    }

    get save() {
        return this._save();
    }

    _clearAll() {
        this._context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    _save() {
        this._context.save();
    }
}

BlockController.js

import Draw from './Draw.js';
import Generator from './Generator.js';

export default class BlockController extends Draw {
    constructor(x, y, width, height) {
        super();
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.blockStartPoint = 160;
    }

    get drawBlock() {
        return this._drawBlock();
    }

    /**
     * Function creates and draws block.
     */
    async _drawBlock() {
        this.x = this.blockStartPoint;
        const block = await Generator.getBlock();
        const blockColor = await Generator.getBlockColor();

        block.forEach(row => {
            row.forEach(column => {
                if(column === 1) {
                    this.context.fillStyle = `#${blockColor}`;
                    this.context.fillRect(this.x, this.y, this.width, this.height);
                    this.context.strokeRect(this.x, this.y, this.width, this.height);
                }
                this.x += this.width;
            });
            this.x = this.blockStartPoint;
            this.y += this.height;
        });
    }

    moveBlock() {
        this.y += this.height;
    }
}

BoardController.js

import Draw from './Draw.js';

export default class BoardController extends Draw {
    constructor(x, y, width, height) {
        super();
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.blocksAmountInRow = this.canvas.width / width;
        this.blockAmountInColumn = this.canvas.height / height;
    }

    get drawBoard() {
        return this._drawBoard();
    }

    /**
     * Function creates and draws game board.
     */
    _drawBoard() {
        for (let i = 0; i < this.blocksAmountInRow; i++) {
            for (let j = 0; j < this.blockAmountInColumn; j++) {
                this.context.fillStyle = `#E6F1FF`;
                this.context.strokeRect(this.x, this.y, this.width, this.height);
                this.context.fillRect(this.x, this.y, this.width, this.height);
                this.y += this.height;
            }
            this.x += this.width;
            this.y = 0;
        }
    }
}

GameController.js

import BlockController from './BlockController.js';
import BoardController from './BoardController.js';

export default class GameController {
    constructor() {
        this.boardController = new BoardController(0, 0, 20, 20);
        this.blockController = new BlockController(0, 0, 20, 20);
    }

    update() {
        this.boardController.clearAll;
        this.boardController.drawBoard;
        this.blockController.drawBlock;
        this.blockController.moveBlock();
    }

    init() {
        window.requestAnimationFrame(this.update.bind(this));
    }
}

有人知道如何强制 block 动画吗？我知道我的更新功能会一遍又一遍地创建新的 block 和板，但我不知道如何处理。感谢您的帮助!

Answer 1

正如 @kshetline 所指出的:

window.requestAnimationFrame(() => this.update());

接缝是问题所在。修复可能如下所示:

init () {

  const that = this;
  let last = -Infinity;

  (function loop () {
    const 
      now = new Date().getTime(),
      delta = now - last
    ;

    if (delta > 500) {  // delta is just some delay
      that.update();
      last = now;
    }

    that.frameID = window.requestAnimationFrame(loop);
  })()
}

如果您想使用 window.cancelAnimationFrame 停止循环，则使用 window.requestAnimationFrame 的返回值会派上用场。

window.requestAnimationFrame 要求浏览器触发一次给定的回调，因此得到一个真正的“循环”，您需要一遍又一遍地执行此操作。不需要使用setTimeout来运行window.requestAnimationFrame。如果没有延迟，window.requestAnimationFrame 每秒可以运行六十次，但如果浏览器无法快速计算和渲染，速度就会变慢。因此，如果需要的话，捕获时间步长可能是个好主意。