Question

我制作的电子贺卡上有方形纸屑从画布顶部落到底部然后重置。

我让它与1个五彩纸屑对象一起工作，但我认为创建一个五彩纸屑对象数组会很好，所以1变量更改（NUM_CONFETTI）我可以更改五彩纸屑的数量而不会出错，

我得到的错误是：

TestPC.js：265 Uncaught TypeError：Confetti不是构造函数在TestPC.js：265

相关的代码行是：

var NUM_CONFETTI = 10;
var Confetti = new Array();

//create confetti object array
for (i = 0; i < NUM_CONFETTI; i++) {
    Confetti[i] = new Confetti(20,20,20,20,"red","blue",0,50);
}

我意识到目前所有对象都具有相同的确切值，我有一个RandomNumberGetter（）函数来清除错误后修复它。如果您想运行完整代码，请在下面发布：

//james gossling multimedia for web design spring 2018
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

var RandomGetter = function(min, max) {
    //set mins and maxes for ball speed to change angle slightly after ball reset
    min = min;
    max = max;
    return Math.floor(Math.random() * (max - min + 1) + min);
};  
//game classes go here
var Background = function(context,color) {
    this.context = context;
    this.color = color;
};
Background.prototype = {

    DrawBackground: function() {
    //for testing
    //console.log('here')
    context.strokeStyle = this.color;
    context.fillStyle = this.color;
    context.beginPath();
    context.rect(0,0,canvas.width,canvas.height);
    context.stroke(); // invoke stroke
    context.fill(); // invoke fill
    context.closePath();
},


};

Confetti = function(x, y, width, height, stroke, fill, translateFactor, fallSpeed) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.stroke = stroke;
    this.fill = fill;
    this.translateFactor = translateFactor;
    this.fallSpeed = fallSpeed;
};
Confetti.prototype = {
    Draw: function(x, y, width, height, stroke, fill, translateFactor) {
        context.strokeStyle = stroke;
        context.fillStyle = fill;
        context.beginPath();
        context.rect(x, y, width, height);
        context.stroke();
        context.fill();
        context.closePath();
    },
    GetX: function() {
        return this.x;
    },
    GetY: function() {
        return this.y;
    },
    GetWidth: function() {
        return this.width;
    },
    GetHeight: function() {
        return this.height;
    },
    GetStroke: function() {
        return this.stroke;
    },
    GetFill: function() {
        return this.fill;
    },
    GetTranslateFactor: function() {
        return this.translateFactor;
    },
    GetFallSpeed: function() {
        return this.fallSpeed;
    },

    Update: function(modifier) {
        this.y = this.y + (this.fallSpeed * modifier);
        if (this.y > canvas.height) {this.y = 0;}
    },

};

var DrawConfetti = function() {
    for (i = 0; i < NUM_CONFETTI; i++) {
        Confetti[i].Draw(Confetti[i].GetX(),Confetti[i].GetY(),Confetti[i].GetWidth(),Confetti[i].GetHeight(),Confetti[i].GetStroke(),Confetti[i].GetFill(),Confetti[i].GetTranslateFactor());
    }
}

var UpdateConfetti = function(modifier) {
    for (i = 0; i < NUM_CONFETTI; i++) {
        Confetti[i].Update(modifier);
    }
};

Firework = function() {

};
Firework.prototype = {



};

UncleSam = function() {

};
UncleSam.prototype = {



};

