我正在玩画布动画,我不断得到一个" Line不是构造函数"我已成功构建一个Line对象时,animate函数中第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();
};
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Push</title>
<script src='push.js'></script>
</head>
<body>
</body>
</html>
&#13;
答案 0 :(得分:0)
您正在覆盖此处的Line
功能
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);
};
在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();
};