javascript - 私のゲームをより OOPey にしようとした JavaScript が壊れてしまいました

Question

もともと私は var playerPaddle1 = {...} を使用していましたが、ポンゲームが機能するようになりましたが、より良い OOP テクニックを学びたいので、次のようになりました:

function Paddle() {
    this.x = 50;
    this.y = 234;
    this.vx = 0;
    this.vy = 0;
    this.width = 19;
    this.height = 75;
    this.draw = function() { 
        var self = this;
        var img = new Image();  
        img.src = 'images/paddle.png';  
        img.onload = function(){  
            ctx.drawImage(img, self.x, self.y);  
        };
    };
    this.update = function() {
        // Divide velocity by FPS before adding it
        // onto the position.
        this.x += this.vx / FPS;
        this.y += this.vy / FPS;
         // Collision detection
        if ( (this.x) < 0 ) {
            this.x = 0;
        }
        /*if ( (this.x + this.width) > (canvas.width / 2) ) {
            this.x = (canvas.width / 2) - this.width;*/

        if ( (this.y) < 0 ) {
            this.y = 0;
        }
        if ( (this.y + this.height) > canvas.height) {
            this.y = canvas.height - this.height;
        }
    };
};

var player1Paddle = new Paddle();

そして、keyboardInput スクリプトがパドルに対して機能しなくなりました (キーを押してもパドルが動かなくなりました)。

window.onkeydown = function( e ) {
    e = e || window.event;
    var code = e.keyCode;
    if ( code === 37 ) {
        player1Paddle.vx = -200;
    } else if ( code === 38 ) {
        player1Paddle.vy = -200;
    } else if ( code === 39 ) {
        player1Paddle.vx = 200;
    } else if ( code === 40 ) {
        player1Paddle.vy = 200;
    }
};

window.onkeyup = function( e ) {
    e = e || window.event;
    var code = e.keyCode;
    if ( code === 37 ) {
        player1Paddle.vx = 0;
    } else if ( code === 38 ) {
        player1Paddle.vy = 0;
    } else if ( code === 39 ) {
        player1Paddle.vx = 0;
    } else if ( code === 40 ) {
        player1Paddle.vy = 0;
    }
};

まったく同じように設定したと思いましたが、変数オブジェクトだけでなくコンストラクター関数を使用しました