-1

I'm working on a Tetris Game with a friend. How can we turn around the blocks?

We know how to calculate the position of the blocks but we don't know how to add it to the code : 

i' = a * i + b * j

j' = c * i + d * j

newJ = -i;

newI =  j;

What we were thinking of is adding Arrays but as I said we are not sure.. how to start it

This is our code so far: 

function stylingSquares() {
  var i;
  var j;

  for (i = 1; i > -2; i--) {
    for (j = -1; j < 2; j++) {
      var myDiv = document.createElement("div");
      
      myDiv.style.width = "100px";
      myDiv.style.height = "100px";
      myDiv.style.backgroundColor = "black";

      myDiv.setAttribute("class", "quad");
      document.getElementById("game").appendChild(myDiv);

      if ((i === 0 && j === 0) ||
        (i === 1 && j === -1) ||
        (i === 0 && j === -1) ||
        (i === 0 && j === 1) ||
        (i === 0 && j === 0)) {
        myDiv.style.backgroundColor = "red";
      } else {

      }
    }
  }

  setInterval(function() {
    document.body.onkeyup = function(e) {
      if (e.keyCode == 32) {


      }
    }
  }, 300);
}

stylingSquares();
.quad {
  float: left;
  margin: 1 1 1 1;
}

#game {
  position: relative;
  width: 308px;
  height: 308px;
  background-color: black;
}
<div id="game"></div>
Serge K.
  • 5,303
  • 1
  • 20
  • 27
mimi
  • 41
  • 6
  • `How to rotate a block?` is primarily opinion-based. There is many ways of doing so and you should search the internet for some techniques and decide for one. If you have issues with a specific implementation we can help you try fix it but SO is not really intended to discuss possible approaches and design ideas. – Nope Dec 07 '17 at 10:10
  • Adding this link as a comment as it has source code to learn from in case answer gets deleted: https://codeincomplete.com/posts/javascript-tetris/ – Nope Dec 07 '17 at 10:14
  • More on SO to help you do some research: https://stackoverflow.com/questions/233850/tetris-piece-rotation-algorithm and [**Google Search on how to rotate Tetris pieces**](https://www.google.com/search?q=javascript+how+to+rotate+tetris+blocks&rlz=1C1CHBD_enIE751IE751&oq=javascript+how+to+rotate+tetris+blocks+&aqs=chrome..69i57j0.6318j0j4&sourceid=chrome&ie=UTF-8) contains a great YouTube video on the Subject in the top results. Very useful. – Nope Dec 07 '17 at 10:17

1 Answers1

0

I would create a 2D-array of the play field (to keep track of the current piece, already placed blocks, borders), select a rotation point for the current piece and finally attempt to move the piece's blocks around that point, 1 or 2 "steps" at a time (as needed).

enter image description here

If the new location collides with something else in the array, try to move the piece one step in the opposite direction. If that's not possible then the piece cannot be rotated.

LGT
  • 4,957
  • 1
  • 21
  • 22