0

好的，我一直在将我的“功能意大利面条”转换为我的 Pong 游戏的展示原型，并且没有任何运气来绘制桨。

这将绘制黑色画布，但桨拒绝绘制。

我注释掉了 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();

​</p>

任何想法发生了什么，或者我不理解什么概念？此外，对我的代码的任何评论，否则将不胜感激。

谢谢！

编辑：我最初从 Pong 类初始化了桨，我假设这是正确的，但是当我试图解决桨问题时，这段代码经历了很多变化...... arrrg！

4

1 回答 1

1

问题似乎出在您的“私人成员”、颜色、宽度和高度上。这些成员在一些特权成员函数的闭包中——这意味着它们不能作为“this”的属性访问。

例如，在下面的代码中

函数 myClass() {
    变量 x = 1;
    this.sayX = function() {return this.x};
    变量 y = 2;
    this.sayY = function() {return y};
}

var myObject = new myClass();

myObject.sayX(); // 返回“未定义”
myObject.sayY(); // 返回“2”

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

于 2013-01-01T14:10:40.800 回答