2012-02-08 12 views
2

何らかの理由で、私のコードが各ブロックにxとyの位置を割り当てることを拒否しました。各ブロックは30ピクセル幅で背の高いもので、その部分に応じて色分けされます。重力とはっきりとした機能は実装されておらず、左と右に移動する機能は非常に異なっているため、正しく機能していなかったため、左の機能で見られるように再作成しました。...テトリスを作成しようとしましたが、できません

助けてください!

編集:私の謝罪、私は通常何も投稿しません。私が過去に得ることのできない部分は、機能ブロック/ブロック/タイプセットの追加/タイプの割り当てです。それはランダムなものをうまく割り当てますが、そのタイプ(例えば、正方形)がxとyの値を代入するとエラーになります。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Tetris in Canvas</title> 
     <style type="text/css"> 
      canvas { 
       border: solid 1px black; 
       margin: -8px; 
      } 
     </style> 
     <script type="text/javascript"> 
      var canvas = null; 
      var ctx = null; 
      var blockArray = []; 
      var board = []; 
      var blockNum = 0; 
      for (var s = 0; s < 14; s++) { 
       board[s] = [27]; 
       for (var t = 0; t < 27; t++) { 
        board[s][t] = -1; 
       } 
      } 

      document.onkeydown = function(event) { 
       var keyCode; 

       if(event == null) 
        keyCode = window.event.keyCode; 
       else 
        keyCode = event.keyCode; 

       switch(keyCode) { 
        case 37: 
         left(blockArray.length); 
         break; 
        case 38: 
         up(blockArray.length); 
         break; 
        case 39: 
         right(blockArray.length); 
         break; 
        case 40: 
         down(blockArray.length); 
         break; 
        default: 
         break; 
       } 
      } 

      window.onload = function init() { 
       canvas = document.getElementById('Canvas1'); 
       ctx = canvas.getContext("2d"); 

       blank(); 
       addBlock(); 
       animate(); 
      } 

      function up(i) { 
       blank(); 
       animate(); 
      } 

      function down(i) { 
       var u = 0; 
       var p = 0; 
       while(u<4) { 
        if (blockArray[i].y[u] + 1 > 26) { 
         u = 10; 
        } 
        else if ((board[blockArray[i].x[u]][blockArray[i].y[u] + 1]) == -1) { 
         u++; 
        } 
        else { 
         p = u; 
         for (var g = 0; ((g < 4) && (p = u)); g++) { 
          if ((blockArray[i].x[u] == blockArray[i].x[g]) && (blockArray[i].y[u] + 1 == blockArray[i].y[g])) { 
           u++; 
          } 
         } 
         if (p == u) 
          u = 10; 
        } 
       } 
       if (u < 10) { 
        for (var j=0; j<4; j++) { 
         blockArray[i].y[j] +=1; 
        } 
       } 
       else 
        addBlock(); 
       animate(); 
      } 

      function right(i) { 
       var u = 0; 
       var p = 0; 
       while(u<4) { 
        if (blockArray[i].x[u] + 1 > 13) { 
         u = 10; 
        } 
        else if ((board[blockArray[i].x[u] + 1][blockArray[i].y[u]]) == -1) 
         u++; 
        else { 
         p = u; 
         for (var g = 0; ((g < 4) && (p = u)); g++) { 
          if ((blockArray[i].x[u] + 1 == blockArray[i].x[g]) && (blockArray[i].y[u] == blockArray[i].y[g])) 
           u++; 
         } 
         if (p == u) 
          u = 10; 
        } 
       } 
       if (u < 10) { 
        for (var j=0; j<4; j++) { 
         blockArray[i].x[j] +=1; 
        } 
       } 
       else 
        addBlock(); 
       animate(); 
      } 

      function left(i) { 
       var u; 
       var p = 14; 
       for (var w = 0; w<4; w++) { 
        if (blockArray[i].x[w] < p) { 
         p = blockArray[i].x[w]; 
         u = w; 
        } 
       } 
       if (p > 0) { 
        if ((board[blockArray[i].x[u] - 1][blockArray[i].y[u]]) == -1) { 
         for (var j=0; j<4; j++) { 
          blockArray[i].x[j] -=1; 
         } 
        } 
       } 
       animate(); 
      }   

      function block(x, y, type) { 
       blockNum += 1; 
       this.id = blockNum; 
       this.x = []; 
       this.y = []; 
       this.landed = false; 
       this.type = Math.floor(Math.random() * (6)) + 1; 
       typeSet(this.type); 
      } 

      function addBlock() { 
       blockArray[blockArray.length] = new block(); 
      } 

      function typeSet(type) { 
       i = blockArray.length; 
       switch (type) { 
        case 1: 
         square(i); 
         break; 
        case 2: 
         elR(i); 
         break; 
        case 3: 
         elL(i); 
         break; 
        case 4: 
         line(i); 
         break; 
        case 5: 
         zeR(i); 
         break; 
        case 6: 
         zeL(i); 
         break; 
        default: 
         break; 
       } 
      } 


      function animate() { 
       fillBoard(); 
       colorBoard(); 
      } 

      function fillBoard() { 
       for (var i = 0; i < 14; i++) { 
        for (var q = 0; q < 27; q++) { 
         board[i][q] = -1; 
        } 
       } 
       for (var i=0; i<blockArray.length; i++) { 
        for (var q=0; q<4; q++) { 
         board[blockArray[i].x[q]][blockArray[i].y[q]] = blockArray[i].type; 
        } 
       } 
      } 

      function colorBoard() { 
       blank(); 
       ctx.strokeStyle = "white"; 
       for(var q=0; q<14; q++) { 
        for(var r=0; r<27; r++) { 
         switch (board[q][r]) { 
          case 1: 
           ctx.fillStyle = "green"; 
           color(q,r); 
           break; 
          case 2: 
           ctx.fillStyle = "orange"; 
           color(q,r); 
           break; 
          case 3: 
           ctx.fillStyle = "cyan"; 
           color(q,r); 
           break; 
          case 4: 
           ctx.fillStyle = "black"; 
           color(q,r); 
           break; 
          case 5: 
           ctx.fillStyle = "yellow"; 
           color(q,r); 
           break; 
          case 6: 
           ctx.fillStyle = "brown"; 
           color(q,r); 
           break; 
          default: 
           break; 
         } 
        } 
       } 
      } 

      function color(q,r) { 
       ctx.fillRect(q*30,(r-4)*30,30,30); 
       ctx.strokeRect(q*30,(r-4)*30,30,30); 
      } 

      function square(i) { 
       blockArray[i].x[0] = 7; 
       blockArray[i].y[0] = 0; 
       blockArray[i].x[1] = 7; 
       blockArray[i].y[1] = 1; 
       blockArray[i].x[2] = 8; 
       blockArray[i].y[2] = 0; 
       blockArray[i].x[3] = 8; 
       blockArray[i].y[3] = 1; 
      } 
      function elR(i) { 
       blockArray[i].x[0] = 7; 
       blockArray[i].y[0] = 0; 
       blockArray[i].x[1] = 7; 
       blockArray[i].y[1] = 1; 
       blockArray[i].x[2] = 7; 
       blockArray[i].y[2] = 2; 
       blockArray[i].x[3] = 8; 
       blockArray[i].y[3] = 2; 
      } 
      function elL(i) { 
       blockArray[i].x[0] = 7; 
       blockArray[i].y[0] = 0; 
       blockArray[i].x[1] = 7; 
       blockArray[i].y[1] = 1; 
       blockArray[i].x[2] = 7; 
       blockArray[i].y[2] = 2; 
       blockArray[i].x[3] = 6; 
       blockArray[i].y[3] = 2; 
      } 
      function line(i) { 
       blockArray[i].x[0] = 7; 
       blockArray[i].y[0] = 0; 
       blockArray[i].x[1] = 7; 
       blockArray[i].y[1] = 1; 
       blockArray[i].x[2] = 7; 
       blockArray[i].y[2] = 2; 
       blockArray[i].x[3] = 7; 
       blockArray[i].y[3] = 3; 
      } 
      function zeR(i) { 
       blockArray[i].x[0] = 6; 
       blockArray[i].y[0] = 0; 
       blockArray[i].x[1] = 7; 
       blockArray[i].y[1] = 0; 
       blockArray[i].x[2] = 7; 
       blockArray[i].y[2] = 1; 
       blockArray[i].x[3] = 8; 
       blockArray[i].y[3] = 1; 
      } 
      function zeL(i) { 
       blockArray[i].x[0] = 8; 
       blockArray[i].y[0] = 0; 
       blockArray[i].x[1] = 7; 
       blockArray[i].y[1] = 0; 
       blockArray[i].x[2] = 7; 
       blockArray[i].y[2] = 1; 
       blockArray[i].x[3] = 6; 
       blockArray[i].y[3] = 1; 
      } 

      function blank() { 
       ctx.restore(); 
       ctx.fillStyle = "blue"; 
       ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
       ctx.save(); 
      } 

      function blank2() { 
       ctx.restore(); 
       ctx.fillStyle = "purple"; 
       ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
       ctx.save(); 
      } 

      function rotateImgRight() { 
       for(d = 0; d < 180; d++) { 
        setTimeout(rotateImg, 50); 
       } 
      } 

      function rotateImgLeft() { 
       for(d = 0; d < 180; d++) { 
        setTimeout(rotateImg2, 50); 
       } 
      } 

      function rotateImg2() { 
       degrees = degrees - 0.5; 
       radian = (Math.PI/180.0) * degrees; 

       blank(); 
       ctx.translate(ctx.canvas.width/2, 700); 
       ctx.rotate(radian); 
       ctx.drawImage(srcImg, -srcImg.width/2,-srcImg.height/2); 
       slide = (degrees/90) % 4; 
      } 

      function rotateImg(x,y) { 
       degrees = degrees + 0.5; 
       radian = (Math.PI/180.0) * degrees; 

       ctx.translate(x,y); 
       ctx.rotate(radian); 
       ctx.drawImage(srcImg, -srcImg.width/2,-srcImg.height/2); 
       slide = (degrees/90) % 4; 
      } 
     </script> 
    </head> 
    <body> 
     <div style="width: 100%; text-align:center"> 
      <canvas id="Canvas1" width="421" height="690">Your browser does not support canvas.</canvas> 
     </div> 
    </body> 