Text = function(context,title,x,y,color) {
    this.context = context;
    this.title = title;
    this.x = x;
    this.y = y;
    this.color = color;
    this.lineWidth = 2;
    this.lineHeight =(this.context.measureText('W').width) + Math.pow((this.context.measureText('W').width),2);
    this.font = '70pt Times New Roman';
    //GET METRICS
    this.metrics = this.context.measureText(this.title);
    this.width = this.metrics.width;
    this.maxWidth = canvas.width;
    this.GradChangeSpeed = 1;
    this.GradChangeOffset = 0;
    this.debugCounter = 0;
};
Text.prototype = {

    SetAttributes: function() {
        context.font
        context.textAlign = 'center'
        context.font = this.font;
        context.lineWidth = this.lineWidth;
        context.lineHeight = this.GetHeight;
        context.fillStyle = TextGradient;
        context.strokeStyle = this.color;
        //shadow attributes
        context.shadowColor = undefined;
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.shadowBlur = 0;
    },
    //GETTTERS SETTERS///////////////////
    GetTextX: function() {
        return this.x;
    },
    GetTextY: function() {
        return this.y;
    },
    GetTextLineHeight: function() {
        return this.lineHeight;
    },
    GetTextWidth: function() {
        return this.width;
    },
    //GETTERS SETTERS////////////
    SetColorGradient: function() {
        TextGradient.addColorStop(0,"red");
        TextGradient.addColorStop(this.GradChangeOffset,"white");
        TextGradient.addColorStop(.7,"blue");
    },
    Update: function(modifier) {
        this.GradChangeOffset = this.GradChangeOffset + (this.GradChangeSpeed * modifier);
        context.strokeText(this.GradChangeOffset.toFixed(2),canvas.width/2,canvas.height/2);
        if (this.GradChangeOffset > 1) {this.GradChangeOffset = .1;}
    },

    DrawText: function() {
        this.WrapText(this.context, this.title, this.x, this.y, this.maxWidth, this.lineHeight);
    },

    WrapText: function(context, title, x, y, maxWidth, lineHeight) {

        var words = title.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
            var testLine = line + words[n] + ' ';
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;

            if (testWidth > maxWidth && n > 0) {
                context.fillText(line, x, y);
                context.strokeText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
            }
            else {
                line = testLine;
            }
        }

        context.fillText(line, x, y);
        context.strokeText(line, x, y);
    },

};

//other functions
var ClearScreen = function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
};

var DrawObjects = function() {
    ClearScreen();
    Background1.DrawBackground();
    Text1.SetAttributes();
    Text1.SetColorGradient();
    Text1.DrawText();
    //Confetti1.Draw(Confetti1.GetX(),Confetti1.GetY(),Confetti1.GetWidth(),Confetti1.GetHeight(),Confetti1.GetStroke(),Confetti1.GetFill(),Confetti1.GetTranslateFactor(),Confetti1.GetFallSpeed());
    DrawConfetti();
};

var UpdateObjects = function(modifier) {
    Text1.Update(modifier);
    UpdateConfetti(modifier);
};


var Reset = function() {

};
//MAIN GAME LOOP FXN///////////////////
// The main game loop
var main = function() {
    var now = Date.now();
    var delta = now - then;
    var frameRateAdjust = delta/1000;

    DrawObjects(frameRateAdjust);

    UpdateObjects(frameRateAdjust);

    then = now;

    //possibly do RESET

    // Request to do this again ASAP
    requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

//START ECARD
//create variables
var then = Date.now();
var NUM_CONFETTI = 10;
var Confetti = [NUM_CONFETTI];

//create objects
Background1 = new Background(context,'black');
var Text1 = new Text(context,'Happy 4th of July!',canvas.width/2,canvas.height/10,'red');
var TextGradient = context.createLinearGradient(Text1.GetTextX(),Text1.GetTextY(),Text1.GetTextX()+Text1.GetTextWidth(),Text1.GetTextY()+Text1.GetTextLineHeight()/2)

//create confetti object array
for (i = 0; i < NUM_CONFETTI; i++) {
    //Confetti[i] = new Confetti(RandomGetter(0,canvas.width),-10,RandomGetter(5,30),RandomGetter(5,30),"red","blue",RandomGetter(0,1),RandomGetter(30,50));
Confetti[i] = new Confetti(20,20,20,20,"red","blue",0,50);
}

//start eCard animations
Reset();
main();

Answer 1

似乎问题是你有一个名为Confetti的构造函数，还有一个名为Confetti的数组。尝试更换：

var Confetti = new Array();

与

var confettiArr = [];

然后做：

for (i = 0; i < NUM_CONFETTI; i++) {
    confettiArr.push(new Confetti(20,20,20,20,"red","blue",0,50));
}

如何调试JavaScript错误“Uncaught TypeError：X不是构造函数”

1 个答案: