更改JavaScript对象定义样式将使画布保持空白。
更改JavaScript对象定义样式将使画布保持空白。
提问于 2014-08-11 23:15:52
我正在使用画布标记制作一个HTML5游戏，我试图改变我在JavaScript中创建的类的定义方式，我让它使用一种定义样式，而当我试图用另一种风格定义它时，它就停止工作了。我不知道我做错了什么，因为我刚刚开始熟悉JavaScript。当我尝试另一种定义风格时，我的画布不起作用，屏幕上什么也没有出现。
本质上，在不起作用的版本中，我尝试创建对象Player()，然后用它创建一个新的player对象，这样我就可以在脚本的其余部分使用剩下的player.doThis()调用。
var player = new Player();工作宣言
var player = {
color: "#00A",
x: 10,
y: playerLocation,
width: 32,
height: 32,
speed: (10/1830) * CANVAS_WIDTH,
zone: [0, 0],
//sprite: Sprite("player.png"),
//spriteImage: new Image(),
//spriteImage.src = "player.png",
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
},
drawDebug: function() {
canvas.font = "normal 7pt Arial";
//canvas.fillText("Cosine: " + transition , this.x, (this.y-55));
canvas.fillText("In Zone " + this.zone[0] + " of " + this.zone[1], this.x, (this.y-45));
//canvas.fillText("Zones " + this.zone[1], this.x, (this.y-55));
canvas.fillText("X: " + this.x , this.x, (this.y-35));
canvas.fillText("Y: " + this.y , this.x, (this.y-25));
},
determineZones: function(numberOfZones) {
//this sets the boundaries of the zones
zoneLocations[0] = 0;
var gap = CANVAS_WIDTH - (infoBoundaries * 2) - infoWidth;
for (var i = 1; i < numberOfZones; i++)
{
zoneLocations[i] = (gap / (numberOfZones - 1)) * i;
}
},
update: function() { //all of the controls are placed in here
if ((keydown.left) || (keydown.a))
{
this.x -= this.speed;
}
if ((keydown.right) || (keydown.d))
{
this.x += this.speed;
}
this.x = this.x.clamp(0, CANVAS_WIDTH - this.width);
if(scene == SCENES.length)//this would added controls for perhaps that last boss levels
{
}
},
};不工作声明(我正在努力工作)
function Player()
{
this.color = "#00A";
this.x = 10;
this.y = playerLocation;
this.width = 32;
this.height = 32;
this.speed = (10/1830) * CANVAS_WIDTH;
this.zone = [0, 0];
//sprite: Sprite("player.png"),
//spriteImage: new Image(),
//spriteImage.src = "player.png",
function draw()
{
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
function drawDebug()
{
canvas.font = "normal 7pt Arial";
//canvas.fillText("Cosine: " + transition , this.x, (this.y-55));
canvas.fillText("In Zone " + this.zone[0] + " of " + this.zone[1], this.x, (this.y-45));
//canvas.fillText("Zones " + this.zone[1], this.x, (this.y-55));
canvas.fillText("X: " + this.x , this.x, (this.y-35));
canvas.fillText("Y: " + this.y , this.x, (this.y-25));
}
function determineZones(numberOfZones)
{
//this sets the boundaries of the zones
zoneLocations[0] = 0;
var gap = CANVAS_WIDTH - (infoBoundaries * 2) - infoWidth;
for (var i = 1; i < numberOfZones; i++)
{
zoneLocations[i] = (gap / (numberOfZones - 1)) * i;
}
}
function update()
{ //all of the controls are placed in here
if ((keydown.left) || (keydown.a))
{
this.x -= this.speed;
}
if ((keydown.right) || (keydown.d))
{
this.x += this.speed;
}
this.x = this.x.clamp(0, CANVAS_WIDTH - this.width);
if(scene == SCENES.length)//this would added controls for perhaps that last boss levels
{
}
}
}
var player = new Player();无论如何，如果我在定义这个javascript类时做错了什么，请告诉我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-11 23:25:45
问题是您正在使用function functionName() {}而不是this.functionName = function() {}创建方法(注意this部分，这很重要)。不幸的是，您不能执行function this.functionName() {}，因为这是一个语法错误。
您可以通过执行console.log(player.update)看到这一点，您将看到它是未定义的。
解决方案:在创建函数时使用此方法。
this.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
this.drawDebug = function() {
canvas.font = "normal 7pt Arial";
//canvas.fillText("Cosine: " + transition , this.x, (this.y-55));
canvas.fillText("In Zone " + this.zone[0] + " of " + this.zone[1], this.x, (this.y - 45));
//canvas.fillText("Zones " + this.zone[1], this.x, (this.y-55));
canvas.fillText("X: " + this.x, this.x, (this.y - 35));
canvas.fillText("Y: " + this.y, this.x, (this.y - 25));
}
// So on
this.update = function() { //all of the controls are placed in here
if ((keydown.left) || (keydown.a)) {
this.x -= this.speed;
}
if ((keydown.right) || (keydown.d)) {
this.x += this.speed;
}
this.x = this.x.clamp(0, CANVAS_WIDTH - this.width);
if (scene == SCENES.length) //this would added controls for perhaps that last boss levels
{}
}或者，可以将函数附加到prototype对象。例如：
function Player() {
// Non function declarations here
}
Player.prototype.draw = function() {
// Whatever
}
Player.prototype.drawDebug = function() { // etc.
}优点是节省内存，特别是因为您可能不会重新分配到这些属性(也就是说，您不会编写player.draw = function() { /* New function here */ }，对吗？)如果你这样做的话，即使用原型方法，它也不会节省内存。
(可能的)缺点是player.hasOwnProperty("draw")或player.hasOwnProperty("drawDebug")将返回false (即使player具有该属性)。另一个缺点是这些函数不能直接访问构造函数中的任何var声明。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25253879
复制相关文章
相似问题
腾讯云开发者