</html> 
+4

私たちのお手伝いをさせていただくために、あなたの質問に言い換えてみてください。問題の具体的な部分は何ですか? – soniiic

+0

@sonniiic: "私のコードは、各ブロックにxとyの位置を割り当てることを拒否します" – FMaz008

+1

358行のコードサンプルのどの部分がそれですか? – soniiic

答えて

4

あなたの機能addBlockは次のようになります。任意の時点で

function addBlock() { 
    blockArray[blockArray.length] = new block(); 
} 

、あなたのblockArrayの長さは何でもかまいません。ここでは25と仮定しましょう。

ブロックを配列の25番目の位置に挿入しています。

はのはblock機能を見てみましょう:

function block(x, y, type) { 
    blockNum += 1; 
    this.id = blockNum; 
    this.x = []; 
    this.y = []; 
    this.landed = false; 
    this.type = Math.floor(Math.random() * (6)) + 1; 
    typeSet(this.type); 
} 

このtypeSetコマンドは何ですか?それは何かを設定するように見えません!調べてみましょう:

function typeSet(type) { 
    i = blockArray.length; 
    switch (type) { 
     case 1: 
      square(i); 
      break; 
     // blah 
    } 
} 

AHA!私はこの問題を発見しました。square()はのblockArrayに行きます。まだ実現していないので、block()はまだ実行されておらず、xyの変数がすべて割り当てられています。 block()が実行を終了すると、typeSet()が書き込んだばかりのすべての値が上書きされます。

