無法爲乒乓遊戲繪製划槳

Question

好吧，我一直在將我的「功能意大利麪」轉換爲我的乒乓遊戲的原型，並沒有任何運氣畫槳。

這將畫一個黑色的畫布，但划槳拒絕畫畫。

我註釋了clearCanvas（），看看它是否是一個問題，但無濟於事。

好像你肯定會想http://jsbeautifier.org下面的代碼，因爲它並沒有轉移得非常好= C

/*jslint browser: true, devel: true, indent: 4, undef: true, todo: true*/ 

canvas = document.createElement('canvas'); 
canvas.width = 600; 
canvas.height = 400; 
document.body.appendChild(canvas); 
context = canvas.getContext('2d'); 

///////////////////////////////////////////////////////////// 

var Paddle = function (playerSide) { 
'use strict'; 
//constructor, variables go here 
var x, y = 20, 
    width = 10, height = 50, 
    colour = '#FFF'; 
//Determine which paddle belongs to which player 
if (playerSide === 'left') { 
    this.x = 20; 
} else { 
    this.x = 580; 
} 
}; 

Paddle.prototype = function() { 
"use strict"; 
//Private members 
var draw = function (x, y) { 
    context.fillStyle = this.colour; 
    context.fillRect(x, y, this.width, this.height); 
}; 
//Public members 
return { 
    draw: draw 
}; 
}(); 

///////////////////////////////////////////////////////////// 

var Pong = function() { 
"use strict"; 
//constructor, variables go here 
//Events 
canvas.onmousemove = function (mouse) { 
    this.y = mouse.pageY; 
}; 
this.animate(); 
}; 

Pong.prototype = (function() { 
"use strict"; 
//Private members 
// requestAnim shim layer by Paul Irish 
window.requestAnimFrame = (function() { 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function (/* function */callback, /* DOMElement */element) { 
      window.setTimeout(callback, 1000/60); 
     }; 
}()); 

var animate = function() { 
     requestAnimFrame(animate); 
     clearCanvas(); 
     drawPaddles(); 
    }, 

    drawPaddles = function() { 
     leftPaddle.draw(leftPaddle.x, leftPaddle.y); 
     rightPaddle.draw(rightPaddle.x, rightPaddle.y); 
    }, 

    clearCanvas = function() { 
     context.clearRect(0, 0, 600, 400); 
    }; 

//Public members 
return { 
    animate: animate 
}; 
}()); 

var leftPaddle = new Paddle('left'); 
var rightPaddle = new Paddle('right'); 

var pong = new Pong(); 

任何想法發生了什麼事，或者什麼概念我米不理解？ 此外，任何有關我的代碼的意見，否則將不勝感激。

謝謝！

編輯：我最初初始化Pong類的槳，我假設這是正確的，但是這段代碼已經經歷了很多變化，因爲我試圖修復槳問題...... arrrg！

Answer 1

問題似乎與您的'私人成員'，顏色，寬度和高度。這些成員正在關閉一些特權成員函數 - 這意味着它們不能作爲「this」的屬性訪問。

例如，在下面的代碼

 
function myClass() { 
    var x = 1; 
    this.sayX = function() {return this.x}; 
    var y = 2; 
    this.sayY = function() {return y}; 
} 

var myObject = new myClass(); 

myObject.sayX(); // returns 'undefined' 
myObject.sayY(); // returns '2' 

你需要或者刪除您引用「這」在你的方法調用僞私有成員並定義調用它們在同一背景下的功能，或者讓它們成爲對象的公共成員。否則，繪圖函數將無法訪問槳的顏色和尺寸（這解釋了爲什麼它們不繪製）。