2017-02-25 10 views
-3

私はなぜコードがIE 11ブラウザで動作しないのか分かりませんが、クロムブラウザの作業ではわかりません。なぜIEブラウザで動作しないのですか?

を確認するには、このコードをコピーして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> 

ありがとう。 https://kangax.github.io/compat-table/es6/

あなたのコードはES6構文である:ES6仕様があるため

+2

「うまくいかない」とはどういう意味ですか? IEではどうなりますか?コンソールにエラーが表示されますか? – JJJ

+2

あなたはjsfiddleを作る方がよいでしょう。それはあなたと人々があなたを助けるのを助けるでしょう。 –

+0

はいライン48でIEでエラーが発生しましたが、クロムでうまく動作します! –

答えて

0

IE11は、クラスのために、この構文を認識しません。以下のリンクを使ってES5に変換してみてください。 transpiler online

+0

ですので、修正する方法はありますか? –

+0

あなたが話しているエラーを含めて、あなたが話している構文について言及しない限り、この答えは役に立たない。 –

+0

私はcodepenのリンクを入れました、それはクラスの構文に問題がありますが、それを修正する方法はありますか? –

0

これはIE11がEcmaScript 6をサポートしていないためです。クラスとこの種のクールなものでJSを書くクールな方法です。 ブラウザのサポートを見ることができます@http://kangax.github.io/compat-table/es6/

関連する問題