不能在乒乓球游戏中划桨
Unable to draw paddles for pong game
好吧,我一直在把我的"功能面条"转换成我的《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'的引用,并在相同的上下文中定义调用它们的函数,或者使它们成为对象的公共成员。否则,绘制函数将无法访问桨的颜色和尺寸(这解释了为什么它们不绘制)。
相关文章:
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 如何有效地将游戏数据存储在URL查询字符串中
- Javascript游戏输入失去焦点
- 如何在p5.js中管理多智力竞赛游戏的多个屏幕
- setInterval游戏循环的范围问题
- 为网络游戏制作动画
- 重置游戏和获胜者问题
- 帆布游戏的滞后运动
- Javascript单独的游戏窗口
- Javascript猜测游戏-计数器不工作
- JavaScript纸牌游戏
- 简单游戏的画布与SVG
- 我的HTML5游戏不时暂停,我如何才能知道它是否's是由垃圾收集引起的
- 多人游戏完全在浏览器中运行,服务器仅用于数据库
- 通过PHP将单词添加到游戏中
- 2D Processingjs游戏中的冲突
- Javascript岩石,纸,剪刀游戏
- 帆布“乒乓球”游戏桨
- 什么技术可以用于这个基于浏览器的乒乓球游戏
- 不能在乒乓球游戏中划桨