不能在乒乓球游戏中划桨

Unable to draw paddles for pong game

本文关键字:游戏 乒乓球 不能      更新时间:2023-09-26

好吧,我一直在把我的"功能面条"转换成我的《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类初始化桨,我假设这是正确的,但这段代码经历了这么多的变化,因为我试图修复桨的问题…arrrg !

问题似乎是与你的"私人成员",颜色,宽度和高度。这些成员位于一些特权成员函数的闭包中,这意味着它们不能作为'this'的属性访问。

例如,在下面的代码

中<>之前函数myClass() {Var x = 1;这一点。sayX = function(){返回this.x};Var y = 2;这一点。sayY = function(){返回y};}var myObject = new myClass();myObject.sayX ();//返回'undefined'myObject.sayY ();//返回'2'之前

你需要在调用伪私有成员的方法中删除对'this'的引用,并在相同的上下文中定义调用它们的函数,或者使它们成为对象的公共成员。否则,绘制函数将无法访问桨的颜色和尺寸(这解释了为什么它们不绘制)。