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() {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 に答える