Question

Okay, I’ve been converting my “function spaghetti” into revealing prototypes for my Pong game, and haven’t had any luck drawing the paddles.

This will draw a black canvas, but the paddles refuse to draw.

I commented out the clearCanvas() to see if it was an issue there, but to no avail.

Seems like you’ll definitely want to http://jsbeautifier.org the code below, as it didn’t transfer very well =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();

​

Any ideas what’s going on, or what concept I’m not understanding?
Also, any comments about my code otherwise would be much appreciated.

Thank you!

EDIT: I initially initialized the paddles from the Pong class, I’m assuming that’s correct, but this code has undergone so many changes as I was trying to fix the paddle issue… arrrg!

Answer 1

The problem seems to be with your ‘private members’, colour, width and height. These members are in the closure of some privileged member functions – and that means they can’t be accessed as properties of ‘this’.

For instance, in the following code

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'

You need to either remove your references to ‘this’ in your methods that call the pseudo-private members and define the functions that call them in the same context, or make them public members of the object. Otherwise the draw functions won’t have access to the colour and dimensions of the paddles (which explains why they don’t draw).