Question

我正在玩画布动画，我不断得到一个＆＃34; Line不是构造函数＆＃34;我已成功构建一个Line对象时，animate函数中第120行的错误。我一定很欣赏这双新鲜的眼睛！

基本上，一旦现有的Line遇到一个平台，它应该创建一个新的Line对象，它将朝着另一个方向前进，但它会不断抛出错误。

代码：

＆＃13;

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;

Answer 1

您正在覆盖此处的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();

};

以前构造对象时不是构造函数错误

1 个答案: