2012-02-08 5 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

Google에서 도울 수 있도록 질문을 수정해야합니다. 문제의 구체적인 부분은 무엇입니까?우리 중 누구도이 모든 것을 끝내기를 기대할 수 없습니다. – soniiic

+0

@sonniiic : "내 코드가 각 블록에 x와 y 위치를 할당하는 것을 거부합니다" – FMaz008

+1

그래서 358 행 코드 샘플 중 어떤 부분이 그 것입니까? – soniiic

답변

4

함수 addBlock는 다음과 같습니다

임의의 시점에서
function addBlock() { 
    blockArray[blockArray.length] = new block(); 
} 

, 당신의 blockArray 길이 무엇이든 될 수 있습니다. 이제는 25라고 가정합시다.

블록을 배열의 25 번째 위치에 삽입하고 있습니다.

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 명령 기능 :

는의가 block 기능을 살펴 보자? 아무것도 설정하지 않은 것처럼 보입니다! 조사해 봅시다 :

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

AHA! 나는이 문제를 발견했다. 은 블록 배열 i으로 가고 있는데, 아직 존재하지도 않는데, 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 참조로 이어질 수 있습니다.

추신 : 나는 코드를 완전히 읽지 않았습니다. 그 중 일부만을 통해 작업 할 수 있습니다.

+0

몇 가지 정의되지 않은 참조 오류가 발생하여 천천히 그들을 둘러 봤습니다. 그들이 미리 채워지는 것을 어떻게 확신 할 수 있습니까? –

+0

블록이 포함되어 있는지 테스트하거나 테트리스가 초기화 될 때 '빈'블록을 만들 수 있습니다 (예 : 왼쪽 메소드 테스트가'w <4 '이므로 항상 3 블록 있음을 알 수 있습니다). – epoch

관련 문제