

##### 質問内容

提示画像はブロックを一時回転で回転させたときに4x4の配列のどこに描画されたかを示しているものです。  
`GetFixPositionRotate(pieceNumber,rotate)`関数はブロックの描画座標を回転した時にどの方向にどのくらい移動するかを示している移動パターンです。

##### 現状

`GetFixPositionRotate(pieceNumber,rotate)`を使って回転した際の4x4のブロック配列の左側の隙間の分移動しています。

##### 知りたい事

テトリス制作で4x4の配列の左上にブロックを描画するにはどういった手段を行えばいいのでしょうか？  
現状のやり方はではどんどん左側に描画座標が移動してしまい正常は動作ではりません。

##### 回転１

[![画像の説明をここに入力](https://i.stack.imgur.com/qBhbF.png)](https://i.stack.imgur.com/qBhbF.png)

##### 回転２

[![画像の説明をここに入力](https://i.stack.imgur.com/fhJgW.png)](https://i.stack.imgur.com/fhJgW.png)

[code]

    "use strict"
    
    /*#############################################################
    # プレイヤー　管理クラス
    ###############################################################*/
    class PlayerManager
    {
        
    
        /*#########################################
        # コンストラクタ
        ###########################################*/
        constructor()
        {
            
            //回転時座標修正　I以外
            this.fixRotatePosition = 
            [
                [
                    {x: -2,y:  0},
                    {x: -2,y: 0},
                    {x:  0,y: -2},
                    {x: -1,y: -2}
                ],
    
                [
                    {x:  1,y:  0},
                    {x:  -2,y: 0},
                    {x:  0,y: -2},
                    {x: 1, y:  2}
                ],
    
                
                [
                    {x:  1,y:  0},
                    {x:  1,y:  1},
                    {x:  0,y: -2},
                    {x: 1, y: -2}
                ],
    
                [
                    {x:  -1,y:   0},
                    {x:  -1,y:  -1},
                    {x:   0,y:   2},
                    {x:   1,y:  -2}
                ],            
            ]; 
            
            this.random = 0;                //乱数
            this.piece = [];                //ブロック
            this.position = {};             //座標
            this.rotateRadian = 0;          //回転数
            this.moveVector = {x:0,y:0};    //移動方法
            this.downTimer = 0;             //落下時間加算
            this.isRotate = false;          //回転したかどうか？
    
    
        }
    
    
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        /*#########################################
        # 回転時位置修正
        ###########################################*/
        GetFixPositionRotate(pieceNumber,rotate)
        {
            if((pieceNumber != 0) && (pieceNumber != 3))
            {
                switch(rotate)
                {
                    case 1:
                        {
                            return {x: -2,y: 0};
                        }
                    break;
    
                    case 2:
                        {
                            return {x: 0,y: -1};
                        }
                    break;
    
    
                    case 3:
                        {
                            return {x: -1,y: -2};
                        }
                    break;
    
                    case 3:
                        {
                            return {x: -1,y: -2};
                        }
                    break;
                }
                
    
    
            }
        }
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
    
    
        /*#########################################
        # 初期化
        ###########################################*/
        Init()
        {
            //const START_POSITION = {x: 0,y: 0}; //初期座標
    //        const START_POSITION = {x: 4,y: 1}; //初期座標
            const START_POSITION = {x: 10,y: 10}; //初期座標
    
            this.position = START_POSITION; //座標
            this.random = 1;
            this.piece = BitMap.getPiece(this.random);
            this.rotateRadian = 0;  //回転数
            this.isRotate = false;
    
    
        }
    
    
        /*#########################################
        # 重なり判定
        ###########################################*/
        GetIsOverlapStage(stage)
        {
            for(let y = 0; y < PIECE_HEIGHT; y++)
            {
                for(let x = 0; x < PIECE_WIDTH; x++)
                {
                    if( (stage.getStage()[this.position.y + y][this.position.x + x] == 1) && (this.piece[y][x] == 1) )
                    {
                        return true;
                    }
                }
            }
    
    
            return false;
        }
    
        
        /*#########################################
        # 移動方向修正
        ###########################################*/
        CollisionMove(stage)
        {
            let flag = this.GetIsOverlapStage(stage);
    
            if( (this.moveVector.x == 1) && (flag == true) )
            {
                this.position.x += -1;
    
            }
    
            if( (this.moveVector.x == -1) && (flag == true) )
            {
                this.position.x += 1;
            }
    
        }
    
    
        /*#########################################
        # 落下修正
        ###########################################*/
        CollisionDown(stage)
        {
            let flag = this.GetIsOverlapStage(stage);
            
        }
    
    
    
    
        /*#########################################
        # Left 移動
        ###########################################*/
        LeftKey()
        {
            this.position.x += -1;
            this.moveVector.x = -1;
        }
    
        /*#########################################
        # Right 移動
        ###########################################*/
        RightKey()
        {
            this.position.x += 1;
            this.moveVector.x = 1;
    
        }
        
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////    
        /*#########################################
        # スペース　回転
        ###########################################*/
        SpaceKey()
        {
            this.rotateRadian += 1;
    
            if(this.rotateRadian > 3)
            {
                this.rotateRadian = 0;
            }
    
    
    
            console.log( "rotattion" + this.rotateRadian);
    
            this.Rotate(this.rotateRadian);
            this.position.x += this.GetFixPositionRotate(this.random,this.rotateRadian).x;
            this.position.y += this.GetFixPositionRotate(this.random,this.rotateRadian).y;
    
            this.isRotate = true;
            //this.rotateRadian += 1;
    
        }
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
        /*#########################################
        # 描画
        ###########################################*/
        Render() 
        {
            for(let i = 0; i < PIECE_HEIGHT; i++)
            {
                for(let j = 0; j < PIECE_WIDTH; j++)
                {
                    if(this.piece[i][j] == 1)
                    {
                        fill(BitMap.getPieceColor(this.random));
                        rect( (this.position.x + j) * CELL, (this.position.y + i ) * CELL,CELL,CELL);
                    }
                    else
                    {
                        //デバッグ
                        fill(color(165,165,165));
                        rect( (this.position.x + j) * CELL, (this.position.y + i ) * CELL,CELL,CELL);
                    }
                }            
            }
        }
      
        
        
        /*#########################################
        # 当たり判定
        ###########################################*/
        Collision(stage)
        {
            this.CollisionMove(stage);  //左右判定
    
    
    
            if(this.isRotate == true)
            {
                if(this.GetIsOverlapStage(stage) == false)
                {
    //                this.position.x += this.fixRotatePosition[this.random][this.rotateRadian].x;
    //                this.position.y += this.fixRotatePosition[this.random][this.rotateRadian].y;
    
                    //console.log(this.fixRotatePosition[this.random][this.rotateRadian].y);
    
                }
                this.isRotate = false;
            }
    
    
    
    
    
    
            let pos = Object.assign({},this.position);
            pos.x += -1;
    
    
    
    
    
        }
    
    
        /*#########################################
        # 落下スピード
        ###########################################*/
        setDownSpeed(score)
        {
            this.downTimer += GetDeltaTime();
    
            if(this.downTimer > 5.0)
            {
                this.downTimer = 0.0;
                //this.position.y += 1;
            }
        }
    
    
        /*#########################################
        # 回転
        ###########################################*/
        Rotate(radian)
        {
            let rotate = new Array(4);
            rotate[0] = new Array(4).fill(0);
            rotate[1] = new Array(4).fill(0);
            rotate[2] = new Array(4).fill(0);
            rotate[3] = new Array(4).fill(0);
    
            for(let y = 0; y < PIECE_HEIGHT; y++)
            {
                for(let x = 0; x < PIECE_WIDTH; x++)
                {
                    if(this.piece[y][x] == 1)
                    {
                        let xx = (cos(PI / 2.0) * (x - 1.5)) + (-sin(PI / 2.0) * (y - 1.5));
                        let yy = (sin(PI / 2.0) * (x - 1.5)) + ( cos(PI / 2.0) * (y - 1.5));
    
                        rotate[Math.round((yy + 1.5))][Math.round((xx + 1.5))] = 1;
                    }
                }    
            }
    
            this.piece = rotate.slice();    //描画配列にコピー
    
    
            console.log(PI / 2.0 * radian);
            console.log(radian);
    
            
    
    
    
        }
    
    
    
        /*#########################################
        # 回転　位置修正
        ###########################################*/
        RotateFix(rotate)
        {
            
    
    
    
    
    
    
    
    
    
        }
    
    
    
    
        /*#########################################
        # 計算
        ###########################################*/
        Update()
        {
      //      this.moveVector.x = 0;
            //console.log(deltaTime / 100);
            
    
        }
    
    
    };
    
[/code]


CC BY-SA 4.0
2022-12-17T07:01:58.337
92830
2022-12-17T07:29:36.733
2022-12-17T07:29:36.733
55177
55177
question
javascript
テトリス制作でブロックを4x4の配列の左上に描画する方法が知りたい