以前构建对象时不是构造函数错误
我正在玩弄画布动画,并且当我已经成功构建了一条线时,我一直在动画函数的第120行出现“线不是构造函数”错误目的。我一定会欣赏这个新鲜的一双眼睛!以前构建对象时不是构造函数错误
基本上,一旦现有的Line命中一个平台,它应该创建一个新的Line对象,它将朝另一个方向前进,但是它会一直抛出错误。
代码:
window.onload = function() {
"use strict";
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
canvas.style.backgroundColor = '#000';
document.body.appendChild(canvas);
canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d'),
grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0, "#000");
grad.addColorStop(0.25, "#101010");
grad.addColorStop(0.5, "#101010");
grad.addColorStop(0.75, "#101099");
grad.addColorStop(1, "#0000ff");
var padding = 100,
i,
y,
platforms = [],
platpos,
yPossies = [],
numPlatforms = 20,
lineRate = 1,
lines = [],
index,
lineDir = 1,
newLine = false;
Array.prototype.contains = function (obj) {
for (i = this.length - 1; i >= 0; i -= 1) {
if (this[i] !== obj) {
return true;
}
}
return false;
};
var Platform = function() {
this.width = Math.random() * 250;
this.height = 3;
this.posX = ((Math.random() * (canvas.width - padding)) - this.width) + padding;
this.posY = ((Math.random() * (canvas.height - padding)) - this.height);
if (yPossies.contains(this.posY)) {
this.posY += (Math.random() * 55);
}
platpos = this.posY;
yPossies.push(platpos);
this.draw = function() {
ctx.beginPath();
ctx.lineWidth = this.height;
ctx.strokeStyle = "#929292";
ctx.moveTo(this.posX, this.posY);
ctx.lineTo(this.posX + this.width, this.posY);
ctx.stroke();
};
},
Line = function() {
ctx.strokeStyle = "yellow";
ctx.lineWidth = 2;
this.posX = canvas.width/2;
//Uncomment below to randomise the starting position of the line
// this.posX = ((Math.random() * (canvas.width - 200)) + 200);
this.posY = 1;
this.newPosY = this.posY;
this.lineRate = lineDir;
lineDir = -lineDir;
this.draw = function() {
ctx.beginPath();
ctx.moveTo(this.posX, this.posY);
this.posY += this.lineRate;
ctx.lineTo(this.posX, this.posY);
ctx.stroke();
};
this.update = function() {
this.posY += this.lineRate;
for (Platform of platforms) {
if (this.posY >= Platform.posY && this.posY - Platform.posY <= 3) {
if (this.posX >= Platform.posX && this.posX <= Platform.posX + Platform.width) {
this.posY = Platform.posY - 2;
this.posX += this.lineRate;
newLine = true;
}
}
}
this.draw();
};
},
setupPlatforms = function() {
for (i = 0; i < numPlatforms; i += 1) {
platforms[i] = new Platform();
}
for (i = 0; i < numPlatforms; i += 1) {
platforms[i].draw();
}
lines[0] = new Line();
animate();
},
animate = function() {
if (newLine) {
lines[lines.length] = new Line();
}
for (Line of lines) {
Line.update();
}
requestAnimationFrame(animate);
};
setupPlatforms();
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Push</title>
<script src='push.js'></script>
</head>
<body>
</body>
</html>
您在这里
animate = function() {
if (newLine) {
lines[lines.length] = new Line(); // <- once the foreach loop ran, Line class will have become the last Line in your lines array
}
for (Line of lines) { // <- this line will reassign the Line class
Line.update();
}
requestAnimationFrame(animate);
};
overwritting的Line
功能在你for...of
声明,重新分配线阵列 lines
的元素。
最简单的修复,是您for...of
循环更改为以下
for (let line of lines) {
line.update();
}
一个更安全的方式确保这不会发生。将定义功能const
,使它们不能被重新分配如下面的编辑片段。这再一次表明,你与Platform
类,未在运行您的代码中显示,它可以固定为以下这里
for (let platform of platforms) {
if (this.posY >= platform.posY && this.posY - platform.posY <= 3) {
if (this.posX >= platform.posX && this.posX <= platform.posX + platform.width) {
this.posY = platform.posY - 2;
this.posX += this.lineRate;
newLine = true;
}
}
}
这些变化的另一个错误,你的代码似乎工作,并且会在碰到平台后继续。
window.onload = function() {
"use strict";
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
canvas.style.backgroundColor = '#000';
document.body.appendChild(canvas);
canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d'),
grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0, "#000");
grad.addColorStop(0.25, "#101010");
grad.addColorStop(0.5, "#101010");
grad.addColorStop(0.75, "#101099");
grad.addColorStop(1, "#0000ff");
var padding = 100,
i,
y,
platforms = [],
platpos,
yPossies = [],
numPlatforms = 20,
lineRate = 1,
lines = [],
index,
lineDir = 1,
newLine = false;
Array.prototype.contains = function(obj) {
for (i = this.length - 1; i >= 0; i -= 1) {
if (this[i] !== obj) {
return true;
}
}
return false;
};
const Platform = function() {
this.width = Math.random() * 250;
this.height = 3;
this.posX = ((Math.random() * (canvas.width - padding)) - this.width) + padding;
this.posY = ((Math.random() * (canvas.height - padding)) - this.height);
if (yPossies.contains(this.posY)) {
this.posY += (Math.random() * 55);
}
platpos = this.posY;
yPossies.push(platpos);
this.draw = function() {
ctx.beginPath();
ctx.lineWidth = this.height;
ctx.strokeStyle = "#929292";
ctx.moveTo(this.posX, this.posY);
ctx.lineTo(this.posX + this.width, this.posY);
ctx.stroke();
};
},
Line = function() {
ctx.strokeStyle = "yellow";
ctx.lineWidth = 2;
this.posX = canvas.width/2;
//Uncomment below to randomise the starting position of the line
// this.posX = ((Math.random() * (canvas.width - 200)) + 200);
this.posY = 1;
this.newPosY = this.posY;
this.lineRate = lineDir;
lineDir = -lineDir;
this.draw = function() {
ctx.beginPath();
ctx.moveTo(this.posX, this.posY);
this.posY += this.lineRate;
ctx.lineTo(this.posX, this.posY);
ctx.stroke();
};
this.update = function() {
this.posY += this.lineRate;
for (let platform of platforms) {
if (this.posY >= platform.posY && this.posY - platform.posY <= 3) {
if (this.posX >= platform.posX && this.posX <= platform.posX + platform.width) {
this.posY = platform.posY - 2;
this.posX += this.lineRate;
newLine = true;
}
}
}
this.draw();
};
},
setupPlatforms = function() {
for (i = 0; i < numPlatforms; i += 1) {
platforms[i] = new Platform();
}
for (i = 0; i < numPlatforms; i += 1) {
platforms[i].draw();
}
lines[0] = new Line();
animate();
},
animate = function() {
if (newLine) {
lines[lines.length] = new Line();
}
for (let line of lines) {
line.update();
}
requestAnimationFrame(animate);
};
setupPlatforms();
};
谢谢,明白了!我会将其标记为已回答。非常感激! – user7978271
@ user7978271不客气,我更新了它,仍然会有一些推荐,如何确保这种情况在将来不会发生,然后你的“平台”错误出现了,直到现在你还没有遇到,因为你不会不会创建新的平台 – Icepickle
谢谢。我主要学习Java,而且很有趣的是,切换语言如何能让你忘记像声明常量这样的概念。 – user7978271
你真的希望我们走下来,然后搜索该行?在stacksnippet中,它表示145.请付出一点努力向我们展示您追踪错误的位置 – Icepickle
'canvas = document.getElementsByTagName(“canvas”)[0];'您可以删除此行,您的canvas变量已经设置到元素。 –
@Roland Starke谢谢,我会把它拿出来。 – user7978271