Question

请不要知道为什么代码不适用于IE 11浏览器，但是在Chrome浏览器工作中。

要检查，你只需复制并将此代码保存为html文件并通过浏览器打开。

我需要在IE浏览器中运行。我检查了很多方法，但无法解决它。

即浏览器在此代码的第48行报告错误，但不知道为什么！

<!doctype html>
 <head><meta http-equiv="X-UA-Compatible" content="IE=11" charset="uft-8">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
 </head>

<body>
 <style> 
html,
body {
  height: 100%;
}

body {
  color: #222;
  background: #ededed;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


canvas {
  border: 1px solid silver;
  background: white;
    cursor: -webkit-grab;
  display: block;
}
</style> 


<script>
let nouvelle,
  ancienne,
  pression;

let themeCouleur = [
  '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
  '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
  '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
  '#FF5722'
];
class Particule {
  constructor(parent) {
    this.parent = parent;
    this.gravite = parent.gravite;
    this.reinit();
    this.forme = round(random(0, 1));
    this.etape = 0;
    this.prise = 0;
    this.priseFacteur = random(-0.02, 0.02);
    this.multFacteur = random(0.01, 0.08);
    this.priseAngle = 0;
    this.priseVitesse = 0.05;
  }
  reinit() {

    this.position = this.parent.position.copy();
    this.position.y = random(-20, -100);
    this.position.x = random(0, width);
    this.velocite = createVector(random(-6, 6), random(-10, 2));
    this.friction = random(0.995, 0.98);
    this.taille = round(random(5, 15));
    this.moitie = this.taille / 2;
    this.couleur = color(random(themeCouleur));

  }
  dessiner() {

    this.etape = 0.5 + Math.sin(this.velocite.y * 20) * 0.5;

    this.prise = this.priseFacteur + Math.cos(this.priseAngle) * this.multFacteur;
    this.priseAngle += this.priseVitesse;
    translate(this.position.x, this.position.y);
    rotate(this.velocite.x * 2);
    scale(1, this.etape);
    noStroke();
    fill(this.couleur);

    if (this.forme === 0) {
      rect(-this.moitie, -this.moitie, this.taille, this.taille);
    } else {
      ellipse(0, 0, this.taille, this.taille);
    }

    resetMatrix();
  }
  integration() {
    this.velocite.add(this.gravite);
    this.velocite.x += this.prise;
    this.velocite.mult(this.friction);
    this.position.add(this.velocite);
    if (this.position.y > height) {
      this.reinit();
    }

    if (this.position.x < 0) {
      this.reinit();
    }
    if (this.position.x > width + 10) {
      this.reinit();
    }
  }
  rendu() {
    this.integration();
    this.dessiner();

  }
}
class SystemeDeParticules {
  constructor(nombreMax, position, gravite) {
    this.position = position.copy();
    this.nombreMax = nombreMax;
    this.gravite = createVector(0, 0.1);
    this.friction = 0.98;
    // le tableau 
    this.particules = [];
    for (var i = 0; i < this.nombreMax; i++) {
      this.particules.push(new Particule(this));
    }
  }
  rendu() {
    if (pression) {
      var force = p5.Vector.sub(nouvelle, ancienne);
      this.gravite.x = force.x / 20;
      this.gravite.y = force.y / 20;
    }

    this.particules.forEach(particules => particules.rendu());
  }
}
let confettis;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(60);
  ancienne = createVector(0, 0);
  nouvelle = createVector(0, 0);
  confettis = new SystemeDeParticules(500, createVector(width / 2, -20));
}

function draw() {
  background(color("#222"));
  nouvelle.x = mouseX;
  nouvelle.y = mouseY;
  confettis.rendu();
  ancienne.x = nouvelle.x;
  ancienne.y = nouvelle.y;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  confettis.position = createVector(width / 2, -40);
}

function mousePressed() {
  next = 0;
  pression = true;
}

function mouseReleased() {
  pression = false;
  confettis.gravite.y = 0.1;
  confettis.gravite.x = 0;
}
</script>

 </body>
</html>

谢谢。

Answer 1

IE11无法识别类的这种语法，因为ES6规范：https://kangax.github.io/compat-table/es6/

您的代码采用ES6语法。使用以下链接将其转换为ES5并尝试。 transpiler online

Answer 2

这很简单 - 这是因为IE11不支持EcmaScript 6 - 用类和这种很酷的东西编写JS的很酷的方法。您可以看到浏览器支持@ http://kangax.github.io/compat-table/es6/

为什么不在IE浏览器上工作？

2 个答案: