无法为乒乓游戏绘制划桨

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' 

你需要或者删除您引用“这”在你的方法调用伪私有成员并定义调用它们在同一背景下的功能，或者让它们成为对象的公共成员。否则，绘图函数将无法访问桨的颜色和尺寸（这解释了为什么它们不绘制）。