0
我正在玩弄画布动画，并且当我已经成功构建了一条线时，我一直在动画函数的第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>
你真的希望我们走下来，然后搜索该行？在stacksnippet中，它表示145.请付出一点努力向我们展示您追踪错误的位置 – Icepickle
'canvas = document.getElementsByTagName（“canvas”）[0];'您可以删除此行，您的canvas变量已经设置到元素。 –
@Roland Starke谢谢，我会把它拿出来。 – user7978271