2016-04-11 7 views
-2

私のコードに何が間違っているかわかりません。私を助けてください。コードを実行しようとすると、上記のエラーが発生します。Javascript error: "missing"引数リストの後 "

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"/> 
    <title>Mark Snier</title> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 

    <script type="text/javascript"> 
function init() { 

    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var raf; 
    var animatie = window.requestAnimationFrame; 
    var ball = { 
    x: 100, 
    y: 100, 
    vx: 5, 
    vy: 2, 
    radius: 25, 
    color: 'red', 
    draw: function() { 
    ctx.beginPath(); 
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); 
    ctx.closePath(); 
    ctx.fillStyle = this.color; 
    ctx.fill(); 

    for (var h = 0; h < 100; h++) { 
     ctx.fillRect (canvas.width-10, w, 10, 10); 
     w += 11 
    } 
    for (var i = 0; i < 100; i++) { 
     ctx.fillRect (0, x, 10, 10); 
     x += 11 
    } 
    for (var k = 0; k < 100; k++) { 
     ctx.fillRect (y, canvas.height-10, 10, 10); 
     y += 11 
    } 
    for (var j = 0; j < 100; j++) { 
     ctx.fillRect (z, 0, 10, 10); 
     z += 11 
    }; 
    }; 
} 
ball.draw();  

function draw() { 
    if (ball.y+ball.vy > canvas.height || ball.y+ball.vy < 0) { 
     ball.vy = -ball.vy; 
    } 
    if (ball.x+ball.vx > canvas.width || ball.x+ball.vx < 0) { 
     ball.vx = -ball.vx; 
    } 
    ctx.clearRect(0,0, canvas.width, canvas.height); 
     var x = 0 
     for (var i = 0; i < 100; i++) { 
     ctx.fillRect (0, x, 10, 10); 
     x += 11 
     } 
     ball.draw(); 
     ball.x += ball.vx; 
     ball.y += ball.vy; 
     raf = window.requestAnimationFrame(draw); 
    } 
    ball.draw(); 
    refresh(); 
    function refresh() { 
     draw() 
     refresh() 
    }  
} 
</script> 

</head> 

    <body onload="init()"> 
    <canvas id="canvas" width="802" height="395"></canvas> 

    </body> 

</html> 
+1

コードを適切にフォーマットすると、エラーが見つかるはずです。 – Biffen

+0

*少なくとも、エラーを引き起こす行を教えてください! – Biffen

+0

機能をリフレッシュ(){ draw() refresh() } to function refresh(){ draw() refresh(); } –

答えて

1

エラーは、ループや機能を忘れてしまったことを伝えています。あなたのケースでは、あなたのオブジェクト内;

function init() { 
    var ball = { 
     ... 
     draw: function() {  
     ... 
     }// <-- Remove ; here 
    }; 
} 

はそれが役に立てば幸いです。

+0

申し訳ありませんが、これは問題ではありません。コードのフォーマットが不適切ですが、forループが適切に閉じられています。 – Nicole

+1

確かに?私はコード中で 'for'ループが適切に閉じられていないこと、そしてボールオブジェクト内に'; 'があることを伝えました。見てください – Sapikelio

+0

はい、私は確信しています - 上記のコードをフォーマットしても、forループが閉じられていることがわかります:-)閉じ括弧には余分なセミコロンがありますが、無視されています。問題は、構文エラーの原因となるオブジェクトの内部にあるため、関数の後のセミコロンです。デモのために私の答えを広げました。 – Nicole

0

私はあなたに、この奇妙なエラーメッセージを与えたツール知りませんが、あなたがChromeでページを開いたとき、それははっきりわかります

Uncaught SyntaxError: Unexpected token ; in line 46 

こと、あなたがにあなたのコードを開いた場合適切なエディタ、例えばWebstorm、それは同じエラーを示します。

オブジェクトballには、関数drawが含まれています。オブジェクト内に定義されているため、;で終端してはいけません。セミコロンを削除すると、ページに赤いボールが表示されます。より多くのエラーがありますが、これはあなたを始めるはずです。これは正しいコードです:

var ball = { 
    // ... 
    draw: function() { 
    // ... 
    for (var j = 0; j < 100; j++) { 
    ctx.fillRect (z, 0, 10, 10); 
    z += 11 
    } // <-- you should remove the semicolon you have here - it is unneccessary but is ignored and does not cause problems 
} // <-- you must remove the semicolon you have here 
} 
+1

これは正解です:) – Sapikelio

-1

あなたはjavascript初めての方は?あなたはいくつかの行方不明のようです。余分な;

<script type="text/javascript"> 
    function init() { 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 
     var raf; 
     var animatie = window.requestAnimationFrame; 
     var ball = { 
      x: 100, 
      y: 100, 
      vx: 5, 
      vy: 2, 
      radius: 25, 
      color: 'red', 
      draw: function() { 
       ctx.beginPath(); 
       ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); 
       ctx.closePath(); 
       ctx.fillStyle = this.color; 
       ctx.fill(); 

       for (var h = 0; h < 100; h++) { 
        ctx.fillRect(canvas.width - 10, w, 10, 10); 
        w += 11; 
       } 
       for (var i = 0; i < 100; i++) { 
        ctx.fillRect(0, x, 10, 10); 
        x += 11; 
       } 
       for (var k = 0; k < 100; k++) { 
        ctx.fillRect(y, canvas.height - 10, 10, 10); 
        y += 11; 
       } 
       for (var j = 0; j < 100; j++) { 
        ctx.fillRect(z, 0, 10, 10); 
        z += 11; 
       } 
      } 
     } 
     ball.draw(); 

     function draw() { 
      if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { 
       ball.vy = -ball.vy; 
      } 
      if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { 
       ball.vx = -ball.vx; 
      } 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      var x = 0; 
      for (var i = 0; i < 100; i++) { 
       ctx.fillRect(0, x, 10, 10); 
       x += 11; 
      } 
      ball.draw(); 
      ball.x += ball.vx; 
      ball.y += ball.vy; 
      raf = window.requestAnimationFrame(draw); 
     } 

     ball.draw(); 
     refresh(); 

     function refresh() { 
      draw(); 
      refresh(); 
     } 

    } 
</script> 
+0

既に働いているはずですが、私はVisual studioを使って二重チェックをしています。 – UserBlanko

関連する問題