Question

好吧，我一直在将我的“功能意大利面”转换为我的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();

任何想法发生了什么，或者我不理解的概念是什么？此外，任何关于我的代码的评论都将非常感激。

谢谢！

编辑：我最初从Pong类初始化了padd，我认为这是正确的，但是这段代码经历了很多变化，因为我试图修复paddle问题... 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'

您需要在调用伪私有成员的方法中删除对'this'的引用，并定义在同一上下文中调用它们的函数，或者使它们成为对象的公共成员。否则绘制功能将无法访问拨片的颜色和尺寸（这解释了他们不绘制的原因）。

无法为乒乓球比赛画划桨

1 个答案: