0

ごあいさつ 皆さん、私はすでにこの任務でいくらかの助けを求めましたが、私が得た助けはかなり無益でした..今度は誰かが私を助けてくれることを願っています:( ..

ボタンをクリックするたびにID付きのキャンバスに描画する必要がありますが、変更を加えた後、画面に結果が表示されますが、いくつかの機能が失われ、エラーが発生するため整数の解析が機能しません:

 Uncaught ReferenceError: pGame is not defined

それは特定されており、初期の段階で機能していましたが。

別の問題は、開始をクリックするたびにキャンバスをクリアすることです:

function start()
{
 //tried making a counter, if its the first time to click
 //start then do nothing else restore
 // context.restore();

 if (shouldClear==0) {


 setInterval(rotateShape, 30);
 var degrees = 0.0;

  shouldClear = 1;
 }
 else{
  rotateShape();
  shouldClear-1;
 }
 }

参考までに、ここに私の完全なコードを示します。

 <!DOCTYPE HTML>
 <html>
 <head><title>Rectangles</title></head>
 <body>
 <script>

  var i = 0;
  var rectArrayStartX,rectArrayStartY,rectArrayDimY,   rectArrayDimX;

  var RotatingRectangle = function(x, y, width, height, rot, r,g,b){
    var rotation = rot;
    var rotationState = 0;
    this.draw = function(ctx){
      rotationState += rotation;

      ctx.save();
      ctx.translate(x+(width/2), y+(height/2));
      ctx.rotate(rotationState);
      var randomRed = Math.floor( Math.random() * 256 );
      var randomGreen = Math.floor( Math.random() * 256 );
      var randomBlue = Math.floor( Math.random() * 256 );
      ctx.fillStyle = "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")";
      ctx.fillRect(0-(width/2), 0-(height/2), width, height);
      ctx.restore();
    }
  } 

  var shouldClear = 0;
  function start()
   {
      //tried making a counter, if its the first time to click
      //start then do nothing else restore
     // context.restore();

      if (shouldClear==0) {


       setInterval(rotateShape, 30);
       var degrees = 0.0;

        shouldClear = 1;
      }
      else{
       rotateShape();
       shouldClear-1;
     }
     }

    function construct()
     {
      var count = 25;
       var count = parseInt(pGame.box.value);

      var allShapes = [];
      for (i=0; i < count; ++i) {
      var rotation = Math.random()*.10
      var x = Math.floor(Math.random() * 640);
      var y = Math.floor(Math.random() * 480);
      var randomRed = Math.floor( Math.random() * 256 );
      var randomGreen = Math.floor( Math.random() * 256 );
       var randomBlue = Math.floor( Math.random() * 256 );
      var rect = new RotatingRectangle(x, y, 50, 50, rotation, "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")");
      allShapes.push(rect); 
    }
    return allShapes;
     }

    var allShapes = construct();

   function rotateShape()
    {
     var canvas = document.getElementById('gameId');

      if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
      if (shouldClear==1) {
        var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
    }

    }
    }


       </script>
     <div id="rectangles" STYLE = "background-color: #fff68f; width: 600px; height: 420px; 
           border-style: outset;position: absolute;">
       <form name="pGame">
       <center>
         <b>Canvas Application</b><br>
        <input type= "button" value= "Start" onclick= "start()" />
         <input id="box" type="text" size="2" value="10" style="border-style:inset;
             color:red; background-color: black" />
         </center>
         </form>

        <canvas id="gameId" width="598" height="300" 
        STYLE = "border:1px solid; background-color: #fff68f; position: absolute;">
       </canvas>

  </div>
  </body>
  </html>
4

1 に答える 1

0

pGameアクセスしようとすると、フォームが作成されていません。フォームの下にスクリプトを配置して、スクリプトが実行される前にフォームが作成されるようにするか、DOMContentLoadedイベントがトリガーされたときにスクリプトを呼び出します。

于 2013-10-31T12:54:17.070 に答える