0
私はキャンバスアニメーションを使用して遊んでいますが、私は既にラインを構築したときにアニメート関数の120行目に "Line is not constructor"オブジェクト。私は確かにこれについての目の新鮮なペアをありがとう！オブジェクトが以前に構築されたときにコンストラクタエラーではありません
基本的に、いったん既存の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>
あなたは本当に私たちがダウンして、その行を検索したいですか？ stacksippippには145と書かれています。エラーを追跡した場所を教えてください。 – Icepickle
'canvas = document.getElementsByTagName（" canvas "）[0];'この行を削除すると、キャンバス変数は既に設定されています要素に。 –
@Roland Starkeありがとう、私はそれを取り出します。 – user7978271