JavaScript 俄罗斯方块 tetrominoes 在移动和旋转后分开

Question

通过制作俄罗斯方块游戏来学习 JavaScript。

问题：当我尝试移动（从起始位置向左、向右或向下）一块然后旋转它时，旋转的部分会伸展开来。当我回到起始位置时，一切正常。此外，当我不旋转作品而只将其向左/向右/向下移动时，一切都很好。我想我的旋转中心固定在网格上，而不是固定在一块上。

在这里你可以玩游戏：这里

这是我的github：这里

临时控制：

输入和向上箭头后：开始游戏

左箭头：向左移动

右箭头：向右移动

向上箭头：旋转

向下箭头：向下移动一排

描述：

我的 tetrominoes 和我的网格由数组（基于类）组成。网格来自 SimpleBlock{} 和 GridBlock{}。我的四联牌是由 Simple Block{} 制作的，并且

    class SimpleBlock{

    constructor(tempSquareColor, boardPosX, boardPosY){

        this.x = boardPosX;

        this.y = boardPosY;

        this.squareColor = tempSquareColor;

    }

}

class GridBlock extends SimpleBlock{

    constructor(tempSquareColor, boardPosX, boardPosY){

        super(tempSquareColor, boardPosX, boardPosY);

        ctx.fillStyle = this.squareColor;

        ctx.strokeStyle = "black";

        ctx.lineWidth = 3;

        ctx.fillRect(this.x * squareSize, this.y * squareSize, squareSize, squareSize);

        ctx.strokeRect(this.x * squareSize, this.y * squareSize, squareSize, squareSize);

    }

}

var gameBoardSquared = [];

function drawSquaredGameBoard() {

    for(var row = 0; row < gameBoardRows; row++){

        gameBoardSquared[row] = [];

        for(var col = 0; col < gameBoardColumns; col++){

            gameBoardSquared[row][col] = new GridBlock("white", row, col);

        }

    }

}

Answer 1

您首先将旋转位置定义为 BasicBlocks 数组。这是对构成旋转位置的每个基本块的引用数组。当您执行 block.moveLeft() 时，您将 x 值更改为与原始值不同的数字。这意味着保存在每个位置数组中的对象已更改为具有新的 x 值，因此当您尝试旋转时，这些位置不再有意义。例子：看看 tetrominoS。它的第一个位置是tetrominoS[0]&nbsp;=&nbsp;[tetro[0],&nbsp;tetro[4],&nbsp;tetro[5],&nbsp;tetro[9]]&nbsp;//&nbsp;the&nbsp;position&nbsp;you&nbsp;first&nbsp;defined在记忆中：tetro[0]= 参考BasicBlock (x = 4, y = 0)tetro[4]= 参考BasicBlock (x = 4, y = 1)tetro[5]= 参考BasicBlock (x = 5, y = 1)tetro[9]= 参考BasicBlock (x = 5, y = 2)然后你做： moveLeft() （例如）向左移动将所有x值更改为x-1您正在执行的操作BasicBlock (x = 4, y = 0).x--;&nbsp;tetro[0]现在指向BasicBlock (x = 3, y = 0)BasicBlock (x = 4, y = 1).x--;&nbsp;tetro[4]现在指向BasicBlock (x = 3, y = 1)BasicBlock (x = 5, y = 1).x--;&nbsp;tetro[5]现在指向BasicBlock (x = 4, y = 1)BasicBlock (x = 5, y = 2).x--;&nbsp;tetro[9]现在指向BasicBlock (x = 4, y = 2)然后你旋转：的下一个位置tetrominoS是tetrominoS[1]tetrominoS[1]&nbsp;=&nbsp;[tetro[5],&nbsp;tetro[6],&nbsp;tetro[8],&nbsp;tetro[9]];但请记住 tetro[5] 和 tetro[9] 已更改！所以我们得到：tetrominoS[1]&nbsp;=&nbsp;[BasicBlock&nbsp;(x&nbsp;=&nbsp;4,&nbsp;y&nbsp;=&nbsp;1),&nbsp;tetro[6]&nbsp;(unchanged),&nbsp;tetro[8]&nbsp;(unchanged),&nbsp;BasicBlock&nbsp;(x&nbsp;=&nbsp;4,&nbsp;y&nbsp;=&nbsp;2)];这不是你想要的。解决方案：当您想将块移动到左侧时，不要更改块的 X 值，只需删除当前块的颜色并在其旁边的块上绘制颜色即可。