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] = [tetro[0], tetro[4], tetro[5], tetro[9]] // the position you first 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--; tetro[0]现在指向BasicBlock (x = 3, y = 0)

BasicBlock (x = 4, y = 1).x--; tetro[4]现在指向BasicBlock (x = 3, y = 1)

BasicBlock (x = 5, y = 1).x--; tetro[5]现在指向BasicBlock (x = 4, y = 1)

BasicBlock (x = 5, y = 2).x--; tetro[9]现在指向BasicBlock (x = 4, y = 2)

然后你旋转：

的下一个位置tetrominoS是tetrominoS[1]

tetrominoS[1] = [tetro[5], tetro[6], tetro[8], tetro[9]];

但请记住 tetro[5] 和 tetro[9] 已更改！所以我们得到：

tetrominoS[1] = [BasicBlock (x = 4, y = 1), tetro[6] (unchanged), tetro[8] (unchanged), BasicBlock (x = 4, y = 2)];

这不是你想要的。

解决方案：

当您想将块移动到左侧时，不要更改块的 X 值，只需删除当前块的颜色并在其旁边的块上绘制颜色即可。