Question

考虑以下代码：

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

(function () {
    var FPS = 60;
    var DEFAULT_WIDTH = 600;
 
    function drawBoard(){
        this.dimensions = drawBoard.defaultDimensions;
        this.config = drawBoard.config;
        this.init();
    }

    drawBoard.config ={
        ACCELERATION: 0.001,
        INITIAL_BOUNCE_VELOCITY: 12,
        MIN_JUMP_HEIGHT: 35,
    }
    drawBoard.defaultDimensions = {
        WIDTH: DEFAULT_WIDTH,
        HEIGHT: 150
    };

    drawBoard.prototype = {
        init: function() {
            this.adjustDimensions();
            this.containerEl = document.getElementById('canvasBox');
            this.canvas = createCanvas(this.containerEl, this.dimensions.WIDTH, this.dimensions.HEIGHT, 0);
            this.canvasCtx = this.canvas.getContext('2d');
            this.canvasCtx.fillStyle = '#f7f7f7';
            this.canvasCtx.fill();
           
        },
        adjustDimensions: function() { 
                this.canvas.width = this.dimensions.WIDTH;
                this.canvas.height = this.dimensions.HEIGHT;
        }
    }

    function createCanvas(container, width, height, opt_classname) {
        var canvas = document.createElement('canvas');
        canvas.id = "myCanvas";
        canvas.width = width;
        canvas.height = height;
        container.appendChild(canvas);
        return canvas
    }

}());
new drawBoard();

总而言之，我正在尝试使用画布创建一个迷你游戏。

我正试图通过将事物分解成各个部分，然后将它们链接在一起来使自己变得更容易。

但是，我一直认为基本上所有东西都没有定义（从底部的画板开始）。

我正在尝试遵循示例here，但是我看不到他们是如何实现的，以及为什么在遵循示例时它对我不起作用。

我从页面上看到了JavaScript的源代码（很大的地方可以在这里发布）。

这一切都很有意义，直到我去运行我的代码并且不起作用为止。

Answer 1

首先，在定义功能Runner之后，检查一下他们在做什么。他们正在将其添加到window对象。那就是让他们直接在底部调用它的原因。

尝试从此开始：

function drawBoard(){
    this.dimensions = drawBoard.defaultDimensions;
    this.config = drawBoard.config;
    this.init();
}

window['drawBoard'] = drawBoard;

使用OOP的JavaScript迷你游戏

1 个答案: