面向對象的彈跳球

Question

自從我使用一種功能語言進行編程以來已經有好長時間了。 我的代碼正常運行； 但是由於我對OOD的偏好，我不喜歡它。

var canvasWidth = 900;
var canvasHeight = 200;

var canvas0;
var context0;
var x0 = 20;
var y0 = 20;
var dx0 = 4;
var dy0 = 4;

function draw() {
    context0.clearRect(0, 0, context0.canvas.width, context0.canvas.height);
    context0.beginPath();
    context0.fillStyle = "red";
    context0.arc(x0, y0, 20, 0, 2 * Math.PI, true);
    context0.closePath();
    context0.fill();

    // Boundary Logic
    if (x0 < 13 || x0 > context0.canvas.width - 13) {
        dx0 = (-dx0);
    }
    if (y0 < 13 || y0 > context0.canvas.height - 13) {
        dy0 = (-dy0);
    }
    x0 += dx0;
    y0 += dy0;
}

function init() {
    'use strict';
    canvas0 = document.getElementById("gfxCanvas");
    context0 =  canvas0.getContext('2d');
    context0.canvas.width  = canvasWidth;
    context0.canvas.height = canvasHeight;
    setInterval(draw, 10);
}

我試圖將其重構為更多面向對象的設計，但是在圖形處理方面遇到了問題。 我可以使球出現一次，但不能移動。 這是我的重構代碼； 請注意，它處於重構的中間點，因此由於隨機修補而存在一些明顯的錯誤。

function Ball(x, y, r, color) {
    this.radius = r;
    this.x = x;
    this.y = y;  
    this.color = color;
    console.log("x in creation" + this.x);
    console.log("y in creation" + this.y);
    draw();

}
Ball.prototype.draw = function(){
    context1.beginPath();
    console.log("x in DRAW()" + this.x);
    console.log("y in DRAW()" + this.y);
    context1.fillStyle = this.color;
    context1.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
    context1.closePath();
    context1.fill();
};

Ball.prototype.move = function(dx, dy){
    // Boundary Logic
    if (this.x < 13 || this.x > context1.canvas.width - 13) {
        dx = (-dx);
    }
    if (this.y < 13 || this.y > context1.canvas.height - 13) {
        dy = (-dy);
    }

    this.x += dx;
    this.y += dy;

};

function initialize() {
    canvas1 = document.getElementById("gfxCanvas2");
    context1 =  canvas1.getContext('2d');
    context1.canvas.width  = 900;
    context1.canvas.height = 200;
    ball1 = new Ball(20,20,20, "red");
    setInterval(ball1.move(4,4), 10);
}

我希望此方法為移動方法。 實際方法將采用方向/速度矢量。

setInterval(ball1.move(4,4), 10);

Answer 1

setInterval(ball1.move(4,4), 10);

這與您預期的方式不符：它只調用一次ball1.move(4,4) ，然后每10毫秒調用一次結果。 您想改為每10毫秒調用一次move方法，對嗎？ 有兩種方法可以做到這一點：

setInterval(function() {
  ball1.move(4,4);
}, 10);

或者這樣（我認為更優雅）：

setInterval(ball1.move.bind(ball1,4,4), 10);

Answer 2

您可以使用bind ：

setInterval(ball1.move.bind(ball1, 4, 4), 10);

這等同於包裝您的調用以move到匿名函數中：

setInterval(function() { ball1.move(4, 4); }, 10);

然后，您還需要更新move以便其調用也適當draw 。

另外，我不會使用全局變量來訪問繪圖上下文-即使我不打算完全使用OOP，我也會確保draw方法和move方法采用上下文（為了簡單起見，被球“擁有”）。

Answer 3

謝謝各位的幫助。 您很好地澄清了所有內容，並向我指出了正確的方向。 我懷疑它以您所說的方式工作，但是我不確定。 我知道我的實現存在一些問題，但以我目前的知識不能這么簡潔。

但是，我發現了我的問題，您的解決方案正在以更直接的方式解決。 我不能用OOD范例處理javascript。 我將使用更具功能性的設計模式來重構代碼。 不嘗試將代碼強制轉換為OO設計將使事情變得容易得多。 您的解決方案有所幫助，但是邊界檢查代碼是我遇到的下一個問題。

我將把它設計成球形對象的模塊設計模式，該模式應該更適合js作用域/閉包和過程工作流。