それが実際のブロックオブジェクトを取り込み、むしろ(でも、まだ存在していない)、配列内の要素にアクセスしようとするよりも、その上のxy値に設定するようにあなたのtypeSet()メソッドをリファクタリングする必要があります。

typeSet(this, this.type); 
+0

ありがとう!それは少し助けてくれたようだ。それでも見つけたり割り当てたりするのに問題があります。それは言う:未定義のプロパティ "y"を読み取ることはできません。左、右、下のそれぞれの点でxについて同じことが言います –

3
あなたは配列が実際にこれに代えて、あなたは彼らがあなたの左の方法では、例えば 含まれていると思うの項目が含まれているか否かをチェックすることによって開始することができ

for (var w = 0; w<4; w++) { 
    if ((blockArray[i]) && (blockArray[i].x[w])) { 
     if (blockArray[i].x[w] < p) { 
      p = blockArray[i].x[w]; 
      u = w; 
     } 
    } 
} 

for (var w = 0; w<4; w++) { 
    if (blockArray[i].x[w] < p) { 
     p = blockArray[i].x[w]; 
     u = w; 
    } 
} 

これを行います

配列は完全には埋め込まれておらず、実行時にのみ行われるようですが、これはundefined参照につながります。

PS:私はコードを完全に読んでいません。それだけの部分は、それは多くを介して動作するように。

+0

私はいくつかの未定義の参照エラーに遭遇し、それらをゆっくりと回ってしまった。あらかじめ人口が確保されていることをどのようにして保証しますか? –

+0

ブロックを含んでいるかどうかをテストすることもできますし、テトリスが初期化するときに '空の'ブロックを作成することもできます(例:左メソッドテストは 'w <4'なので、そこには常に3ブロックあります) – epoch

関連する問題