JavaScript，试图让我的游戏更 OOPey，打破了它答案

【问题标题】：JavaScript, trying to make my game more OOPey, broke itJavaScript，试图让我的游戏更 OOPey，打破了它
【发布时间】：2013-07-21 23:15:15
【问题描述】：

最初我使用 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();

现在我的键盘输入脚本不再适用于桨（当我按下键时我的桨将不再移动）。

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;
    }
};

我以为我设置的完全一样，但使用构造函数而不是变量对象

【问题讨论】：

标签： javascript oop

【解决方案1】：

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;
    }
    player1Paddle.update(); // you forget to tell it to do something with the new info!
    player1Paddle.draw();
};

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;
    }
    player1Paddle.update(); // you forget to tell it to do something with the new info!
    player1Paddle.draw();
};

【讨论】：

哦，谢谢，但我从来没有 draw() 因为我有这个： // 游戏循环绘制函数 function draw() { ctx.clearRect( 0, 0, canvas.width, canvas.height ) ;球.draw(); player1Paddle.draw(); //playerPaddle2.draw(); }; // 游戏循环更新函数 function update() { ball.wallDetect(); ball.paddleDetect(player1Paddle); console.log(player1Paddle.x); //playerPaddle.update(); //playerPaddle2.update(); };功能滴答（）{画（）;更新（）; }; setInterval(tick, 1000 / FPS);
AANNDDD 我现在通过阅读我上面的评论看到，我已经注释掉了“playerPaddle.update()”，并且它的对象名称也错误，应该是 player1Paddle.update()。傻我。谢谢，你让我看到了我的错误！
是的，我应该很抱歉。试图为每个人简化它，但它是重要的代码。
哈哈哈......很高兴我能“有点”帮助
堆栈溢出似乎认为我的声誉太低而无法投票。嘘。如果要告诉人们问题已解决，我可以删除问题。